harper-knowledge 0.1.0

package/web/js/editor.js

@@ -0,0 +1,303 @@
+/**
+ * Harper Knowledge Base — Entry Editor
+ *
+ * Create and edit knowledge base entries.
+ * Handles form rendering, validation, and API submission.
+ */
+
+import { api, auth, navigate, escapeHtml, showLoginModal } from "./app.js";
+
+/**
+ * Render the editor page.
+ * @param {HTMLElement} container
+ * @param {string|null} entryId - Existing entry ID for edit mode, null for create
+ */
+export async function render(container, entryId) {
+  const isEdit = !!entryId;
+  let existing = null;
+  let triageData = null;
+
+  if (isEdit) {
+    container.innerHTML = '<div class="loading">Loading entry...</div>';
+    try {
+      existing = await api.get(`/Knowledge/${encodeURIComponent(entryId)}`);
+      if (!existing || existing.error) {
+        container.innerHTML = `<div class="empty-state"><h2>Entry not found</h2><p>Cannot edit: entry ${escapeHtml(entryId)} does not exist.</p></div>`;
+        return;
+      }
+    } catch (err) {
+      container.innerHTML = `<div class="status-message error">Failed to load entry: ${escapeHtml(err.message)}</div>`;
+      return;
+    }
+  }
+
+  // Check for triage accept data (pre-populate from triage queue)
+  if (!isEdit) {
+    try {
+      const raw = sessionStorage.getItem("triage-accept");
+      if (raw) {
+        triageData = JSON.parse(raw);
+        sessionStorage.removeItem("triage-accept");
+        // Pre-populate existing with triage summary
+        existing = {
+          title: triageData.summary || "",
+          content: triageData.summary || "",
+          source: triageData.source || "",
+          confidence: "ai-generated",
+        };
+      }
+    } catch {
+      // Ignore parse errors
+    }
+  }
+
+  container.innerHTML = renderForm(isEdit, existing, triageData);
+  wireEvents(container, isEdit, entryId, triageData);
+}
+
+function renderForm(isEdit, entry, triageData) {
+  const e = entry || {};
+
+  const triageBanner = triageData
+    ? `<div class="status-message" style="background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber); margin-bottom: 16px;">
+			Creating entry from triage item. Review and adjust the fields below, then submit.
+		</div>`
+    : "";
+
+  return `
+		<h2 style="margin-bottom: 20px;">${isEdit ? "Edit Entry" : "Add New Entry"}</h2>
+
+		${triageBanner}
+		<div id="editor-status"></div>
+
+		<div class="form-group">
+			<label for="ed-title">Title</label>
+			<input type="text" id="ed-title" value="${escapeHtml(e.title || "")}" placeholder="Brief descriptive title">
+		</div>
+
+		<div class="form-group">
+			<label for="ed-content">Content</label>
+			<textarea id="ed-content" placeholder="Full knowledge entry content (supports plain text; markdown can be added later)">${escapeHtml(e.content || "")}</textarea>
+		</div>
+
+		<div class="form-row">
+			<div class="form-group">
+				<label for="ed-tags">Tags (comma-separated)</label>
+				<input type="text" id="ed-tags" value="${escapeHtml((e.tags || []).join(", "))}" placeholder="e.g., performance, clustering, lmdb">
+				<div id="ed-tag-chips" class="tags" style="margin-top: 6px;"></div>
+			</div>
+			<div class="form-group">
+				<label for="ed-confidence">Confidence</label>
+				<select id="ed-confidence">
+					<option value="ai-generated" ${e.confidence === "ai-generated" ? "selected" : ""}>ai-generated</option>
+					<option value="reviewed" ${e.confidence === "reviewed" ? "selected" : ""}>reviewed</option>
+					<option value="verified" ${e.confidence === "verified" ? "selected" : ""}>verified</option>
+				</select>
+			</div>
+		</div>
+
+		<div class="collapsible-header open" id="applies-toggle">
+			<span class="arrow" style="transform: rotate(90deg);">&#9654;</span>
+			Applicability
+		</div>
+		<div class="collapsible-body open" id="applies-panel">
+			<div class="form-row" style="margin-bottom: 12px;">
+				<div class="form-group">
+					<label for="ed-harper">Harper Version (semver range)</label>
+					<input type="text" id="ed-harper" value="${escapeHtml(e.appliesTo?.harper || "")}" placeholder="e.g., >=4.6.0">
+				</div>
+				<div class="form-group">
+					<label for="ed-storage">Storage Engine</label>
+					<select id="ed-storage">
+						<option value="">Any</option>
+						<option value="lmdb" ${e.appliesTo?.storageEngine === "lmdb" ? "selected" : ""}>lmdb</option>
+						<option value="rocksdb" ${e.appliesTo?.storageEngine === "rocksdb" ? "selected" : ""}>rocksdb</option>
+					</select>
+				</div>
+			</div>
+			<div class="form-row">
+				<div class="form-group">
+					<label for="ed-node">Node.js Version</label>
+					<input type="text" id="ed-node" value="${escapeHtml(e.appliesTo?.node || "")}" placeholder="e.g., >=22.0.0">
+				</div>
+				<div class="form-group">
+					<label for="ed-platform">Platform</label>
+					<select id="ed-platform">
+						<option value="">Any</option>
+						<option value="linux" ${e.appliesTo?.platform === "linux" ? "selected" : ""}>linux</option>
+						<option value="darwin" ${e.appliesTo?.platform === "darwin" ? "selected" : ""}>darwin</option>
+						<option value="win32" ${e.appliesTo?.platform === "win32" ? "selected" : ""}>win32</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div class="form-row" style="margin-top: 16px;">
+			<div class="form-group">
+				<label for="ed-source">Source</label>
+				<input type="text" id="ed-source" value="${escapeHtml(e.source || "")}" placeholder="e.g., support-ticket, documentation, slack">
+			</div>
+			<div class="form-group">
+				<label for="ed-source-url">Source URL</label>
+				<input type="url" id="ed-source-url" value="${escapeHtml(e.sourceUrl || "")}" placeholder="https://...">
+			</div>
+		</div>
+
+		<div class="form-group">
+			<label for="ed-supersedes">Supersedes Entry ID</label>
+			<input type="text" id="ed-supersedes" value="${escapeHtml(e.supersedesId || "")}" placeholder="ID of the entry this supersedes (optional)">
+		</div>
+
+		<div style="display: flex; gap: 8px; margin-top: 24px;">
+			<button id="ed-submit" class="primary">${isEdit ? "Update Entry" : "Create Entry"}</button>
+			<button id="ed-cancel">Cancel</button>
+		</div>
+	`;
+}
+
+function wireEvents(container, isEdit, entryId, triageData) {
+  const tagsInput = container.querySelector("#ed-tags");
+  const tagChips = container.querySelector("#ed-tag-chips");
+  const submitBtn = container.querySelector("#ed-submit");
+  const cancelBtn = container.querySelector("#ed-cancel");
+  const appliesToggle = container.querySelector("#applies-toggle");
+  const appliesPanel = container.querySelector("#applies-panel");
+  const statusDiv = container.querySelector("#editor-status");
+
+  // Tag chips preview
+  const updateTagChips = () => {
+    const tags = parseTags(tagsInput.value);
+    tagChips.innerHTML = tags
+      .map((t) => `<span class="tag">${escapeHtml(t)}</span>`)
+      .join("");
+  };
+  tagsInput.addEventListener("input", updateTagChips);
+  updateTagChips();
+
+  // Collapsible applicability
+  appliesToggle.addEventListener("click", () => {
+    appliesToggle.classList.toggle("open");
+    appliesPanel.classList.toggle("open");
+    const arrow = appliesToggle.querySelector(".arrow");
+    arrow.style.transform = appliesToggle.classList.contains("open")
+      ? "rotate(90deg)"
+      : "";
+  });
+
+  // Cancel
+  cancelBtn.addEventListener("click", () => {
+    if (isEdit) {
+      navigate("entry", entryId);
+    } else {
+      navigate("search");
+    }
+  });
+
+  // Submit
+  submitBtn.addEventListener("click", async () => {
+    if (!auth.authenticated) {
+      showLoginModal();
+      return;
+    }
+
+    // Validate
+    const title = container.querySelector("#ed-title").value.trim();
+    const content = container.querySelector("#ed-content").value.trim();
+
+    if (!title) {
+      statusDiv.innerHTML =
+        '<div class="status-message error">Title is required.</div>';
+      return;
+    }
+    if (!content) {
+      statusDiv.innerHTML =
+        '<div class="status-message error">Content is required.</div>';
+      return;
+    }
+
+    // Build payload
+    const payload = {
+      title,
+      content,
+      tags: parseTags(container.querySelector("#ed-tags").value),
+      confidence: container.querySelector("#ed-confidence").value,
+      source: container.querySelector("#ed-source").value.trim() || undefined,
+      sourceUrl:
+        container.querySelector("#ed-source-url").value.trim() || undefined,
+    };
+
+    // Applicability
+    const appliesTo = {};
+    const harper = container.querySelector("#ed-harper").value.trim();
+    const storage = container.querySelector("#ed-storage").value;
+    const node = container.querySelector("#ed-node").value.trim();
+    const platform = container.querySelector("#ed-platform").value;
+
+    if (harper) appliesTo.harper = harper;
+    if (storage) appliesTo.storageEngine = storage;
+    if (node) appliesTo.node = node;
+    if (platform) appliesTo.platform = platform;
+
+    if (Object.keys(appliesTo).length > 0) {
+      payload.appliesTo = appliesTo;
+    }
+
+    // Supersedes
+    const supersedesId = container.querySelector("#ed-supersedes").value.trim();
+    if (supersedesId) {
+      payload.supersedesId = supersedesId;
+    }
+
+    // Submit
+    submitBtn.disabled = true;
+    submitBtn.textContent = isEdit ? "Updating..." : "Creating...";
+    statusDiv.innerHTML = "";
+
+    try {
+      let result;
+      if (isEdit) {
+        result = await api.put(
+          `/Knowledge/${encodeURIComponent(entryId)}`,
+          payload,
+        );
+      } else {
+        result = await api.post("/Knowledge/", payload);
+      }
+
+      const newId = result?.id || entryId;
+
+      // If this was a triage accept, update the triage item
+      if (triageData?.triageId && !isEdit) {
+        try {
+          await api.put(`/Triage/${encodeURIComponent(triageData.triageId)}`, {
+            action: "accepted",
+            linkedEntryId: newId,
+          });
+        } catch (triageErr) {
+          console.error("Failed to update triage item:", triageErr);
+          // Non-fatal: the entry was still created
+        }
+      }
+
+      statusDiv.innerHTML = `<div class="status-message success">${isEdit ? "Entry updated" : "Entry created"} successfully.</div>`;
+
+      // Navigate to the entry after a short delay
+      setTimeout(() => {
+        navigate("entry", newId);
+      }, 800);
+    } catch (err) {
+      console.error("Save error:", err);
+      statusDiv.innerHTML = `<div class="status-message error">Failed to save: ${escapeHtml(err.message)}</div>`;
+      submitBtn.disabled = false;
+      submitBtn.textContent = isEdit ? "Update Entry" : "Create Entry";
+    }
+  });
+}
+
+function parseTags(input) {
+  if (!input) return [];
+  return input
+    .split(",")
+    .map((t) => t.trim())
+    .filter((t) => t.length > 0);
+}

package/web/js/search.js

@@ -0,0 +1,238 @@
+/**
+ * Harper Knowledge Base — Search & Browse Page
+ *
+ * Text search with tag filters, applicability context,
+ * and result display.
+ */
+
+import { api, escapeHtml, confidenceBadge, tagChips, truncate } from "./app.js";
+
+let allTags = [];
+let activeTags = [];
+let lastResults = [];
+
+/**
+ * Render the search page.
+ * @param {HTMLElement} container
+ * @param {boolean} browseMode - If true, show all entries instead of search
+ */
+export async function render(container, browseMode = false) {
+  container.innerHTML = `
+		<div class="search-bar">
+			<input type="text" id="search-input" placeholder="Search the knowledge base..." autofocus>
+			<button id="search-btn" class="primary">Search</button>
+		</div>
+
+		<div id="tag-filter" class="tags" style="margin-bottom: 12px;"></div>
+
+		<div class="collapsible-header" id="context-toggle">
+			<span class="arrow">&#9654;</span>
+			Applicability Context
+		</div>
+		<div class="collapsible-body" id="context-panel">
+			<div class="form-row" style="margin-bottom: 12px;">
+				<div class="form-group">
+					<label for="ctx-harper">Harper Version</label>
+					<input type="text" id="ctx-harper" placeholder="e.g., 4.6.0">
+				</div>
+				<div class="form-group">
+					<label for="ctx-storage">Storage Engine</label>
+					<select id="ctx-storage">
+						<option value="">Any</option>
+						<option value="lmdb">lmdb</option>
+						<option value="rocksdb">rocksdb</option>
+					</select>
+				</div>
+			</div>
+			<div class="form-row">
+				<div class="form-group">
+					<label for="ctx-node">Node.js Version</label>
+					<input type="text" id="ctx-node" placeholder="e.g., 22.0.0">
+				</div>
+				<div class="form-group">
+					<label for="ctx-platform">Platform</label>
+					<select id="ctx-platform">
+						<option value="">Any</option>
+						<option value="linux">linux</option>
+						<option value="darwin">darwin</option>
+						<option value="win32">win32</option>
+					</select>
+				</div>
+			</div>
+		</div>
+
+		<div id="results"></div>
+	`;
+
+  // Load tags
+  await loadTags(container);
+
+  // Wire up events
+  const searchInput = container.querySelector("#search-input");
+  const searchBtn = container.querySelector("#search-btn");
+  const contextToggle = container.querySelector("#context-toggle");
+  const contextPanel = container.querySelector("#context-panel");
+
+  searchBtn.addEventListener("click", () => doSearch(container));
+  searchInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") doSearch(container);
+  });
+
+  contextToggle.addEventListener("click", () => {
+    contextToggle.classList.toggle("open");
+    contextPanel.classList.toggle("open");
+  });
+
+  // If browse mode, search with empty query to list entries
+  if (browseMode) {
+    searchInput.placeholder = "Filter entries...";
+    searchInput.value = "";
+    doSearch(container, true);
+  }
+}
+
+async function loadTags(container) {
+  try {
+    const data = await api.get("/KnowledgeTag/");
+    allTags = Array.isArray(data) ? data : [];
+  } catch {
+    allTags = [];
+  }
+
+  const tagFilter = container.querySelector("#tag-filter");
+  if (!tagFilter) return;
+
+  if (allTags.length === 0) {
+    tagFilter.innerHTML = "";
+    return;
+  }
+
+  tagFilter.innerHTML = allTags
+    .map(
+      (t) =>
+        `<span class="tag" data-tag="${escapeHtml(t.id)}" title="${escapeHtml(t.description || "")}">${escapeHtml(t.id)} <span style="opacity:0.5;">${t.entryCount || 0}</span></span>`,
+    )
+    .join("");
+
+  tagFilter.addEventListener("click", (e) => {
+    const tagEl = e.target.closest(".tag");
+    if (!tagEl) return;
+    const tagName = tagEl.dataset.tag;
+
+    if (activeTags.includes(tagName)) {
+      activeTags = activeTags.filter((t) => t !== tagName);
+      tagEl.classList.remove("active");
+    } else {
+      activeTags.push(tagName);
+      tagEl.classList.add("active");
+    }
+  });
+}
+
+async function doSearch(container, browseMode = false) {
+  const resultsDiv = container.querySelector("#results");
+  const query = container.querySelector("#search-input")?.value?.trim();
+
+  if (!query && !browseMode && activeTags.length === 0) {
+    resultsDiv.innerHTML = `<div class="empty-state"><h2>Enter a search query</h2><p>Type something to search the knowledge base, or switch to Browse to see all entries.</p></div>`;
+    return;
+  }
+
+  resultsDiv.innerHTML = '<div class="loading">Searching...</div>';
+
+  try {
+    // Build query params
+    const params = new URLSearchParams();
+    if (query) params.set("query", query);
+    if (activeTags.length > 0) params.set("tags", activeTags.join(","));
+
+    // Applicability context
+    const context = buildContext(container);
+    if (Object.keys(context).length > 0) {
+      params.set("context", JSON.stringify(context));
+    }
+
+    params.set("limit", "30");
+
+    const searchQuery = params.toString();
+
+    // If no query and browse mode, we still need a query param for the API
+    // The API requires a query, so for browse mode use a wildcard or similar
+    let data;
+    if (!query && browseMode) {
+      // For browsing without search, use a broad query
+      params.set("query", "*");
+      data = await api.get("/Knowledge/?" + params.toString());
+    } else {
+      data = await api.get("/Knowledge/?" + searchQuery);
+    }
+
+    lastResults = Array.isArray(data) ? data : [];
+
+    if (lastResults.length === 0) {
+      resultsDiv.innerHTML = `<div class="empty-state"><h2>No results found</h2><p>Try adjusting your search query or filters.</p></div>`;
+      return;
+    }
+
+    resultsDiv.innerHTML = `
+			<p style="color: var(--text-dim); font-size: 12px; margin-bottom: 12px;">${lastResults.length} result${lastResults.length === 1 ? "" : "s"}</p>
+			${lastResults.map(renderResultCard).join("")}
+		`;
+  } catch (err) {
+    console.error("Search error:", err);
+    resultsDiv.innerHTML = `<div class="status-message error">Search failed: ${escapeHtml(err.message)}</div>`;
+  }
+}
+
+function buildContext(container) {
+  const context = {};
+  const harper = container.querySelector("#ctx-harper")?.value?.trim();
+  const storage = container.querySelector("#ctx-storage")?.value;
+  const node = container.querySelector("#ctx-node")?.value?.trim();
+  const platform = container.querySelector("#ctx-platform")?.value;
+
+  if (harper) context.harper = harper;
+  if (storage) context.storageEngine = storage;
+  if (node) context.node = node;
+  if (platform) context.platform = platform;
+
+  return context;
+}
+
+function renderResultCard(entry) {
+  const deprecatedClass = entry.deprecated ? " deprecated" : "";
+  const snippet = truncate(entry.content, 180);
+  const scoreStr =
+    entry.score != null
+      ? `<span class="score">${entry.score.toFixed(3)}</span>`
+      : "";
+  const matchStr = entry.matchType
+    ? `<span class="score">${escapeHtml(entry.matchType)}</span>`
+    : "";
+
+  return `
+		<div class="card${deprecatedClass}">
+			<div class="card-title">
+				<a href="#entry/${escapeHtml(entry.id)}">${escapeHtml(entry.title)}</a>
+			</div>
+			<div class="card-snippet">${escapeHtml(snippet)}</div>
+			<div class="card-meta">
+				${confidenceBadge(entry.confidence)}
+				${entry.tags?.length ? '<span class="sep">|</span>' + tagChips(entry.tags, activeTags) : ""}
+				${entry.appliesTo ? renderAppliesTo(entry.appliesTo) : ""}
+				${scoreStr || matchStr ? '<span class="sep">|</span>' + scoreStr + " " + matchStr : ""}
+			</div>
+		</div>
+	`;
+}
+
+function renderAppliesTo(appliesTo) {
+  if (!appliesTo) return "";
+  const parts = [];
+  if (appliesTo.harper) parts.push(`harper ${escapeHtml(appliesTo.harper)}`);
+  if (appliesTo.storageEngine) parts.push(escapeHtml(appliesTo.storageEngine));
+  if (appliesTo.node) parts.push(`node ${escapeHtml(appliesTo.node)}`);
+  if (appliesTo.platform) parts.push(escapeHtml(appliesTo.platform));
+  if (parts.length === 0) return "";
+  return `<span class="sep">|</span><span class="score">${parts.join(", ")}</span>`;
+}