harper-knowledge 0.1.0

package/web/js/triage.js

@@ -0,0 +1,305 @@
+/**
+ * Harper Knowledge Base — Triage Queue
+ *
+ * Review pending triage items from webhook intake.
+ * Accept, dismiss, or link items to existing entries.
+ */
+
+import {
+  api,
+  auth,
+  navigate,
+  escapeHtml,
+  showLoginModal,
+  formatDate,
+} from "./app.js";
+
+/**
+ * Render the triage queue page.
+ * @param {HTMLElement} container
+ */
+export async function render(container) {
+  if (!auth.authenticated) {
+    container.innerHTML = `
+			<div class="empty-state">
+				<h2>Authentication Required</h2>
+				<p>You must be logged in with a team account to view the triage queue.</p>
+				<button id="triage-login" class="primary" style="margin-top: 16px;">Log In</button>
+			</div>
+		`;
+    container
+      .querySelector("#triage-login")
+      ?.addEventListener("click", () => showLoginModal());
+    return;
+  }
+
+  container.innerHTML = '<div class="loading">Loading triage queue...</div>';
+
+  try {
+    const items = await api.get("/Triage/?status=pending");
+    const data = Array.isArray(items) ? items : [];
+    renderQueue(container, data);
+  } catch (err) {
+    console.error("Triage load error:", err);
+    if (err.status === 401) {
+      container.innerHTML = `
+				<div class="empty-state">
+					<h2>Authentication Required</h2>
+					<p>Your session has expired. Please log in again.</p>
+					<button id="triage-login" class="primary" style="margin-top: 16px;">Log In</button>
+				</div>
+			`;
+      container
+        .querySelector("#triage-login")
+        ?.addEventListener("click", () => showLoginModal());
+    } else if (err.status === 403) {
+      container.innerHTML = `
+				<div class="empty-state">
+					<h2>Access Denied</h2>
+					<p>Triage queue requires team role access.</p>
+				</div>
+			`;
+    } else {
+      container.innerHTML = `<div class="status-message error">Failed to load triage queue: ${escapeHtml(err.message)}</div>`;
+    }
+  }
+}
+
+function renderQueue(container, items) {
+  if (items.length === 0) {
+    container.innerHTML = `
+			<h2 style="margin-bottom: 20px;">Triage Queue</h2>
+			<div class="empty-state">
+				<h2>Queue is empty</h2>
+				<p>No pending triage items to review.</p>
+			</div>
+		`;
+    return;
+  }
+
+  container.innerHTML = `
+		<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;">
+			<h2>Triage Queue</h2>
+			<span style="color: var(--text-dim); font-size: 13px;">${items.length} pending</span>
+		</div>
+		<div id="triage-list">
+			${items.map(renderTriageCard).join("")}
+		</div>
+	`;
+
+  wireTriageEvents(container, items);
+}
+
+function renderTriageCard(item) {
+  const statusBadge = `<span class="badge badge-${item.status || "pending"}">${escapeHtml(item.status || "pending")}</span>`;
+  const sourceBadge = `<span class="badge" style="background: var(--tag-bg); color: var(--tag-text);">${escapeHtml(item.source)}</span>`;
+
+  return `
+		<div class="card" id="triage-${escapeHtml(item.id)}" data-triage-id="${escapeHtml(item.id)}">
+			<div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;">
+				<div style="flex: 1;">
+					<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+						${sourceBadge}
+						${statusBadge}
+						${item.sourceId ? `<span style="font-family: var(--font-mono); font-size: 11px; color: var(--text-dim);">${escapeHtml(item.sourceId)}</span>` : ""}
+					</div>
+					<div style="font-size: 14px; margin-bottom: 8px;">${escapeHtml(item.summary || "No summary")}</div>
+					<div style="font-size: 11px; color: var(--text-dim);">
+						Created: ${formatDate(item.createdAt)}
+						${item.matchedEntryId ? ` | Matched: <a href="#entry/${escapeHtml(item.matchedEntryId)}">${escapeHtml(item.matchedEntryId)}</a>` : ""}
+					</div>
+				</div>
+			</div>
+
+			${item.rawPayload ? renderPayloadPreview(item.rawPayload) : ""}
+
+			<div class="triage-actions" data-item-id="${escapeHtml(item.id)}">
+				<button class="success triage-accept" data-action="accept">Accept</button>
+				<button class="danger triage-dismiss" data-action="dismiss">Dismiss</button>
+				<button class="triage-link" data-action="link">Link to Entry</button>
+			</div>
+
+			<div class="triage-link-form" id="link-form-${escapeHtml(item.id)}" style="display: none;">
+				<div class="inline-form">
+					<input type="text" placeholder="Entry ID to link" class="link-entry-id">
+					<button class="primary link-submit">Link</button>
+					<button class="link-cancel">Cancel</button>
+				</div>
+			</div>
+		</div>
+	`;
+}
+
+function renderPayloadPreview(payload) {
+  const json =
+    typeof payload === "string" ? payload : JSON.stringify(payload, null, 2);
+  return `
+		<div style="margin-top: 8px;">
+			<div class="collapsible-header payload-toggle">
+				<span class="arrow">&#9654;</span>
+				Raw Payload
+			</div>
+			<div class="collapsible-body payload-body">
+				<div class="json-preview">${escapeHtml(json)}</div>
+			</div>
+		</div>
+	`;
+}
+
+function wireTriageEvents(container, items) {
+  // Payload toggles
+  container.querySelectorAll(".payload-toggle").forEach((toggle) => {
+    toggle.addEventListener("click", () => {
+      toggle.classList.toggle("open");
+      const body = toggle.nextElementSibling;
+      body.classList.toggle("open");
+    });
+  });
+
+  // Action buttons
+  container.querySelectorAll(".triage-actions").forEach((actionsDiv) => {
+    const itemId = actionsDiv.dataset.itemId;
+
+    // Accept
+    actionsDiv
+      .querySelector(".triage-accept")
+      ?.addEventListener("click", () => {
+        handleAccept(container, itemId, items);
+      });
+
+    // Dismiss
+    actionsDiv
+      .querySelector(".triage-dismiss")
+      ?.addEventListener("click", () => {
+        handleDismiss(container, itemId);
+      });
+
+    // Link — show form
+    actionsDiv.querySelector(".triage-link")?.addEventListener("click", () => {
+      const form = container.querySelector(`#link-form-${itemId}`);
+      if (form) form.style.display = "block";
+    });
+  });
+
+  // Link form events
+  container.querySelectorAll(".triage-link-form").forEach((form) => {
+    const itemId = form.id.replace("link-form-", "");
+    const input = form.querySelector(".link-entry-id");
+    const submitBtn = form.querySelector(".link-submit");
+    const cancelBtn = form.querySelector(".link-cancel");
+
+    submitBtn?.addEventListener("click", () => {
+      const entryId = input?.value?.trim();
+      if (entryId) handleLink(container, itemId, entryId);
+    });
+
+    cancelBtn?.addEventListener("click", () => {
+      form.style.display = "none";
+    });
+
+    input?.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        const entryId = input.value.trim();
+        if (entryId) handleLink(container, itemId, entryId);
+      }
+    });
+  });
+}
+
+async function handleAccept(container, itemId, items) {
+  const item = items.find((i) => i.id === itemId);
+  if (!item) return;
+
+  // Navigate to the add page, pre-populating from the triage summary
+  // Store the triage item info in sessionStorage for the editor to pick up
+  sessionStorage.setItem(
+    "triage-accept",
+    JSON.stringify({
+      triageId: itemId,
+      summary: item.summary,
+      source: item.source,
+      sourceId: item.sourceId,
+      rawPayload: item.rawPayload,
+    }),
+  );
+
+  navigate("add");
+}
+
+async function handleDismiss(container, itemId) {
+  if (!confirm("Dismiss this triage item?")) return;
+
+  const card = container.querySelector(`#triage-${itemId}`);
+  const actionsDiv = card?.querySelector(".triage-actions");
+  if (actionsDiv)
+    actionsDiv.innerHTML =
+      '<span style="color: var(--text-dim);">Processing...</span>';
+
+  try {
+    await api.put(`/Triage/${encodeURIComponent(itemId)}`, {
+      action: "dismissed",
+    });
+
+    // Remove the card with a fade
+    if (card) {
+      card.style.opacity = "0.3";
+      card.style.transition = "opacity 0.3s";
+      setTimeout(() => card.remove(), 300);
+    }
+
+    // Check if list is now empty
+    setTimeout(() => {
+      const remaining = container.querySelectorAll(".card");
+      if (remaining.length === 0) {
+        render(container);
+      } else {
+        // Update count
+        const countEl = container.querySelector(
+          'span[style*="color: var(--text-dim)"]',
+        );
+        if (countEl) countEl.textContent = `${remaining.length} pending`;
+      }
+    }, 350);
+  } catch (err) {
+    console.error("Dismiss error:", err);
+    if (actionsDiv) {
+      actionsDiv.innerHTML = `<div class="status-message error">Failed: ${escapeHtml(err.message)}</div>`;
+    }
+  }
+}
+
+async function handleLink(container, itemId, entryId) {
+  const card = container.querySelector(`#triage-${itemId}`);
+  const linkForm = container.querySelector(`#link-form-${itemId}`);
+  const actionsDiv = card?.querySelector(".triage-actions");
+
+  if (linkForm) linkForm.style.display = "none";
+  if (actionsDiv)
+    actionsDiv.innerHTML =
+      '<span style="color: var(--text-dim);">Linking...</span>';
+
+  try {
+    await api.put(`/Triage/${encodeURIComponent(itemId)}`, {
+      action: "linked",
+      linkedEntryId: entryId,
+    });
+
+    if (card) {
+      card.style.opacity = "0.3";
+      card.style.transition = "opacity 0.3s";
+      setTimeout(() => card.remove(), 300);
+    }
+
+    setTimeout(() => {
+      const remaining = container.querySelectorAll(".card");
+      if (remaining.length === 0) {
+        render(container);
+      }
+    }, 350);
+  } catch (err) {
+    console.error("Link error:", err);
+    if (actionsDiv) {
+      actionsDiv.innerHTML = `<div class="status-message error">Failed: ${escapeHtml(err.message)}</div>`;
+    }
+  }
+}