sample.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Sample report — Q3 payments incident (demo)</title>
    <style>
      :root {
        --page: #fff;
        --fg: #18181b;
        --fg-muted: #71717a;
        --border: #e4e4e7;
        --surface: #f4f4f5;
        --accent: #2028ff;
        --accent-soft: #eef0ff;
        --danger: #dc2626;
        --warning: #d97706;
        --success: #16a34a;
      }

      /*
        Opt in to the slashdocs reader theme. The render bridge sets
        data-slashdocs-theme="light"|"dark" on <html> and keeps it in sync with
        the app's theme toggle. Documents that ignore this attribute keep
        their own look, so this block is the only thing wiring us in.
      */
      :root[data-slashdocs-theme="dark"] {
        --page: #0b0d12;
        --fg: #e7ecf3;
        --fg-muted: #9aa3b2;
        --border: #232733;
        --surface: #171a21;
        --accent: #8b93ff;
        --accent-soft: #1b2030;
        --danger: #f87171;
        --warning: #fbbf24;
        --success: #4ade80;
      }
      html { color-scheme: light; }
      :root[data-slashdocs-theme="dark"] { color-scheme: dark; }
      * { box-sizing: border-box; }
      body {
        font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI",
          Inter, system-ui, sans-serif;
        color: var(--fg);
        background: var(--page);
        margin: 0;
        padding: 40px 24px 80px;
      }
      .wrap { max-width: 760px; margin: 0 auto; }
      h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.01em; }
      h2 { font-size: 18px; margin: 32px 0 10px; }
      h3 { font-size: 14px; margin: 20px 0 6px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.06em; }
      p { margin: 0 0 12px; }
      .meta {
        display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
        font-size: 12px; color: var(--fg-muted);
        margin-bottom: 24px;
      }
      .pill {
        display: inline-flex; align-items: center; padding: 2px 8px;
        border-radius: 999px; font-size: 11px; font-weight: 600;
      }
      .pill.sev { background: #fee2e2; color: var(--danger); }
      .pill.tag { background: var(--surface); color: var(--fg); }
      .pill.ok { background: #dcfce7; color: var(--success); }

      /* Inline code only — do not stack inside <pre>. */
      :not(pre) > code {
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 13px;
        background: var(--surface);
        padding: 1px 5px;
        border-radius: 4px;
      }
      pre {
        background: #0b0d12;
        color: #e4e4e7;
        padding: 14px 16px;
        border-radius: 8px;
        font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
        overflow-x: auto;
        margin: 8px 0 16px;
      }
      pre code, pre * {
        background: transparent !important;
        color: inherit !important;
        padding: 0 !important;
      }
      .tok-kw { color: #c084fc; }
      .tok-fn { color: #93c5fd; }
      .tok-str { color: #86efac; }
      .tok-cmt { color: #71717a; font-style: italic; }

      table {
        width: 100%; border-collapse: collapse; margin: 8px 0 16px;
        font-size: 13px;
      }
      th, td {
        text-align: left; padding: 8px 10px;
        border-bottom: 1px solid var(--border);
      }
      th { font-weight: 600; color: var(--fg-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
      .num { font-family: ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }

      /* Stacked bar inside table cells */
      .bar {
        display: inline-block;
        height: 6px;
        border-radius: 3px;
        background: var(--accent);
        vertical-align: middle;
      }
      .bar.warn { background: var(--warning); }
      .bar.bad { background: var(--danger); }

      .chart {
        display: flex; align-items: flex-end; gap: 4px;
        height: 90px; padding: 8px;
        background: var(--surface); border-radius: 8px;
        margin: 8px 0 4px;
        position: relative;
      }
      .chart > div {
        flex: 1; border-radius: 3px 3px 0 0;
        background: var(--accent); opacity: 0.85;
        position: relative;
        transition: opacity 0.15s;
      }
      .chart > div:hover { opacity: 1; }
      .chart > div::after {
        content: attr(data-label);
        position: absolute;
        bottom: -16px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 9px;
        color: var(--fg-muted);
      }
      .chart .hi { background: var(--danger); }
      .chart-cap { font-size: 11px; color: var(--fg-muted); margin: 24px 0 16px; }

      ul { padding-left: 20px; margin: 4px 0 12px; }
      li { margin-bottom: 6px; }

      .callout {
        border-left: 3px solid var(--accent);
        background: var(--accent-soft);
        padding: 10px 14px;
        border-radius: 0 8px 8px 0;
        margin: 16px 0;
        font-size: 13.5px;
      }
      .callout.warn { border-left-color: var(--warning); background: var(--accent-soft); }

      details {
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 10px 14px;
        margin: 8px 0 14px;
        background: var(--page);
      }
      details > summary {
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
      }
      details[open] > summary { margin-bottom: 10px; }

      .timeline {
        position: relative;
        padding-left: 16px;
        border-left: 2px solid var(--border);
      }
      .timeline > .ev {
        position: relative;
        padding-bottom: 14px;
      }
      .timeline > .ev::before {
        content: "";
        position: absolute;
        left: -22px;
        top: 6px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: var(--accent);
        border: 2px solid #fff;
        box-shadow: 0 0 0 1px var(--border);
      }
      .timeline > .ev.bad::before { background: var(--danger); }
      .timeline > .ev.ok::before { background: var(--success); }
      .timeline .t {
        font-family: ui-monospace, Menlo, monospace;
        font-size: 12px;
        color: var(--fg-muted);
        margin-right: 8px;
      }

      /* KV-backed action-item checklist */
      ul.todo { list-style: none; padding-left: 0; }
      ul.todo li { margin-bottom: 2px; }
      ul.todo label {
        display: flex; gap: 10px; align-items: baseline;
        padding: 6px 8px; border-radius: 6px; cursor: pointer;
      }
      ul.todo label:hover { background: var(--surface); }
      ul.todo input { accent-color: var(--accent); }
      ul.todo input:checked + span {
        color: var(--fg-muted);
        text-decoration: line-through;
      }

      .footer {
        margin-top: 40px; padding-top: 16px;
        border-top: 1px solid var(--border);
        font-size: 12px; color: var(--fg-muted);
      }
      svg.flow { width: 100%; height: auto; }

      a.cite {
        text-decoration: none;
        background: var(--accent-soft);
        color: var(--accent);
        padding: 0 4px;
        border-radius: 3px;
        font-size: 11px;
        vertical-align: super;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <h1>Q3 payments incident — postmortem</h1>
      <div class="meta">
        <span>Sept 14, 2025</span>
        <span>·</span>
        <span class="pill sev">Sev-1</span>
        <span>·</span>
        <span class="pill ok">resolved</span>
        <span>·</span>
        <span>owner: payments-platform</span>
        <span>·</span>
        <span class="pill tag">demo</span>
      </div>

      <div class="callout">
        This is a sample document the slashdocs setup guide handed your
        agent to publish. Try highlighting a sentence to leave an
        anchored comment — that's the whole point.
      </div>

      <h2>Summary</h2>
      <p>
        On Sept 14, the payments API returned <code>5xx</code> errors
        for roughly 12 minutes during the impact window, affecting
        3.2% of merchants. The root cause was a stale connection
        being returned from the upstream pool after the idle timeout
        elapsed mid-request<a class="cite" href="#timeline">[1]</a>.
      </p>

      <h2>Impact</h2>
      <table>
        <thead>
          <tr>
            <th>Metric</th>
            <th>Value</th>
            <th>Severity</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Failed requests</td>
            <td class="num">14,203</td>
            <td><span class="bar bad" style="width: 78%"></span></td>
          </tr>
          <tr>
            <td>Merchants affected</td>
            <td class="num">3.2%</td>
            <td><span class="bar warn" style="width: 38%"></span></td>
          </tr>
          <tr>
            <td>Revenue at risk</td>
            <td class="num">$48,200</td>
            <td><span class="bar warn" style="width: 52%"></span></td>
          </tr>
          <tr>
            <td>Time to detect</td>
            <td class="num">2m 14s</td>
            <td><span class="bar" style="width: 22%"></span></td>
          </tr>
          <tr>
            <td>Time to mitigate</td>
            <td class="num">11m 48s</td>
            <td><span class="bar warn" style="width: 60%"></span></td>
          </tr>
        </tbody>
      </table>

      <h2>Error rate during the incident</h2>
      <div class="chart" aria-label="Error rate timeline">
        <div style="height:14%" data-label="14:02"></div>
        <div style="height:18%" data-label=""></div>
        <div style="height:16%" data-label=""></div>
        <div style="height:22%" data-label="14:10"></div>
        <div class="hi" style="height:88%" data-label=""></div>
        <div class="hi" style="height:95%" data-label="14:13"></div>
        <div class="hi" style="height:76%" data-label=""></div>
        <div style="height:30%" data-label=""></div>
        <div style="height:14%" data-label="14:22"></div>
        <div style="height:11%" data-label=""></div>
        <div style="height:9%" data-label=""></div>
        <div style="height:10%" data-label="14:32"></div>
      </div>
      <div class="chart-cap">
        Red bars mark the 5xx spike window. Returned to baseline at 14:23.
      </div>

      <h2>Architecture diagram</h2>
      <svg class="flow" viewBox="0 0 580 160" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L10,5 L0,10 Z" fill="#71717a" />
          </marker>
          <marker id="arr-bad" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto">
            <path d="M0,0 L10,5 L0,10 Z" fill="#dc2626" />
          </marker>
        </defs>
        <g font-family="ui-sans-serif, system-ui" font-size="12" fill="#18181b">
          <rect x="10" y="60" width="100" height="40" rx="8" fill="#f4f4f5" stroke="#e4e4e7"/>
          <text x="60" y="84" text-anchor="middle">Merchant</text>

          <rect x="160" y="60" width="120" height="40" rx="8" fill="#eef0ff" stroke="#c7d2fe"/>
          <text x="220" y="84" text-anchor="middle">Payments API</text>

          <rect x="330" y="60" width="120" height="40" rx="8" fill="#f4f4f5" stroke="#e4e4e7"/>
          <text x="390" y="84" text-anchor="middle">Conn pool</text>

          <rect x="490" y="60" width="80" height="40" rx="8" fill="#fee2e2" stroke="#fecaca"/>
          <text x="530" y="84" text-anchor="middle">Upstream</text>

          <line x1="110" y1="80" x2="160" y2="80" stroke="#71717a" stroke-width="1.5" marker-end="url(#arr)"/>
          <line x1="280" y1="80" x2="330" y2="80" stroke="#71717a" stroke-width="1.5" marker-end="url(#arr)"/>
          <line x1="450" y1="80" x2="490" y2="80" stroke="#dc2626" stroke-width="1.8" marker-end="url(#arr-bad)" stroke-dasharray="4 3"/>

          <text x="470" y="55" text-anchor="middle" font-size="10" fill="#dc2626">stale conn</text>
        </g>
      </svg>

      <h2>Root cause</h2>
      <p>
        The connection pool's idle-timeout check ran <em>before</em>
        the context deadline check, so connections that had just
        crossed the idle threshold were returned for active requests
        and immediately rejected by the upstream.
      </p>
      <pre><span class="tok-kw">if</span> conn.<span class="tok-fn">IdleTimeout</span> &lt; ctx.<span class="tok-fn">Deadline</span>() {
  <span class="tok-cmt">// pool returned a stale conn → 5xx</span>
  <span class="tok-kw">return</span> ErrUpstream
}</pre>

      <details>
        <summary>The fix (one-line reorder)</summary>
        <pre><span class="tok-kw">if</span> ctx.<span class="tok-fn">Deadline</span>() <span class="tok-cmt">// check deadline first</span>
   &amp;&amp; conn.<span class="tok-fn">IdleTimeout</span> &gt; <span class="tok-fn">remaining</span>(ctx) {
  <span class="tok-kw">return</span> pool.<span class="tok-fn">Drop</span>(conn)
}</pre>
      </details>

      <h2 id="timeline">Timeline</h2>
      <div class="timeline">
        <div class="ev"><span class="t">14:02</span>Deploy of upstream-pool <code>v1.7.3</code>.</div>
        <div class="ev bad"><span class="t">14:11</span>Error-rate alert fires (p99 latency &gt; 2s).</div>
        <div class="ev"><span class="t">14:13</span>On-call paged.</div>
        <div class="ev"><span class="t">14:18</span>Rollback initiated.</div>
        <div class="ev ok"><span class="t">14:23</span>Error rate back to baseline.</div>
      </div>

      <h2>Action items</h2>
      <p class="chart-cap" style="margin: 0 0 8px">
        This checklist is live: state is stored in the document's KV
        store (<code>window.slashdocs.kv</code>), persists across reloads,
        and is shared with everyone viewing this document.
        Ctrl/Cmd+Z undoes your last change.
      </p>
      <ul class="todo">
        <li>
          <label>
            <input type="checkbox" data-kv="action:pool-order" />
            <span>Reorder pool checks: deadline first, then idle timeout.</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-kv="action:synthetic-probe" />
            <span>Add a synthetic probe for stale-conn behavior on every release.</span>
          </label>
        </li>
        <li>
          <label>
            <input type="checkbox" data-kv="action:alert-threshold" />
            <span>Raise alert sensitivity for payment-success-rate dips below 99.5%.</span>
          </label>
        </li>
      </ul>

      <div class="callout warn">
        <b>Reviewer:</b> this paragraph deliberately contains a subtle
        ambiguity — try selecting the phrase
        <em>"during the impact window"</em> above and leaving a
        comment asking for the exact start and end times.
      </div>

      <div class="footer">
        Generated by the slashdocs setup guide. This is a demo file —
        delete it after exploring.
      </div>
    </div>

    <script>
      // KV store demo: persist the action-item checkboxes in the
      // document-scoped KV store (see `slashdocs guidelines interactivity kv`).
      // State survives reloads, is shared with every viewer of this
      // document, and local writes are undoable with Ctrl/Cmd+Z.
      (function () {
        var boxes = document.querySelectorAll("ul.todo input[data-kv]");

        // window.slashdocs is installed by the render bridge. Scripts that run
        // before it exists can queue calls via window.__slashdocsKVQueue; the
        // bridge drains the queue on install. Opened as a plain file, the
        // queue is never drained and the checklist simply stays local.
        function kv(op) {
          var args = Array.prototype.slice.call(arguments, 1);
          return new Promise(function (resolve, reject) {
            var api = window.slashdocs && window.slashdocs.kv;
            if (api && api[op]) return api[op].apply(api, args).then(resolve, reject);
            (window.__slashdocsKVQueue = window.__slashdocsKVQueue || []).push({
              op: op, args: args, resolve: resolve, reject: reject,
            });
          });
        }

        function applySnapshot(items) {
          boxes.forEach(function (box) {
            box.checked = !!items[box.dataset.kv];
          });
        }

        boxes.forEach(function (box) {
          box.addEventListener("change", function () {
            // null is the KV delete sentinel: unchecking removes the key
            // instead of storing `false` forever.
            kv("set", box.dataset.kv, box.checked ? true : null);
          });
        });

        // Initial paint. all() resolves once the bridge is ready and hydrated.
        kv("all").then(applySnapshot);

        // Repaint on every KV event: hydrate carries a full `items` snapshot,
        // writes (set/patch/undo/redo, local or remote) carry `changes`.
        window.addEventListener("kvchange", function (e) {
          var detail = e.detail || {};
          if (detail.items) return applySnapshot(detail.items);
          (detail.changes || []).forEach(function (change) {
            boxes.forEach(function (box) {
              if (box.dataset.kv === change.key) {
                box.checked = !change.deleted && !!change.value;
              }
            });
          });
        });
      })();
    </script>
  </body>
</html>