@drunkcoding/agents-and-skills 0.0.13 → 0.0.15

package/plugins/html-effectiveness/templates/09-slide-deck.html.tmpl

@@ -0,0 +1,535 @@
+<!--
+template: 09-slide-deck
+upstream: 09-slide-deck.html
+slots:
+  title: string  # replaces first <h1> innerHTML
+-->
+<!-- ============================================================
+       Slide 1 — Title
+       ============================================================ -->
+  <section class="slide title-slide" id="s1">
+    <div class="slide-inner">
+      <svg class="ornament" width="56" height="56" viewBox="0 0 56 56" aria-hidden="true">
+        <circle cx="28" cy="28" r="22" fill="none" stroke="#D1CFC5" stroke-width="1.5"/>
+        <path d="M16 28 H40 M28 16 V40" stroke="#D97757" stroke-width="1.5" stroke-linecap="round"/>
+        <circle cx="28" cy="28" r="3" fill="#141413"/>
+      </svg>
+      <h1>{{title}}</h1>
+      <p class="subtitle">
+        What shipped, what's moving, and one decision we need from the
+        room before the Acme 2.4 cut.
+      </p>
+      <div class="byline">
+        <span>Friday demo</span>
+        <span>6 slides</span>
+        <span>~4 min</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide 2 — Shipped
+       ============================================================ -->
+  <section class="slide" id="s2">
+    <div class="slide-inner">
+      <div class="eyebrow">Shipped this week</div>
+      <h2>Three things out the door</h2>
+      <ul class="ship-list">
+        <li class="ship-item">
+          <span class="ship-dot"></span>
+          <div>
+            <div class="ship-title">Bulk task import</div>
+            <div class="ship-desc">
+              CSV and JSON uploads now land straight into a board with
+              column mapping — no more paste-and-pray.
+            </div>
+          </div>
+          <span class="ship-ref">#4211</span>
+        </li>
+        <li class="ship-item">
+          <span class="ship-dot"></span>
+          <div>
+            <div class="ship-title">Webhook retries v2</div>
+            <div class="ship-desc">
+              Exponential backoff with jitter; dead-letter queue surfaces
+              in the workspace admin panel.
+            </div>
+          </div>
+          <span class="ship-ref">#4188 #4203</span>
+        </li>
+        <li class="ship-item">
+          <span class="ship-dot"></span>
+          <div>
+            <div class="ship-title">Postgres 16 migration</div>
+            <div class="ship-desc">
+              All read replicas cut over Tuesday night; zero customer-facing
+              downtime, ~9% faster aggregate queries.
+            </div>
+          </div>
+          <span class="ship-ref">#4179</span>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide 3 — In progress
+       ============================================================ -->
+  <section class="slide" id="s3">
+    <div class="slide-inner">
+      <div class="eyebrow">In progress</div>
+      <h2>Carrying into next week</h2>
+      <ul class="prog-list">
+        <li class="prog-item">
+          <div class="prog-head">
+            <span class="prog-title">Recurring tasks engine</span>
+            <span class="prog-pct">~70%</span>
+          </div>
+          <div class="prog-track"><div class="prog-fill" style="width:70%"></div></div>
+          <p class="prog-note">
+            Scheduler and RRULE parsing are done; remaining work is the
+            timezone edge cases and the "skip holidays" toggle.
+          </p>
+        </li>
+        <li class="prog-item">
+          <div class="prog-head">
+            <span class="prog-title">Audit log export</span>
+            <span class="prog-pct">~35%</span>
+          </div>
+          <div class="prog-track"><div class="prog-fill" style="width:35%"></div></div>
+          <p class="prog-note">
+            Streaming NDJSON endpoint is up behind a flag; still wiring
+            the S3 destination picker and retention policy UI.
+          </p>
+        </li>
+      </ul>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide 4 — Metrics
+       ============================================================ -->
+  <section class="slide" id="s4">
+    <div class="slide-inner">
+      <div class="eyebrow">Metrics</div>
+      <h2>Numbers we watch</h2>
+
+      <div class="metrics">
+        <div class="metric">
+          <div class="metric-label">API p95 latency</div>
+          <div class="metric-value">184<span style="font-size:28px">ms</span></div>
+          <div class="metric-delta down">↓ 12% wk/wk</div>
+        </div>
+        <div class="metric">
+          <div class="metric-label">Background job error rate</div>
+          <div class="metric-value">0.21<span style="font-size:28px">%</span></div>
+          <div class="metric-delta down">↓ 0.08pp</div>
+        </div>
+      </div>
+
+      <div class="sparkline-wrap">
+        <svg width="100%" height="64" viewBox="0 0 780 64" preserveAspectRatio="none" aria-hidden="true">
+          <polyline
+            points="0,22 110,30 220,18 330,34 440,26 550,40 660,24 780,12"
+            fill="none"
+            stroke="#788C5D"
+            stroke-width="2"
+            stroke-linejoin="round"
+            stroke-linecap="round"/>
+          <circle cx="780" cy="12" r="3.5" fill="#788C5D"/>
+          <line x1="0" y1="63" x2="780" y2="63" stroke="#D1CFC5" stroke-width="1"/>
+        </svg>
+        <div class="sparkline-caption">
+          p95 latency, trailing 8 days — lower is better
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide 5 — Decision needed (inverted)
+       ============================================================ -->
+  <section class="slide invert" id="s5">
+    <div class="slide-inner">
+      <div class="eyebrow">Decision needed</div>
+      <h2>One call to make</h2>
+
+      <div class="decision-card">
+        <p class="decision-q">
+          Do we ship recurring tasks behind a workspace flag in 2.4, or
+          hold one more week for the timezone fixes?
+        </p>
+        <p class="decision-context">
+          Flagged rollout gets it to design partners Friday but means two
+          code paths for ~2 weeks. Holding keeps a single path but slips
+          the partner promise.
+        </p>
+      </div>
+
+      <div class="options">
+        <span class="chip lean">A — Flag it, ship Friday</span>
+        <span class="chip">B — Hold for 2.5</span>
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide 6 — Next week
+       ============================================================ -->
+  <section class="slide" id="s6">
+    <div class="slide-inner">
+      <div class="eyebrow">Next week</div>
+      <h2>On deck</h2>
+      <ul class="next-list">
+        <li>Finish recurring tasks — timezone matrix tests, then dogfood on the internal ops board.</li>
+        <li>Audit log export to private beta — three workspaces lined up.</li>
+        <li>Start scoping rate-limit headers for the public API; RFC draft by Thursday.</li>
+      </ul>
+      <div class="footnote">
+        Questions → drop them in the platform channel or grab anyone after standup.
+      </div>
+    </div>
+  </section>
+
+  <!-- ============================================================
+       Slide counter
+       ============================================================ -->
+  <div id="counter">1 / 6</div>
+
+<style>
+/* ------------------------------------------------------------------
+     Design tokens
+     ------------------------------------------------------------------ */
+  :root {
+    --ivory:   #FAF9F5;
+    --slate:   #141413;
+    --clay:    #D97757;
+    --oat:     #E3DACC;
+    --olive:   #788C5D;
+    --gray-150:#F0EEE6;
+    --gray-300:#D1CFC5;
+    --gray-500:#87867F;
+    --gray-700:#3D3D3A;
+
+    --serif: ui-serif, Georgia, "Times New Roman", serif;
+    --sans:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;
+  }
+* { margin: 0; padding: 0; box-sizing: border-box; }
+/* ------------------------------------------------------------------
+     Slide shell
+     ------------------------------------------------------------------ */
+  .slide {
+    width: 100vw;
+    height: 100vh;
+    scroll-snap-align: start;
+    scroll-snap-stop: always;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 8vh 6vw;
+  }
+.slide-inner {
+    width: 100%;
+    max-width: 780px;
+  }
+.slide.invert {
+    background: var(--slate);
+    color: var(--ivory);
+  }
+/* ------------------------------------------------------------------
+     Typography
+     ------------------------------------------------------------------ */
+  .eyebrow {
+    font-family: var(--mono);
+    font-size: 12px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--gray-500);
+    margin-bottom: 28px;
+  }
+.invert .eyebrow { color: var(--gray-300); }
+h1 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: clamp(40px, 6vw, 64px);
+    line-height: 1.08;
+    letter-spacing: -0.01em;
+    margin-bottom: 20px;
+  }
+h2 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: clamp(30px, 4vw, 42px);
+    line-height: 1.15;
+    letter-spacing: -0.005em;
+    margin-bottom: 44px;
+  }
+.subtitle {
+    font-size: 17px;
+    line-height: 1.6;
+    color: var(--gray-700);
+    max-width: 520px;
+  }
+.mono { font-family: var(--mono); }
+/* ------------------------------------------------------------------
+     Slide 1 — title
+     ------------------------------------------------------------------ */
+  .title-slide .slide-inner { text-align: left; }
+.ornament {
+    display: block;
+    margin: 0 0 40px 0;
+  }
+.byline {
+    margin-top: 56px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-500);
+    display: flex;
+    gap: 24px;
+  }
+/* ------------------------------------------------------------------
+     Slide 2 — shipped list
+     ------------------------------------------------------------------ */
+  .ship-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+  }
+.ship-item {
+    display: grid;
+    grid-template-columns: 14px 1fr auto;
+    column-gap: 20px;
+    align-items: baseline;
+    padding-bottom: 24px;
+    border-bottom: 1px solid var(--gray-150);
+  }
+.ship-item:last-child { border-bottom: none; }
+.ship-dot {
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background: var(--olive);
+    margin-top: 8px;
+    align-self: start;
+  }
+.ship-title {
+    font-family: var(--serif);
+    font-size: 20px;
+    font-weight: 500;
+    margin-bottom: 6px;
+  }
+.ship-desc {
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--gray-700);
+  }
+.ship-ref {
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+    white-space: nowrap;
+    padding-top: 4px;
+  }
+/* ------------------------------------------------------------------
+     Slide 3 — in progress
+     ------------------------------------------------------------------ */
+  .prog-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+  }
+.prog-item .prog-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    margin-bottom: 10px;
+  }
+.prog-title {
+    font-family: var(--serif);
+    font-size: 20px;
+    font-weight: 500;
+  }
+.prog-pct {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-500);
+  }
+.prog-track {
+    width: 100%;
+    height: 5px;
+    background: var(--gray-150);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 10px;
+  }
+.prog-fill {
+    height: 100%;
+    background: var(--clay);
+    border-radius: 3px;
+  }
+.prog-note {
+    font-size: 13px;
+    line-height: 1.55;
+    color: var(--gray-700);
+  }
+/* ------------------------------------------------------------------
+     Slide 4 — metrics
+     ------------------------------------------------------------------ */
+  .metrics {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 56px;
+    margin-bottom: 48px;
+  }
+.metric-label {
+    font-family: var(--mono);
+    font-size: 11px;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--gray-500);
+    margin-bottom: 14px;
+  }
+.metric-value {
+    font-family: var(--serif);
+    font-size: 52px;
+    font-weight: 500;
+    line-height: 1;
+    letter-spacing: -0.01em;
+  }
+.metric-delta {
+    font-family: var(--mono);
+    font-size: 13px;
+    margin-top: 12px;
+  }
+.metric-delta.down { color: var(--olive); }
+.metric-delta.up { color: var(--clay); }
+.sparkline-wrap {
+    border-top: 1px solid var(--gray-300);
+    padding-top: 28px;
+  }
+.sparkline-caption {
+    font-size: 12px;
+    color: var(--gray-500);
+    margin-top: 10px;
+  }
+/* ------------------------------------------------------------------
+     Slide 5 — decision (inverted)
+     ------------------------------------------------------------------ */
+  .decision-card {
+    border: 1.5px solid var(--clay);
+    border-radius: 14px;
+    padding: 36px 38px;
+    background: rgba(217, 119, 87, 0.06);
+  }
+.decision-q {
+    font-family: var(--serif);
+    font-size: 24px;
+    line-height: 1.4;
+    margin-bottom: 12px;
+  }
+.decision-context {
+    font-size: 14px;
+    line-height: 1.6;
+    color: var(--gray-300);
+  }
+.options {
+    display: flex;
+    gap: 14px;
+    margin-top: 32px;
+    flex-wrap: wrap;
+  }
+.chip {
+    font-family: var(--mono);
+    font-size: 12px;
+    padding: 10px 18px;
+    border-radius: 999px;
+    border: 1px solid var(--gray-700);
+    color: var(--ivory);
+    background: transparent;
+  }
+.chip.lean {
+    border-color: var(--clay);
+    color: var(--clay);
+  }
+/* ------------------------------------------------------------------
+     Slide 6 — next week
+     ------------------------------------------------------------------ */
+  .next-list {
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 22px;
+  }
+.next-list li {
+    font-family: var(--serif);
+    font-size: 21px;
+    line-height: 1.45;
+    padding-left: 36px;
+    position: relative;
+  }
+.next-list li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0.55em;
+    width: 18px;
+    height: 1.5px;
+    background: var(--clay);
+  }
+.footnote {
+    margin-top: 56px;
+    font-family: var(--mono);
+    font-size: 11px;
+    color: var(--gray-500);
+  }
+/* ------------------------------------------------------------------
+     Slide counter
+     ------------------------------------------------------------------ */
+  #counter {
+    position: fixed;
+    bottom: 22px;
+    right: 28px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-500);
+    user-select: none;
+    z-index: 10;
+  }
+@media (max-width: 640px) {
+    .metrics { grid-template-columns: 1fr; gap: 36px; }
+    .ship-item { grid-template-columns: 14px 1fr; }
+    .ship-ref { grid-column: 2; padding-top: 8px; }
+  }
+</style>
+
+<script>
+(function () {
+    const slides = Array.from(document.querySelectorAll('.slide'));
+    const counter = document.getElementById('counter');
+    let current = 0;
+
+    function go(i) {
+      current = Math.max(0, Math.min(slides.length - 1, i));
+      slides[current].scrollIntoView({ behavior: 'smooth' });
+    }
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown' || e.key === ' ') { e.preventDefault(); go(current + 1); }
+      if (e.key === 'ArrowLeft'  || e.key === 'ArrowUp')                     { e.preventDefault(); go(current - 1); }
+    });
+
+    const obs = new IntersectionObserver(function (entries) {
+      entries.forEach(function (en) {
+        if (en.isIntersecting) {
+          current = slides.indexOf(en.target);
+          counter.textContent = (current + 1) + ' / ' + slides.length;
+        }
+      });
+    }, { threshold: 0.6 });
+
+    slides.forEach(function (s) { obs.observe(s); });
+  })();
+</script>