npm - @polderlabs/bizar - Versions diffs - 9.0.0 → 10.0.7 - Mend

@polderlabs/bizar 9.0.0 → 10.0.7

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 (1306) hide show

package/.claude/worktrees/kanban-overhaul/bizar-dash/src/server/artifact-template.html DELETED Viewed

@@ -1,810 +0,0 @@
-<!doctype html>
-<!--
-  ============================================================================
-  BizarHarness Artifact Template
-  WHAT THIS IS
-  ============
-  A self-contained, opinionated HTML template for artifacts produced by
-  BizarHarness agents. It is a starting point — agents fill in the marked
-  placeholders and ship the rendered output as their deliverable.
-  HOW TO USE IT
-  =============
-  1. Copy this file.
-  2. Replace every {{PLACEHOLDER}} with the actual content for your task.
-     Required placeholders are listed in the Required Sections section
-     below; everything else is optional.
-  3. Drop the rendered HTML into the html-artifact fenced block:
-         ```html-artifact
-         {comment}artifact-name:My Report{comment-end}
-         <!doctype html>
-         ...your rendered artifact...
-         ```
-         ```
-     The first-line comment is optional; it sets the artifact's name in
-     the dashboard. If omitted, the dashboard falls back to a generic
-     "artifact-id" label.
-  4. Save the final HTML to disk or paste it into the chat. The
-     bg-poller in the dashboard scans every done agent output for the
-     html-artifact block, saves it to ~/.bizar/artifacts/, and links
-     it back to the originating task.
-  OUTPUT CONVENTION
-  =================
-  The convention the dashboard recognizes is:
-      ```html-artifact
-      {comment}artifact-name:Optional Name Here{comment-end}
-      ...HTML body...
-      ```
-  - The block MUST start with the literal fence ```html-artifact (or
-    ```htmlartifact; both are accepted) on its own line.
-  - The block MUST close with a plain ``` fence on its own line.
-  - The first HTML comment of the body, if present, may be
-    `{comment} artifact-name:Foo {comment-end}` to set the
-    artifact display name.
-  - Everything else is just HTML — keep it self-contained (no
-    external assets, no fetch calls to localhost).
-  REQUIRED SECTIONS
-  =================
-  The template below is organized as `<section data-section=...>`
-  elements. The dashboard does NOT parse these; they are conventions
-  for human readers. Replace the placeholders in:
-    - h1 title (Hero)                         : page H1
-    - hero-subtitle (Hero)                    : one-line subtitle
-    - meta-row (Hero)                         : date / agent / model
-    - stat-card x4 (Quick Stats)              : 3-4 numeric metrics
-    - summary-text (Summary)                  : TL;DR paragraph
-    - tab buttons + tab panels (Tabs)         : at least 3 tabs
-    - pre blocks (Code)                       : syntax-highlighted code
-    - steps (Steps)                           : ordered timeline
-    - files (Files)                           : list of files touched
-    - next-steps (Next Steps)                 : recommendations
-  OPTIONAL SECTIONS
-  =================
-  - Screenshots (paste a base64 or https URL into the img tag)
-  - Interactive demo (HTMX swap region + button)
-  - Charts (chart.js or hand-rolled SVG)
-  STYLE GUIDELINES
-  ================
-  - Use the supplied CSS custom properties (accent, surface-1, text-1)
-    so light/dark mode keeps working.
-  - Don't override the body font-family — the cascade handles it.
-  - Stick to Tailwind utility classes for layout. Custom CSS is fine
-    for unique components.
-  - Keep markup accessible: alt text on images, labels on inputs,
-    aria-labels on icon-only buttons.
-  DEPENDENCIES (CDN)
-  ==================
-  - htmx.org 1.9.x
-  - alpinejs 3.x
-  - tailwindcss 3.x (CDN play)
-  - highlight.js 11.x (code blocks)
-  - lucide icons (inline SVG recommended to keep offline-friendly)
-  ALL SCRIPT TAGS use `defer` to avoid blocking the parser.
-  ============================================================================
--->
-<html lang="en" data-theme="auto">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>{{ARTIFACT_TITLE}} — BizarHarness</title>
-  <!-- Tailwind CSS via CDN. Configured to respect dark mode + theme tokens. -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    // Tailwind play CDN: configure the design tokens so utility classes
-    // map to the CSS custom properties defined in :root below.
-    tailwind.config = {
-      darkMode: 'media',
-      theme: {
-        extend: {
-          fontFamily: {
-            sans: ['Inter', 'system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'sans-serif'],
-            mono: ['JetBrains Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
-            display: ['"Cal Sans"', 'Inter', 'system-ui', 'sans-serif'],
-          },
-          colors: {
-            accent: 'rgb(var(--accent) / <alpha-value>)',
-            surface: {
-              0: 'rgb(var(--surface-0) / <alpha-value>)',
-              1: 'rgb(var(--surface-1) / <alpha-value>)',
-              2: 'rgb(var(--surface-2) / <alpha-value>)',
-              3: 'rgb(var(--surface-3) / <alpha-value>)',
-            },
-            ink: {
-              0: 'rgb(var(--text-0) / <alpha-value>)',
-              1: 'rgb(var(--text-1) / <alpha-value>)',
-              2: 'rgb(var(--text-2) / <alpha-value>)',
-            },
-            line: 'rgb(var(--line) / <alpha-value>)',
-          },
-        },
-      },
-    };
-  </script>
-  <!-- Inter (UI) + JetBrains Mono (code) + Cal Sans (display). -->
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-  <link
-    rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"
-  />
-  <link
-    rel="stylesheet"
-    href="https://fonts.cdnfonts.com/css/cal-sans"
-  />
-  <!-- highlight.js for code blocks (atom-one-dark + atom-one-light). -->
-  <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
-    media="(prefers-color-scheme: dark)"
-  />
-  <link
-    rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.min.css"
-    media="(prefers-color-scheme: light)"
-  />
-  <style>
-    /* --------------------------------------------------------------------
-       Design tokens — light & dark variants
-       Light mode: warm white surfaces, indigo accent.
-       Dark mode: graphite surfaces, violet accent.
-       Agents may override --accent to brand their artifact.
-       -------------------------------------------------------------------- */
-    :root {
-      --accent: 99 102 241;        /* indigo-500 (light) */
-      --accent-strong: 79 70 229;  /* indigo-600 */
-      --surface-0: 250 250 252;    /* page bg (light) */
-      --surface-1: 255 255 255;    /* card bg (light) */
-      --surface-2: 244 244 248;    /* sunken (light) */
-      --surface-3: 228 228 235;    /* border-ish (light) */
-      --text-0: 17 24 39;          /* primary (light) */
-      --text-1: 55 65 81;          /* secondary (light) */
-      --text-2: 107 114 128;       /* tertiary (light) */
-      --line: 226 232 240;
-      --success: 16 185 129;
-      --warning: 245 158 11;
-      --danger: 239 68 68;
-    }
-    @media (prefers-color-scheme: dark) {
-      :root {
-        --accent: 167 139 250;     /* violet-400 */
-        --accent-strong: 139 92 246; /* violet-500 */
-        --surface-0: 9 9 11;       /* zinc-950 */
-        --surface-1: 17 17 23;     /* zinc-900 */
-        --surface-2: 24 24 31;     /* custom */
-        --surface-3: 39 39 48;
-        --text-0: 244 244 245;     /* zinc-100 */
-        --text-1: 212 212 216;     /* zinc-300 */
-        --text-2: 161 161 170;     /* zinc-400 */
-        --line: 39 39 48;
-        --success: 52 211 153;
-        --warning: 251 191 36;
-        --danger: 248 113 113;
-      }
-    }
-    /* Body / base typography. */
-    html, body {
-      background: rgb(var(--surface-0));
-      color: rgb(var(--text-0));
-      font-family: 'Inter', system-ui, sans-serif;
-      font-feature-settings: 'cv11', 'ss01', 'ss03';
-      -webkit-font-smoothing: antialiased;
-    }
-    .font-display { font-family: 'Cal Sans', 'Inter', system-ui, sans-serif; letter-spacing: -0.02em; }
-    .font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }
-    /* --------------------------------------------------------------------
-       Hero — gradient halo behind the title
-       -------------------------------------------------------------------- */
-    .hero {
-      position: relative;
-      overflow: hidden;
-      border-radius: 1.5rem;
-      background:
-        radial-gradient(ellipse at top left, rgb(var(--accent) / 0.12), transparent 60%),
-        radial-gradient(ellipse at bottom right, rgb(var(--accent-strong) / 0.10), transparent 60%),
-        linear-gradient(180deg, rgb(var(--surface-1)), rgb(var(--surface-1)));
-      border: 1px solid rgb(var(--line));
-    }
-    .hero::before {
-      content: "";
-      position: absolute;
-      inset: 0;
-      background-image:
-        linear-gradient(rgb(var(--line) / 0.4) 1px, transparent 1px),
-        linear-gradient(90deg, rgb(var(--line) / 0.4) 1px, transparent 1px);
-      background-size: 40px 40px;
-      mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
-      pointer-events: none;
-      opacity: 0.5;
-    }
-    .hero > * { position: relative; z-index: 1; }
-    /* --------------------------------------------------------------------
-       Cards / surfaces
-       -------------------------------------------------------------------- */
-    .card {
-      background: rgb(var(--surface-1));
-      border: 1px solid rgb(var(--line));
-      border-radius: 1rem;
-    }
-    .card-sunken {
-      background: rgb(var(--surface-2));
-      border: 1px solid rgb(var(--line));
-      border-radius: 0.75rem;
-    }
-    /* --------------------------------------------------------------------
-       Stat card
-       -------------------------------------------------------------------- */
-    .stat-card {
-      background: rgb(var(--surface-1));
-      border: 1px solid rgb(var(--line));
-      border-radius: 1rem;
-      padding: 1.25rem;
-      transition: transform 200ms ease, border-color 200ms ease;
-    }
-    .stat-card:hover {
-      transform: translateY(-2px);
-      border-color: rgb(var(--accent) / 0.5);
-    }
-    .stat-value {
-      font-family: 'Cal Sans', 'Inter', sans-serif;
-      font-size: 2.25rem;
-      line-height: 1;
-      letter-spacing: -0.03em;
-      color: rgb(var(--text-0));
-    }
-    .stat-delta-up   { color: rgb(var(--success)); }
-    .stat-delta-down { color: rgb(var(--danger));  }
-    .stat-delta-flat { color: rgb(var(--text-2));  }
-    /* --------------------------------------------------------------------
-       Tabs
-       -------------------------------------------------------------------- */
-    .tab-bar {
-      display: flex;
-      gap: 0.25rem;
-      padding: 0.25rem;
-      background: rgb(var(--surface-2));
-      border: 1px solid rgb(var(--line));
-      border-radius: 0.75rem;
-      overflow-x: auto;
-      scrollbar-width: none;
-    }
-    .tab-bar::-webkit-scrollbar { display: none; }
-    .tab {
-      flex: none;
-      padding: 0.5rem 1rem;
-      border-radius: 0.5rem;
-      font-weight: 500;
-      font-size: 0.875rem;
-      color: rgb(var(--text-1));
-      cursor: pointer;
-      transition: all 150ms ease;
-      user-select: none;
-    }
-    .tab:hover { color: rgb(var(--text-0)); }
-    .tab[aria-selected="true"] {
-      background: rgb(var(--surface-1));
-      color: rgb(var(--accent));
-      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
-    }
-    .tab-panel { display: none; }
-    .tab-panel[data-active] { display: block; animation: fadeIn 200ms ease; }
-    @keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
-    /* --------------------------------------------------------------------
-       Code blocks — pad the highlighted pre so line numbers (if any) align
-       -------------------------------------------------------------------- */
-    pre.codeblock {
-      background: #0d1117; /* GitHub dark — works on both light/dark */
-      color: #c9d1d9;
-      border-radius: 0.75rem;
-      padding: 1.25rem 1.5rem;
-      overflow-x: auto;
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.85rem;
-      line-height: 1.6;
-      border: 1px solid rgb(var(--line));
-    }
-    pre.codeblock code { font-family: inherit; }
-    /* --------------------------------------------------------------------
-       Steps timeline
-       -------------------------------------------------------------------- */
-    .step {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 1rem;
-      align-items: flex-start;
-      padding: 0.75rem 0;
-    }
-    .step-dot {
-      width: 1.75rem;
-      height: 1.75rem;
-      border-radius: 9999px;
-      background: rgb(var(--accent) / 0.12);
-      color: rgb(var(--accent));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-weight: 600;
-      font-size: 0.85rem;
-      flex: none;
-      border: 1px solid rgb(var(--accent) / 0.3);
-    }
-    .step-line {
-      width: 2px;
-      background: rgb(var(--line));
-      margin-left: 0.85rem;
-      flex: none;
-    }
-    /* --------------------------------------------------------------------
-       File rows
-       -------------------------------------------------------------------- */
-    .file-row {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0.625rem 0.75rem;
-      border-radius: 0.5rem;
-      font-family: 'JetBrains Mono', monospace;
-      font-size: 0.85rem;
-      transition: background 100ms ease;
-    }
-    .file-row:hover { background: rgb(var(--surface-2)); }
-    .file-icon {
-      width: 1rem;
-      height: 1rem;
-      flex: none;
-      color: rgb(var(--text-2));
-    }
-    /* --------------------------------------------------------------------
-       Pills / badges
-       -------------------------------------------------------------------- */
-    .pill {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.25rem;
-      padding: 0.125rem 0.625rem;
-      border-radius: 9999px;
-      font-size: 0.75rem;
-      font-weight: 500;
-      background: rgb(var(--surface-2));
-      color: rgb(var(--text-1));
-      border: 1px solid rgb(var(--line));
-    }
-    .pill-accent  { background: rgb(var(--accent) / 0.10); color: rgb(var(--accent)); border-color: rgb(var(--accent) / 0.3); }
-    .pill-success { background: rgb(var(--success) / 0.10); color: rgb(var(--success)); border-color: rgb(var(--success) / 0.3); }
-    .pill-warning { background: rgb(var(--warning) / 0.10); color: rgb(var(--warning)); border-color: rgb(var(--warning) / 0.3); }
-    /* --------------------------------------------------------------------
-       Footer signature
-       -------------------------------------------------------------------- */
-    .signature {
-      font-family: 'Cal Sans', 'Inter', sans-serif;
-      background: linear-gradient(120deg, rgb(var(--accent)), rgb(var(--accent-strong)));
-      -webkit-background-clip: text;
-      background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    /* --------------------------------------------------------------------
-       Small utility — clickable cursor on Alpine x-cloak hidden elements
-       -------------------------------------------------------------------- */
-    [x-cloak] { display: none !important; }
-    /* --------------------------------------------------------------------
-       Print: drop the gradient hero for a clean printout
-       -------------------------------------------------------------------- */
-    @media print {
-      .hero::before { display: none; }
-      .tab-bar { display: none; }
-      .tab-panel { display: block !important; }
-    }
-  </style>
-</head>
-<body class="min-h-screen antialiased">
-  <!-- ====================================================================
-       Top nav (lightweight — just a back-link + theme indicator)
-       ==================================================================== -->
-  <header class="border-b border-line">
-    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
-      <a href="/" class="flex items-center gap-2 text-ink-1 hover:text-ink-0 transition">
-        <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-          <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-        </svg>
-        <span class="font-medium text-sm">BizarHarness</span>
-      </a>
-      <div class="flex items-center gap-3 text-xs text-ink-2">
-        <span class="pill pill-accent">v3.5.5</span>
-        <span>{{AGENT_NAME}}</span>
-      </div>
-    </div>
-  </header>
-  <main class="max-w-6xl mx-auto px-6 py-10 space-y-12">
-    <!-- ================================================================
-         HERO — title, subtitle, metadata row
-         ================================================================ -->
-    <section class="hero px-8 py-12 md:px-12 md:py-16" data-section="hero" x-data="{ ts: new Date() }" x-init="() => {}">
-      <div class="flex flex-col gap-4">
-        <div class="flex items-center gap-2">
-          <span class="pill pill-success">
-            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M5 13l4 4L19 7"></path>
-            </svg>
-            Completed
-          </span>
-          <span class="pill">{{ARTIFACT_TYPE}}</span>
-          <span class="pill" x-text="ts.toLocaleString()">—</span>
-        </div>
-        <h1 class="font-display text-4xl md:text-5xl lg:text-6xl text-ink-0 leading-[1.05]">
-          {{ARTIFACT_TITLE}}
-        </h1>
-        <p class="hero-subtitle text-ink-1 text-lg md:text-xl max-w-3xl">
-          {{ARTIFACT_SUBTITLE}}
-        </p>
-        <!-- Meta row: date · agent · model · duration · tokens -->
-        <div class="meta-row mt-4 flex flex-wrap gap-x-6 gap-y-2 text-sm text-ink-2">
-          <div class="flex items-center gap-1.5">
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
-              <line x1="16" y1="2" x2="16" y2="6"></line>
-              <line x1="8" y1="2" x2="8" y2="6"></line>
-              <line x1="3" y1="10" x2="21" y2="10"></line>
-            </svg>
-            <span>{{DATE}}</span>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
-            </svg>
-            <span>{{AGENT_NAME}}</span>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="3"></circle>
-              <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"></path>
-            </svg>
-            <span>{{MODEL}}</span>
-          </div>
-          <div class="flex items-center gap-1.5">
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <circle cx="12" cy="12" r="10"></circle>
-              <polyline points="12 6 12 12 16 14"></polyline>
-            </svg>
-            <span>{{DURATION}}</span>
-          </div>
-        </div>
-      </div>
-    </section>
-    <!-- ================================================================
-         QUICK STATS — 3-4 metric cards
-         ================================================================ -->
-    <section data-section="stats">
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-        <div class="stat-card">
-          <div class="text-xs text-ink-2 uppercase tracking-wider font-medium">Lines changed</div>
-          <div class="stat-value mt-2">{{STAT_1_VALUE}}</div>
-          <div class="mt-2 text-xs stat-delta-up flex items-center gap-1">
-            <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 15l7-7 7 7"></path></svg>
-            <span>{{STAT_1_DELTA}}</span>
-          </div>
-        </div>
-        <div class="stat-card">
-          <div class="text-xs text-ink-2 uppercase tracking-wider font-medium">Files touched</div>
-          <div class="stat-value mt-2">{{STAT_2_VALUE}}</div>
-          <div class="mt-2 text-xs stat-delta-flat">{{STAT_2_NOTE}}</div>
-        </div>
-        <div class="stat-card">
-          <div class="text-xs text-ink-2 uppercase tracking-wider font-medium">Tests passing</div>
-          <div class="stat-value mt-2">{{STAT_3_VALUE}}</div>
-          <div class="mt-2 text-xs stat-delta-up">{{STAT_3_NOTE}}</div>
-        </div>
-        <div class="stat-card">
-          <div class="text-xs text-ink-2 uppercase tracking-wider font-medium">Tokens used</div>
-          <div class="stat-value mt-2">{{STAT_4_VALUE}}</div>
-          <div class="mt-2 text-xs stat-delta-down">{{STAT_4_NOTE}}</div>
-        </div>
-      </div>
-    </section>
-    <!-- ================================================================
-         SUMMARY — TL;DR paragraph
-         ================================================================ -->
-    <section data-section="summary" class="card p-8 md:p-10">
-      <div class="flex items-baseline justify-between mb-4">
-        <h2 class="font-display text-2xl text-ink-0">Summary</h2>
-        <span class="text-xs text-ink-2">TL;DR</span>
-      </div>
-      <p class="summary-text text-ink-1 text-base md:text-lg leading-relaxed">
-        {{SUMMARY_TEXT}}
-      </p>
-    </section>
-    <!-- ================================================================
-         TABS — Overview, Details, Code, Demo
-         ================================================================ -->
-    <section data-section="tabs" x-data="{ tab: 'overview' }">
-      <div class="tab-bar mb-6" role="tablist">
-        <button class="tab" :aria-selected="tab === 'overview'" @click="tab = 'overview'" role="tab">Overview</button>
-        <button class="tab" :aria-selected="tab === 'details'"  @click="tab = 'details'"  role="tab">Details</button>
-        <button class="tab" :aria-selected="tab === 'code'"     @click="tab = 'code'"     role="tab">Code</button>
-        <button class="tab" :aria-selected="tab === 'demo'"     @click="tab = 'demo'"     role="tab">Demo</button>
-      </div>
-      <!-- Overview tab -->
-      <div class="tab-panel" :data-active="tab === 'overview'" role="tabpanel">
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <div class="card p-6">
-            <h3 class="font-display text-xl mb-3 text-ink-0">What changed</h3>
-            <p class="text-ink-1 leading-relaxed">{{OVERVIEW_WHAT_CHANGED}}</p>
-          </div>
-          <div class="card p-6">
-            <h3 class="font-display text-xl mb-3 text-ink-0">Why it matters</h3>
-            <p class="text-ink-1 leading-relaxed">{{OVERVIEW_WHY_IT_MATTERS}}</p>
-          </div>
-        </div>
-      </div>
-      <!-- Details tab -->
-      <div class="tab-panel" :data-active="tab === 'details'" role="tabpanel">
-        <div class="card p-6">
-          <h3 class="font-display text-xl mb-3 text-ink-0">Details</h3>
-          <div class="prose text-ink-1 max-w-none">
-            <p>{{DETAILS_BODY}}</p>
-            <ul class="mt-4 space-y-2 list-disc list-inside text-ink-1">
-              <li>{{DETAILS_LI_1}}</li>
-              <li>{{DETAILS_LI_2}}</li>
-              <li>{{DETAILS_LI_3}}</li>
-            </ul>
-          </div>
-        </div>
-      </div>
-      <!-- Code tab -->
-      <div class="tab-panel" :data-active="tab === 'code'" role="tabpanel">
-        <div class="space-y-6">
-          <div>
-            <div class="flex items-center justify-between mb-2">
-              <h3 class="font-display text-xl text-ink-0">Primary change</h3>
-              <button
-                class="pill hover:bg-surface-3 transition"
-                onclick="navigator.clipboard.writeText(this.previousElementSibling.querySelector('code').innerText).then(() => this.textContent='Copied!').catch(() => this.textContent='Failed')"
-              >
-                Copy
-              </button>
-            </div>
-            <div>
-              <pre class="codeblock"><code class="language-javascript">// {{CODE_FILE_1}}
-{{CODE_SNIPPET_1}}</code></pre>
-            </div>
-          </div>
-          <div>
-            <h3 class="font-display text-xl mb-2 text-ink-0">Supporting code</h3>
-            <pre class="codeblock"><code class="language-bash">$ {{CODE_SNIPPET_2}}</code></pre>
-          </div>
-        </div>
-      </div>
-      <!-- Demo tab — interactive HTMX swap -->
-      <div class="tab-panel" :data-active="tab === 'demo'" role="tabpanel">
-        <div class="card p-6">
-          <h3 class="font-display text-xl mb-3 text-ink-0">Interactive demo</h3>
-          <p class="text-ink-1 mb-4">
-            Click the button — the dashboard fetches a small JSON snippet
-            from <code class="text-accent">/api/health</code> and swaps it
-            into the region below via HTMX. This is a live demo; HTMX is
-            the same library the dashboard uses for partial updates.
-          </p>
-          <!-- HTMX swap region. hx-get fires when the button is pressed. -->
-          <div
-            id="demo-region"
-            class="card-sunken p-4 font-mono text-sm text-ink-1 min-h-[5rem]"
-            hx-get="/api/health"
-            hx-trigger="demo-requested from:body"
-            hx-swap="innerHTML"
-          >
-            <span class="text-ink-2">// press the button to load /api/health</span>
-          </div>
-          <button
-            class="mt-4 inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent text-white font-medium hover:opacity-90 transition"
-            onclick="htmx.trigger('#demo-region', 'demo-requested')"
-          >
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <polyline points="23 4 23 10 17 10"></polyline>
-              <polyline points="1 20 1 14 7 14"></polyline>
-              <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"></path>
-            </svg>
-            Load /api/health
-          </button>
-        </div>
-      </div>
-    </section>
-    <!-- ================================================================
-         STEPS / TIMELINE — what the agent did, in order
-         ================================================================ -->
-    <section data-section="steps" class="card p-8">
-      <h2 class="font-display text-2xl text-ink-0 mb-6">Process</h2>
-      <ol class="space-y-2">
-        <li class="step">
-          <div class="step-dot">1</div>
-          <div>
-            <h4 class="font-medium text-ink-0">{{STEP_1_TITLE}}</h4>
-            <p class="text-ink-1 text-sm mt-1">{{STEP_1_DESC}}</p>
-          </div>
-        </li>
-        <li class="step">
-          <div class="step-dot">2</div>
-          <div>
-            <h4 class="font-medium text-ink-0">{{STEP_2_TITLE}}</h4>
-            <p class="text-ink-1 text-sm mt-1">{{STEP_2_DESC}}</p>
-          </div>
-        </li>
-        <li class="step">
-          <div class="step-dot">3</div>
-          <div>
-            <h4 class="font-medium text-ink-0">{{STEP_3_TITLE}}</h4>
-            <p class="text-ink-1 text-sm mt-1">{{STEP_3_DESC}}</p>
-          </div>
-        </li>
-        <li class="step">
-          <div class="step-dot">4</div>
-          <div>
-            <h4 class="font-medium text-ink-0">{{STEP_4_TITLE}}</h4>
-            <p class="text-ink-1 text-sm mt-1">{{STEP_4_DESC}}</p>
-          </div>
-        </li>
-      </ol>
-    </section>
-    <!-- ================================================================
-         FILES TOUCHED
-         ================================================================ -->
-    <section data-section="files" class="card p-8">
-      <h2 class="font-display text-2xl text-ink-0 mb-4">Files touched</h2>
-      <div class="space-y-1">
-        <div class="file-row">
-          <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"></path>
-            <polyline points="13 2 13 9 20 9"></polyline>
-          </svg>
-          <span class="flex-1 text-ink-1">{{FILE_1_PATH}}</span>
-          <span class="pill pill-success text-xs">{{FILE_1_DELTA}}</span>
-        </div>
-        <div class="file-row">
-          <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"></path>
-            <polyline points="13 2 13 9 20 9"></polyline>
-          </svg>
-          <span class="flex-1 text-ink-1">{{FILE_2_PATH}}</span>
-          <span class="pill pill-warning text-xs">{{FILE_2_DELTA}}</span>
-        </div>
-        <div class="file-row">
-          <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"></path>
-            <polyline points="13 2 13 9 20 9"></polyline>
-          </svg>
-          <span class="flex-1 text-ink-1">{{FILE_3_PATH}}</span>
-          <span class="pill text-xs">{{FILE_3_DELTA}}</span>
-        </div>
-      </div>
-    </section>
-    <!-- ================================================================
-         NEXT STEPS
-         ================================================================ -->
-    <section data-section="next-steps" class="card p-8">
-      <h2 class="font-display text-2xl text-ink-0 mb-4">Next steps</h2>
-      <ul class="space-y-3 text-ink-1">
-        <li class="flex items-start gap-3">
-          <span class="step-dot !w-6 !h-6 !text-xs">1</span>
-          <span>{{NEXT_STEP_1}}</span>
-        </li>
-        <li class="flex items-start gap-3">
-          <span class="step-dot !w-6 !h-6 !text-xs">2</span>
-          <span>{{NEXT_STEP_2}}</span>
-        </li>
-        <li class="flex items-start gap-3">
-          <span class="step-dot !w-6 !h-6 !text-xs">3</span>
-          <span>{{NEXT_STEP_3}}</span>
-        </li>
-      </ul>
-    </section>
-    <!-- ================================================================
-         FOOTER
-         ================================================================ -->
-    <footer class="border-t border-line pt-8 pb-12">
-      <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
-        <div>
-          <div class="text-xs text-ink-2 uppercase tracking-wider mb-1">Generated by</div>
-          <div class="signature text-2xl">{{AGENT_NAME}}</div>
-        </div>
-        <div class="flex items-center gap-3 text-sm">
-          <a href="/" class="text-ink-1 hover:text-ink-0 transition flex items-center gap-1.5">
-            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-              <path d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
-            </svg>
-            Dashboard
-          </a>
-          <span class="text-ink-3">·</span>
-          <a href="#" class="text-ink-1 hover:text-ink-0 transition">View task</a>
-          <span class="text-ink-3">·</span>
-          <a href="#" class="text-ink-1 hover:text-ink-0 transition">Share artifact</a>
-        </div>
-      </div>
-      <p class="text-xs text-ink-2 mt-4">
-        Built with HTMX · Alpine.js · Tailwind CSS · highlight.js
-      </p>
-    </footer>
-  </main>
-  <!-- HTMX, Alpine.js, highlight.js. All `defer` so they don't block. -->
-  <script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
-  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js" defer></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" defer></script>
-  <script>
-    // Once the page is fully loaded, syntax-highlight any <pre><code>
-    // blocks. The CDN script is `defer`-ed so we wait for it.
-    document.addEventListener('DOMContentLoaded', function () {
-      // highlight.js may have finished loading by DOMContentLoaded when
-      // the page is fast; otherwise poll briefly.
-      function tryHighlight(attempts) {
-        if (window.hljs) {
-          document.querySelectorAll('pre.codeblock code').forEach(function (el) {
-            try { window.hljs.highlightElement(el); } catch (e) { /* ignore */ }
-          });
-        } else if (attempts > 0) {
-          setTimeout(function () { tryHighlight(attempts - 1); }, 50);
-        }
-      }
-      tryHighlight(20);
-    });
-    // Tiny enhancement: format the HTMX demo response as pretty JSON
-    // (it arrives as a string when the response Content-Type is not
-    // application/json). We listen to htmx:afterSwap to re-render.
-    document.addEventListener('htmx:afterSwap', function (evt) {
-      if (evt.target && evt.target.id === 'demo-region') {
-        try {
-          const obj = JSON.parse(evt.target.textContent);
-          evt.target.textContent = JSON.stringify(obj, null, 2);
-        } catch (e) { /* leave as-is */ }
-      }
-    });
-  </script>
-</body>
-</html>