feat: Enhance hook management and session handling

- Update hook model to include last_triggered_at field.
- Modify API endpoints to support updating hooks with new fields.
- Implement session management UI improvements with toggle functionality.
- Add new JavaScript functions for better session detail visibility.
- Refactor hook storage logic to handle last triggered timestamps.
- Introduce new favicon and logo for branding.
- Update styles for improved layout and user experience.
- Enhance tests to cover new functionality and ensure reliability.

app/static/app.js

@@ -1,6 +1,9 @@
 const sessionStatusEl = document.querySelector("#session-status");
 const sessionUserEl = document.querySelector("#session-user");
 const loginFeedbackEl = document.querySelector("#login-feedback");
+const sessionSummaryTextEl = document.querySelector("#session-summary-text");
+const sessionDetailsEl = document.querySelector("#session-details");
+const toggleSessionBtn = document.querySelector("#toggle-session");
 const startLoginForm = document.querySelector("#start-login-form");
 const verifyLoginForm = document.querySelector("#verify-login-form");
 const logoutButton = document.querySelector("#logout-button");
@@ -10,9 +13,22 @@ const hookTemplate = document.querySelector("#hook-template");
 const createHookForm = document.querySelector("#create-hook-form");
 const toggleCreateBtn = document.querySelector("#toggle-create");
 
+let sessionDetailsVisible = false;
+let sessionDetailsTouched = false;
 let createFormVisible = false;
 let createFormTouched = false;
 
+function setSessionDetailsVisibility(show, { fromUser = false } = {}) {
+  if (!toggleSessionBtn || !sessionDetailsEl) return;
+  sessionDetailsVisible = show;
+  if (fromUser) {
+    sessionDetailsTouched = true;
+  }
+  sessionDetailsEl.classList.toggle("hidden", !show);
+  toggleSessionBtn.setAttribute("aria-expanded", String(show));
+  toggleSessionBtn.textContent = show ? "Hide session controls" : "Manage session";
+}
+
 function setCreateFormVisibility(show, { fromUser = false } = {}) {
   if (!toggleCreateBtn) return;
   createFormVisible = show;
@@ -37,6 +53,13 @@ if (toggleCreateBtn) {
   setCreateFormVisibility(false);
 }
 
+if (toggleSessionBtn) {
+  toggleSessionBtn.addEventListener("click", () => {
+    setSessionDetailsVisibility(!sessionDetailsVisible, { fromUser: true });
+  });
+  setSessionDetailsVisibility(false);
+}
+
 async function fetchJSON(url, options = {}) {
   const response = await fetch(url, {
     headers: { "Content-Type": "application/json" },
@@ -54,6 +77,9 @@ function updateSessionUI(status) {
     sessionStatusEl.textContent = "Authorized";
     sessionStatusEl.style.background = "rgba(100, 221, 155, 0.12)";
     sessionStatusEl.style.color = "#64dd9b";
+    if (sessionSummaryTextEl) {
+      sessionSummaryTextEl.textContent = status.user ? `Logged in as ${status.user}` : "Session ready";
+    }
     sessionUserEl.textContent = `Logged in as ${status.user}`;
     loginFeedbackEl.textContent = "Session ready. You can trigger hooks.";
     startLoginForm.classList.add("hidden");
@@ -63,6 +89,11 @@ function updateSessionUI(status) {
     sessionStatusEl.textContent = status.code_sent ? "Awaiting code" : "Not authorized";
     sessionStatusEl.style.background = "rgba(79, 140, 255, 0.15)";
     sessionStatusEl.style.color = "#4f8cff";
+    if (sessionSummaryTextEl) {
+      sessionSummaryTextEl.textContent = status.code_sent
+        ? "Waiting for verification"
+        : "Login required";
+    }
     sessionUserEl.textContent = status.phone_number
       ? `Phone number: ${status.phone_number}`
       : "Set a phone number to begin";
@@ -78,6 +109,13 @@ function updateSessionUI(status) {
 
     startLoginForm.classList.remove("hidden");
   }
+
+  const shouldShowDetails = !status.authorized || status.code_sent;
+  if (!sessionDetailsTouched) {
+    setSessionDetailsVisibility(shouldShowDetails);
+  } else if (shouldShowDetails && !sessionDetailsVisible) {
+    setSessionDetailsVisibility(true);
+  }
 }
 
 async function refreshAll() {
@@ -110,82 +148,110 @@ async function loadHooks() {
       const node = hookTemplate.content.cloneNode(true);
       node.querySelector("h3").textContent = hook.chat_id;
       node.querySelector(".hook-date").textContent = new Date(hook.created_at).toLocaleString();
+      const lastRunEl = node.querySelector(".hook-last-run");
+      if (lastRunEl) {
+        lastRunEl.textContent = hook.last_triggered_at
+          ? `Last triggered ${new Date(hook.last_triggered_at).toLocaleString()}`
+          : "Never triggered yet";
+      }
       node.querySelector(".hook-message").textContent = hook.message;
       node.querySelector(".hook-url").textContent = hook.action_url;
       node.querySelector(".hook-id").textContent = hook.hook_id;
       const feedbackEl = node.querySelector(".hook-feedback");
+      const editForm = node.querySelector(".edit-hook-form");
+  const editIdInput = editForm.querySelector(".edit-id");
+      const editChatInput = editForm.querySelector(".edit-chat");
+      const editMessageInput = editForm.querySelector(".edit-message");
+      const saveEditBtn = editForm.querySelector(".save-edit");
+      const cancelEditBtn = editForm.querySelector(".cancel-edit");
+      const editDetailsBtn = node.querySelector(".edit-details");
+
+      const setFeedback = (text = "", color = "") => {
+        feedbackEl.textContent = text;
+        feedbackEl.style.color = color;
+      };
+
+      const toggleEditForm = (show) => {
+        editForm.classList.toggle("hidden", !show);
+        editDetailsBtn.disabled = show;
+        if (show) {
+          editIdInput.value = hook.hook_id;
+          editChatInput.value = hook.chat_id;
+          editMessageInput.value = hook.message;
+          requestAnimationFrame(() => {
+            editIdInput.focus();
+          });
+        }
+      };
+
+      editDetailsBtn.addEventListener("click", () => {
+        toggleEditForm(true);
+      });
+
+      cancelEditBtn.addEventListener("click", () => {
+        toggleEditForm(false);
+        setFeedback();
+      });
 
       const copyBtn = node.querySelector(".copy");
       copyBtn.addEventListener("click", async () => {
         try {
           await navigator.clipboard.writeText(hook.action_url);
-          copyBtn.textContent = "Copied!";
-          setTimeout(() => {
-            copyBtn.textContent = "Copy URL";
-          }, 2000);
+          setFeedback("Hook URL copied to clipboard.", "#64dd9b");
+          setTimeout(() => setFeedback(), 2000);
         } catch (err) {
-          copyBtn.textContent = "Copy failed";
-          setTimeout(() => {
-            copyBtn.textContent = "Copy URL";
-          }, 2000);
+          setFeedback(`Copy failed: ${err.message}`, "#ffbac7");
+          setTimeout(() => setFeedback(), 2500);
         }
       });
 
       const triggerBtn = node.querySelector(".trigger");
       triggerBtn.addEventListener("click", async () => {
-        const originalText = triggerBtn.textContent;
         triggerBtn.disabled = true;
-        triggerBtn.textContent = "Sending…";
-        feedbackEl.textContent = "";
+        setFeedback("Sending message…");
         try {
           const result = await fetchJSON(`/action/${hook.hook_id}`);
-          triggerBtn.textContent = "Sent";
-          feedbackEl.textContent = `Status: ${result.status}`;
-          feedbackEl.style.color = "#64dd9b";
+          setFeedback(`Status: ${result.status}`, "#64dd9b");
         } catch (err) {
-          triggerBtn.textContent = "Retry";
-          feedbackEl.textContent = `Failed: ${err.message}`;
-          feedbackEl.style.color = "#ffbac7";
+          setFeedback(`Failed: ${err.message}`, "#ffbac7");
         } finally {
           setTimeout(() => {
-            triggerBtn.textContent = originalText;
             triggerBtn.disabled = false;
-            feedbackEl.style.color = "";
-          }, 2000);
+            setFeedback();
+          }, 2500);
         }
       });
 
-      const editIdBtn = node.querySelector(".edit-id");
-      const editIconMarkup = editIdBtn.innerHTML;
-      editIdBtn.addEventListener("click", async () => {
-        const newId = prompt("Enter new hook ID", hook.hook_id);
-        if (newId === null) {
+      editForm.addEventListener("submit", async (event) => {
+        event.preventDefault();
+        const updatedId = editIdInput.value.trim();
+        const updatedChat = editChatInput.value.trim();
+        const updatedMessage = editMessageInput.value.trim();
+        if (!updatedId || !updatedChat || !updatedMessage) {
+          setFeedback("Hook ID, chat ID, and message are required.", "#ffbac7");
           return;
         }
-        const sanitized = newId.trim();
-        if (!sanitized || sanitized === hook.hook_id) {
-          return;
-        }
-  editIdBtn.disabled = true;
-  editIdBtn.textContent = "Saving…";
-        feedbackEl.textContent = "";
+        saveEditBtn.disabled = true;
+        cancelEditBtn.disabled = true;
+        const originalSaveText = saveEditBtn.textContent;
+        saveEditBtn.textContent = "Saving…";
+        setFeedback();
         try {
           await fetchJSON(`/api/hooks/${hook.hook_id}`, {
             method: "PATCH",
-            body: JSON.stringify({ hook_id: sanitized }),
+            body: JSON.stringify({ hook_id: updatedId, chat_id: updatedChat, message: updatedMessage }),
           });
-          feedbackEl.textContent = "Hook ID updated.";
-          feedbackEl.style.color = "#64dd9b";
+          setFeedback("Hook updated.", "#64dd9b");
+          toggleEditForm(false);
           await loadHooks();
         } catch (err) {
-          feedbackEl.textContent = `Update failed: ${err.message}`;
-          feedbackEl.style.color = "#ffbac7";
+          setFeedback(`Update failed: ${err.message}`, "#ffbac7");
         } finally {
-          editIdBtn.disabled = false;
-          editIdBtn.innerHTML = editIconMarkup;
+          saveEditBtn.disabled = false;
+          cancelEditBtn.disabled = false;
+          saveEditBtn.textContent = originalSaveText;
           setTimeout(() => {
-            feedbackEl.textContent = "";
-            feedbackEl.style.color = "";
+            setFeedback();
           }, 2500);
         }
       });

app/static/favicon.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-labelledby="title desc">
+  <title id="title">Telegram Message Hook Icon</title>
+  <desc id="desc">Circular badge with a paper plane and hook accent</desc>
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="28%" r="70%">
+      <stop offset="0%" stop-color="#45C9FF" />
+      <stop offset="60%" stop-color="#2AA3F6" />
+      <stop offset="100%" stop-color="#1A5DD8" />
+    </radialGradient>
+    <linearGradient id="hook" x1="0" x2="1" y1="1" y2="0">
+      <stop offset="0%" stop-color="#62FFD6" />
+      <stop offset="100%" stop-color="#42C79B" />
+    </linearGradient>
+  </defs>
+  <circle cx="32" cy="32" r="30" fill="url(#bg)" />
+  <path d="M50.2 15.6L13.7 30.6c-1.7.7-1.6 3.1.2 3.7l10.8 3.4c.9.3 1.8-.1 2.4-.8l14-14.2c.4-.4 1 .1.6.7l-9.4 15.1c-.4.6-.5 1.3-.4 2l1.8 11.2c.3 1.8 2.7 2.2 3.4.6l4.7-9.8c.2-.5.7-.9 1.2-1l11.4-2.7c1.8-.4 2-3 .3-3.7l-10.7-4.4 9.1-9.1c1.5-1.6-.2-4-2.4-2.9z" fill="#fff" />
+  <path d="M46 46.5c0 7.7-6.3 14-14 14s-14-6.3-14-14" fill="none" stroke="url(#hook)" stroke-width="4" stroke-linecap="round" />
+  <circle cx="18" cy="46.5" r="3" fill="#ffffff" />
+</svg>

app/static/logo.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160" role="img" aria-labelledby="title desc">
+  <title id="title">Telegram Message Hook Logo</title>
+  <desc id="desc">Circular badge with a paper plane and hook accent</desc>
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="30%" r="75%">
+      <stop offset="0%" stop-color="#45C9FF" />
+      <stop offset="55%" stop-color="#2AA3F6" />
+      <stop offset="100%" stop-color="#1A5DD8" />
+    </radialGradient>
+    <linearGradient id="hook" x1="0" x2="1" y1="1" y2="0">
+      <stop offset="0%" stop-color="#62FFD6" />
+      <stop offset="100%" stop-color="#42C79B" />
+    </linearGradient>
+  </defs>
+  <circle cx="80" cy="80" r="74" fill="url(#bg)" />
+  <path d="M120.6 37.8L34.7 72.3c-3.5 1.4-3.4 6.2.2 7.4l22.1 7.1c1.7.5 3.5-.1 4.6-1.4l32-32.6c.8-.8 2 .3 1.3 1.2L75.4 96.9c-.9 1.2-1.2 2.7-.9 4.1l4 24.1c.7 4.1 6.1 4.9 7.7 1l9.8-21.1c.4-.9 1.3-1.6 2.3-1.8l24-5.7c3.5-.8 3.8-5.6.5-7.1l-23.1-9.5 19.7-19.7c3.4-3.4-.7-9-5.1-6.4z" fill="#fff" />
+  <path d="M115 108c0 19-15.4 34.4-34.4 34.4S46.2 127 46.2 108" fill="none" stroke="url(#hook)" stroke-width="10" stroke-linecap="round" />
+  <circle cx="46.2" cy="108" r="6.5" fill="#ffffff" />
+</svg>

app/static/style.css

@@ -32,6 +32,23 @@ footer {
   padding: 2rem clamp(1rem, 6vw, 4rem);
 }
 
+.site-identity {
+  display: flex;
+  align-items: center;
+  gap: clamp(1rem, 4vw, 1.75rem);
+}
+
+.site-logo {
+  width: clamp(3.25rem, 8vw, 4.75rem);
+  height: auto;
+  filter: drop-shadow(0 12px 24px rgba(24, 40, 92, 0.55));
+}
+
+.site-title {
+  display: grid;
+  gap: 0.5rem;
+}
+
 header h1 {
   margin: 0;
   font-size: clamp(2rem, 5vw, 3.5rem);
@@ -45,10 +62,10 @@ header h1 {
 }
 
 main {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   gap: 2rem;
   padding: 0 clamp(1rem, 6vw, 4rem) 4rem;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 }
 
 .card {
@@ -86,6 +103,52 @@ main {
   margin-bottom: 0.75rem;
 }
 
+.session-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.session-summary-main {
+  display: grid;
+  gap: 0.5rem;
+  justify-items: start;
+}
+
+.session-status-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.session-summary-text {
+  margin: 0;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.session-toggle {
+  align-self: center;
+  white-space: nowrap;
+}
+
+.session-details {
+  margin-top: 1.5rem;
+  display: grid;
+  gap: 1rem;
+}
+
+#session-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: stretch;
+  gap: 1.5rem;
+}
+
 .user-info {
   margin-bottom: 1.5rem;
   color: var(--muted);
@@ -144,12 +207,15 @@ button:active {
 }
 
 .icon-button {
-  padding: 0.6rem;
-  min-width: 0;
+  padding: 0;
+  width: 2.75rem;
+  height: 2.75rem;
+  min-width: 2.75rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 0.25rem;
+  border-radius: 12px;
+  flex-shrink: 0;
 }
 
 .icon {
@@ -206,7 +272,14 @@ button:active {
 
 .hook-list {
   display: grid;
-  gap: 1rem;
+  gap: 1.25rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 900px) {
+  .hook-list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 .hook-card {
@@ -237,12 +310,26 @@ button:active {
 }
 
 .hook-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.hook-heading {
   display: flex;
   justify-content: space-between;
-  align-items: baseline;
+  align-items: flex-start;
   gap: 1rem;
 }
 
+.hook-timestamps {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.25rem;
+  text-align: right;
+}
+
 .hook-meta h3 {
   margin: 0;
   font-size: 1rem;
@@ -254,6 +341,11 @@ button:active {
   color: var(--muted);
 }
 
+.hook-last-run {
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
 .hook-message {
   white-space: pre-wrap;
   font-family: "JetBrains Mono", "Fira Code", monospace;
@@ -271,6 +363,33 @@ button:active {
   user-select: all;
 }
 
+.edit-hook-form {
+  margin-top: 0.75rem;
+  display: grid;
+  gap: 0.75rem;
+  padding: 0.85rem;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.edit-hook-form label {
+  display: grid;
+  gap: 0.35rem;
+  font-size: 0.85rem;
+  color: var(--muted);
+}
+
+.edit-hook-actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-end;
+}
+
+.edit-hook-form .save-edit {
+  min-width: 8rem;
+}
+
 .hook-feedback {
   margin: 0.35rem 0 0;
   min-height: 1rem;
@@ -297,7 +416,13 @@ button:active {
     text-align: center;
   }
 
-  .hook-actions {
+  .site-identity {
     flex-direction: column;
+    gap: 1rem;
+  }
+
+  .hook-actions {
+    flex-wrap: wrap;
+    justify-content: center;
   }
 }