npm - replay-labs - Versions diffs - 0.1.0 - Mend

replay-labs 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/LICENSE +22 -0
package/README.md +134 -0
package/examples/password-reset-transcript.md +27 -0
package/examples/password-reset.diff +101 -0
package/package.json +47 -0
package/scripts/capture-git-working-diff.js +56 -0
package/scripts/create-added-files-diff.js +33 -0
package/scripts/extract-claude-transcript.js +86 -0
package/scripts/extract-codex-transcript.js +119 -0
package/src/cli.js +316 -0
package/src/discovery.js +715 -0
package/src/generate.js +406 -0
package/src/ingest.js +124 -0
package/src/interaction.js +1161 -0
package/src/lab-ui.js +1339 -0
package/src/modules.js +643 -0
package/src/overview.js +147 -0
package/src/patterns.js +322 -0
package/src/pipeline.js +68 -0
package/src/report.js +516 -0
package/src/review.js +238 -0
package/src/server.js +199 -0
package/src/storage.js +34 -0

package/src/overview.js ADDED Viewed

@@ -0,0 +1,147 @@
+// Session map: the landing page for a session's labs.
+// "This session contains N decisions. Start with X."
+export function generateOverviewHtml({ goal, labs }) {
+  const rich = labs.filter((l) => l.rich);
+  const primary = rich[0] || labs[0];
+  const cards = labs.map((lab, index) => labCard(lab, index)).join("");
+  const hasReadyLabs = rich.length > 0;
+  const hasDecisionSignals = labs.length > 0;
+  const decisionWord = labs.length === 1 ? "decision" : "decisions";
+  const decisionNoun = labs.length === 1 ? "decision signal" : "decision signals";
+  const headline = hasReadyLabs
+    ? `This session contains <em>${labs.length} ${decisionWord}</em>. Start with ${escapeHtml(primary.module.name)}.`
+    : hasDecisionSignals
+      ? `Replay Labs found <em>${labs.length} ${decisionNoun}</em>, but no practice lab is ready yet.`
+      : "Replay did not find enough decision evidence in this session.";
+  const subcopy = hasReadyLabs
+    ? "Use the lab to practice the decision: diagnose it, test the failure mode, repair it, and transfer it to a future session."
+    : hasDecisionSignals
+      ? "Replay Labs found decision signals, but it did not find enough concrete code evidence to build a practice lab."
+      : "This session may still be useful to read, but Replay cannot honestly turn it into a decision map or lab yet.";
+  const foot = hasReadyLabs
+    ? `Ready labs use this session's diff and transcript. Pattern catalog: ${
+        rich.map((l) => `<a href="patterns/${l.module.id}.html">${escapeHtml(l.module.name)}</a>`).join(" · ")
+      }`
+    : hasDecisionSignals
+      ? "No lab link is shown because this session only had weak or indirect evidence."
+      : "No decision map is shown because Replay did not find enough decision evidence.";
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Session map — Replay</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #0c0e11; --panel: #14171c; --panel2: #191d23;
+    --line: #242a32; --line2: #303845;
+    --ink: #e9e7e2; --muted: #98a1ac; --faint: #67707c;
+    --accent: #34d399; --accent-dim: #34d39922; --accent-ink: #052e1e;
+    --fail: #f87171; --warn: #fbbf24;
+    --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  * { box-sizing: border-box; }
+  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans);
+    font-size: 15.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
+  ::selection { background: var(--accent); color: var(--accent-ink); }
+  a { color: var(--accent); text-decoration: none; }
+  header.top { display: flex; align-items: center; padding: 14px 28px; border-bottom: 1px solid var(--line); }
+  .wordmark { font-family: var(--mono); font-weight: 700; font-size: 15px; }
+  .wordmark em { color: var(--accent); font-style: normal; }
+  .wordmark span { color: var(--faint); font-weight: 400; margin-left: 10px; font-size: 12px;
+    letter-spacing: .12em; text-transform: uppercase; }
+  main { max-width: 880px; margin: 0 auto; padding: 52px 24px 90px; }
+  .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
+    color: var(--faint); margin-bottom: 16px; }
+  .eyebrow b { color: var(--accent); font-weight: 700; }
+  h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 14px; max-width: 720px; }
+  h1 em { font-style: normal; color: var(--accent); }
+  .sub { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 0 10px; }
+  .goal { color: var(--faint); font-size: 13.5px; margin: 0 0 38px; }
+  .list { display: grid; gap: 14px; }
+  .lab-card { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 18px; align-items: center;
+    background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px;
+    color: inherit; transition: border-color .15s, transform .15s; }
+  a.lab-card:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
+  .lab-card.primary { border-color: var(--accent); background: linear-gradient(135deg, #34d39910, var(--panel) 50%); }
+  .lab-card.locked { opacity: .62; }
+  .rank { font-family: var(--mono); font-size: 22px; font-weight: 700; color: var(--faint); }
+  .lab-card.primary .rank { color: var(--accent); }
+  .lab-card h3 { margin: 0 0 4px; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
+  .lab-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
+  .tags { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
+  .tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
+    border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; color: var(--faint); }
+  .tag.smell { color: var(--fail); border-color: #f8717133; }
+  .tag.start { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); font-weight: 700; }
+  .cta-col { text-align: right; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
+  .lab-card.locked .cta-col { color: var(--faint); }
+  .foot { margin-top: 36px; color: var(--faint); font-size: 13px; }
+  .foot a { font-weight: 600; }
+  .recovery { display:flex; gap:10px; flex-wrap:wrap; margin: 24px 0 0; }
+  .recovery a { border:1px solid var(--line2); border-radius:8px; padding:9px 12px; color:var(--ink); font-weight:700; }
+  .recovery a.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
+  @media (max-width: 700px) {
+    h1 { font-size: 30px; }
+    .lab-card { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
+    .rank { font-size: 16px; }
+    .cta-col { text-align: left; }
+  }
+</style>
+</head>
+<body>
+<header class="top"><div class="wordmark">replay labs<em>.</em><span>Session map</span></div></header>
+<main>
+  <div class="eyebrow"><b>Session analyzed</b> · decisions sorted by available evidence</div>
+  <h1>${headline}</h1>
+  <p class="sub">${escapeHtml(subcopy)}</p>
+  <p class="goal">Session goal: ${escapeHtml(goal)}</p>
+  ${hasReadyLabs ? "" : `<div class="recovery"><a class="primary" href="/inbox">Choose another session</a><a href="/inbox">Back to inbox</a></div>`}
+  <div class="list">${cards}</div>
+  <p class="foot">${foot}</p>
+</main>
+</body>
+</html>`;
+}
+function labCard(lab, index) {
+  const rank = String(index + 1).padStart(2, "0");
+  const m = lab.module;
+  const inner = `
+    <div class="rank">${rank}</div>
+    <div>
+      <h3>${escapeHtml(m.name)}</h3>
+      <p>${escapeHtml(firstSentence(m.why))}</p>
+      <div class="tags">
+        ${index === 0 && lab.rich ? '<span class="tag start">Start here</span>' : ""}
+        ${lab.generated ? '<span class="tag" style="color:var(--accent);border-color:#34d39944">generated</span>' : ""}
+        <span class="tag smell">smell: ${escapeHtml(m.challenge.smell)}</span>
+        <span class="tag">${escapeHtml(m.challenge.proof || "Transfer, not recall")}</span>
+        ${lab.rich && m.minutes ? `<span class="tag">≈ ${m.minutes} min</span>` : ""}
+      </div>
+    </div>
+    <div class="cta-col">${lab.rich ? "Enter lab →" : "Needs changed lines"}</div>`;
+  return lab.rich
+    ? `<a class="lab-card${index === 0 ? " primary" : ""}" href="labs/${m.id}.html">${inner}</a>`
+    : `<div class="lab-card locked">${inner}</div>`;
+}
+function firstSentence(text) {
+  // Split only on sentence-ending punctuation (not the dot in "Next.js").
+  const match = String(text).match(/^.+?[.!?](?=\s+[A-Z]|\s*$)/s);
+  return match ? match[0] : String(text);
+}
+function escapeHtml(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}

package/src/patterns.js ADDED Viewed

@@ -0,0 +1,322 @@
+// Pattern catalog: Refactoring-Guru-grade entries for AI-session decision patterns.
+// Each entry teaches intent, the smell it prevents, three implementation tiers,
+// when NOT to use it, and a review checklist the learner can carry forward.
+const RUNTIME_ILLO = `<svg viewBox="0 0 560 170" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Server and browser zones separated by the client boundary">
+  <rect x="10" y="20" width="240" height="130" rx="12" fill="#191d23" stroke="#303845"/>
+  <text x="30" y="48" fill="#67707c" font-family="JetBrains Mono, monospace" font-size="11" letter-spacing="2">SERVER</text>
+  <text x="30" y="76" fill="#98a1ac" font-family="Inter, sans-serif" font-size="13">renders first ·  no window,</text>
+  <text x="30" y="96" fill="#98a1ac" font-family="Inter, sans-serif" font-size="13">no mic, no localStorage</text>
+  <rect x="310" y="20" width="240" height="130" rx="12" fill="#34d39912" stroke="#34d399"/>
+  <text x="330" y="48" fill="#34d399" font-family="JetBrains Mono, monospace" font-size="11" letter-spacing="2">BROWSER</text>
+  <rect x="330" y="62" width="64" height="24" rx="6" fill="#0f1216" stroke="#303845"/>
+  <text x="362" y="78" fill="#98a1ac" font-family="JetBrains Mono, monospace" font-size="11" text-anchor="middle">window</text>
+  <rect x="402" y="62" width="48" height="24" rx="6" fill="#0f1216" stroke="#303845"/>
+  <text x="426" y="78" fill="#98a1ac" font-family="JetBrains Mono, monospace" font-size="11" text-anchor="middle">mic</text>
+  <rect x="458" y="62" width="76" height="24" rx="6" fill="#0f1216" stroke="#303845"/>
+  <text x="496" y="78" fill="#98a1ac" font-family="JetBrains Mono, monospace" font-size="11" text-anchor="middle">storage</text>
+  <line x1="280" y1="10" x2="280" y2="160" stroke="#34d399" stroke-dasharray="5 5"/>
+  <rect x="228" y="118" width="104" height="24" rx="12" fill="#34d399"/>
+  <text x="280" y="134" fill="#052e1e" font-family="JetBrains Mono, monospace" font-size="11" font-weight="700" text-anchor="middle">'use client'</text>
+  <line x1="120" y1="115" x2="252" y2="74" stroke="#f87171" stroke-width="1.5"/>
+  <text x="160" y="84" fill="#f87171" font-family="Inter, sans-serif" font-size="16" font-weight="700">✗</text>
+  <text x="74" y="132" fill="#f87171" font-family="Inter, sans-serif" font-size="11.5">server code reaching for browser APIs</text>
+</svg>`;
+const SECRET_ILLO = `<svg viewBox="0 0 560 200" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Browser, API route, and provider with the secret held server-side">
+  <rect x="10" y="30" width="150" height="110" rx="12" fill="#191d23" stroke="#303845"/>
+  <text x="30" y="58" fill="#67707c" font-family="JetBrains Mono, monospace" font-size="11" letter-spacing="2">BROWSER</text>
+  <text x="30" y="84" fill="#98a1ac" font-family="Inter, sans-serif" font-size="13">every visitor</text>
+  <text x="30" y="103" fill="#98a1ac" font-family="Inter, sans-serif" font-size="13">reads the bundle</text>
+  <rect x="205" y="30" width="150" height="110" rx="12" fill="#34d39912" stroke="#34d399"/>
+  <text x="225" y="58" fill="#34d399" font-family="JetBrains Mono, monospace" font-size="11" letter-spacing="2">API ROUTE</text>
+  <rect x="225" y="72" width="110" height="26" rx="6" fill="#0f1216" stroke="#34d399"/>
+  <text x="280" y="89" fill="#34d399" font-family="JetBrains Mono, monospace" font-size="11" text-anchor="middle">REDACTED_KEY</text>
+  <text x="225" y="122" fill="#98a1ac" font-family="Inter, sans-serif" font-size="12">the key never leaves</text>
+  <rect x="400" y="30" width="150" height="110" rx="12" fill="#191d23" stroke="#303845"/>
+  <text x="420" y="58" fill="#67707c" font-family="JetBrains Mono, monospace" font-size="11" letter-spacing="2">PROVIDER</text>
+  <text x="420" y="84" fill="#98a1ac" font-family="Inter, sans-serif" font-size="13">bills whoever</text>
+  <text x="420" y="103" fill="#98a1ac" font-family="Inter, sans-serif" font-size="13">holds the key</text>
+  <line x1="160" y1="70" x2="200" y2="70" stroke="#34d399" stroke-width="1.5"/>
+  <line x1="355" y1="70" x2="395" y2="70" stroke="#34d399" stroke-width="1.5"/>
+  <path d="M 80 145 Q 280 185 480 145" fill="none" stroke="#f87171" stroke-width="1.5" stroke-dasharray="5 5"/>
+  <text x="280" y="194" fill="#f87171" font-family="Inter, sans-serif" font-size="12" text-anchor="middle">✗ browser → provider directly: the key ships to everyone</text>
+</svg>`;
+export const PATTERNS = {
+  "runtime-boundary": {
+    name: "Runtime Boundary",
+    illustration: RUNTIME_ILLO,
+    tagline: "Decide which environment owns a behavior before you design the component.",
+    intent:
+      "Code that depends on browser-only capabilities (speech, microphone, geolocation, camera, localStorage) must live where those capabilities exist. The boundary is a design decision, not a syntax detail.",
+    problem:
+      "Frameworks like Next.js render components on the server first. Browser globals do not exist there. Code that reaches for them works in quick demos and dies in server rendering, hydration, or another user's browser.",
+    smell: {
+      name: "Browser API leak",
+      copy: "Server-rendered code touches window, navigator, speechSynthesis, or localStorage. The tell: it 'works in dev' and fails on build, deploy, or someone else's machine."
+    },
+    tiers: [
+      {
+        label: "Naive",
+        verdict: "Crashes during server rendering. No boundary decided at all.",
+        code: `export default function Page() {
+  const recognition = new window.SpeechRecognition();
+  localStorage.setItem("goals", "[]");
+}`
+      },
+      {
+        label: "Demo",
+        verdict: "Boundary decided. Honest for a single-user demo; still assumes every browser cooperates.",
+        code: `'use client';
+export default function Page() {
+  const recognition = new window.SpeechRecognition();
+  localStorage.setItem("goals", "[]");
+  // works in Chrome, on my machine, with mic allowed
+}`
+      },
+      {
+        label: "Production",
+        verdict: "Boundary + capability checks + designed failure states + a way to verify them.",
+        code: `'use client';
+import { useEffect, useState } from "react";
+type VoiceState = "ready" | "listening" | "unsupported" | "denied";
+export default function VoiceCheckIn() {
+  const [state, setState] = useState<VoiceState>("ready");
+  useEffect(() => {
+    const Recognition =
+      window.SpeechRecognition ?? window.webkitSpeechRecognition;
+    if (!Recognition) { setState("unsupported"); return; }
+  }, []);
+  async function start() {
+    try {
+      await navigator.mediaDevices.getUserMedia({ audio: true });
+      setState("listening");
+    } catch {
+      setState("denied");   // a designed state, not a surprise
+    }
+  }
+  if (state === "unsupported") return <TypeInsteadFallback />;
+  if (state === "denied") return <MicHelp onRetry={start} />;
+  return <CheckInUI onStart={start} listening={state === "listening"} />;
+}
+// verify: e2e run with mic permission denied + a browser without SpeechRecognition`
+      }
+    ],
+    whenNotToUse: [
+      "The behavior has no browser dependency — keep it on the server and skip the client bundle cost.",
+      "Secrets or provider SDK calls are involved — that is a Secret Boundary problem; 'use client' makes it worse, not better.",
+      "Reliability matters more than browser-native speed — consider server-driven capture (e.g. telephony/realtime audio) instead of patching browser gaps."
+    ],
+    checklist: [
+      "Where does this code run first — server or browser?",
+      "Every browser global behind a capability check?",
+      "Unsupported browser: what does the user see?",
+      "Permission denied: what does the user see?",
+      "How is each failure state verified before shipping?"
+    ],
+    related: [
+      { slug: "secret-boundary", name: "Secret Boundary", live: true, copy: "Keep provider credentials behind API routes. The opposite pull from Runtime Boundary: this code must NOT reach the browser." },
+      { slug: "demo-persistence", name: "Demo Persistence", copy: "A JSON file is honest demo persistence — if the constraint is named and the production step is obvious." },
+      { slug: "model-output-protocol", name: "Model Output Protocol", copy: "When LLM text drives app state, define a small protocol instead of parsing prose casually." }
+    ]
+  },
+  "secret-boundary": {
+    name: "Secret Boundary",
+    illustration: SECRET_ILLO,
+    tagline: "A secret's home decides the architecture: anything the browser can read, every visitor owns.",
+    intent:
+      "Provider credentials (model APIs, telephony, payments) must live in a runtime users cannot inspect. API routes exist so the browser can trigger trusted work without ever holding the key.",
+    problem:
+      "Client code is published code. Bundlers inline anything client-reachable — including env vars with a public prefix — into JavaScript that every visitor, scraper, and competitor can read. A leaked provider key becomes someone else's free infrastructure, billed to you.",
+    smell: {
+      name: "Key in the bundle",
+      copy: "A credential referenced anywhere client-reachable code can see it. The tell: NEXT_PUBLIC_ on something that is not public, or a provider SDK imported into a client component."
+    },
+    tiers: [
+      {
+        label: "Naive",
+        verdict: "The key is compiled into the bundle. Every visitor owns your account.",
+        code: `"use client";
+const KEY = process.env.NEXT_PUBLIC_ANTHROPIC_KEY;
+export async function askCoach(prompt: string) {
+  return fetch("https://api.anthropic.com/v1/messages", {
+    method: "POST",
+    headers: { "x-api-key": KEY ?? "" },
+    body: JSON.stringify({ messages: [{ role: "user", content: prompt }] })
+  }).then((r) => r.json());
+}`
+      },
+      {
+        label: "Demo",
+        verdict: "Boundary decided: the route owns the key. Honest for a demo; still trusts every input.",
+        code: `// app/api/chat/route.ts
+import { NextResponse } from "next/server";
+export async function POST(request: Request) {
+  const { prompt } = await request.json();
+  const res = await fetch("https://api.anthropic.com/v1/messages", {
+    method: "POST",
+    headers: { "x-api-key": process.env.ANTHROPIC_API_KEY! },
+    body: JSON.stringify({ model: "claude-sonnet-4-6",
+      max_tokens: 300, messages: [{ role: "user", content: prompt }] })
+  });
+  return NextResponse.json(await res.json());
+}`
+      },
+      {
+        label: "Production",
+        verdict: "Boundary + validation + safe errors + abuse limits. Strangers will find this endpoint.",
+        code: `// app/api/chat/route.ts
+import { NextResponse } from "next/server";
+export async function POST(request: Request) {
+  const { prompt } = await request.json().catch(() => ({}));
+  if (typeof prompt !== "string" || prompt.length === 0 || prompt.length > 2000) {
+    return NextResponse.json({ error: "invalid prompt" }, { status: 400 });
+  }
+  try {
+    const res = await fetch("https://api.anthropic.com/v1/messages", {
+      method: "POST",
+      headers: { "x-api-key": process.env.ANTHROPIC_API_KEY! },
+      body: JSON.stringify({ model: "claude-sonnet-4-6",
+        max_tokens: 300, messages: [{ role: "user", content: prompt }] })
+    });
+    if (!res.ok) throw new Error("provider " + res.status);
+    return NextResponse.json(await res.json());
+  } catch (error) {
+    console.error("chat route:", error);   // details stay server-side
+    return NextResponse.json({ error: "temporarily unavailable" }, { status: 502 });
+  }
+}
+// still missing for scale: rate limiting per IP/user — name it before launch`
+      }
+    ],
+    whenNotToUse: [
+      "Truly public config (a maps tile key scoped to your domain) — some keys are designed to be public; check the provider's scoping story first.",
+      "Browser-capability work (mic, camera, geolocation) — that is Runtime Boundary; an API route cannot reach the user's hardware.",
+      "When a provider offers scoped, short-lived client tokens minted by your server — use that pattern instead of proxying every byte."
+    ],
+    checklist: [
+      "Could any client-reachable file see this credential?",
+      "Does the env var name promise publication (NEXT_PUBLIC_)?",
+      "Is request input validated before the provider call?",
+      "Do error responses leak provider details or status internals?",
+      "What happens when a stranger scripts this endpoint all night?"
+    ],
+    related: [
+      { slug: "runtime-boundary", name: "Runtime Boundary", live: true, copy: "Decide which environment owns a behavior. The mirror image: that code MUST reach the browser." },
+      { slug: "demo-persistence", name: "Demo Persistence", copy: "A JSON file is honest demo persistence — if the constraint is named." },
+      { slug: "model-output-protocol", name: "Model Output Protocol", copy: "When LLM text drives app state, define a small protocol instead of parsing prose casually." }
+    ]
+  }
+};
+export function generatePatternHtml(slug) {
+  const p = PATTERNS[slug];
+  if (!p) throw new Error(`Unknown pattern: ${slug}`);
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>${esc(p.name)} — Replay Patterns</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
+<style>
+  :root { color-scheme: dark; --bg:#0c0e11; --ink:#e9e7e2; --muted:#98a1ac; --line:#242a32;
+    --paper:#14171c; --soft:#191d23; --green:#34d399; --red:#f87171; --gold:#fbbf24; }
+  * { box-sizing:border-box; }
+  body { margin:0; background:var(--bg); color:var(--ink);
+    font-family: "Inter", ui-sans-serif, system-ui, sans-serif; line-height:1.6;
+    -webkit-font-smoothing: antialiased; }
+  .wrap { max-width: 880px; margin: 0 auto; padding: 36px 24px 80px; }
+  .crumb { color:var(--muted); font-size:13px; font-weight:700; }
+  .crumb a { color: var(--green); text-decoration: none; }
+  h1 { font-size: 40px; margin: 8px 0 4px; }
+  .tagline { font-size: 19px; color: var(--muted); margin: 0 0 28px; }
+  h2 { font-size: 22px; margin: 34px 0 10px; }
+  .card { background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:18px; }
+  .smell { border-left: 4px solid var(--red); }
+  .smell b { color: var(--red); }
+  pre { margin:0; padding:14px; border-radius:8px; background:#24211d; color:#fff4df;
+    font-family: ui-monospace, Menlo, Consolas, monospace; font-size:13px; line-height:1.5;
+    overflow:auto; white-space:pre; }
+  .tier { margin-top: 14px; }
+  .tier-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
+  .badge { font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px;
+    font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing:.06em; }
+  .b-naive { background:#f8717122; color:var(--red); }
+  .b-demo { background:#fbbf2422; color:var(--gold); }
+  .b-prod { background:#34d39922; color:var(--green); }
+  .verdict { color:var(--muted); font-size:14px; }
+  ul { margin: 8px 0 0; padding-left: 20px; }
+  li { margin: 6px 0; }
+  .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin-top:12px; }
+  .rel { text-decoration:none; color:inherit; display:block; }
+  .rel b { color: var(--green); display:block; margin-bottom:6px; }
+  .rel span { color:var(--muted); font-size:14px; }
+  .checklist li::marker { content: "☐  "; }
+  .cta { display:inline-block; margin-top:26px; background:var(--green); color:#052e1e; font-weight:750;
+    padding: 11px 16px; border-radius:8px; text-decoration:none; }
+  pre { border: 1px solid var(--line); background:#0f1216; }
+  h1 { font-weight: 800; letter-spacing: -0.02em; }
+</style>
+</head>
+<body><div class="wrap">
+  <div class="crumb"><a href="../index.html">← session map</a> · <a href="../labs/${slug}.html">this pattern's lab</a> · Replay pattern catalog</div>
+  <h1>${esc(p.name)}</h1>
+  <p class="tagline">${esc(p.tagline)}</p>
+  ${p.illustration ? `<div class="card" style="padding:10px 14px">${p.illustration}</div>` : ""}
+  <h2>Intent</h2>
+  <div class="card"><p>${esc(p.intent)}</p></div>
+  <h2>Problem</h2>
+  <div class="card"><p>${esc(p.problem)}</p></div>
+  <h2>Smell: ${esc(p.smell.name)}</h2>
+  <div class="card smell"><p><b>${esc(p.smell.name)}.</b> ${esc(p.smell.copy)}</p></div>
+  <h2>Three tiers of the same decision</h2>
+  ${p.tiers.map((t, i) => `
+  <div class="tier">
+    <div class="tier-head">
+      <span class="badge ${i === 0 ? "b-naive" : i === 1 ? "b-demo" : "b-prod"}">${esc(t.label)}</span>
+      <span class="verdict">${esc(t.verdict)}</span>
+    </div>
+    <pre>${esc(t.code)}</pre>
+  </div>`).join("")}
+  <h2>When not to use it</h2>
+  <div class="card"><ul>${p.whenNotToUse.map((w) => `<li>${esc(w)}</li>`).join("")}</ul></div>
+  <h2>Review checklist</h2>
+  <div class="card"><ul class="checklist">${p.checklist.map((c) => `<li>${esc(c)}</li>`).join("")}</ul></div>
+  <h2>Related patterns</h2>
+  <div class="grid">
+    ${p.related.map((r) => r.live
+      ? `<a class="card rel" href="${esc(r.slug)}.html"><b>${esc(r.name)}</b><span>${esc(r.copy)} <em>Read the entry →</em></span></a>`
+      : `<div class="card rel"><b>${esc(r.name)}</b><span>${esc(r.copy)} <em>(lab coming next)</em></span></div>`).join("")}
+  </div>
+  <a class="cta" href="../labs/${slug}.html">Prove it in the lab →</a>
+</div></body></html>`;
+}
+function esc(value) {
+  return String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}

package/src/pipeline.js ADDED Viewed

@@ -0,0 +1,68 @@
+import { mkdir, readdir, rm, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+export async function buildSessionBundle({
+  goal,
+  diff,
+  transcript,
+  diffPath,
+  transcriptPath,
+  outDir,
+  generate = false,
+  maxGenerated = 1
+}) {
+  const { generateSessionLabs } = await import("./interaction.js");
+  const { generateOverviewHtml } = await import("./overview.js");
+  const { PATTERNS, generatePatternHtml } = await import("./patterns.js");
+  const destination = resolve(outDir);
+  const { labs } = await generateSessionLabs({
+    goal,
+    diff,
+    transcript,
+    diffPath,
+    transcriptPath,
+    generate,
+    cacheDir: resolve(destination, "generated"),
+    maxGenerated
+  });
+  await mkdir(resolve(destination, "labs"), { recursive: true });
+  await mkdir(resolve(destination, "patterns"), { recursive: true });
+  const files = [];
+  const expectedLabFiles = new Set(labs.filter((l) => l.rich).map((lab) => `${lab.module.id}.html`));
+  for (const entry of await readdir(resolve(destination, "labs")).catch(() => [])) {
+    if (entry.endsWith(".html") && !expectedLabFiles.has(entry)) {
+      await rm(resolve(destination, "labs", entry), { force: true });
+    }
+  }
+  for (const lab of labs.filter((l) => l.rich)) {
+    const labPath = resolve(destination, "labs", `${lab.module.id}.html`);
+    await writeFile(labPath, lab.html, "utf8");
+    files.push(labPath);
+  }
+  for (const slug of Object.keys(PATTERNS)) {
+    const patternPath = resolve(destination, "patterns", `${slug}.html`);
+    await writeFile(patternPath, generatePatternHtml(slug), "utf8");
+    files.push(patternPath);
+  }
+  const indexPath = resolve(destination, "index.html");
+  await writeFile(indexPath, generateOverviewHtml({ goal, labs }), "utf8");
+  files.push(indexPath);
+  return {
+    outDir: destination,
+    indexPath,
+    labs,
+    files
+  };
+}
+export function bundleSlug(value) {
+  return String(value || "session")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-|-$/g, "")
+    .slice(0, 64) || "session";
+}