artifacty 0.1.2 → 0.3.0

package/src/lib/render.js

@@ -2,17 +2,26 @@ import { EDITOR_CLIENT_PATH, VIEWER_CLIENT_PATH, editorImportMapJson } from "./e
 import { createI18n, DEFAULT_LOCALE, editorMessages, localizedHref, switchLocaleHref } from "./i18n.js";
 import { ARTIFACT_FORMATS, ARTIFACT_TYPES } from "./storage.js";
 
-export function renderDashboard({ artifacts, baseUrl, filters = {}, locale = DEFAULT_LOCALE, currentPath = "/" }) {
+export function renderDashboard({ artifacts, baseUrl, filters = {}, pagination, locale = DEFAULT_LOCALE, currentPath = "/" }) {
   const view = viewContext(locale, currentPath);
+  const total = pagination?.total ?? artifacts.length;
+  const start = artifacts.length ? (pagination?.offset ?? 0) + 1 : 0;
+  const end = artifacts.length ? (pagination?.offset ?? 0) + artifacts.length : 0;
+  const searchBackend = pagination?.search?.backend;
+  const pager = renderDashboardPager({ pagination, filters, view });
   const rows = artifacts
     .map((artifact) => {
       const tags = artifact.tags.map((tag) => `<span class="tag">${escapeHtml(tag)}</span>`).join("");
       const status = artifact.archivedAt ? statusBadge("archived") : "";
+      const snippet = artifact.searchSnippet
+        ? `<span class="row-snippet">${escapeHtml(artifact.searchSnippet)}</span>`
+        : "";
       return `
         <a class="artifact-row" href="${view.href(`/artifacts/${encodeURIComponent(artifact.id)}`)}">
           <span class="row-main">
             <strong>${escapeHtml(artifact.title)}</strong>
             <span>${escapeHtml(artifact.id)}</span>
+            ${snippet}
           </span>
           <span>${escapeHtml(artifact.sourceAgent)}</span>
           ${typeBadge(artifact.artifactType || "document")}
@@ -44,10 +53,12 @@ export function renderDashboard({ artifacts, baseUrl, filters = {}, locale = DEF
       </header>
       <main class="dashboard">
         <section class="toolbar">
-          <span>${view.text("dashboard.count", { count: artifacts.length })}</span>
+          <span>${view.text("dashboard.range", { start, end, total })}</span>
+          ${searchBackend ? `<span>${view.text("dashboard.searchBackend", { backend: searchBackend })}</span>` : ""}
         </section>
         <form class="filter-form" method="get" action="/">
           ${localeInput(view.locale)}
+          ${filters.limit ? `<input type="hidden" name="limit" value="${escapeAttribute(filters.limit)}">` : ""}
           <input name="q" value="${escapeAttribute(filters.query || "")}" placeholder="${view.attr("filter.search")}">
           <input name="tag" value="${escapeAttribute(filters.tag || "")}" placeholder="${view.attr("filter.tag")}">
           <input name="sourceAgent" value="${escapeAttribute(filters.sourceAgent || "")}" placeholder="${view.attr("filter.source")}">
@@ -58,12 +69,52 @@ export function renderDashboard({ artifacts, baseUrl, filters = {}, locale = DEF
         <section class="artifact-list">
           ${rows || `<div class="empty">${view.text("dashboard.empty")}</div>`}
         </section>
+        ${pager}
       </main>
     `,
     locale: view.locale
   });
 }
 
+function renderDashboardPager({ pagination, filters, view }) {
+  if (!pagination || pagination.total <= pagination.limit) {
+    return "";
+  }
+
+  const previous = pagination.previousOffset === null
+    ? `<span class="pager-disabled">${view.text("dashboard.previous")}</span>`
+    : `<a href="${view.href(dashboardPageHref(filters, pagination.previousOffset))}">${view.text("dashboard.previous")}</a>`;
+  const next = pagination.nextOffset === null
+    ? `<span class="pager-disabled">${view.text("dashboard.next")}</span>`
+    : `<a href="${view.href(dashboardPageHref(filters, pagination.nextOffset))}">${view.text("dashboard.next")}</a>`;
+
+  return `<nav class="pager" aria-label="Pagination">${previous}${next}</nav>`;
+}
+
+function dashboardPageHref(filters, offset) {
+  const params = new URLSearchParams();
+  if (filters.query) {
+    params.set("q", filters.query);
+  }
+  if (filters.tag) {
+    params.set("tag", filters.tag);
+  }
+  if (filters.sourceAgent) {
+    params.set("sourceAgent", filters.sourceAgent);
+  }
+  if (filters.includeArchived) {
+    params.set("includeArchived", "true");
+  }
+  if (filters.limit) {
+    params.set("limit", filters.limit);
+  }
+  if (offset > 0) {
+    params.set("offset", String(offset));
+  }
+  const query = params.toString();
+  return query ? `/?${query}` : "/";
+}
+
 export function renderArtifactFormPage({ mode, baseUrl, artifact, version, content, authToken = "", locale = DEFAULT_LOCALE, currentPath = "/" }) {
   const view = viewContext(locale, currentPath);
   const isEdit = mode === "edit";
@@ -163,6 +214,8 @@ export function renderImportArtifactPage({ baseUrl, authToken = "", locale = DEF
                 <option value="claude">Claude</option>
                 <option value="codex">Codex</option>
                 <option value="gemini">Gemini</option>
+                <option value="copilot">GitHub Copilot</option>
+                <option value="cursor">Cursor</option>
                 <option value="generic">Generic</option>
               </select>
             </label>
@@ -208,8 +261,10 @@ export function renderArtifactPage({ artifact, version, content, baseUrl, authTo
   const rendered = renderContent(version.format, content, version.metadata || {}, {
     reactFrameUrl: reactRendererEnabled()
       ? view.href(`/artifacts/${encodeURIComponent(artifact.id)}/react-frame?version=${version.version}`)
-      : ""
+      : "",
+    rawUrl: view.href(`/artifacts/${encodeURIComponent(artifact.id)}/raw?version=${version.version}`)
   });
+  const viewClass = artifactViewClass({ artifact, version });
   const needsViewerScript = version.format === "code";
   const rawUrl = `/artifacts/${encodeURIComponent(artifact.id)}/raw?version=${version.version}`;
   const archiveAction = artifact.archivedAt ? "restore" : "archive";
@@ -231,7 +286,7 @@ export function renderArtifactPage({ artifact, version, content, baseUrl, authTo
           ${languageSwitcher(view)}
         </nav>
       </header>
-      <main class="artifact-view">
+      <main class="${viewClass}">
         <section class="meta-strip">
           ${formatBadge(version.format)}
           ${typeBadge(artifact.artifactType || "document")}
@@ -256,6 +311,16 @@ export function renderArtifactPage({ artifact, version, content, baseUrl, authTo
   });
 }
 
+function artifactViewClass({ artifact, version }) {
+  const wideFormats = new Set(["html", "svg", "mermaid", "react", "sarif", "csv", "image", "video"]);
+  const wideTypes = new Set(["dashboard", "design-option", "diff-walkthrough"]);
+  const classes = ["artifact-view"];
+  if (wideFormats.has(version.format) || wideTypes.has(artifact.artifactType)) {
+    classes.push("artifact-view-wide");
+  }
+  return classes.join(" ");
+}
+
 export function renderDiffPage({ artifact, fromVersion, toVersion, fromContent, toContent, diffRows, baseUrl, locale = DEFAULT_LOCALE, currentPath = "/" }) {
   const view = viewContext(locale, currentPath);
   const title = view.raw("diff.title", { title: artifact.title });
@@ -342,6 +407,22 @@ export function renderContent(format, content, metadata = {}, options = {}) {
     return `<pre class="artifact-code"><code>${escapeHtml(formatJson(content))}</code></pre>`;
   }
 
+  if (format === "sarif") {
+    return renderSarif(content);
+  }
+
+  if (format === "csv") {
+    return renderCsv(content);
+  }
+
+  if (format === "image") {
+    return renderMediaArtifact("image", content, metadata, options);
+  }
+
+  if (format === "video") {
+    return renderMediaArtifact("video", content, metadata, options);
+  }
+
   if (format === "code") {
     const language = metadata.language || metadata.artifactyImport?.language || "";
     return `<section class="artifact-code-viewer" data-artifacty-code-viewer data-language="${escapeAttribute(language)}">
@@ -598,6 +679,9 @@ export function pageShell({ title, body, head = "", afterBody = "", locale = DEF
       width: min(1180px, calc(100vw - 32px));
       margin: 28px auto 72px;
     }
+    .artifact-view-wide {
+      width: min(1760px, calc(100vw - 24px));
+    }
     .toolbar {
       font-family: var(--mono);
       font-size: 12px;
@@ -672,6 +756,34 @@ export function pageShell({ title, body, head = "", afterBody = "", locale = DEF
       background: var(--panel);
       box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
     }
+    .pager {
+      display: flex;
+      justify-content: flex-end;
+      gap: 8px;
+      margin-top: 14px;
+      font-family: var(--mono);
+      font-size: 12.5px;
+    }
+    .pager a,
+    .pager-disabled {
+      display: inline-flex;
+      min-height: 34px;
+      align-items: center;
+      justify-content: center;
+      padding: 5px 12px;
+      border: 1px solid var(--line-2);
+      border-radius: 8px;
+      background: var(--panel);
+      color: var(--muted);
+    }
+    .pager a:hover {
+      border-color: var(--accent);
+      color: var(--text);
+      text-decoration: none;
+    }
+    .pager-disabled {
+      opacity: 0.55;
+    }
     .editor-form {
       display: grid;
       gap: 16px;
@@ -856,6 +968,13 @@ export function pageShell({ title, body, head = "", afterBody = "", locale = DEF
       font-size: 12px;
       color: var(--faint);
     }
+    .row-main .row-snippet {
+      color: var(--muted);
+      white-space: normal;
+      overflow: visible;
+      text-overflow: clip;
+      overflow-wrap: anywhere;
+    }
     .artifact-row > span:not(.row-main):not(.tags):not(.badge) {
       font-family: var(--mono);
       font-size: 12.5px;
@@ -905,6 +1024,8 @@ export function pageShell({ title, body, head = "", afterBody = "", locale = DEF
     .badge.t-diagram { --bh: #0ea5e9; }
     .badge.t-component { --bh: #7c3aed; }
     .badge.t-snippet { --bh: #64748b; }
+    .badge.t-analysis-report { --bh: #dc2626; }
+    .badge.t-table { --bh: #0891b2; }
     .badge.t-unknown { --bh: #94a3b8; }
     .badge.f-html { --bh: #e0795b; }
     .badge.f-markdown { --bh: #3b82f6; }
@@ -914,6 +1035,10 @@ export function pageShell({ title, body, head = "", afterBody = "", locale = DEF
     .badge.f-svg { --bh: #0ea5e9; }
     .badge.f-mermaid { --bh: #14b8a6; }
     .badge.f-react { --bh: #7c3aed; }
+    .badge.f-sarif { --bh: #dc2626; }
+    .badge.f-csv { --bh: #0891b2; }
+    .badge.f-image { --bh: #f59e0b; }
+    .badge.f-video { --bh: #db2777; }
     .badge.s-archived { --bh: #94a3b8; }
     .empty {
       padding: 28px;
@@ -1076,6 +1201,105 @@ export function pageShell({ title, body, head = "", afterBody = "", locale = DEF
     }
     .artifact-table .align-center { text-align: center; }
     .artifact-table .align-right { text-align: right; }
+    .artifact-csv,
+    .artifact-sarif {
+      display: grid;
+      gap: 14px;
+    }
+    .artifact-csv-note,
+    .artifact-sarif-note {
+      margin: 0;
+      padding: 10px 12px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+      color: var(--muted);
+      font-size: 13px;
+    }
+    .artifact-summary-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+      gap: 10px;
+    }
+    .summary-card {
+      display: grid;
+      gap: 3px;
+      min-height: 72px;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      background: var(--panel);
+    }
+    .summary-card span {
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 11.5px;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+    }
+    .summary-card strong {
+      font-size: 20px;
+      line-height: 1.2;
+    }
+    .sarif-level {
+      display: inline-flex;
+      min-width: 68px;
+      justify-content: center;
+      padding: 2px 8px;
+      border-radius: 999px;
+      background: color-mix(in srgb, var(--bh, var(--muted)) 14%, transparent);
+      color: color-mix(in srgb, var(--bh, var(--muted)) 70%, var(--text));
+      font-family: var(--mono);
+      font-size: 12px;
+    }
+    .sarif-level.error { --bh: #dc2626; }
+    .sarif-level.warning { --bh: #d97706; }
+    .sarif-level.note { --bh: #2563eb; }
+    .sarif-level.none { --bh: #64748b; }
+    .artifact-raw-details {
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      background: var(--panel);
+      overflow: hidden;
+    }
+    .artifact-raw-details summary {
+      padding: 10px 14px;
+      cursor: pointer;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 12.5px;
+    }
+    .artifact-raw-details .artifact-code {
+      border: 0;
+      border-top: 1px solid var(--line);
+      border-radius: 0;
+    }
+    .artifact-media {
+      display: grid;
+      gap: 12px;
+      margin: 0;
+      padding: 14px;
+      border: 1px solid var(--line);
+      border-radius: 12px;
+      background: var(--panel);
+      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+    }
+    .artifact-media img,
+    .artifact-media video {
+      display: block;
+      width: 100%;
+      max-height: 76vh;
+      object-fit: contain;
+      border-radius: 8px;
+      background: var(--panel-2);
+    }
+    .artifact-media figcaption,
+    .artifact-media-note {
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 12.5px;
+      overflow-wrap: anywhere;
+    }
     .artifact-code {
       padding: 22px;
       overflow: auto;
@@ -1512,6 +1736,270 @@ function alignmentAttribute(alignment) {
   return alignment ? ` class="align-${alignment}"` : "";
 }
 
+const CSV_RENDER_ROW_LIMIT = 1000;
+const CSV_RENDER_COLUMN_LIMIT = 80;
+const SARIF_RENDER_RESULT_LIMIT = 500;
+
+function renderMediaArtifact(format, content, metadata = {}, options = {}) {
+  const mimeType = mediaMimeType(metadata, format);
+  const source = options.rawUrl || mediaDataUrl(content, mimeType);
+  if (!source) {
+    return `<section class="artifact-media-note">
+      Media preview is unavailable because this artifact does not contain valid base64 media content.
+    </section>
+    <pre class="artifact-code"><code>${escapeHtml(content)}</code></pre>`;
+  }
+
+  const label = [
+    mimeType || format,
+    metadata.encoding ? `encoding: ${metadata.encoding}` : "",
+    metadata.originalEncoding ? `source: ${metadata.originalEncoding}` : ""
+  ].filter(Boolean).join(" · ");
+
+  if (format === "video") {
+    return `<figure class="artifact-media artifact-video">
+      <video controls preload="metadata" src="${escapeAttribute(source)}"></video>
+      <figcaption>${escapeHtml(label || "video artifact")}</figcaption>
+    </figure>`;
+  }
+
+  return `<figure class="artifact-media artifact-image">
+    <img src="${escapeAttribute(source)}" alt="Image artifact">
+    <figcaption>${escapeHtml(label || "image artifact")}</figcaption>
+  </figure>`;
+}
+
+function mediaMimeType(metadata = {}, format) {
+  const explicit = String(metadata.mimeType || "").toLowerCase();
+  if (explicit.startsWith("image/") || explicit.startsWith("video/")) {
+    return explicit;
+  }
+  return format === "video" ? "video/mp4" : "image/png";
+}
+
+function mediaDataUrl(content, mimeType) {
+  const value = String(content || "").trim();
+  if (/^data:[^;,]+;base64,/i.test(value)) {
+    return value;
+  }
+  const base64 = value.replace(/\s+/g, "");
+  if (!/^[A-Za-z0-9+/]+={0,2}$/.test(base64)) {
+    return "";
+  }
+  return `data:${mimeType};base64,${base64}`;
+}
+
+function renderCsv(content) {
+  const parsed = parseCsv(content);
+  if (!parsed.ok) {
+    return `<section class="artifact-csv">
+      <p class="artifact-csv-note">CSV parsing failed: ${escapeHtml(parsed.error)}. Showing escaped source.</p>
+      <pre class="artifact-code"><code>${escapeHtml(content)}</code></pre>
+    </section>`;
+  }
+
+  if (parsed.rows.length === 0) {
+    return `<section class="artifact-csv"><p class="artifact-csv-note">Empty CSV artifact.</p></section>`;
+  }
+
+  const columnCount = Math.max(...parsed.rows.map((row) => row.length));
+  const visibleColumns = Math.min(columnCount, CSV_RENDER_COLUMN_LIMIT);
+  const header = parsed.rows[0];
+  const bodyRows = parsed.rows.slice(1, CSV_RENDER_ROW_LIMIT + 1);
+  const rowTruncated = parsed.rows.length - 1 > CSV_RENDER_ROW_LIMIT;
+  const columnTruncated = columnCount > CSV_RENDER_COLUMN_LIMIT;
+  const headerHtml = Array.from({ length: visibleColumns }, (_, index) =>
+    `<th>${escapeHtml(header[index] || `Column ${index + 1}`)}</th>`
+  ).join("");
+  const bodyHtml = bodyRows.map((row) =>
+    `<tr>${Array.from({ length: visibleColumns }, (_, index) =>
+      `<td>${escapeHtml(row[index] || "")}</td>`
+    ).join("")}</tr>`
+  ).join("\n");
+  const notes = [
+    `${parsed.rows.length - 1} data rows`,
+    `${columnCount} columns`,
+    rowTruncated ? `showing first ${CSV_RENDER_ROW_LIMIT} rows` : "",
+    columnTruncated ? `showing first ${CSV_RENDER_COLUMN_LIMIT} columns` : ""
+  ].filter(Boolean).join(" · ");
+
+  return `<section class="artifact-csv">
+    <p class="artifact-csv-note">${escapeHtml(notes)}</p>
+    <div class="artifact-table-scroll">
+      <table class="artifact-table">
+        <thead><tr>${headerHtml}</tr></thead>
+        <tbody>${bodyHtml}</tbody>
+      </table>
+    </div>
+  </section>`;
+}
+
+function parseCsv(content) {
+  const text = String(content || "");
+  const rows = [];
+  let row = [];
+  let cell = "";
+  let inQuotes = false;
+
+  for (let index = 0; index < text.length; index += 1) {
+    const char = text[index];
+    if (char === "\"") {
+      if (inQuotes && text[index + 1] === "\"") {
+        cell += "\"";
+        index += 1;
+      } else {
+        inQuotes = !inQuotes;
+      }
+    } else if (char === "," && !inQuotes) {
+      row.push(cell);
+      cell = "";
+    } else if ((char === "\n" || char === "\r") && !inQuotes) {
+      if (char === "\r" && text[index + 1] === "\n") {
+        index += 1;
+      }
+      row.push(cell);
+      if (row.length > 1 || row[0] !== "") {
+        rows.push(row);
+      }
+      row = [];
+      cell = "";
+    } else {
+      cell += char;
+    }
+  }
+
+  if (inQuotes) {
+    return { ok: false, error: "unterminated quoted field", rows: [] };
+  }
+  row.push(cell);
+  if (row.length > 1 || row[0] !== "") {
+    rows.push(row);
+  }
+  return { ok: true, rows };
+}
+
+function renderSarif(content) {
+  let sarif;
+  try {
+    sarif = JSON.parse(content);
+  } catch {
+    return `<section class="artifact-sarif">
+      <p class="artifact-sarif-note">Invalid SARIF JSON. Showing escaped source.</p>
+      <pre class="artifact-code"><code>${escapeHtml(content)}</code></pre>
+    </section>`;
+  }
+
+  if (!isSarifDocument(sarif)) {
+    return `<section class="artifact-sarif">
+      <p class="artifact-sarif-note">This JSON does not match the expected SARIF top-level shape. Showing formatted JSON.</p>
+      <pre class="artifact-code"><code>${escapeHtml(formatJson(content))}</code></pre>
+    </section>`;
+  }
+
+  const results = collectSarifResults(sarif);
+  const counts = countBy(results, (result) => result.level);
+  const visibleResults = results.slice(0, SARIF_RENDER_RESULT_LIMIT);
+  const rowHtml = visibleResults.map((result) => `<tr>
+    <td><span class="sarif-level ${escapeAttribute(result.level)}">${escapeHtml(result.level)}</span></td>
+    <td>${escapeHtml(result.ruleId)}</td>
+    <td>${escapeHtml(result.message)}</td>
+    <td>${escapeHtml(result.location)}</td>
+    <td>${escapeHtml(result.tool)}</td>
+  </tr>`).join("\n");
+  const note = results.length > SARIF_RENDER_RESULT_LIMIT
+    ? `Showing first ${SARIF_RENDER_RESULT_LIMIT} of ${results.length} results.`
+    : `${results.length} results.`;
+
+  return `<section class="artifact-sarif">
+    <div class="artifact-summary-grid">
+      ${summaryCard("Runs", sarif.runs.length)}
+      ${summaryCard("Results", results.length)}
+      ${summaryCard("Errors", counts.error || 0)}
+      ${summaryCard("Warnings", counts.warning || 0)}
+      ${summaryCard("Notes", counts.note || 0)}
+    </div>
+    <p class="artifact-sarif-note">${escapeHtml(note)}</p>
+    <div class="artifact-table-scroll">
+      <table class="artifact-table">
+        <thead><tr><th>Level</th><th>Rule</th><th>Message</th><th>Location</th><th>Tool</th></tr></thead>
+        <tbody>${rowHtml}</tbody>
+      </table>
+    </div>
+    <details class="artifact-raw-details">
+      <summary>Raw SARIF JSON</summary>
+      <pre class="artifact-code"><code>${escapeHtml(formatJson(content))}</code></pre>
+    </details>
+  </section>`;
+}
+
+function isSarifDocument(value) {
+  return value &&
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    Array.isArray(value.runs) &&
+    (typeof value.version === "string" || String(value.$schema || "").toLowerCase().includes("sarif"));
+}
+
+function collectSarifResults(sarif) {
+  return sarif.runs.flatMap((run) => {
+    const tool = run?.tool?.driver?.name || run?.tool?.driver?.fullName || "unknown";
+    const rules = new Map();
+    for (const [index, rule] of (run?.tool?.driver?.rules || []).entries()) {
+      if (rule?.id) {
+        rules.set(rule.id, rule);
+      }
+      rules.set(index, rule);
+    }
+    return (run?.results || []).map((result) => {
+      const rule = rules.get(result.ruleId) || rules.get(result.ruleIndex);
+      return {
+        level: normalizeSarifLevel(result.level || rule?.defaultConfiguration?.level),
+        ruleId: result.ruleId || rule?.id || (Number.isInteger(result.ruleIndex) ? `#${result.ruleIndex}` : "unknown"),
+        message: sarifMessage(result.message) || sarifMessage(rule?.shortDescription) || sarifMessage(rule?.fullDescription) || "",
+        location: sarifLocation(result),
+        tool
+      };
+    });
+  });
+}
+
+function normalizeSarifLevel(value) {
+  const normalized = String(value || "warning").toLowerCase();
+  return ["error", "warning", "note", "none"].includes(normalized) ? normalized : "warning";
+}
+
+function sarifMessage(message) {
+  if (!message || typeof message !== "object") {
+    return "";
+  }
+  return String(message.text || message.markdown || "").trim();
+}
+
+function sarifLocation(result) {
+  const physical = result?.locations?.[0]?.physicalLocation;
+  const uri = physical?.artifactLocation?.uri || physical?.artifactLocation?.uriBaseId || "";
+  const region = physical?.region || {};
+  const line = Number.isInteger(region.startLine) ? region.startLine : "";
+  const column = Number.isInteger(region.startColumn) ? region.startColumn : "";
+  return [
+    uri || "unknown",
+    line ? `:${line}` : "",
+    column ? `:${column}` : ""
+  ].join("");
+}
+
+function countBy(values, keyFn) {
+  return values.reduce((counts, value) => {
+    const key = keyFn(value);
+    counts[key] = (counts[key] || 0) + 1;
+    return counts;
+  }, {});
+}
+
+function summaryCard(label, value) {
+  return `<div class="summary-card"><span>${escapeHtml(label)}</span><strong>${escapeHtml(value)}</strong></div>`;
+}
+
 function formatJson(content) {
   try {
     return JSON.stringify(JSON.parse(content), null, 2);