@kyleparrott/where-was-i 0.1.0

package/dist/src/web-utils.js

@@ -0,0 +1,81 @@
+import path from "node:path";
+import { defaultConfigPath, loadWhereWasIConfig } from "./core/config.js";
+import { expandHome } from "./core/paths.js";
+export function runtimeConfig(options) {
+    const config = loadWhereWasIConfig(options.configPath);
+    return {
+        ...config,
+        dbPath: expandHome(options.dbPath ?? config.dbPath)
+    };
+}
+export function editableConfigPath(options) {
+    return path.resolve(expandHome(options.configPath ?? defaultConfigPath()));
+}
+export function parseWebSearchMode(value) {
+    if (value === "auto" || value === "fts" || value === "hybrid" || value === "semantic") {
+        return value;
+    }
+    return "auto";
+}
+export function sessionHref(sessionId, messageId, query, mode, full = false) {
+    const params = new URLSearchParams({
+        messageId,
+        q: query,
+        mode
+    });
+    if (full) {
+        params.set("full", "1");
+    }
+    return `/sessions/${encodeURIComponent(sessionId)}?${params.toString()}#${messageDomId(messageId)}`;
+}
+export function messageDomId(messageId) {
+    return `msg-${messageId.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+}
+export function renderEmpty(message) {
+    return `<div class="empty">${escapeHtml(message)}</div>`;
+}
+export function formatCount(count, noun) {
+    return `${count.toLocaleString()} ${noun}${count === 1 ? "" : "s"}`;
+}
+export function formatDate(value) {
+    if (!value) {
+        return "unknown";
+    }
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) {
+        return value;
+    }
+    return date.toLocaleString(undefined, {
+        month: "short",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit"
+    });
+}
+export function shortPath(value) {
+    const home = process.env.HOME;
+    const shortened = home && value.startsWith(home) ? `~${value.slice(home.length)}` : value;
+    if (shortened.length <= 56) {
+        return shortened;
+    }
+    return `...${shortened.slice(-53)}`;
+}
+export function preview(value, max) {
+    const normalized = value.replace(/\s+/g, " ").trim();
+    return normalized.length > max ? `${normalized.slice(0, max - 1)}...` : normalized;
+}
+export function isBootstrapText(text) {
+    const normalized = text.trim();
+    return normalized.startsWith("# AGENTS.md instructions") || normalized.startsWith("<INSTRUCTIONS>");
+}
+export function escapeHtml(value) {
+    return value
+        .replaceAll("&", "&amp;")
+        .replaceAll("<", "&lt;")
+        .replaceAll(">", "&gt;")
+        .replaceAll('"', "&quot;")
+        .replaceAll("'", "&#39;");
+}
+export function escapeAttr(value) {
+    return escapeHtml(value);
+}

package/dist/src/web-views.js

@@ -0,0 +1,389 @@
+import { STARTUP_MODES } from "./web-settings.js";
+import { WEB_STYLE } from "./web-style.js";
+import { escapeAttr, escapeHtml, formatCount, formatDate, isBootstrapText, messageDomId, preview, renderEmpty, sessionHref, shortPath } from "./web-utils.js";
+export function renderHomePage(status, recent, actionToken, flash, embeddingJob) {
+    const body = `
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Local Codex History</p>
+        <h1>Where Was I?</h1>
+      </div>
+      ${renderStatusPills(status)}
+    </section>
+    ${flash ? `<div class="${escapeAttr(flash.kind)}">${escapeHtml(flash.message)}</div>` : ""}
+    ${renderSearchForm("", "auto")}
+    ${renderIndexActions(status, actionToken, embeddingJob)}
+    <section class="section">
+      <div class="section-header">
+        <h2>Recent Threads</h2>
+        <span>${formatCount(status.index.sessions, "thread")}</span>
+      </div>
+      <div class="thread-list">
+        ${recent.length > 0
+        ? recent.map((session) => renderRecentSession(session)).join("")
+        : renderEmpty("No indexed sessions yet. Run `wwi index --recent 100`, then refresh this page.")}
+      </div>
+    </section>
+  `;
+    return layout("Where Was I", "home", body, {
+        clientScript: embeddingJob?.status === "running"
+    });
+}
+export function renderEmbeddingPanelUpdate(status, embeddingJob) {
+    const button = embeddingButtonState(embeddingJob);
+    return {
+        job: embeddingJob,
+        statusHtml: renderEmbeddingStatus(status),
+        jobHtml: embeddingJob ? renderEmbeddingJob(embeddingJob) : "",
+        buttonText: button.text,
+        buttonDisabled: button.disabled,
+        done: embeddingJob?.status !== "running"
+    };
+}
+export function renderSearchPage(query, requestedMode, state) {
+    const body = `
+    <section class="page-heading">
+      <div>
+        <p class="eyebrow">Search</p>
+        <h1>${query ? escapeHtml(query) : "Search Sessions"}</h1>
+      </div>
+      ${state ? `<span class="mode-chip">${escapeHtml(state.selectedMode)}</span>` : ""}
+    </section>
+    ${renderSearchForm(query, requestedMode)}
+    ${!query
+        ? renderEmpty("Enter a query to search indexed messages.")
+        : state
+            ? renderSearchResults(query, requestedMode, state)
+            : ""}
+  `;
+    return layout("Search - Where Was I", "search", body);
+}
+export function renderSessionPage(state) {
+    const firstMessage = state.messages[0];
+    const body = `
+    <section class="detail-top">
+      <div>
+        <a class="subtle-link" href="${escapeAttr(state.backHref)}">Back</a>
+        <h1>${escapeHtml(sessionTitle(state.messages))}</h1>
+        <p class="meta-line">${escapeHtml(formatDate(firstMessage?.timestamp ?? null))} &middot; ${escapeHtml(state.sessionId)}</p>
+      </div>
+      <div class="detail-actions">
+        <a class="button primary" href="${escapeAttr(state.codexUrl)}">Open in Codex</a>
+        <span class="source-pill" title="${escapeAttr(state.sourcePath)}">${escapeHtml(shortPath(state.sourcePath))}</span>
+      </div>
+    </section>
+    ${state.contextNotice
+        ? `<div class="notice"><div>${escapeHtml(state.contextNotice)}</div>${state.fullHref ? `<div class="context-actions"><a class="button small" href="${escapeAttr(state.fullHref)}">Load larger preview</a></div>` : ""}</div>`
+        : ""}
+    <section class="message-stream">
+      ${state.messages.map((message) => renderMessage(message, state.selectedMessageId)).join("")}
+    </section>
+  `;
+    return layout("Session - Where Was I", "session", body);
+}
+export function renderSettingsPage(model, settingsToken) {
+    const body = `
+    <section class="page-heading">
+      <div>
+        <p class="eyebrow">Settings</p>
+        <h1>Configuration</h1>
+        <p class="meta-line">${escapeHtml(model.configPath)}</p>
+      </div>
+      ${model.saved ? `<span class="success-pill">Saved</span>` : ""}
+    </section>
+    ${model.errors.length > 0 ? `<div class="alert">${model.errors.map(escapeHtml).join("<br>")}</div>` : ""}
+    <form method="post" action="/settings" class="settings-form">
+      <input type="hidden" name="settingsToken" value="${escapeAttr(settingsToken)}">
+      <fieldset>
+        <legend>Paths</legend>
+        ${textField("dbPath", "Index path", model.values.dbPath)}
+        ${textField("codexHome", "Codex home", model.values.codexHome)}
+      </fieldset>
+      <fieldset>
+        <legend>Startup</legend>
+        ${selectField("startupLexical", "Lexical index", model.values.startupLexical, STARTUP_MODES)}
+        ${selectField("startupSemantic", "Semantic index", model.values.startupSemantic, STARTUP_MODES)}
+        ${textField("semanticStartupMaxChunks", "Semantic startup chunk cap", model.values.semanticStartupMaxChunks)}
+      </fieldset>
+      <fieldset>
+        <legend>Embeddings</legend>
+        ${textField("embeddingBaseUrl", "Base URL", model.values.embeddingBaseUrl)}
+        ${textField("embeddingModel", "Model", model.values.embeddingModel)}
+        ${textField("embeddingApiKeyEnv", "API key env var", model.values.embeddingApiKeyEnv)}
+        ${passwordField("embeddingApiKey", "Direct API key", model.values.embeddingApiKeyStored)}
+        ${model.values.embeddingApiKeyStored ? checkboxField("embeddingApiKeyClear", "Clear stored direct API key", model.values.embeddingApiKeyClear) : ""}
+        ${textField("embeddingTimeoutMs", "Timeout ms", model.values.embeddingTimeoutMs)}
+      </fieldset>
+      <div class="form-actions">
+        <button class="button primary" type="submit">Save Settings</button>
+        <a class="button" href="/">Cancel</a>
+      </div>
+    </form>
+  `;
+    return layout("Settings - Where Was I", "settings", body);
+}
+function renderStatusPills(status) {
+    return `
+    <div class="status-pills">
+      <span>${formatCount(status.index.messages, "message")}</span>
+      <span>${escapeHtml(status.recommendedMode)}</span>
+      ${status.semanticConfigured
+        ? `<span>${formatCount(status.semanticIndexedChunks, "vector")}</span>`
+        : `<span>fts only</span>`}
+    </div>
+  `;
+}
+function renderIndexActions(status, actionToken, embeddingJob) {
+    const button = embeddingButtonState(embeddingJob);
+    return `
+    <section class="index-actions">
+      <div class="index-action">
+        <div>
+          <h2>Index</h2>
+          <p>${escapeHtml(status.index.lastIndexedAt ? `Last indexed ${formatDate(status.index.lastIndexedAt)}` : "No index has been built yet.")}</p>
+        </div>
+        <form method="post" action="/index">
+          <input type="hidden" name="actionToken" value="${escapeAttr(actionToken)}">
+          <button class="button primary" type="submit">Index now</button>
+        </form>
+      </div>
+      <div
+        class="index-action"
+        id="embedding-action"
+        ${embeddingJob ? `data-embedding-job-id="${escapeAttr(embeddingJob.id)}" data-embedding-job-status="${escapeAttr(embeddingJob.status)}"` : ""}
+      >
+        <div>
+          <h2>Embeddings</h2>
+          <div id="embedding-status">${renderEmbeddingStatus(status)}</div>
+          <div id="embedding-job-slot">${embeddingJob ? renderEmbeddingJob(embeddingJob) : ""}</div>
+        </div>
+        ${status.semanticConfigured
+        ? `<form method="post" action="/embeddings">
+                <input type="hidden" name="actionToken" value="${escapeAttr(actionToken)}">
+                <button id="embedding-submit" class="button primary" type="submit"${button.disabled ? " disabled" : ""}>${escapeHtml(button.text)}</button>
+              </form>`
+        : `<a class="button" href="/settings">Configure</a>`}
+      </div>
+    </section>
+  `;
+}
+function embeddingButtonState(embeddingJob) {
+    const running = embeddingJob?.status === "running";
+    return {
+        text: running ? "Regenerating..." : "Regenerate embeddings",
+        disabled: running
+    };
+}
+function renderEmbeddingStatus(status) {
+    if (!status.semanticConfigured) {
+        return "<p>Semantic search is off. Full-text search is ready after indexing.</p>";
+    }
+    const total = status.semanticTotalEligibleChunks;
+    const indexed = status.semanticIndexedChunks;
+    const missing = status.semanticMissingChunks;
+    const last = status.semanticLastIndexedAt ? ` Last embedded ${formatDate(status.semanticLastIndexedAt)}.` : "";
+    if (status.semanticIncompatibleStoredVectors > 0) {
+        return `<p>${escapeHtml(`${indexed} of ${total} chunks embedded. ${status.semanticIncompatibleStoredVectors} stored vectors use another provider.${last}`)}</p>`;
+    }
+    const missingText = missing === null ? "" : missing > 0 ? ` ${missing} missing.` : " All eligible chunks are embedded.";
+    return `<p>${escapeHtml(`${indexed} of ${total} chunks embedded.${missingText}${last}`)}</p>`;
+}
+function renderEmbeddingJob(job) {
+    const percent = embeddingJobPercent(job);
+    const total = job.total;
+    const indeterminate = job.status === "running" && total === null;
+    const meta = job.model ? ` ${job.model}` : "";
+    const label = job.status === "running"
+        ? total === null
+            ? `Checking embedding provider${meta}...`
+            : `Regenerating embeddings: ${job.indexed} of ${total} chunks.`
+        : job.status === "complete"
+            ? total === 0 || job.indexed === 0
+                ? "Embedding run complete: everything is already up to date."
+                : `Embedding run complete: ${job.indexed} chunk${job.indexed === 1 ? "" : "s"} processed.`
+            : `Embedding run failed: ${job.failed ?? "embedding provider failed."}`;
+    return `
+    <div class="embedding-job ${escapeAttr(job.status)}">
+      <div class="progress-row">
+        <span>${escapeHtml(label)}</span>
+        ${total !== null || job.status !== "running" ? `<span>${percent}%</span>` : ""}
+      </div>
+      <div
+        class="progress-track${indeterminate ? " indeterminate" : ""}"
+        role="progressbar"
+        aria-valuemin="0"
+        aria-valuemax="${escapeAttr(String(total ?? 100))}"
+        aria-valuenow="${escapeAttr(String(total === null ? percent : Math.min(job.indexed, total)))}"
+      >
+        <span style="width: ${percent}%"></span>
+      </div>
+    </div>
+  `;
+}
+function embeddingJobPercent(job) {
+    if (job.status === "complete") {
+        return 100;
+    }
+    if (job.status === "failed") {
+        const denominator = Math.max(job.total ?? (job.indexed || 1), 1);
+        return Math.max(0, Math.min(100, Math.round(((job.indexed || 0) / denominator) * 100)));
+    }
+    if (job.total === null) {
+        return 18;
+    }
+    if (job.total === 0) {
+        return 100;
+    }
+    return Math.max(0, Math.min(100, Math.round((job.indexed / job.total) * 100)));
+}
+function renderSearchForm(query, mode) {
+    return `
+    <form class="search-box" action="/search" method="get">
+      <input name="q" value="${escapeAttr(query)}" placeholder="Search previous sessions" autocomplete="off" autofocus>
+      <select name="mode" aria-label="Search mode">
+        ${["auto", "fts", "hybrid", "semantic"].map((candidate) => option(candidate, candidate, mode)).join("")}
+      </select>
+      <button type="submit">Search</button>
+    </form>
+  `;
+}
+function renderRecentSession(session) {
+    const href = `/sessions/${encodeURIComponent(session.id)}`;
+    return `
+    <article class="thread-row">
+      <a class="thread-main" href="${escapeAttr(href)}">
+        <span class="thread-title">${escapeHtml(session.displayTitle)}</span>
+        <span class="thread-meta">${escapeHtml(formatDate(session.updatedAt))} &middot; ${escapeHtml(session.cwd ?? "unknown cwd")}</span>
+      </a>
+      <div class="row-actions">
+        <span>${session.messageCount} msg</span>
+        ${session.links.codex ? `<a href="${escapeAttr(session.links.codex)}">Codex</a>` : ""}
+      </div>
+    </article>
+  `;
+}
+function renderSearchResults(query, mode, state) {
+    if (state.groups.length === 0) {
+        return renderEmpty("No matching sessions. If this is your first run, build the index with `wwi index --recent 100`.");
+    }
+    return `
+    ${state.warning ? `<div class="notice">${escapeHtml(state.warning)}</div>` : ""}
+    <section class="section">
+      <div class="section-header">
+        <h2>Results</h2>
+        <span>${formatCount(state.groups.length, "thread")}</span>
+      </div>
+      <div class="result-list">
+        ${state.groups.map((group) => renderSearchGroup(query, mode, group)).join("")}
+      </div>
+    </section>
+  `;
+}
+function renderSearchGroup(query, mode, group) {
+    const bestHref = sessionHref(group.session.id, group.bestMessage.messageId, query, mode);
+    return `
+    <article class="result-row">
+      <div class="result-head">
+        <a class="result-title" href="${escapeAttr(bestHref)}">${escapeHtml(group.session.displayTitle)}</a>
+        <span class="score">${group.score.toFixed(3)}</span>
+      </div>
+      <p class="preview">${escapeHtml(group.bestMessage.preview)}</p>
+      <div class="thread-meta">${escapeHtml(formatDate(group.session.updatedAt))} &middot; ${escapeHtml(group.session.cwd ?? "unknown cwd")}</div>
+      <div class="hit-list">
+        ${group.hits.map((hit) => renderHit(query, mode, hit.messageId, hit.role, hit.preview, group.session.id)).join("")}
+      </div>
+      <div class="result-actions">
+        <a class="button small" href="${escapeAttr(bestHref)}">Inspect</a>
+        ${group.bestMessage.links.codex ? `<a class="button small primary" href="${escapeAttr(group.bestMessage.links.codex)}">Open in Codex</a>` : ""}
+      </div>
+    </article>
+  `;
+}
+function renderHit(query, mode, messageId, role, previewText, sessionId) {
+    return `
+    <a class="hit-chip" href="${escapeAttr(sessionHref(sessionId, messageId, query, mode))}">
+      <span>${escapeHtml(role)}</span>
+      ${escapeHtml(previewText)}
+    </a>
+  `;
+}
+function renderMessage(message, selectedMessageId) {
+    const selected = selectedMessageId === message.id;
+    return `
+    <article id="${escapeAttr(messageDomId(message.id))}" class="message ${escapeAttr(message.role)}${selected ? " selected" : ""}">
+      <header>
+        <span class="role">${escapeHtml(message.role)}</span>
+        <span>${escapeHtml(formatDate(message.timestamp))}</span>
+        <span class="mono">${escapeHtml(message.id)}</span>
+      </header>
+      <pre>${escapeHtml(message.text)}</pre>
+      <footer>
+        <span>${escapeHtml(`${message.sourcePath}:${message.lineStart}`)}</span>
+      </footer>
+    </article>
+  `;
+}
+function textField(name, label, value) {
+    return `
+    <label>
+      <span>${escapeHtml(label)}</span>
+      <input name="${escapeAttr(name)}" value="${escapeAttr(value)}">
+    </label>
+  `;
+}
+function passwordField(name, label, stored) {
+    return `
+    <label>
+      <span>${escapeHtml(label)}</span>
+      <input name="${escapeAttr(name)}" type="password" autocomplete="off" placeholder="${stored ? "Stored, leave blank to keep" : ""}">
+    </label>
+  `;
+}
+function checkboxField(name, label, checked) {
+    return `
+    <label class="check-row">
+      <input name="${escapeAttr(name)}" type="checkbox"${checked ? " checked" : ""}>
+      <span>${escapeHtml(label)}</span>
+    </label>
+  `;
+}
+function selectField(name, label, value, options) {
+    return `
+    <label>
+      <span>${escapeHtml(label)}</span>
+      <select name="${escapeAttr(name)}">
+        ${options.map((candidate) => option(candidate, candidate, value)).join("")}
+      </select>
+    </label>
+  `;
+}
+function option(value, label, selected) {
+    return `<option value="${escapeAttr(value)}"${value === selected ? " selected" : ""}>${escapeHtml(label)}</option>`;
+}
+function layout(title, active, body, options = {}) {
+    return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <style>${WEB_STYLE}</style>
+  ${options.clientScript ? `<script src="/app.js" defer></script>` : ""}
+</head>
+<body>
+  <header class="app-header">
+    <a class="brand" href="/">Where Was I</a>
+    <nav>
+      <a${active === "home" ? " aria-current=\"page\"" : ""} href="/">Recent</a>
+      <a${active === "search" ? " aria-current=\"page\"" : ""} href="/search">Search</a>
+      <a${active === "settings" ? " aria-current=\"page\"" : ""} href="/settings">Settings</a>
+    </nav>
+  </header>
+  <main>${body}</main>
+</body>
+</html>`;
+}
+function sessionTitle(messages) {
+    const firstNonBootstrap = messages.find((message) => message.role === "user" && !isBootstrapText(message.text));
+    return preview(firstNonBootstrap?.text ?? messages[0]?.text ?? "Session", 90);
+}