harper-knowledge 0.1.0

package/web/js/app.js

@@ -0,0 +1,461 @@
+/**
+ * Harper Knowledge Base — Main Application Module
+ *
+ * Hash-based router, API helpers, auth state management,
+ * and page rendering dispatcher.
+ */
+
+// ============================================================================
+// API Helper
+// ============================================================================
+
+const api = {
+  _token: null,
+
+  /** Set the auth token (Basic or Bearer) */
+  setToken(token) {
+    this._token = token;
+    sessionStorage.setItem("kb-auth-token", token);
+  },
+
+  /** Load saved token from storage */
+  loadToken() {
+    this._token = sessionStorage.getItem("kb-auth-token");
+    return this._token;
+  },
+
+  clearToken() {
+    this._token = null;
+    sessionStorage.removeItem("kb-auth-token");
+  },
+
+  /** Build headers including auth if available */
+  _headers(extra = {}) {
+    const headers = { "Content-Type": "application/json", ...extra };
+    if (this._token) {
+      headers["Authorization"] = this._token;
+    }
+    return headers;
+  },
+
+  async _request(method, path, body) {
+    const opts = {
+      method,
+      headers: this._headers(),
+    };
+    if (body !== undefined) {
+      opts.body = JSON.stringify(body);
+    }
+
+    const response = await fetch(path, opts);
+
+    // If the response is 204 or has no content, return null
+    if (response.status === 204) return null;
+
+    const contentType = response.headers.get("content-type") || "";
+    if (!contentType.includes("application/json")) {
+      if (!response.ok) {
+        throw new ApiError(response.status, await response.text());
+      }
+      return null;
+    }
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new ApiError(
+        response.status,
+        data?.error || data?.data?.error || response.statusText,
+        data,
+      );
+    }
+
+    return data;
+  },
+
+  get(path) {
+    return this._request("GET", path);
+  },
+  post(path, data) {
+    return this._request("POST", path, data);
+  },
+  put(path, data) {
+    return this._request("PUT", path, data);
+  },
+  delete(path) {
+    return this._request("DELETE", path);
+  },
+};
+
+class ApiError extends Error {
+  constructor(status, message, data) {
+    super(message);
+    this.status = status;
+    this.data = data;
+  }
+}
+
+// ============================================================================
+// Auth State
+// ============================================================================
+
+const auth = {
+  user: null,
+  authenticated: false,
+
+  async check() {
+    // Check for GitHub session via @harperfast/oauth
+    try {
+      const res = await fetch("/oauth/github/user");
+      if (res.ok) {
+        const data = await res.json();
+        if (data && (data.username || data.login)) {
+          this.user = data.username || data.login;
+          this.authenticated = true;
+          updateAuthUI();
+          return true;
+        }
+      }
+    } catch {
+      // No GitHub session or endpoint unavailable
+    }
+
+    // Check for stored Harper credentials (Basic auth)
+    api.loadToken();
+    if (api._token) {
+      this.user = sessionStorage.getItem("kb-auth-user");
+      this.authenticated = true;
+      updateAuthUI();
+      return true;
+    }
+
+    this.authenticated = false;
+    this.user = null;
+    updateAuthUI();
+    return false;
+  },
+
+  async login(username, password) {
+    const token = "Basic " + btoa(username + ":" + password);
+    api.setToken(token);
+
+    // Validate by trying a request that requires auth
+    try {
+      const res = await fetch("/Triage/", { headers: api._headers() });
+      if (res.status === 401) {
+        api.clearToken();
+        throw new Error("Invalid credentials");
+      }
+    } catch (err) {
+      if (err.message === "Invalid credentials") throw err;
+      // Network error — let it through, will fail on actual use
+    }
+
+    sessionStorage.setItem("kb-auth-user", username);
+    this.user = username;
+    this.authenticated = true;
+    updateAuthUI();
+    return true;
+  },
+
+  async logout() {
+    api.clearToken();
+    sessionStorage.removeItem("kb-auth-user");
+    this.authenticated = false;
+    this.user = null;
+    updateAuthUI();
+
+    // Clear @harperfast/oauth session
+    try {
+      await fetch("/oauth/logout", { method: "POST" });
+    } catch {
+      // Ignore — may not have a GitHub session
+    }
+
+    navigate("search");
+  },
+};
+
+function updateAuthUI() {
+  const el = document.getElementById("auth-status");
+  if (!el) return;
+  if (auth.authenticated) {
+    const name = auth.user ? escapeHtml(auth.user) : "authenticated";
+    el.innerHTML = `<span style="color: var(--green);">${name}</span> <a href="#" id="logout-btn" style="color: var(--text-dim); margin-left: 8px;">[logout]</a>`;
+    const logoutBtn = document.getElementById("logout-btn");
+    if (logoutBtn) {
+      logoutBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        auth.logout();
+      });
+    }
+  } else {
+    el.innerHTML = `<a href="#" id="login-btn" style="color: var(--text-dim);">[login]</a>`;
+    const loginBtn = document.getElementById("login-btn");
+    if (loginBtn) {
+      loginBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        showLoginModal();
+      });
+    }
+  }
+}
+
+function showLoginModal() {
+  const returnUrl = encodeURIComponent(
+    window.location.pathname + window.location.hash,
+  );
+  const githubLoginUrl = `/oauth/github/login?redirect=${returnUrl}`;
+
+  const overlay = document.createElement("div");
+  overlay.className = "modal-overlay";
+  overlay.innerHTML = `
+    <div class="modal">
+      <h2>Log In</h2>
+      <div id="login-error"></div>
+      <a href="${githubLoginUrl}" class="btn-github">
+        <svg viewBox="0 0 16 16" width="20" height="20" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+        Sign in with GitHub
+      </a>
+      <div class="login-divider"><span>or</span></div>
+      <button type="button" id="login-cred-toggle" class="login-cred-toggle">Sign in with Harper credentials</button>
+      <div id="login-cred-form" class="login-cred-form">
+        <div class="form-group">
+          <label for="login-user">Username</label>
+          <input type="text" id="login-user" autocomplete="username">
+        </div>
+        <div class="form-group">
+          <label for="login-pass">Password</label>
+          <input type="password" id="login-pass" autocomplete="current-password">
+        </div>
+        <div class="btn-row">
+          <button id="login-cancel">Cancel</button>
+          <button id="login-submit" class="primary">Sign in</button>
+        </div>
+      </div>
+    </div>
+  `;
+
+  document.body.appendChild(overlay);
+
+  const credToggle = overlay.querySelector("#login-cred-toggle");
+  const credForm = overlay.querySelector("#login-cred-form");
+  const userInput = overlay.querySelector("#login-user");
+  const passInput = overlay.querySelector("#login-pass");
+  const submitBtn = overlay.querySelector("#login-submit");
+  const cancelBtn = overlay.querySelector("#login-cancel");
+  const errorDiv = overlay.querySelector("#login-error");
+
+  credToggle.addEventListener("click", () => {
+    credForm.classList.toggle("visible");
+    credToggle.style.display = "none";
+    userInput.focus();
+  });
+
+  const doLogin = async () => {
+    const username = userInput.value.trim();
+    const password = passInput.value;
+    if (!username || !password) return;
+
+    submitBtn.disabled = true;
+    submitBtn.textContent = "Signing in...";
+    errorDiv.innerHTML = "";
+
+    try {
+      await auth.login(username, password);
+      overlay.remove();
+      route();
+    } catch {
+      errorDiv.innerHTML =
+        '<div class="status-message error">Invalid credentials. Try again.</div>';
+      submitBtn.disabled = false;
+      submitBtn.textContent = "Sign in";
+    }
+  };
+
+  submitBtn.addEventListener("click", doLogin);
+  passInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") doLogin();
+  });
+  userInput.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") passInput.focus();
+  });
+  cancelBtn.addEventListener("click", () => overlay.remove());
+  overlay.addEventListener("click", (e) => {
+    if (e.target === overlay) overlay.remove();
+  });
+}
+
+// ============================================================================
+// Router
+// ============================================================================
+
+function getRoute() {
+  const hash = location.hash.slice(1) || "search";
+  const parts = hash.split("/");
+  return { page: parts[0], id: parts.slice(1).join("/") };
+}
+
+function navigate(page, id) {
+  location.hash = id ? `${page}/${id}` : page;
+}
+
+function updateNav() {
+  const { page } = getRoute();
+  document.querySelectorAll("nav a").forEach((a) => {
+    const nav = a.dataset.nav;
+    a.classList.toggle("active", nav === page);
+  });
+}
+
+// ============================================================================
+// Page Modules — loaded dynamically
+// ============================================================================
+
+let modules = {};
+
+async function loadModule(name) {
+  if (!modules[name]) {
+    modules[name] = await import(`./${name}.js`);
+  }
+  return modules[name];
+}
+
+// ============================================================================
+// Route Dispatcher
+// ============================================================================
+
+async function route() {
+  const { page, id } = getRoute();
+  const main = document.getElementById("main");
+  updateNav();
+
+  try {
+    switch (page) {
+      case "search":
+      case "browse": {
+        const mod = await loadModule("search");
+        mod.render(main, page === "browse");
+        break;
+      }
+      case "entry": {
+        const mod = await loadModule("detail");
+        mod.render(main, id);
+        break;
+      }
+      case "add": {
+        const mod = await loadModule("editor");
+        mod.render(main, null);
+        break;
+      }
+      case "edit": {
+        const mod = await loadModule("editor");
+        mod.render(main, id);
+        break;
+      }
+      case "triage": {
+        const mod = await loadModule("triage");
+        mod.render(main);
+        break;
+      }
+      default:
+        main.innerHTML = `<div class="empty-state"><h2>Not Found</h2><p>Unknown route: ${escapeHtml(page)}</p></div>`;
+    }
+  } catch (err) {
+    console.error("Route error:", err);
+    main.innerHTML = `<div class="status-message error">Error loading page: ${escapeHtml(err.message)}</div>`;
+  }
+}
+
+// ============================================================================
+// Utility exports
+// ============================================================================
+
+/**
+ * Escape HTML special characters to prevent XSS.
+ */
+function escapeHtml(str) {
+  if (str == null) return "";
+  return String(str)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+/**
+ * Return a confidence badge HTML string.
+ */
+function confidenceBadge(confidence) {
+  const cls =
+    confidence === "verified"
+      ? "badge-verified"
+      : confidence === "reviewed"
+        ? "badge-reviewed"
+        : "badge-ai-generated";
+  return `<span class="badge ${cls}">${escapeHtml(confidence)}</span>`;
+}
+
+/**
+ * Return tag chip HTML string(s).
+ */
+function tagChips(tags, activeTags = []) {
+  if (!tags || !tags.length) return "";
+  return tags
+    .map((t) => {
+      const active = activeTags.includes(t) ? " active" : "";
+      return `<span class="tag${active}" data-tag="${escapeHtml(t)}">${escapeHtml(t)}</span>`;
+    })
+    .join("");
+}
+
+/**
+ * Format a date value for display.
+ */
+function formatDate(d) {
+  if (!d) return "--";
+  const date = new Date(d);
+  if (isNaN(date.getTime())) return String(d);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+/**
+ * Truncate text to a maximum length.
+ */
+function truncate(text, max = 150) {
+  if (!text) return "";
+  if (text.length <= max) return text;
+  return text.slice(0, max) + "...";
+}
+
+// Export utilities for use by other modules
+export {
+  api,
+  auth,
+  navigate,
+  escapeHtml,
+  confidenceBadge,
+  tagChips,
+  formatDate,
+  truncate,
+  showLoginModal,
+};
+
+// ============================================================================
+// Init
+// ============================================================================
+
+window.addEventListener("hashchange", route);
+
+// Initial load
+(async () => {
+  await auth.check();
+  route();
+})();

package/web/js/detail.js

@@ -0,0 +1,223 @@
+/**
+ * Harper Knowledge Base — Entry Detail View
+ *
+ * Full content display, metadata, relationships,
+ * and edit navigation.
+ */
+
+import {
+  api,
+  auth,
+  escapeHtml,
+  confidenceBadge,
+  tagChips,
+  formatDate,
+  showLoginModal,
+} from "./app.js";
+
+/**
+ * Render the entry detail page.
+ * @param {HTMLElement} container
+ * @param {string} id - Entry ID
+ */
+export async function render(container, id) {
+  if (!id) {
+    container.innerHTML = `<div class="empty-state"><h2>No entry selected</h2><p>Select an entry from search results.</p></div>`;
+    return;
+  }
+
+  container.innerHTML = '<div class="loading">Loading entry...</div>';
+
+  try {
+    const entry = await api.get(`/Knowledge/${encodeURIComponent(id)}`);
+
+    if (!entry || entry.error) {
+      container.innerHTML = `<div class="empty-state"><h2>Entry not found</h2><p>${escapeHtml(entry?.error || "The requested entry does not exist.")}</p></div>`;
+      return;
+    }
+
+    container.innerHTML = renderEntry(entry);
+
+    // Wire up events
+    wireEvents(container, entry);
+  } catch (err) {
+    console.error("Detail error:", err);
+    if (err.status === 404) {
+      container.innerHTML = `<div class="empty-state"><h2>Entry not found</h2><p>No entry exists with ID: ${escapeHtml(id)}</p></div>`;
+    } else {
+      container.innerHTML = `<div class="status-message error">Failed to load entry: ${escapeHtml(err.message)}</div>`;
+    }
+  }
+}
+
+function renderEntry(entry) {
+  const deprecatedBanner = entry.deprecated
+    ? `<div class="status-message error" style="margin-bottom: 16px;">This entry has been deprecated.</div>`
+    : "";
+
+  return `
+		${deprecatedBanner}
+		<div class="detail-header">
+			<div style="display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;">
+				<div>
+					<div class="detail-title">${escapeHtml(entry.title)}</div>
+					<div class="card-meta" style="margin-top: 6px;">
+						${confidenceBadge(entry.confidence)}
+						${entry.tags?.length ? tagChips(entry.tags) : ""}
+					</div>
+				</div>
+				<div style="display: flex; gap: 8px; flex-shrink: 0;">
+					<a href="#edit/${escapeHtml(entry.id)}" class="btn">Edit</a>
+					<button id="deprecate-btn" class="danger" style="display: ${entry.deprecated ? "none" : "inline-flex"};">Deprecate</button>
+				</div>
+			</div>
+		</div>
+
+		<div class="detail-content">${escapeHtml(entry.content)}</div>
+
+		<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
+			<div class="detail-section">
+				<h3>Metadata</h3>
+				<dl class="meta-grid">
+					<dt>ID</dt>
+					<dd style="font-family: var(--font-mono); font-size: 12px;">${escapeHtml(entry.id)}</dd>
+					<dt>Source</dt>
+					<dd>${
+            entry.sourceUrl
+              ? isSafeUrl(entry.sourceUrl)
+                ? `<a href="${escapeHtml(entry.sourceUrl)}" target="_blank" rel="noopener">${escapeHtml(entry.source || entry.sourceUrl)}</a>`
+                : escapeHtml(entry.source || entry.sourceUrl)
+              : escapeHtml(entry.source || "--")
+          }</dd>
+					<dt>Added By</dt>
+					<dd>${escapeHtml(entry.addedBy || "--")}</dd>
+					<dt>Reviewed By</dt>
+					<dd>${escapeHtml(entry.reviewedBy || "--")}</dd>
+					<dt>Created</dt>
+					<dd>${formatDate(entry.createdAt)}</dd>
+					<dt>Updated</dt>
+					<dd>${formatDate(entry.updatedAt)}</dd>
+				</dl>
+			</div>
+
+			<div>
+				${renderApplicability(entry.appliesTo)}
+				${renderRelationships(entry)}
+			</div>
+		</div>
+	`;
+}
+
+function renderApplicability(appliesTo) {
+  if (!appliesTo) return "";
+
+  const fields = [
+    ["Harper", appliesTo.harper],
+    ["Storage Engine", appliesTo.storageEngine],
+    ["Node.js", appliesTo.node],
+    ["Platform", appliesTo.platform],
+  ].filter(([, v]) => v);
+
+  if (fields.length === 0) return "";
+
+  return `
+		<div class="detail-section">
+			<h3>Applies To</h3>
+			<dl class="meta-grid">
+				${fields.map(([label, value]) => `<dt>${escapeHtml(label)}</dt><dd>${escapeHtml(value)}</dd>`).join("")}
+			</dl>
+		</div>
+	`;
+}
+
+function renderRelationships(entry) {
+  const sections = [];
+
+  if (entry.supersedesId) {
+    sections.push(`
+			<div style="margin-bottom: 8px;">
+				<span style="color: var(--text-dim); font-size: 12px;">Supersedes:</span>
+				<a href="#entry/${escapeHtml(entry.supersedesId)}" class="entry-link">${escapeHtml(entry.supersedesId)}</a>
+			</div>
+		`);
+  }
+
+  if (entry.supersededById) {
+    sections.push(`
+			<div style="margin-bottom: 8px;">
+				<span style="color: var(--text-dim); font-size: 12px;">Superseded by:</span>
+				<a href="#entry/${escapeHtml(entry.supersededById)}" class="entry-link">${escapeHtml(entry.supersededById)}</a>
+			</div>
+		`);
+  }
+
+  if (entry.siblingIds?.length) {
+    sections.push(`
+			<div style="margin-bottom: 8px;">
+				<span style="color: var(--text-dim); font-size: 12px;">Siblings:</span>
+				<div class="entry-links" style="margin-top: 4px;">
+					${entry.siblingIds.map((id) => `<a href="#entry/${escapeHtml(id)}" class="entry-link">${escapeHtml(id)}</a>`).join("")}
+				</div>
+			</div>
+		`);
+  }
+
+  if (entry.relatedIds?.length) {
+    sections.push(`
+			<div style="margin-bottom: 8px;">
+				<span style="color: var(--text-dim); font-size: 12px;">Related:</span>
+				<div class="entry-links" style="margin-top: 4px;">
+					${entry.relatedIds.map((id) => `<a href="#entry/${escapeHtml(id)}" class="entry-link">${escapeHtml(id)}</a>`).join("")}
+				</div>
+			</div>
+		`);
+  }
+
+  if (sections.length === 0) return "";
+
+  return `
+		<div class="detail-section">
+			<h3>Relationships</h3>
+			${sections.join("")}
+		</div>
+	`;
+}
+
+/** Only render http/https URLs as clickable links. */
+function isSafeUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed.protocol === "https:" || parsed.protocol === "http:";
+  } catch {
+    return false;
+  }
+}
+
+function wireEvents(container, entry) {
+  const deprecateBtn = container.querySelector("#deprecate-btn");
+  if (deprecateBtn) {
+    deprecateBtn.addEventListener("click", async () => {
+      if (!auth.authenticated) {
+        showLoginModal();
+        return;
+      }
+
+      if (!confirm(`Deprecate "${entry.title}"? This cannot be undone easily.`))
+        return;
+
+      deprecateBtn.disabled = true;
+      deprecateBtn.textContent = "Deprecating...";
+
+      try {
+        await api.delete(`/Knowledge/${encodeURIComponent(entry.id)}`);
+        // Re-render the page to show deprecated state
+        render(container, entry.id);
+      } catch (err) {
+        console.error("Deprecate error:", err);
+        alert(`Failed to deprecate: ${err.message}`);
+        deprecateBtn.disabled = false;
+        deprecateBtn.textContent = "Deprecate";
+      }
+    });
+  }
+}