@delt/claude-alarm 0.5.1 → 0.5.3

package/dist/dashboard/index.html

@@ -650,24 +650,64 @@
       </div>
     </div>
     <div id="settingsTelegram" style="display:none">
-      <p style="margin-bottom:12px;font-size:12px;color:var(--text-dim)">Connect a Telegram bot to receive notifications and send messages.</p>
-      <div style="margin-bottom:12px">
-        <label style="display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px">Bot Token</label>
-        <input type="text" id="tgBotToken" placeholder="123456:ABC-DEF..." autocomplete="off" style="width:100%;box-sizing:border-box;padding:10px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-family:monospace">
+      <!-- Step 1: Bot Token -->
+      <div id="tgStep1">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+          <span style="background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0">1</span>
+          <span style="font-size:13px;font-weight:600;color:var(--text)">Create a bot &amp; paste the token</span>
+        </div>
+        <p style="margin:0 0 10px 30px;font-size:12px;color:var(--text-dim)">Open <strong>@BotFather</strong> on Telegram → <code>/newbot</code> → copy the token</p>
+        <div style="margin-left:30px;margin-bottom:12px">
+          <input type="text" id="tgBotToken" placeholder="123456:ABC-DEF1234ghIkl-zyx57W2v..." autocomplete="off" style="width:100%;box-sizing:border-box;padding:10px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-family:monospace">
+        </div>
+        <div style="margin-left:30px">
+          <button id="tgNextStep2" style="padding:8px 20px;font-size:13px">Next →</button>
+        </div>
       </div>
-      <div style="margin-bottom:12px">
-        <label style="display:block;font-size:12px;color:var(--text-dim);margin-bottom:4px">Chat ID</label>
-        <input type="text" id="tgChatId" placeholder="-1001234567890" autocomplete="off" style="width:100%;box-sizing:border-box;padding:10px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-family:monospace">
-      </div>
-      <div style="margin-bottom:16px;display:flex;align-items:center;gap:8px">
-        <input type="checkbox" id="tgEnabled" style="width:16px;height:16px;accent-color:var(--accent)">
-        <label for="tgEnabled" style="font-size:13px;color:var(--text)">Enable Telegram notifications</label>
+
+      <!-- Step 2: Detect Chat ID -->
+      <div id="tgStep2" style="display:none">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+          <span style="background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0">2</span>
+          <span style="font-size:13px;font-weight:600;color:var(--text)">Find your Chat ID</span>
+        </div>
+        <p style="margin:0 0 10px 30px;font-size:12px;color:var(--text-dim)">Send any message to your bot on Telegram, then click Detect.</p>
+        <div style="margin-left:30px;margin-bottom:10px;display:flex;gap:8px">
+          <button id="tgDetect" style="padding:8px 20px;font-size:13px;background:none;color:var(--accent);border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:500">Detect Chat ID</button>
+          <span id="tgDetectStatus" style="font-size:12px;color:var(--text-dim);display:flex;align-items:center"></span>
+        </div>
+        <div id="tgChatList" style="margin-left:30px;margin-bottom:10px"></div>
+        <div style="margin-left:30px;margin-bottom:12px">
+          <label style="display:block;font-size:11px;color:var(--text-dim);margin-bottom:4px">Or enter manually:</label>
+          <input type="text" id="tgChatId" placeholder="-1001234567890" autocomplete="off" style="width:100%;box-sizing:border-box;padding:10px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:13px;font-family:monospace">
+        </div>
+        <div style="margin-left:30px;display:flex;gap:8px">
+          <button id="tgBackStep1" style="padding:8px 20px;font-size:13px;background:none;color:var(--text-dim);border:1px solid var(--border);border-radius:6px;cursor:pointer">← Back</button>
+          <button id="tgNextStep3" style="padding:8px 20px;font-size:13px">Next →</button>
+        </div>
       </div>
-      <div id="tgStatus" style="display:none;margin-bottom:12px;padding:8px 12px;border-radius:6px;font-size:12px"></div>
-      <div style="display:flex;gap:8px">
-        <button id="tgTest" style="flex:1;padding:10px;background:none;color:var(--accent);border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-size:13px;font-weight:500">Test</button>
-        <button id="tgSave" style="flex:1;padding:10px">Save</button>
-        <button id="settingsCancel2" style="flex:1;padding:10px;background:none;color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500">Cancel</button>
+
+      <!-- Step 3: Test & Save -->
+      <div id="tgStep3" style="display:none">
+        <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">
+          <span style="background:var(--accent);color:#fff;border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0">3</span>
+          <span style="font-size:13px;font-weight:600;color:var(--text)">Test &amp; Enable</span>
+        </div>
+        <div style="margin-left:30px;margin-bottom:12px;padding:10px;background:var(--input-bg);border-radius:6px;font-size:12px;color:var(--text-dim)">
+          <div>Bot Token: <span id="tgSummaryToken" style="color:var(--text);font-family:monospace"></span></div>
+          <div style="margin-top:4px">Chat ID: <span id="tgSummaryChatId" style="color:var(--text);font-family:monospace"></span></div>
+        </div>
+        <div style="margin-left:30px;margin-bottom:12px;display:flex;align-items:center;gap:8px">
+          <input type="checkbox" id="tgEnabled" checked style="width:16px;height:16px;accent-color:var(--accent)">
+          <label for="tgEnabled" style="font-size:13px;color:var(--text)">Enable Telegram notifications</label>
+        </div>
+        <div id="tgStatus" style="display:none;margin:0 0 12px 30px;padding:8px 12px;border-radius:6px;font-size:12px"></div>
+        <div style="margin-left:30px;display:flex;gap:8px">
+          <button id="tgBackStep2" style="padding:8px 20px;font-size:13px;background:none;color:var(--text-dim);border:1px solid var(--border);border-radius:6px;cursor:pointer">← Back</button>
+          <button id="tgTest" style="flex:1;padding:10px;background:none;color:var(--accent);border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-size:13px;font-weight:500">Send Test</button>
+          <button id="tgSave" style="flex:1;padding:10px">Save</button>
+          <button id="settingsCancel2" style="padding:10px 16px;background:none;color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:13px">Cancel</button>
+        </div>
       </div>
     </div>
   </div>
@@ -1051,20 +1091,19 @@
     if (!content && !hasImage) return;
     if (!state.selectedSession || !state.ws) return;
 
-    // Send text
-    if (content) {
-      state.ws.send(JSON.stringify({ type: 'message_to_session', sessionId: state.selectedSession, content }));
-    }
-
-    // Send image
     if (hasImage) {
+      // Send image + text together
       state.ws.send(JSON.stringify({
         type: 'image_upload',
         sessionId: state.selectedSession,
         imageData: state.pendingImage.data,
         mimeType: state.pendingImage.mimeType,
         originalName: state.pendingImage.name,
+        content: content || '',
       }));
+    } else if (content) {
+      // Text only
+      state.ws.send(JSON.stringify({ type: 'message_to_session', sessionId: state.selectedSession, content }));
     }
 
     // Add to local messages
@@ -1218,7 +1257,17 @@
       }
       $('#tgChatId').value = tg.chatId || '';
       $('#tgEnabled').checked = !!tg.enabled;
-    } catch {}
+      // Jump to appropriate step
+      if (tg.chatId && tg.botToken) {
+        $('#tgSummaryToken').textContent = (tg.botToken || '').slice(0, 8) + '...';
+        $('#tgSummaryChatId').textContent = tg.chatId;
+        showTgStep(3);
+      } else if (tg.botToken) {
+        showTgStep(2);
+      } else {
+        showTgStep(1);
+      }
+    } catch { showTgStep(1); }
     $('#tgStatus').style.display = 'none';
     $('#settingsOverlay').classList.remove('hidden');
   });
@@ -1269,7 +1318,13 @@
     });
   }
 
-  // Telegram
+  // Telegram wizard
+  function showTgStep(step) {
+    $('#tgStep1').style.display = step === 1 ? 'block' : 'none';
+    $('#tgStep2').style.display = step === 2 ? 'block' : 'none';
+    $('#tgStep3').style.display = step === 3 ? 'block' : 'none';
+  }
+
   function showTgStatus(msg, ok) {
     const el = $('#tgStatus');
     el.textContent = msg;
@@ -1278,11 +1333,70 @@
     el.style.color = ok ? 'var(--green)' : 'var(--red)';
   }
 
+  // Step navigation
+  $('#tgNextStep2').addEventListener('click', () => {
+    const token = $('#tgBotToken').value.trim();
+    if (!token) { $('#tgBotToken').style.borderColor = 'var(--red)'; return; }
+    $('#tgBotToken').style.borderColor = 'var(--border)';
+    showTgStep(2);
+  });
+  $('#tgBackStep1').addEventListener('click', () => showTgStep(1));
+  $('#tgNextStep3').addEventListener('click', () => {
+    const chatId = $('#tgChatId').value.trim();
+    if (!chatId) { $('#tgChatId').style.borderColor = 'var(--red)'; return; }
+    $('#tgChatId').style.borderColor = 'var(--border)';
+    const token = $('#tgBotToken').value.trim();
+    $('#tgSummaryToken').textContent = token.slice(0, 8) + '...';
+    $('#tgSummaryChatId').textContent = chatId;
+    $('#tgStatus').style.display = 'none';
+    showTgStep(3);
+  });
+  $('#tgBackStep2').addEventListener('click', () => showTgStep(2));
+
+  // Detect Chat ID
+  $('#tgDetect').addEventListener('click', async () => {
+    const botToken = $('#tgBotToken').value.trim();
+    if (!botToken || botToken.includes('...')) { $('#tgDetectStatus').textContent = 'Enter a valid Bot Token first.'; return; }
+    $('#tgDetectStatus').textContent = 'Detecting...';
+    $('#tgChatList').innerHTML = '';
+    try {
+      const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
+      const res = await fetch(`/api/telegram/detect${tokenQuery}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ botToken }),
+      });
+      const data = await res.json();
+      if (data.error) { $('#tgDetectStatus').textContent = data.error; return; }
+      if (!data.ok || !data.chats.length) {
+        $('#tgDetectStatus').textContent = 'No messages found. Send a message to your bot first!';
+        return;
+      }
+      $('#tgDetectStatus').textContent = 'Found ' + data.chats.length + ' chat(s):';
+      $('#tgChatList').innerHTML = data.chats.map(c =>
+        `<button class="tg-chat-pick" data-id="${esc(c.id)}" style="display:block;width:100%;text-align:left;padding:8px 12px;margin-bottom:4px;background:var(--input-bg);border:1px solid var(--border);border-radius:6px;color:var(--text);cursor:pointer;font-size:12px;transition:border-color 0.15s">
+          <strong>${esc(c.name)}</strong> <span style="color:var(--text-dim)">(${esc(c.type)}, ID: ${esc(c.id)})</span>
+        </button>`
+      ).join('');
+      $('#tgChatList').querySelectorAll('.tg-chat-pick').forEach(btn => {
+        btn.addEventListener('click', () => {
+          $('#tgChatId').value = btn.dataset.id;
+          $('#tgChatList').querySelectorAll('.tg-chat-pick').forEach(b => b.style.borderColor = 'var(--border)');
+          btn.style.borderColor = 'var(--accent)';
+        });
+        btn.addEventListener('mouseenter', () => { btn.style.borderColor = 'var(--accent)'; });
+        btn.addEventListener('mouseleave', () => {
+          if ($('#tgChatId').value !== btn.dataset.id) btn.style.borderColor = 'var(--border)';
+        });
+      });
+    } catch { $('#tgDetectStatus').textContent = 'Connection error.'; }
+  });
+
+  // Test
   $('#tgTest').addEventListener('click', async () => {
     const botToken = $('#tgBotToken').value.trim();
     const chatId = $('#tgChatId').value.trim();
     if (!botToken || !chatId) { showTgStatus('Bot Token and Chat ID are required.', false); return; }
-    if (botToken.includes('...')) { showTgStatus('Please enter full Bot Token (not masked).', false); return; }
     try {
       const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
       const res = await fetch(`/api/telegram/test${tokenQuery}`, {
@@ -1296,11 +1410,12 @@
     } catch (e) { showTgStatus('Connection error.', false); }
   });
 
+  // Save
   $('#tgSave').addEventListener('click', async () => {
     const botToken = $('#tgBotToken').value.trim();
     const chatId = $('#tgChatId').value.trim();
     const enabled = $('#tgEnabled').checked;
-    if (enabled && botToken.includes('...')) { showTgStatus('Please enter full Bot Token to enable.', false); return; }
+    if (!botToken || !chatId) { showTgStatus('Bot Token and Chat ID are required.', false); return; }
     try {
       const tokenQuery = state.token ? `?token=${encodeURIComponent(state.token)}` : '';
       await fetch(`/api/telegram${tokenQuery}`, {

package/dist/hub/server.js

@@ -551,6 +551,8 @@ var HubServer = class {
       this.handleTelegramSave(req, res);
     } else if (url.pathname === "/api/telegram/test" && req.method === "POST") {
       this.handleTelegramTest(req, res);
+    } else if (url.pathname === "/api/telegram/detect" && req.method === "POST") {
+      this.handleTelegramDetect(req, res);
     } else {
       this.jsonResponse(res, 404, { error: "Not found" });
     }
@@ -736,7 +738,7 @@ var HubServer = class {
     }
   }
   handleImageUpload(msg) {
-    const { sessionId, imageData, mimeType, originalName } = msg;
+    const { sessionId, imageData, mimeType, originalName, content } = msg;
     if (!this.localChannels.has(sessionId)) {
       logger.warn(`Image upload rejected: session ${sessionId} is not local`);
       return;
@@ -761,7 +763,8 @@ var HubServer = class {
       sessionId,
       imagePath: filePath,
       mimeType,
-      originalName
+      originalName,
+      content
     };
     channelWs.send(JSON.stringify(forwardMsg));
     logger.info(`Image saved and forwarded: ${filename} (${buffer.length} bytes)`);
@@ -858,6 +861,50 @@ var HubServer = class {
       this.jsonResponse(res, 500, { error: err.message });
     }
   }
+  async handleTelegramDetect(req, res) {
+    const body = await this.readBody(req);
+    if (!body) {
+      this.jsonResponse(res, 400, { error: "Invalid JSON" });
+      return;
+    }
+    const { botToken } = body;
+    if (!botToken) {
+      this.jsonResponse(res, 400, { error: "botToken required" });
+      return;
+    }
+    try {
+      const detectRes = await fetch(`https://api.telegram.org/bot${botToken}/getUpdates?timeout=0&limit=10`, {
+        signal: AbortSignal.timeout(1e4)
+      });
+      if (!detectRes.ok) {
+        const err = await detectRes.json();
+        this.jsonResponse(res, 400, { error: err.description || "Invalid bot token" });
+        return;
+      }
+      const data = await detectRes.json();
+      if (!data.ok || !data.result.length) {
+        this.jsonResponse(res, 200, { ok: false, chats: [] });
+        return;
+      }
+      const chatMap = /* @__PURE__ */ new Map();
+      for (const update of data.result) {
+        if (update.message?.chat) {
+          const chat = update.message.chat;
+          const id = String(chat.id);
+          if (!chatMap.has(id)) {
+            chatMap.set(id, {
+              id,
+              name: chat.title || chat.first_name || id,
+              type: chat.type
+            });
+          }
+        }
+      }
+      this.jsonResponse(res, 200, { ok: true, chats: [...chatMap.values()] });
+    } catch (err) {
+      this.jsonResponse(res, 500, { error: err.message });
+    }
+  }
   cleanupUploads() {
     try {
       if (!fs2.existsSync(UPLOADS_DIR)) return;