rewound 0.2.0

package/dist/web/layout.js

@@ -0,0 +1,342 @@
+import { escapeHtml } from "./html.js";
+const NAV_ITEMS = [
+    { key: "search", href: "/", label: "Search" },
+    { key: "timeline", href: "/timeline", label: "Timeline" },
+    { key: "stats", href: "/stats", label: "Stats" },
+];
+// Small magnifying-glass mark in the brand blue/orange, inlined as a data URI
+// so the favicon never triggers an external request (README promises zero
+// network calls, and the phone workflow is often offline/Tailscale-only).
+const FAVICON_SVG = `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='13' cy='13' r='9' fill='none' stroke='#2563eb' stroke-width='4'/><line x1='20' y1='20' x2='28' y2='28' stroke='#ea580c' stroke-width='4' stroke-linecap='round'/></svg>`;
+const FAVICON_HREF = `data:image/svg+xml,${encodeURIComponent(FAVICON_SVG)}`;
+// Colorblind-safe palette: blue (primary) / orange (accent) only.
+// Never use red/green to convey status — pair icons or labels with color instead.
+// navigator.clipboard requires a secure context (HTTPS or localhost). The
+// primary phone workflow is plain HTTP over Tailscale, so fall back to a
+// hidden-textarea + execCommand copy when the Clipboard API is unavailable.
+// Copy buttons use a delegated click listener + data-copy-target (rather than
+// per-button onclick handlers) so an arbitrary number of copy buttons can
+// appear on one page (e.g. one per search result) without inline JS that
+// would need to interpolate untrusted ids into a JS string literal.
+const COPY_SCRIPT = `
+function copyText(text) {
+  if (navigator.clipboard && window.isSecureContext) {
+    navigator.clipboard.writeText(text);
+    return;
+  }
+  var ta = document.createElement("textarea");
+  ta.value = text;
+  ta.setAttribute("readonly", "");
+  ta.style.position = "fixed";
+  ta.style.opacity = "0";
+  document.body.appendChild(ta);
+  ta.select();
+  document.execCommand("copy");
+  document.body.removeChild(ta);
+}
+document.addEventListener("click", function (e) {
+  var btn = e.target.closest && e.target.closest(".copy-btn");
+  if (!btn) return;
+  var targetId = btn.getAttribute("data-copy-target");
+  var el = targetId && document.getElementById(targetId);
+  if (!el) return;
+  copyText(el.textContent);
+  var original = btn.textContent;
+  btn.textContent = "Copied ✓";
+  btn.disabled = true;
+  setTimeout(function () {
+    btn.textContent = original;
+    btn.disabled = false;
+  }, 1500);
+});
+`;
+const STYLES = `
+  :root {
+    color-scheme: light dark;
+    --bg: #ffffff;
+    --fg: #1a1a2e;
+    --muted: #5b6472;
+    --border: #e2e5ea;
+    --primary: #2563eb;
+    --primary-fg: #ffffff;
+    --accent: #ea580c;
+    --surface: #f6f7f9;
+    --shadow: 0 4px 16px rgba(26, 26, 46, 0.08);
+    --mark-bg: rgba(234, 88, 12, 0.22);
+
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+
+    --radius-sm: 0.5rem;
+    --radius: 0.75rem;
+
+    --fs-xs: 0.75rem;
+    --fs-sm: 0.875rem;
+    --fs-base: 1rem;
+    --fs-lg: 1.125rem;
+    --fs-xl: 1.375rem;
+    --fs-2xl: 2rem;
+
+    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg: #101218;
+      --fg: #e7e9ee;
+      --muted: #9aa3b2;
+      --border: #2a2e38;
+      --primary: #5b9bf7;
+      --primary-fg: #0b1220;
+      --accent: #ff9d52;
+      --surface: #171a22;
+      --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+      --mark-bg: rgba(255, 157, 82, 0.3);
+    }
+  }
+
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    font-family: var(--font-sans);
+    font-size: var(--fs-base);
+    color: var(--fg);
+    background: var(--bg);
+    line-height: 1.5;
+  }
+  a { color: var(--primary); }
+  code, pre { font-family: var(--font-mono); }
+  .cost, .count, .tabular, .stat-number { font-variant-numeric: tabular-nums; }
+
+  header.site {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--border);
+  }
+  header.site .brand {
+    font-weight: 700;
+    font-size: var(--fs-lg);
+    margin-right: auto;
+    letter-spacing: -0.02em;
+  }
+  .brand-accent { color: var(--accent); font-weight: 800; }
+  nav.site-nav { display: flex; gap: var(--space-1); }
+  nav.site-nav a {
+    padding: 0.5rem var(--space-3);
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    color: var(--muted);
+    font-weight: 600;
+    font-size: var(--fs-sm);
+  }
+  nav.site-nav a[aria-current="page"] {
+    background: var(--primary);
+    color: var(--primary-fg);
+  }
+
+  main { max-width: 960px; margin: 0 auto; padding: var(--space-4); }
+
+  /* Filesystem paths, session ids, and cost/count text can be long unbroken
+     strings with no natural break point — without this, a long project dir
+     in an h1 or table cell forces horizontal scroll on narrow viewports. */
+  h1, h2, h3, .muted, td, th, code { overflow-wrap: anywhere; }
+
+  h1 { font-size: var(--fs-2xl); margin: 0 0 var(--space-2); }
+  h2 { font-size: var(--fs-xl); margin: var(--space-6) 0 var(--space-3); }
+  h3 { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
+
+  .card {
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: var(--space-3) var(--space-4);
+    margin-bottom: var(--space-3);
+    background: var(--surface);
+    transition: box-shadow 0.15s ease, transform 0.15s ease;
+  }
+  .card:hover {
+    box-shadow: var(--shadow);
+    transform: translateY(-1px);
+  }
+
+  .muted { color: var(--muted); font-size: var(--fs-sm); }
+  .badge {
+    display: inline-block;
+    padding: 0.15rem 0.6rem;
+    border-radius: 999px;
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    color: var(--muted);
+  }
+  .badge.accent { border-color: var(--accent); color: var(--accent); }
+  .tool-chip { font-family: var(--font-mono); }
+  .role-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
+
+  .message { border-left: 4px solid var(--border); }
+  .message-user { border-left-color: var(--primary); }
+  .message-assistant { border-left-color: var(--accent); }
+
+  .session-header .resume-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+
+  .day-header {
+    font-size: var(--fs-sm);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted);
+    border-bottom: 1px solid var(--border);
+    padding-bottom: var(--space-2);
+  }
+  .session-row { padding: var(--space-2) var(--space-4); }
+  .session-row-title { font-weight: 600; margin-bottom: var(--space-1); }
+  .session-row-title a { text-decoration: none; }
+  .session-row-title a:hover { text-decoration: underline; }
+
+  .project-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
+  .project-link { display: block; text-decoration: none; color: var(--fg); font-weight: 600; }
+  .project-link:hover { border-color: var(--primary); color: var(--primary); }
+
+  .stat-cards { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
+  .stat-card { flex: 1 1 10rem; text-align: center; }
+  .stat-number { font-size: var(--fs-2xl); font-weight: 700; }
+  .stat-label { color: var(--muted); font-size: var(--fs-sm); }
+  .sparkline .bar { fill: var(--primary); }
+
+  .error-page { text-align: center; padding: var(--space-8) var(--space-4); }
+  .error-code { font-size: var(--fs-2xl); font-weight: 800; color: var(--muted); }
+
+  mark {
+    background: var(--mark-bg);
+    color: inherit;
+    border-radius: 0.2rem;
+    padding: 0 0.15rem;
+  }
+
+  .hero { text-align: center; padding: var(--space-8) var(--space-4) var(--space-6); }
+  .hero-tagline { font-size: var(--fs-lg); color: var(--muted); margin: 0 0 var(--space-6); }
+  form.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
+  form.filters-hero { justify-content: center; }
+  form.filters-hero input[name="q"] {
+    font-size: var(--fs-lg);
+    text-align: center;
+    flex: 1 1 100%;
+    max-width: 32rem;
+  }
+  .example-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    justify-content: center;
+    margin-top: var(--space-4);
+  }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    min-height: 44px;
+    padding: 0 var(--space-4);
+    border-radius: 999px;
+    border: 1px solid var(--border);
+    background: var(--surface);
+    color: var(--fg);
+    text-decoration: none;
+    font-size: var(--fs-sm);
+  }
+  .chip:hover { border-color: var(--primary); color: var(--primary); }
+
+  .hit-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); }
+  .hit-title { margin: 0 0 var(--space-2); }
+  .hit-title a { text-decoration: none; }
+  .hit-title a:hover { text-decoration: underline; }
+  .snippet { margin: 0 0 var(--space-3); }
+  .hit-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
+  .hit-footer code { flex: 1 1 auto; }
+
+  input, select, button {
+    font: inherit;
+    padding: 0.6rem var(--space-3);
+    min-height: 44px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg);
+    color: var(--fg);
+  }
+  button, .copy-btn {
+    background: var(--primary);
+    color: var(--primary-fg);
+    border-color: var(--primary);
+    cursor: pointer;
+    font-weight: 600;
+  }
+  .copy-btn { padding: 0.4rem var(--space-3); min-height: 44px; font-size: var(--fs-xs); }
+  .copy-btn:disabled { opacity: 0.8; cursor: default; }
+
+  /* Text links that act as a card/row's primary tap target (not inline prose)
+     need a real 44px hit box even though the text itself renders smaller. */
+  .tap-target { display: inline-flex; align-items: center; min-height: 44px; }
+
+  pre { white-space: pre-wrap; word-break: break-word; }
+  table { border-collapse: collapse; width: 100%; }
+  th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--border); }
+
+  nav.pagination {
+    display: flex;
+    gap: var(--space-3);
+    align-items: center;
+    padding: var(--space-3) 0;
+    font-size: var(--fs-sm);
+  }
+  nav.pagination a {
+    padding: 0.5rem var(--space-3);
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    text-decoration: none;
+    font-weight: 600;
+  }
+
+  @media (max-width: 600px) {
+    main { padding: var(--space-3); }
+    form.filters { flex-direction: column; }
+    table, thead, tbody, th, td, tr { display: block; }
+    thead { display: none; }
+    td { border: none; padding: 0.15rem 0; }
+    tr { border-bottom: 1px solid var(--border); padding-bottom: var(--space-2); margin-bottom: var(--space-2); }
+  }
+`;
+export function renderLayout(opts) {
+    const navHtml = NAV_ITEMS.map((item) => {
+        const current = item.key === opts.activeNav ? ' aria-current="page"' : "";
+        return `<a href="${item.href}"${current}>${escapeHtml(item.label)}</a>`;
+    }).join("");
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${escapeHtml(opts.title)} · rewound</title>
+<link rel="icon" href="${FAVICON_HREF}" />
+<style>${STYLES}</style>
+<script>${COPY_SCRIPT}</script>
+</head>
+<body>
+<header class="site">
+  <span class="brand">agent<span class="brand-accent">grep</span></span>
+  <nav class="site-nav">${navHtml}</nav>
+</header>
+<main>${opts.body}</main>
+</body>
+</html>`;
+}

package/dist/web/pages/search.js

@@ -0,0 +1,110 @@
+import { escapeHtml, highlightSnippetHtml } from "../html.js";
+import { collapseSnippetWhitespace } from "../../search.js";
+const EXAMPLE_QUERIES = ["auth bug", "database migration", "failing test", "refactor", "TODO"];
+function pageQueryString(opts, page) {
+    const params = new URLSearchParams();
+    if (opts.q)
+        params.set("q", opts.q);
+    if (opts.project)
+        params.set("project", opts.project);
+    if (opts.since)
+        params.set("since", opts.since);
+    if (opts.role)
+        params.set("role", opts.role);
+    if (opts.sidechains)
+        params.set("sidechains", "1");
+    if (opts.allMatches)
+        params.set("all", "1");
+    if (page > 1)
+        params.set("page", String(page));
+    // URLSearchParams percent-encodes every value, so the only raw character
+    // left over is the "&" joining params — escape it for valid HTML markup.
+    const qs = params.toString().replace(/&/g, "&");
+    return qs ? `?${qs}` : "";
+}
+function renderFilters(opts, variant) {
+    const projectOptions = opts.projects
+        .map((p) => `<option value="${escapeHtml(p)}">${escapeHtml(p)}</option>`)
+        .join("");
+    const roleOptions = ["", "user", "assistant"]
+        .map((r) => {
+        const label = r === "" ? "Any role" : r;
+        return `<option value="${r}"${r === opts.role ? " selected" : ""}>${escapeHtml(label)}</option>`;
+    })
+        .join("");
+    const formClass = variant === "hero" ? "filters filters-hero" : "filters";
+    const autofocus = variant === "hero" ? " autofocus" : "";
+    return `
+<form class="${formClass}" method="get" action="/">
+  <input type="text" name="q" placeholder="Search your agent history..." value="${escapeHtml(opts.q)}"${autofocus} />
+  <input type="text" name="project" list="project-options" placeholder="filter by project (optional)" value="${escapeHtml(opts.project)}" />
+  <datalist id="project-options">${projectOptions}</datalist>
+  <input type="text" name="since" placeholder="since: 7d, 24h, or ISO" value="${escapeHtml(opts.since)}" />
+  <select name="role">${roleOptions}</select>
+  <label><input type="checkbox" name="sidechains" value="1" ${opts.sidechains ? "checked" : ""} /> include subagent traffic</label>
+  <button type="submit">Search</button>
+</form>`;
+}
+function renderHero(opts) {
+    const filters = renderFilters(opts, "hero");
+    const chips = EXAMPLE_QUERIES.map((q) => `<a class="chip" href="/?q=${encodeURIComponent(q)}">${escapeHtml(q)}</a>`).join("");
+    return `
+<section class="hero">
+  <p class="hero-tagline">Search everything your AI agents have ever done &mdash; every session, every project.</p>
+  ${filters}
+  <div class="example-chips">${chips}</div>
+</section>`;
+}
+function renderHitCard(hit, index) {
+    const heading = escapeHtml(hit.title ?? hit.sessionId);
+    const sidechainBadge = hit.isSidechain ? `<span class="badge accent">subagent</span>` : "";
+    const resumeCmd = `claude --resume ${hit.sessionId}`;
+    const resumeId = `resume-hit-${index}`;
+    return `
+<article class="card hit-card">
+  <div class="hit-meta muted">
+    <span class="badge">${escapeHtml(hit.projectDir)}</span>
+    <span>${escapeHtml(hit.ts)}</span>
+    <span class="badge">${escapeHtml(hit.role)}</span>
+    ${sidechainBadge}
+  </div>
+  <h3 class="hit-title"><a class="tap-target" href="/session/${encodeURIComponent(hit.sessionId)}">${heading}</a></h3>
+  <p class="snippet">${highlightSnippetHtml(collapseSnippetWhitespace(hit.snippet))}</p>
+  ${hit.matchesInSession > 1 ? `<p class="muted">+${hit.matchesInSession - 1} more in this session</p>` : ""}
+  <div class="hit-footer">
+    <span class="cost muted" title="Estimated cost at API list prices">$${hit.estCostUsd.toFixed(4)}</span>
+    <code id="${resumeId}">${escapeHtml(resumeCmd)}</code>
+    <button type="button" class="copy-btn" data-copy-target="${resumeId}">Copy</button>
+  </div>
+</article>`;
+}
+function renderPagination(opts) {
+    const prev = opts.page > 1
+        ? `<a rel="prev" href="/${pageQueryString(opts, opts.page - 1)}">&larr; Previous</a>`
+        : "";
+    const next = opts.hasMore
+        ? `<a rel="next" href="/${pageQueryString(opts, opts.page + 1)}">Next &rarr;</a>`
+        : "";
+    if (!prev && !next)
+        return "";
+    return `<nav class="pagination">${prev} ${next}</nav>`;
+}
+export function renderSearchPage(opts) {
+    if (!opts.q) {
+        return renderHero(opts);
+    }
+    const filters = renderFilters(opts, "compact");
+    if (opts.hits.length === 0) {
+        return `${filters}<p class="muted">No results for "${escapeHtml(opts.q)}".</p>`;
+    }
+    const cards = opts.hits.map(renderHitCard).join("");
+    return `${filters}${renderGroupToggle(opts)}${cards}${renderPagination(opts)}`;
+}
+function renderGroupToggle(opts) {
+    if (opts.allMatches) {
+        const qs = pageQueryString({ ...opts, allMatches: false }, 1);
+        return `<p class="muted group-toggle">showing all matches · <a href="/${qs}">one best hit per session</a></p>`;
+    }
+    const qs = pageQueryString({ ...opts, allMatches: true }, 1);
+    return `<p class="muted group-toggle">one best hit per session · <a href="/${qs}">show all matches</a></p>`;
+}

package/dist/web/pages/session.js

@@ -0,0 +1,49 @@
+import { escapeHtml } from "../html.js";
+function renderMessage(m) {
+    const sidechainBadge = m.isSidechain ? `<span class="badge accent">subagent</span>` : "";
+    const modelBadge = m.model ? `<span class="badge">${escapeHtml(m.model)}</span>` : "";
+    const meta = `<div class="muted">${escapeHtml(m.ts)} · <span class="role-label">${escapeHtml(m.role)}</span> ${modelBadge} ${sidechainBadge}</div>`;
+    const text = escapeHtml(m.text);
+    const roleClass = m.role === "assistant" ? "message-assistant" : "message-user";
+    const cardClass = `card message ${roleClass}`;
+    if (m.tools.length === 0) {
+        return `<article class="${cardClass}">${meta}<pre>${text}</pre></article>`;
+    }
+    const toolChips = m.tools.map((t) => `<span class="badge tool-chip">${escapeHtml(t)}</span>`).join(" ");
+    return `<article class="${cardClass}">${meta}<details><summary>🔧 ${m.tools.length} tool call${m.tools.length === 1 ? "" : "s"}: ${toolChips}</summary><pre>${text}</pre></details></article>`;
+}
+function renderPagination(sessionId, p) {
+    if (p.totalPages <= 1)
+        return "";
+    const prev = p.page > 1
+        ? `<a rel="prev" href="/session/${encodeURIComponent(sessionId)}?page=${p.page - 1}">&larr; Earlier</a>`
+        : "";
+    const next = p.page < p.totalPages
+        ? `<a rel="next" href="/session/${encodeURIComponent(sessionId)}?page=${p.page + 1}">Later &rarr;</a>`
+        : "";
+    return `<nav class="pagination"><span class="muted">Page ${p.page} of ${p.totalPages}</span> ${prev} ${next}</nav>`;
+}
+export function renderSessionPage(session, messages, pagination) {
+    const heading = escapeHtml(session.title ?? session.id);
+    const archivedBadge = session.archived
+        ? `<span class="badge accent">archived</span>`
+        : "";
+    const resumeCmd = `claude --resume ${session.id}`;
+    const header = `
+<header class="session-header">
+  <h1>${heading} ${archivedBadge}</h1>
+  <div class="muted">
+    ${escapeHtml(session.projectDir)} · branch ${escapeHtml(session.gitBranch ?? "?")} ·
+    ${escapeHtml(session.startedAt ?? "?")} &ndash; ${escapeHtml(session.endedAt ?? "?")} ·
+    ${session.messageCount} messages · <span title="Estimated cost at API list prices">est. API $${session.estCostUsd.toFixed(4)}</span> ·
+    ${session.models.map(escapeHtml).join(", ") || "no model recorded"}
+  </div>
+  <p class="resume-row">
+    <code id="resume-cmd">${escapeHtml(resumeCmd)}</code>
+    <button type="button" class="copy-btn" data-copy-target="resume-cmd">Copy</button>
+  </p>
+</header>`;
+    const transcript = messages.map(renderMessage).join("");
+    const paginationHtml = pagination ? renderPagination(session.id, pagination) : "";
+    return `${header}${paginationHtml}<section class="transcript">${transcript}</section>${paginationHtml}`;
+}

package/dist/web/pages/stats.js

@@ -0,0 +1,53 @@
+import { escapeHtml } from "../html.js";
+const MS_PER_DAY = 24 * 60 * 60 * 1000;
+function toDateKey(d) {
+    return d.toISOString().slice(0, 10);
+}
+export function fillDailySeries(counts, days, now) {
+    const byDate = new Map(counts.map((c) => [c.date, c.count]));
+    const series = [];
+    for (let i = days - 1; i >= 0; i--) {
+        const d = new Date(now.getTime() - i * MS_PER_DAY);
+        const date = toDateKey(d);
+        series.push({ date, count: byDate.get(date) ?? 0 });
+    }
+    return series;
+}
+function renderSparklineSvg(series) {
+    const width = 300;
+    const height = 60;
+    const max = Math.max(1, ...series.map((d) => d.count));
+    const n = Math.max(1, series.length);
+    const barWidth = width / n;
+    const bars = series
+        .map((d, i) => {
+        const barHeight = (d.count / max) * (height - 4);
+        const x = i * barWidth;
+        const y = height - barHeight;
+        return `<rect class="bar" x="${x.toFixed(2)}" y="${y.toFixed(2)}" width="${(barWidth - 1).toFixed(2)}" height="${barHeight.toFixed(2)}"><title>${escapeHtml(d.date)}: ${d.count}</title></rect>`;
+    })
+        .join("");
+    return `<svg class="sparkline" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}" role="img" aria-label="messages per day, last ${series.length} days">${bars}</svg>`;
+}
+function renderProjectTable(rows) {
+    const body = rows
+        .map((r) => `<tr><td>${escapeHtml(r.projectDir)}</td><td class="tabular">${r.sessions}</td><td class="tabular">${r.messages}</td><td class="cost">$${r.estCostUsd.toFixed(4)}</td></tr>`)
+        .join("");
+    return `<table><thead><tr><th>Project</th><th>Sessions</th><th>Messages</th><th>Est. API cost</th></tr></thead><tbody>${body}</tbody></table>`;
+}
+function renderStatCards(opts) {
+    const cards = [
+        { value: String(opts.totalSessions), label: "Sessions" },
+        { value: String(opts.totalMessages), label: "Messages" },
+        { value: `$${opts.totalCostUsd.toFixed(4)}`, label: "Est. API cost" },
+    ];
+    return `<div class="stat-cards">${cards
+        .map((c) => `<div class="card stat-card"><div class="stat-number">${c.value}</div><div class="stat-label">${c.label}</div></div>`)
+        .join("")}</div>`;
+}
+export function renderStatsPage(opts) {
+    const summary = renderStatCards(opts);
+    const sparkline = `<h2>Messages / day (last ${opts.dailyCounts.length || 30} days)</h2>${renderSparklineSvg(opts.dailyCounts)}`;
+    const costNote = `<p class="muted">Cost figures are token usage valued at Anthropic API list prices — on a subscription plan your real spend is far lower.</p>`;
+    return `${summary}${costNote}<h2>By project (${opts.byProject.length})</h2>${renderProjectTable(opts.byProject)}${sparkline}`;
+}

package/dist/web/pages/timeline.js

@@ -0,0 +1,38 @@
+import { escapeHtml } from "../html.js";
+function renderProjectList(projects) {
+    const items = projects
+        .map((p) => `<li><a class="card project-link" href="/timeline?project=${encodeURIComponent(p)}">${escapeHtml(p)}</a></li>`)
+        .join("");
+    return `<p class="muted">Pick a project to see its timeline:</p><ul class="project-list">${items}</ul>`;
+}
+function dayKey(startedAt) {
+    return startedAt ? startedAt.slice(0, 10) : "unknown date";
+}
+function renderSessionRow(s) {
+    const heading = escapeHtml(s.title ?? s.id);
+    return `
+<article class="card session-row">
+  <div class="session-row-title"><a class="tap-target" href="/session/${encodeURIComponent(s.id)}">${heading}</a></div>
+  <div class="muted">${escapeHtml(s.startedAt ?? "?")} · <span class="count">${s.messageCount} msgs</span> · <span class="cost" title="Estimated cost at API list prices">$${s.estCostUsd.toFixed(4)}</span></div>
+</article>`;
+}
+export function renderTimelinePage(opts) {
+    if (!opts.selectedProject) {
+        return renderProjectList(opts.projects);
+    }
+    const heading = `<h1>${escapeHtml(opts.selectedProject)}</h1>`;
+    if (opts.sessions.length === 0) {
+        return `${heading}<p class="muted">No sessions found for this project.</p>`;
+    }
+    const groups = new Map();
+    for (const s of opts.sessions) {
+        const key = dayKey(s.startedAt);
+        const group = groups.get(key) ?? [];
+        group.push(s);
+        groups.set(key, group);
+    }
+    const days = Array.from(groups.entries())
+        .map(([date, sessions]) => `<section class="day-group"><h2 class="day-header">${escapeHtml(date)}</h2>${sessions.map(renderSessionRow).join("")}</section>`)
+        .join("");
+    return `${heading}${days}`;
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "rewound",
+  "version": "0.2.0",
+  "description": "Grep for everything your AI coding agents ever did. Local SQLite/FTS5 search over Claude Code session transcripts: CLI, MCP server, and web UI.",
+  "license": "SEE LICENSE IN LICENSE",
+  "author": "David Erner",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Dashorama/rewound.git"
+  },
+  "homepage": "https://github.com/Dashorama/rewound#readme",
+  "bugs": {
+    "url": "https://github.com/Dashorama/rewound/issues"
+  },
+  "keywords": [
+    "claude",
+    "claude-code",
+    "ai-agents",
+    "agent-memory",
+    "session-history",
+    "transcripts",
+    "search",
+    "full-text-search",
+    "fts5",
+    "sqlite",
+    "mcp",
+    "model-context-protocol"
+  ],
+  "type": "module",
+  "bin": {
+    "rewound": "dist/cli.js",
+    "rw": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepare": "npm run build",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/sdk": "^1.29.0",
+    "better-sqlite3": "^11.3.0",
+    "commander": "^12.1.0",
+    "fastify": "^5.10.0",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@types/better-sqlite3": "^7.6.11",
+    "@types/node": "^20.14.0",
+    "typescript": "^5.5.4",
+    "vitest": "^2.0.5"
+  }
+}