new file mode 100644
index 0000000..4ef7e29
@@ -0,0 +1,1099 @@
+---
+visibility: public
+---
+
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <title>Meeting Whiteboard Dashboard — 2026-04-20</title>
+ <style>
+ :root {
+ --paper: #f6f1e6;
+ --paper-deep: #efe6d2;
+ --ink: #1d1a16;
+ --muted: #5d564e;
+ --line: rgba(32, 26, 22, 0.14);
+ --pin: #b7322c;
+ --green: #3f7c54;
+ --green-bg: #e8f2e7;
+ --amber: #c47c16;
+ --amber-bg: #fff0cf;
+ --red: #8f3126;
+ --red-bg: #f8ded8;
+ --blue: #2d5e82;
+ --blue-bg: #dbeefa;
+ --violet: #5f4b88;
+ --violet-bg: #ece7fb;
+ --chalk: rgba(255, 255, 255, 0.45);
+ --shadow: 0 12px 28px rgba(35, 26, 10, 0.12);
+ --mono: "Courier Prime", "Courier New", monospace;
+ --serif: "American Typewriter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
+ --marker: "Marker Felt", "Chalkboard SE", "Bradley Hand", "Comic Sans MS", cursive;
+ }
+
+ * {
+ box-sizing: border-box;
+ }
+
+ html {
+ scroll-behavior: smooth;
+ }
+
+ body {
+ margin: 0;
+ color: var(--ink);
+ font-family: var(--serif);
+ background:
+ radial-gradient(circle at 15% 10%, rgba(255, 248, 225, 0.9), transparent 25%),
+ radial-gradient(circle at 80% 15%, rgba(206, 225, 255, 0.22), transparent 24%),
+ radial-gradient(circle at 75% 75%, rgba(244, 207, 149, 0.14), transparent 28%),
+ repeating-linear-gradient(0deg, transparent 0 27px, rgba(55, 42, 25, 0.06) 27px 28px),
+ linear-gradient(180deg, #f8f4ec 0%, #f1eadc 100%);
+ min-height: 100vh;
+ position: relative;
+ overflow-x: hidden;
+ }
+
+ body::before,
+ body::after {
+ content: "";
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: 0;
+ }
+
+ body::before {
+ background:
+ linear-gradient(90deg, transparent 0 39px, rgba(85, 63, 38, 0.05) 39px 40px),
+ linear-gradient(transparent 0 39px, rgba(85, 63, 38, 0.03) 39px 40px);
+ background-size: 40px 40px;
+ mix-blend-mode: multiply;
+ opacity: 0.45;
+ }
+
+ body::after {
+ background:
+ radial-gradient(circle at top left, rgba(255, 255, 255, 0.55), transparent 30%),
+ radial-gradient(circle at bottom right, rgba(0, 0, 0, 0.05), transparent 34%);
+ }
+
+ .canvas {
+ position: relative;
+ z-index: 1;
+ width: min(1500px, calc(100vw - 32px));
+ margin: 20px auto 40px;
+ padding-bottom: 32px;
+ }
+
+ .topbar {
+ display: grid;
+ grid-template-columns: 1.3fr auto;
+ gap: 18px;
+ align-items: start;
+ margin-bottom: 18px;
+ }
+
+ .hero,
+ .quick-notes,
+ .panel,
+ .matrix,
+ .timeline {
+ background: rgba(251, 248, 240, 0.92);
+ border: 2px solid rgba(42, 31, 20, 0.18);
+ border-radius: 22px;
+ box-shadow: var(--shadow);
+ position: relative;
+ overflow: hidden;
+ }
+
+ .hero::before,
+ .quick-notes::before,
+ .panel::before,
+ .matrix::before,
+ .timeline::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(135deg, rgba(255, 255, 255, 0.42), transparent 35%),
+ linear-gradient(315deg, rgba(0, 0, 0, 0.03), transparent 30%);
+ pointer-events: none;
+ }
+
+ .hero {
+ padding: 24px 26px 24px 28px;
+ transform: rotate(-0.5deg);
+ }
+
+ .quick-notes {
+ padding: 18px 18px 14px;
+ transform: rotate(1deg);
+ background: #f8edb9;
+ align-self: stretch;
+ }
+
+ .eyebrow {
+ font-family: var(--mono);
+ font-size: 0.84rem;
+ letter-spacing: 0.09em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin-bottom: 12px;
+ }
+
+ h1 {
+ margin: 0 0 10px;
+ font-size: clamp(2rem, 4.8vw, 4.4rem);
+ line-height: 0.94;
+ letter-spacing: -0.04em;
+ max-width: 10ch;
+ }
+
+ .hero p,
+ .panel p,
+ .timeline p,
+ li {
+ line-height: 1.4;
+ font-size: 1rem;
+ }
+
+ .lead {
+ max-width: 72ch;
+ margin: 0 0 16px;
+ color: #2f2821;
+ font-size: 1.06rem;
+ }
+
+ .infra-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+ text-decoration: none;
+ padding: 12px 18px;
+ border-radius: 999px;
+ color: #fff7eb;
+ background: linear-gradient(135deg, #233645, #35546b);
+ border: 2px solid rgba(255, 255, 255, 0.18);
+ font-family: var(--mono);
+ font-size: 0.92rem;
+ box-shadow: 0 10px 20px rgba(24, 40, 58, 0.22);
+ white-space: nowrap;
+ }
+
+ .infra-link:hover {
+ transform: translateY(-1px);
+ }
+
+ .hero-grid {
+ display: grid;
+ grid-template-columns: 1.25fr 0.85fr;
+ gap: 16px;
+ margin-top: 14px;
+ }
+
+ .scribble {
+ font-family: var(--marker);
+ font-size: 1.15rem;
+ color: #5a3d17;
+ margin-bottom: 10px;
+ }
+
+ .thesis-box,
+ .recommend-box,
+ .note-box,
+ .mini-card {
+ border: 2px dashed rgba(42, 31, 20, 0.22);
+ border-radius: 18px;
+ padding: 16px;
+ background: rgba(255, 253, 247, 0.72);
+ position: relative;
+ }
+
+ .recommend-box {
+ background: linear-gradient(180deg, rgba(231, 244, 234, 0.9), rgba(241, 249, 241, 0.85));
+ border-style: solid;
+ border-color: rgba(63, 124, 84, 0.28);
+ }
+
+ .thesis-box::after,
+ .recommend-box::after,
+ .sticky::after {
+ content: "";
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: var(--pin);
+ top: 12px;
+ right: 14px;
+ box-shadow: inset 0 3px 4px rgba(255, 255, 255, 0.35), 0 2px 4px rgba(0, 0, 0, 0.16);
+ }
+
+ .thesis-box h2,
+ .recommend-box h2,
+ .panel h2,
+ .matrix h2,
+ .timeline h2 {
+ margin: 0 0 10px;
+ font-size: 1.35rem;
+ letter-spacing: -0.03em;
+ }
+
+ .tag-row,
+ .legend {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ }
+
+ .tag,
+ .legend span,
+ .label {
+ display: inline-flex;
+ align-items: center;
+ padding: 6px 10px;
+ border-radius: 999px;
+ border: 1px solid rgba(33, 27, 23, 0.14);
+ font-family: var(--mono);
+ font-size: 0.79rem;
+ letter-spacing: 0.03em;
+ text-transform: uppercase;
+ }
+
+ .build-now { background: var(--green-bg); color: var(--green); }
+ .explore { background: var(--amber-bg); color: var(--amber); }
+ .open-q { background: var(--red-bg); color: var(--red); }
+ .scope { background: var(--blue-bg); color: var(--blue); }
+ .synergy { background: var(--violet-bg); color: var(--violet); }
+
+ .quick-notes h3 {
+ margin: 0 0 8px;
+ font-family: var(--marker);
+ font-size: 1.45rem;
+ color: #5d4416;
+ }
+
+ .quick-notes ul {
+ margin: 0;
+ padding-left: 18px;
+ }
+
+ .quick-notes li + li {
+ margin-top: 8px;
+ }
+
+ .legend {
+ margin: 0 0 18px;
+ padding: 6px 2px 0;
+ }
+
+ .board {
+ display: grid;
+ grid-template-columns: repeat(12, minmax(0, 1fr));
+ gap: 16px;
+ align-items: start;
+ }
+
+ .panel {
+ padding: 18px 18px 16px;
+ }
+
+ .span-12 { grid-column: span 12; }
+ .span-8 { grid-column: span 8; }
+ .span-7 { grid-column: span 7; }
+ .span-6 { grid-column: span 6; }
+ .span-5 { grid-column: span 5; }
+ .span-4 { grid-column: span 4; }
+
+ .panel h2 {
+ padding-right: 28px;
+ }
+
+ .panel .small {
+ font-family: var(--mono);
+ color: var(--muted);
+ font-size: 0.83rem;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ .track-grid {
+ display: grid;
+ gap: 10px;
+ margin-top: 12px;
+ }
+
+ .mini-card {
+ background: rgba(255, 255, 255, 0.6);
+ transform: rotate(var(--tilt, 0deg));
+ }
+
+ .mini-card h3 {
+ margin: 0 0 8px;
+ font-size: 1.02rem;
+ }
+
+ .mini-card p {
+ margin: 0;
+ color: #2f2821;
+ }
+
+ .mini-card .decision {
+ margin-top: 10px;
+ padding-top: 10px;
+ border-top: 1px dashed rgba(42, 31, 20, 0.16);
+ font-family: var(--marker);
+ color: #6a4d1b;
+ font-size: 1rem;
+ }
+
+ ul.clean {
+ margin: 0;
+ padding-left: 18px;
+ }
+
+ ul.clean li + li {
+ margin-top: 8px;
+ }
+
+ .forks {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ margin-top: 12px;
+ }
+
+ .fork {
+ padding: 14px;
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.62);
+ border: 1px solid rgba(42, 31, 20, 0.12);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+ }
+
+ .fork strong {
+ display: block;
+ margin-bottom: 8px;
+ font-size: 1rem;
+ }
+
+ .callout-strip {
+ margin-top: 12px;
+ padding: 12px 14px;
+ border-left: 5px solid #6a8a45;
+ background: rgba(236, 246, 226, 0.9);
+ border-radius: 12px;
+ }
+
+ .decision-board {
+ display: grid;
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+ gap: 12px;
+ margin-top: 12px;
+ }
+
+ .decision-note {
+ padding: 14px;
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.66);
+ border: 1px solid rgba(42, 31, 20, 0.12);
+ }
+
+ .decision-note h3 {
+ margin: 0 0 8px;
+ font-size: 1rem;
+ }
+
+ .decision-note p {
+ margin: 0;
+ }
+
+ .lane-grid {
+ display: grid;
+ grid-template-columns: 1.15fr 0.95fr 0.9fr;
+ gap: 12px;
+ margin-top: 14px;
+ }
+
+ .lane {
+ border-radius: 18px;
+ padding: 14px;
+ border: 1px solid rgba(42, 31, 20, 0.14);
+ background: rgba(255, 255, 255, 0.62);
+ }
+
+ .lane h3 {
+ margin: 0 0 8px;
+ font-size: 1rem;
+ }
+
+ .lane ul {
+ margin: 0;
+ padding-left: 18px;
+ }
+
+ .lane.compound {
+ background: linear-gradient(180deg, rgba(232, 242, 231, 0.9), rgba(243, 248, 241, 0.72));
+ }
+
+ .lane.sidecar {
+ background: linear-gradient(180deg, rgba(219, 238, 250, 0.92), rgba(241, 247, 251, 0.72));
+ }
+
+ .lane.distraction {
+ background: linear-gradient(180deg, rgba(248, 222, 216, 0.92), rgba(252, 244, 241, 0.74));
+ }
+
+ .wiring {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 10px;
+ margin-top: 12px;
+ }
+
+ .wire {
+ min-height: 112px;
+ padding: 14px 12px;
+ border-radius: 16px;
+ background: rgba(255, 255, 255, 0.68);
+ border: 1px dashed rgba(42, 31, 20, 0.22);
+ position: relative;
+ }
+
+ .wire::after {
+ content: "→";
+ position: absolute;
+ right: -11px;
+ top: 50%;
+ transform: translateY(-50%);
+ font-size: 1.4rem;
+ color: rgba(42, 31, 20, 0.28);
+ font-family: var(--marker);
+ }
+
+ .wire:last-child::after {
+ display: none;
+ }
+
+ .wire h3 {
+ margin: 0 0 8px;
+ font-size: 0.98rem;
+ }
+
+ .wire p {
+ margin: 0;
+ font-size: 0.95rem;
+ }
+
+ .matrix {
+ margin-top: 16px;
+ padding: 18px;
+ }
+
+ .matrix-wrap {
+ position: relative;
+ min-height: 420px;
+ border-radius: 22px;
+ border: 2px solid rgba(42, 31, 20, 0.12);
+ background:
+ linear-gradient(to right, transparent 49.7%, rgba(42, 31, 20, 0.16) 49.7% 50.3%, transparent 50.3%),
+ linear-gradient(to top, transparent 49.7%, rgba(42, 31, 20, 0.16) 49.7% 50.3%, transparent 50.3%),
+ linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 244, 235, 0.86));
+ overflow: hidden;
+ }
+
+ .axis-label,
+ .quad-label {
+ position: absolute;
+ font-family: var(--mono);
+ font-size: 0.8rem;
+ color: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: 0.06em;
+ }
+
+ .axis-left { left: 14px; bottom: 14px; }
+ .axis-right { right: 14px; bottom: 14px; }
+ .axis-top { left: 14px; top: 14px; }
+ .axis-bottom { left: 14px; bottom: 40px; }
+ .quad-label { font-family: var(--marker); font-size: 1rem; color: rgba(42, 31, 20, 0.58); }
+ .q1 { top: 18px; left: 18px; }
+ .q2 { top: 18px; right: 18px; }
+ .q3 { bottom: 18px; left: 18px; }
+ .q4 { bottom: 18px; right: 18px; }
+
+ .plot-note {
+ position: absolute;
+ width: 190px;
+ padding: 12px 12px 10px;
+ border-radius: 16px;
+ border: 1px solid rgba(33, 27, 23, 0.16);
+ box-shadow: 0 9px 18px rgba(20, 12, 4, 0.12);
+ transform: rotate(var(--twist, 0deg));
+ }
+
+ .plot-note strong {
+ display: block;
+ margin-bottom: 6px;
+ font-size: 0.98rem;
+ }
+
+ .plot-note p {
+ margin: 0;
+ font-size: 0.92rem;
+ line-height: 1.35;
+ }
+
+ .plot-green { background: #e9f3e7; }
+ .plot-amber { background: #fff0d1; }
+ .plot-blue { background: #deedf8; }
+ .plot-red { background: #f8e1dc; }
+ .plot-violet { background: #eee8fa; }
+
+ .timeline {
+ margin-top: 16px;
+ padding: 18px;
+ }
+
+ .steps {
+ display: grid;
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+ gap: 12px;
+ margin-top: 12px;
+ }
+
+ .step {
+ padding: 16px 14px;
+ border-radius: 18px;
+ border: 1px solid rgba(42, 31, 20, 0.14);
+ background: rgba(255, 255, 255, 0.7);
+ position: relative;
+ min-height: 180px;
+ }
+
+ .step::before {
+ content: attr(data-step);
+ position: absolute;
+ top: 10px;
+ right: 12px;
+ font-family: var(--marker);
+ font-size: 1.5rem;
+ color: rgba(42, 31, 20, 0.28);
+ }
+
+ .step h3 {
+ margin: 0 0 8px;
+ font-size: 1rem;
+ padding-right: 16px;
+ }
+
+ .step p {
+ margin: 0;
+ font-size: 0.95rem;
+ }
+
+ .footer-note {
+ margin-top: 16px;
+ font-family: var(--mono);
+ font-size: 0.86rem;
+ color: var(--muted);
+ text-align: center;
+ }
+
+ @keyframes driftIn {
+ from {
+ opacity: 0;
+ transform: translateY(18px) rotate(var(--entry-tilt, 0deg));
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0) rotate(var(--entry-tilt, 0deg));
+ }
+ }
+
+ .hero,
+ .quick-notes,
+ .panel,
+ .matrix,
+ .timeline {
+ animation: driftIn 0.65s ease both;
+ }
+
+ .quick-notes { --entry-tilt: 1deg; }
+ .panel:nth-of-type(1) { --entry-tilt: -0.3deg; }
+ .panel:nth-of-type(2) { --entry-tilt: 0.4deg; }
+ .panel:nth-of-type(3) { --entry-tilt: -0.4deg; }
+ .panel:nth-of-type(4) { --entry-tilt: 0.35deg; }
+ .panel:nth-of-type(5) { --entry-tilt: -0.25deg; }
+ .panel:nth-of-type(6) { --entry-tilt: 0.4deg; }
+
+ @media (max-width: 1200px) {
+ .span-8,
+ .span-7,
+ .span-6,
+ .span-5,
+ .span-4 {
+ grid-column: span 12;
+ }
+
+ .hero-grid,
+ .decision-board,
+ .lane-grid,
+ .steps,
+ .wiring {
+ grid-template-columns: 1fr;
+ }
+
+ .wire::after {
+ display: none;
+ }
+ }
+
+ @media (max-width: 980px) {
+ .topbar {
+ grid-template-columns: 1fr;
+ }
+
+ .forks {
+ grid-template-columns: 1fr;
+ }
+
+ .matrix-wrap {
+ min-height: 760px;
+ }
+
+ .plot-note {
+ width: min(220px, calc(100% - 24px));
+ }
+ }
+
+ @media (max-width: 640px) {
+ .canvas {
+ width: min(100vw - 18px, 1500px);
+ }
+
+ .hero,
+ .quick-notes,
+ .panel,
+ .matrix,
+ .timeline {
+ border-radius: 18px;
+ }
+
+ .plot-note {
+ width: calc(100% - 22px);
+ left: 11px !important;
+ }
+ }
+ </style>
+</head>
+<body>
+ <main class="canvas">
+ <div class="topbar">
+ <header class="hero">
+ <div class="eyebrow">Meeting Whiteboard / 2026-04-20 / built from the Otter transcript</div>
+ <a class="infra-link" href="meeting-architecture-2026-04-20.html">Essential Infrastructure</a>
+ <h1>LLM Wiki For The Team</h1>
+ <p class="lead">
+ The monologue keeps circling one center of gravity: every meeting should update a persistent team memory that
+ tracks tasks, ideas, gripes, vision, and reusable patterns. Everything else looks like a surface area, wedge,
+ or spinout around that engine.
+ </p>
+ <div class="tag-row">
+ <span class="tag build-now">Committed Spine</span>
+ <span class="tag explore">Parallel Tracks</span>
+ <span class="tag open-q">Open Questions</span>
+ <span class="tag scope">Scope Cuts</span>
+ <span class="tag synergy">Compounding Overlap</span>
+ </div>
+
+ <div class="hero-grid">
+ <section class="thesis-box">
+ <div class="scribble">core thesis</div>
+ <h2>Every meeting becomes structured company memory</h2>
+ <ul class="clean">
+ <li>Action items should live both inside meeting notes and in the durable team task layer.</li>
+ <li>Ideas should land both in context and in a broader company idea base.</li>
+ <li>Disagreements and recurring frictions become explicit, queryable institutional memory.</li>
+ <li>Vision docs should update continuously instead of becoming stale static docs.</li>
+ </ul>
+ </section>
+
+ <section class="recommend-box">
+ <div class="scribble">my read</div>
+ <h2>Best first wedge</h2>
+ <p>
+ Focus on <strong>B2B team memory</strong>: ingest meeting notes from existing tools, normalize them into
+ the wiki, and surface them in <strong>Slack</strong>. That compounds immediately and keeps the hardest
+ privacy, distribution, and platform problems off the critical path.
+ </p>
+ <div class="callout-strip">
+ The group-chat bot is the most magical adjacent branch, but it should be framed as the next leap after the
+ team-memory loop works reliably.
+ </div>
+ </section>
+ </div>
+ </header>
+
+ <aside class="quick-notes">
+ <h3>Margin Notes</h3>
+ <ul>
+ <li><strong>Table stakes:</strong> Slack bot that can reference the wiki and full company history.</li>
+ <li><strong>Highest leverage cut:</strong> integrate Otter / Gemini / Granola before building a custom notetaker.</li>
+ <li><strong>Most dangerous distraction:</strong> letting <code>Better GPT</code> eat the roadmap.</li>
+ <li><strong>Most interesting fork:</strong> shared bot in the thread vs personal-side agent watching your own messages.</li>
+ <li><strong>Strong dogfood loop:</strong> <code>Note Stream</code> as the internal cockpit for notes plus agents.</li>
+ </ul>
+ </aside>
+ </div>
+
+ <div class="legend">
+ <span class="build-now">Build now</span>
+ <span class="explore">Explore / sequence later</span>
+ <span class="open-q">Open question / risk</span>
+ <span class="scope">Scope decision</span>
+ <span class="synergy">Shared infrastructure</span>
+ </div>
+
+ <section class="board">
+ <article class="panel span-8">
+ <div class="small">Track Map</div>
+ <h2>Product branches orbiting the same engine</h2>
+ <div class="track-grid">
+ <div class="mini-card" style="--tilt:-0.5deg;">
+ <div class="tag-row">
+ <span class="tag build-now">Build now</span>
+ <span class="tag synergy">Compounds</span>
+ </div>
+ <h3>1. Slack Bot For The Team</h3>
+ <p>
+ This reads as the first obvious surface area: it exposes the wiki to the place teams already live, turns
+ memory into retrieval, and makes the meeting system feel useful between meetings.
+ </p>
+ <div class="decision">Judgment: first shipping surface, not a side quest.</div>
+ </div>
+
+ <div class="mini-card" style="--tilt:0.45deg;">
+ <div class="tag-row">
+ <span class="tag explore">Explore next</span>
+ <span class="tag scope">Channel fork</span>
+ </div>
+ <h3>2. Group Context Bot: iMessage / WhatsApp / SMS</h3>
+ <p>
+ Very compelling because it carries shared memory into messy real-world coordination. Also where privacy,
+ terms of service, and channel fragmentation get hardest fastest.
+ </p>
+ <div class="decision">Judgment: high upside, but only after the core memory loop feels real.</div>
+ </div>
+
+ <div class="mini-card" style="--tilt:-0.35deg;">
+ <div class="tag-row">
+ <span class="tag build-now">Build now</span>
+ <span class="tag scope">Workflow hinge</span>
+ </div>
+ <h3>3. Meeting Ingest + Real-Time Outliner</h3>
+ <p>
+ This is the actual choke point. If ingestion from Otter / Gemini / Granola / Zoom is annoying, the whole
+ vision becomes ceremony. The product lives or dies on low-friction update flow.
+ </p>
+ <div class="decision">Judgment: integrate first, custom note app second.</div>
+ </div>
+
+ <div class="mini-card" style="--tilt:0.35deg;">
+ <div class="tag-row">
+ <span class="tag explore">Exploring</span>
+ <span class="tag synergy">Great demo</span>
+ </div>
+ <h3>4. Ambient Meeting Display</h3>
+ <p>
+ Live fact checks, relevant context, branch dashboards, build-this-now prompts. Excellent demo surface and a
+ natural “AI sees the meeting” manifestation of the system.
+ </p>
+ <div class="decision">Judgment: feature or showcase first, standalone product only if usage proves it.</div>
+ </div>
+
+ <div class="mini-card" style="--tilt:-0.2deg;">
+ <div class="tag-row">
+ <span class="tag scope">Dogfood</span>
+ <span class="tag synergy">Agent cockpit</span>
+ </div>
+ <h3>5. Note Stream Mobile App</h3>
+ <p>
+ “Slack for myself” plus thread-level agents. Strong as an internal command center and note substrate. Less
+ convincing as the first external wedge than the team-memory loop.
+ </p>
+ <div class="decision">Judgment: valuable dogfood and content generator, not the clearest initial market story.</div>
+ </div>
+
+ <div class="mini-card" style="--tilt:0.25deg;">
+ <div class="tag-row">
+ <span class="tag open-q">Roadmap risk</span>
+ <span class="tag synergy">Infra reuse</span>
+ </div>
+ <h3>6. Better GPT</h3>
+ <p>
+ Coding-agent-backed GPT on private infrastructure is absolutely valuable. It is also broad enough to become
+ its own company and steal attention from the more opinionated meeting-memory thesis.
+ </p>
+ <div class="decision">Judgment: use internally, maybe spin out later, but do not let it blur the main story.</div>
+ </div>
+ </div>
+ </article>
+
+ <article class="panel span-4">
+ <div class="small">Center Of Gravity</div>
+ <h2>Why the wiki matters</h2>
+ <ul class="clean">
+ <li>The transcript is not pitching “meeting notes.” It is pitching a living team memory system.</li>
+ <li>The important difference is schema: tasks, ideas, gripes, patterns, and vision docs all update distinct layers.</li>
+ <li>That means the real product is persistent structured memory plus retrieval plus permissions.</li>
+ <li>Once that exists, different interfaces can be added without rebuilding the substrate every time.</li>
+ </ul>
+ <div class="callout-strip">
+ If something does not deepen the team-memory loop, it should justify itself as a distribution channel or a demo,
+ not as a parallel worldview.
+ </div>
+ </article>
+
+ <article class="panel span-6">
+ <div class="small">Most Important Fork</div>
+ <h2>Group assistant: two product shapes</h2>
+ <p>
+ The messaging branch is not one thing. It splits into two very different products with different risk profiles.
+ </p>
+ <div class="forks">
+ <div class="fork">
+ <strong>A. Shared bot inside the group</strong>
+ <p>
+ A real participant in iMessage / WhatsApp / SMS / email threads. More magical, more obvious value in
+ scheduling and memory, but higher friction for approvals, terms of service, adoption, and trust.
+ </p>
+ </div>
+ <div class="fork">
+ <strong>B. Personal-side agent only on your end</strong>
+ <p>
+ Watches your own message history and acts like an augmented assistant without joining the thread. Lower
+ distribution magic, but much cleaner technically and safer to ship first.
+ </p>
+ </div>
+ </div>
+ <div class="callout-strip">
+ My bias: if messaging becomes the next wedge, start with the personal-side agent, then graduate to a shared bot
+ once privacy scopes and sharing approvals actually work.
+ </div>
+ </article>
+
+ <article class="panel span-6">
+ <div class="small">Scope Cuts</div>
+ <h2>Decisions that should not stay fuzzy</h2>
+ <div class="decision-board">
+ <div class="decision-note">
+ <div class="tag-row"><span class="tag scope">Market</span></div>
+ <h3>B2B vs B2C</h3>
+ <p>
+ The monologue contains both. The cleanest story right now is B2B team memory first. Consumer messaging
+ agents can follow once the memory substrate is battle tested.
+ </p>
+ </div>
+ <div class="decision-note">
+ <div class="tag-row"><span class="tag scope">Surface</span></div>
+ <h3>Slack first, iMessage second</h3>
+ <p>
+ Slack is the easiest way to surface durable team memory. iMessage is strategically important in the US, but
+ it is not the easiest first proving ground.
+ </p>
+ </div>
+ <div class="decision-note">
+ <div class="tag-row"><span class="tag scope">Ingestion</span></div>
+ <h3>Integrate first, own the full recorder later</h3>
+ <p>
+ Existing note tools already exist. The risk is spending months rebuilding note capture before proving the
+ higher-order memory system.
+ </p>
+ </div>
+ <div class="decision-note">
+ <div class="tag-row"><span class="tag open-q">Open</span></div>
+ <h3>Realtime assist vs post-meeting commitments</h3>
+ <p>
+ The live ambient display is exciting, but the enduring value may come from what the system remembers and
+ updates after the meeting ends.
+ </p>
+ </div>
+ <div class="decision-note">
+ <div class="tag-row"><span class="tag open-q">Detail</span></div>
+ <h3>Wiki hub vs graph</h3>
+ <p>
+ Important architecturally, but the transcript itself labels this as a lower-order detail. Good reason not
+ to let it block the product wedge.
+ </p>
+ </div>
+ <div class="decision-note">
+ <div class="tag-row"><span class="tag scope">Privacy</span></div>
+ <h3>Approval gating is not optional</h3>
+ <p>
+ Scheduling, availability, and selective sharing are part of the core value proposition. Cross-context
+ privacy scopes are a product feature, not just plumbing.
+ </p>
+ </div>
+ </div>
+ </article>
+
+ <article class="panel span-12">
+ <div class="small">Synergy Map</div>
+ <h2>Why these branches feel so adjacent</h2>
+ <p>
+ They reuse the same stack. That is good news and bad news: good because infrastructure compounds, bad because
+ everything feels temptingly “almost the same” and can blur into roadmap sprawl.
+ </p>
+ <div class="wiring">
+ <div class="wire">
+ <h3>1. Ingest</h3>
+ <p>Meetings, chats, notes, docs, and written history all need to land in a consistent stream.</p>
+ </div>
+ <div class="wire">
+ <h3>2. Structure</h3>
+ <p>Extract tasks, ideas, people, conflicts, plans, decisions, and recurring patterns.</p>
+ </div>
+ <div class="wire">
+ <h3>3. Memory</h3>
+ <p>Persist canonical pages or graph entities that update over time instead of duplicating raw notes.</p>
+ </div>
+ <div class="wire">
+ <h3>4. Permissioning</h3>
+ <p>Scope what can be shown, shared, approved, or kept private across people and contexts.</p>
+ </div>
+ <div class="wire">
+ <h3>5. Surfaces</h3>
+ <p>Slack, ambient dashboards, messaging bots, mobile note tools, and coding-agent interfaces.</p>
+ </div>
+ </div>
+ </article>
+
+ <article class="panel span-12">
+ <div class="small">Roadmap Posture</div>
+ <h2>Compounders vs sidecars vs distractions</h2>
+ <div class="lane-grid">
+ <div class="lane compound">
+ <h3>Compounds the main thesis</h3>
+ <ul>
+ <li>Meeting ingest from existing tools</li>
+ <li>Structured wiki / team memory updates</li>
+ <li>Slack bot as the everyday retrieval surface</li>
+ <li>Selective privacy approval flows</li>
+ </ul>
+ </div>
+ <div class="lane sidecar">
+ <h3>Sidecar or showcase layer</h3>
+ <ul>
+ <li>Ambient dashboard for live branches and prompts</li>
+ <li>Note Stream as a dogfood capture surface</li>
+ <li>Messaging agent after the memory spine works</li>
+ </ul>
+ </div>
+ <div class="lane distraction">
+ <h3>Likely distraction if pursued too early</h3>
+ <ul>
+ <li>Rebuilding the whole note-taking stack before proving memory value</li>
+ <li>Launching on every messaging channel at once</li>
+ <li>Letting Better GPT become the main product story</li>
+ </ul>
+ </div>
+ </div>
+ </article>
+ </section>
+
+ <section class="matrix">
+ <div class="small">Impact × Effort Read</div>
+ <h2>Priority matrix</h2>
+ <div class="matrix-wrap">
+ <div class="quad-label q1">Quick wins</div>
+ <div class="quad-label q2">Big bets</div>
+ <div class="quad-label q3">Useful but secondary</div>
+ <div class="quad-label q4">Tempting detours</div>
+ <div class="axis-label axis-top">High impact</div>
+ <div class="axis-label axis-bottom">Lower impact</div>
+ <div class="axis-label axis-left">Lower effort</div>
+ <div class="axis-label axis-right">Higher effort</div>
+
+ <div class="plot-note plot-green" style="top: 76px; left: 72px; --twist:-1.5deg;">
+ <strong>Slack bot</strong>
+ <p>Best proof that the wiki is useful outside the meeting. Should ship early.</p>
+ </div>
+
+ <div class="plot-note plot-green" style="top: 118px; left: 280px; --twist:1.2deg;">
+ <strong>Meeting ingest + structure</strong>
+ <p>The least flashy item and the most existential one. This is the engine.</p>
+ </div>
+
+ <div class="plot-note plot-amber" style="top: 84px; right: 76px; --twist:0.8deg;">
+ <strong>Group context bot</strong>
+ <p>Very large upside, but distribution, privacy, and channel complexity all pile up fast.</p>
+ </div>
+
+ <div class="plot-note plot-blue" style="top: 248px; left: 88px; --twist:-0.8deg;">
+ <strong>Note Stream</strong>
+ <p>Useful dogfood and agent cockpit. Good support system, not the clearest flagship.</p>
+ </div>
+
+ <div class="plot-note plot-violet" style="top: 218px; left: 450px; --twist:1deg;">
+ <strong>Ambient display</strong>
+ <p>Great demo layer and possibly a product, but strongest once it rides on proven memory.</p>
+ </div>
+
+ <div class="plot-note plot-red" style="bottom: 54px; right: 78px; --twist:-1.1deg;">
+ <strong>Better GPT</strong>
+ <p>Powerful, synergistic, and probably off-axis from the meeting-memory thesis if externalized too soon.</p>
+ </div>
+ </div>
+ </section>
+
+ <section class="timeline">
+ <div class="small">Opinionated Build Order</div>
+ <h2>How I would sequence the possibility space</h2>
+ <div class="steps">
+ <div class="step" data-step="1">
+ <h3>Make meeting outputs reliable</h3>
+ <p>
+ Ingest Otter and adjacent note sources cleanly, extract structured artifacts, and prove that a meeting really
+ updates team memory with minimal human cleanup.
+ </p>
+ </div>
+ <div class="step" data-step="2">
+ <h3>Surface the memory in Slack</h3>
+ <p>
+ Ship the bot that answers questions, recalls prior decisions, and shows that the memory graph actually helps
+ between meetings instead of just after them.
+ </p>
+ </div>
+ <div class="step" data-step="3">
+ <h3>Add privacy-scoped actions</h3>
+ <p>
+ Approvals, scoped sharing, and selective access become the bridge from passive memory to active coordination.
+ </p>
+ </div>
+ <div class="step" data-step="4">
+ <h3>Expand into messaging</h3>
+ <p>
+ Start with the simpler personal-side agent if needed, then move toward shared-thread assistants when trust and
+ infrastructure catch up.
+ </p>
+ </div>
+ <div class="step" data-step="5">
+ <h3>Productize sidecars only after they earn it</h3>
+ <p>
+ Ambient dashboards, Note Stream, and Better GPT should either amplify the core product or be clearly spun out,
+ not remain half-integrated ambition sinks.
+ </p>
+ </div>
+ </div>
+ <p class="footer-note">
+ Distilled from the April 20, 2026 monologue: one core system, six adjacent branches, and a strong need for sharper scope discipline.
+ </p>
+ </section>
+ </main>
+</body>
+</html>
\ No newline at end of file