npm - copilot-tap-extension - Versions diffs - 2.0.7 → 2.0.9 - Mend

copilot-tap-extension 2.0.7 → 2.0.9

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

package/README.md +4 -1
package/SOUL.md +51 -0
package/bin/install.mjs +7 -1
package/dist/copilot-instructions.md +15 -0
package/dist/extension.mjs +823 -29
package/dist/skills/tap-goal/SKILL.md +13 -2
package/dist/skills/tap-loop/SKILL.md +6 -0
package/dist/skills/tap-monitor/SKILL.md +19 -3
package/dist/skills/tap-orchestrate/SKILL.md +81 -0
package/dist/version.json +1 -1
package/docs/adr/0001-persistent-config-default-ownership.md +33 -0
package/docs/adr/0002-local-provider-gateway-runtime-security.md +36 -0
package/docs/adr/0003-emitter-delivery-lifecycle.md +68 -0
package/docs/adr/0004-persistent-config-canonical-streams.md +86 -0
package/docs/adr/0005-provider-sdk-push-and-dynamic-tools.md +48 -0
package/docs/adr/0006-command-emitter-cwd-workspace-boundary.md +46 -0
package/docs/adr/0007-runtime-session-workspace-context.md +62 -0
package/docs/evals.md +41 -0
package/docs/evolution-of-tap-icon.html +989 -0
package/docs/providers.md +242 -0
package/docs/recipes/adaptive-agent.md +303 -0
package/docs/recipes/agent-brainstorm/100-extension-ideas.md +288 -0
package/docs/recipes/agent-brainstorm/deep-ideas.md +216 -0
package/docs/recipes/ambient-guardian.md +314 -0
package/docs/recipes/browser-bridge.md +162 -0
package/docs/recipes/codex-goals-for-tap-goal.md +136 -0
package/docs/recipes/copilot-sdk-canvas.md +147 -0
package/docs/recipes/deferred-cognition.md +310 -0
package/docs/recipes/provider-integration-patterns.md +93 -0
package/docs/recipes/provider-interface-advanced.md +1364 -0
package/docs/recipes/provider-interface-core-profile.md +568 -0
package/docs/recipes/tap-control-plane-roadmap.md +60 -0
package/docs/recipes/universal-tool-gateway.md +202 -0
package/docs/reference.md +229 -0
package/docs/use-cases.md +348 -0
package/package.json +4 -1
package/providers/detour/README.md +84 -0
package/providers/detour/bridge.js +219 -0
package/providers/detour/index.mjs +322 -0
package/providers/detour/package-lock.json +577 -0
package/providers/detour/package.json +19 -0
package/providers/detour/scripts/build.mjs +31 -0
package/providers/detour/src/bridge.js +256 -0
package/providers/detour/src/contracts.js +40 -0
package/providers/detour/src/inspector.js +260 -0
package/providers/detour/src/inspector.test.mjs +53 -0
package/providers/detour/src/panel.js +465 -0
package/providers/detour/src/provider-core.js +233 -0
package/providers/detour/src/provider-core.test.mjs +185 -0
package/providers/detour/src/react-context-core.js +143 -0
package/providers/detour/src/react-context.js +44 -0
package/providers/detour/src/react-context.test.mjs +41 -0
package/providers/templates/README.md +23 -0
package/providers/templates/ci-review-provider.mjs +46 -0
package/providers/templates/detour-workflow-provider.mjs +41 -0
package/providers/templates/jira-github-provider.mjs +42 -0
package/providers/templates/provider-utils.mjs +45 -0
package/providers/templates/sast-triage-provider.mjs +51 -0

package/docs/evolution-of-tap-icon.html ADDED Viewed

@@ -0,0 +1,989 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Evolution of the ※ Tap Icon</title>
+<style>
+  :root {
+    --bg: #FAFAFA;
+    --card: #FFFFFF;
+    --text: #6B7075;
+    --text-strong: #2D3033;
+    --text-heading: #1A1C1E;
+    --text-muted: #9A9FA3;
+    --text-faint: #B0B4B8;
+    --rule: #E8EAEB;
+    --quote: #8A8F93;
+    --teal: #2D7D9E;
+    --accent: #3994BC;
+    --accent-tint: #F0F7FA;
+    --accent-deep: #297AA0;
+    --shadow-1: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
+    --shadow-2: 0 1px 3px rgba(0,0,0,.06), 0 3px 12px rgba(0,0,0,.04);
+    --shadow-hover: 0 2px 8px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
+    --num-col: 80px; /* iteration-number min-width (56) + header gap (24) */
+    /* Terminal palette — shared by .cli and .glyph-cli */
+    --term-bg: #1E1E1E;
+    --term-fg: #C0C0C0;
+    --term-prompt: #569CD6;
+    --term-input: #9CDCFE;
+    --term-tap: #4EC9B0;
+    --term-err: #CE9178;
+    --term-ok: #DCDCAA;
+    --term-comment: #6A9955;
+  }
+  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
+  ::selection { background: var(--accent-tint); color: var(--accent-deep); }
+  .page { max-width: 1040px; margin: 0 auto; padding: 80px 48px 120px; }
+  h1 { font-size: 42px; font-weight: 300; color: var(--text-heading); letter-spacing: -0.022em; line-height: 1.15; margin-bottom: 12px; }
+  .subtitle { font-size: 18px; color: var(--text-muted); line-height: 1.5; margin-bottom: 56px; max-width: 720px; }
+  h2 { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .14em; margin: 64px 0 20px; }
+  h3 { font-size: 22px; font-weight: 400; color: var(--text-strong); line-height: 1.3; margin-bottom: 14px; }
+  p { font-size: 16px; line-height: 1.65; margin-bottom: 16px; max-width: 720px; }
+  .muted { color: var(--text-faint); }
+  .highlight { color: var(--accent-deep); }
+  blockquote { border-left: 3px solid var(--accent); padding-left: 20px; margin: 24px 0; font-style: italic; color: var(--quote); font-size: 17px; line-height: 1.6; max-width: 720px; }
+  /* Icon display */
+  .icon-row { display: flex; align-items: center; gap: 28px; margin: 28px 0 36px; flex-wrap: wrap; }
+  .icon-cell { display: flex; flex-direction: column; align-items: center; gap: 10px; }
+  .icon-cell svg { background: var(--card); border-radius: 12px; padding: 10px; box-shadow: var(--shadow-1); }
+  .icon-label { font-size: 11px; color: var(--quote); text-transform: uppercase; letter-spacing: .1em; font-weight: 500; }
+  /* Iterations: 2-column grid of compact cards */
+  .iterations-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 36px 0; }
+  .iteration { background: var(--card); border-radius: 16px; padding: 26px 28px; box-shadow: var(--shadow-2); margin: 0; position: relative; display: flex; flex-direction: column; }
+  .iteration-header { display: block; margin-bottom: 14px; padding-right: 40px; flex: 1 1 auto; }
+  .iteration-number { position: absolute; top: 22px; right: 24px; font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 13px; font-weight: 600; color: var(--text-faint); line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums; min-width: auto; text-align: right; }
+  .iteration-content { min-width: 0; }
+  .iteration-title { font-size: 19px; font-weight: 500; color: var(--text-strong); margin-bottom: 10px; line-height: 1.3; letter-spacing: -0.005em; }
+  .interpretation { font-size: 15px; color: var(--text); margin-bottom: 10px; line-height: 1.55; max-width: none; }
+  .approach { font-size: 14px; color: var(--text-muted); margin-bottom: 0; line-height: 1.55; max-width: none; font-style: italic; }
+  .icon-display { display: flex; align-items: stretch; gap: 16px; margin: 18px 0 0; margin-left: 0; flex-wrap: wrap; }
+  .icon-size { display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; }
+  .icon-size svg { background: var(--bg); border-radius: 10px; padding: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
+  .size-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }
+  /* Terminal glyph card — per iteration */
+  .glyph-card { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
+  .glyph-tag { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .1em; }
+  .glyph-cli { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 13px; background: var(--term-bg); color: var(--term-fg); padding: 14px 16px; border-radius: 10px; line-height: 1.5; box-shadow: 0 1px 2px rgba(0,0,0,.08); display: flex; align-items: center; column-gap: 10px; row-gap: 4px; flex-wrap: wrap; min-height: 84px; box-sizing: border-box; }
+  .glyph-cli .glyph { color: var(--term-tap); font-weight: 600; font-size: 18px; line-height: 1; flex-shrink: 0; min-width: 28px; text-align: center; }
+  .glyph-cli .tap { color: var(--term-tap); margin-right: -4px; }
+  .glyph-cli .err { color: var(--term-err); }
+  .glyph-cli .ok { color: var(--term-ok); }
+  .glyph-cli .msg { color: var(--term-fg); }
+  /* Gallery grid */
+  .gallery { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin: 40px 0; }
+  .gallery-item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 14px; background: var(--card); border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s cubic-bezier(.2,.8,.2,1); }
+  .gallery-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
+  .gallery-item svg { margin-bottom: 4px; }
+  .gallery-num { font-size: 11px; color: var(--text-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
+  .gallery-name { font-size: 12px; color: var(--text); text-align: center; font-weight: 500; line-height: 1.3; }
+  /* Divider */
+  .divider { border: none; height: 1px; background: var(--rule); margin: 48px 0; }
+  /* Category headers */
+  .category { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 6px; padding: 4px 10px; background: var(--accent-tint); border-radius: 6px; display: inline-block; }
+  /* Section subtitle (sits under h2 tag headers) */
+  .section-lede { font-size: 22px; color: var(--text-strong); font-weight: 400; margin-bottom: 20px; max-width: 760px; line-height: 1.4; letter-spacing: -0.005em; }
+  .section-body { max-width: 760px; }
+  .section-body p { font-size: 16px; line-height: 1.7; color: var(--text); }
+  .section-body p strong { color: var(--text-strong); font-weight: 600; }
+  /* Requirement list */
+  .req-list { list-style: none; padding: 0; margin: 18px 0; max-width: 760px; }
+  .req-list li { display: flex; gap: 18px; align-items: flex-start; padding: 18px 20px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-2); margin-bottom: 12px; }
+  .req-list .req-num { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 13px; color: var(--accent); font-weight: 600; min-width: 32px; padding-top: 2px; }
+  .req-list .req-body { font-size: 15px; line-height: 1.6; color: var(--text); }
+  .req-list .req-body strong { color: var(--text-strong); font-weight: 600; }
+  /* Inline tag chip */
+  .chip { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 12px; background: var(--accent-tint); color: var(--accent-deep); padding: 2px 8px; border-radius: 4px; margin: 0 2px; }
+  /* Brief coda — small italic note after the requirements list */
+  .brief-coda { font-size: 15px; color: var(--text-muted); max-width: 760px; margin-top: 16px; font-style: italic; }
+  /* Decision callout */
+  .decision { margin: 32px 0; padding: 22px 26px; background: var(--card); border-left: 3px solid var(--accent); border-radius: 4px 10px 10px 4px; box-shadow: var(--shadow-2); max-width: 800px; }
+  .decision strong { color: var(--text-strong); font-size: 15px; display: block; margin-bottom: 10px; }
+  .decision p { font-size: 15px; color: var(--text); line-height: 1.7; margin: 0; max-width: none; }
+  .decision code { font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 13px; background: var(--accent-tint); color: var(--accent-deep); padding: 2px 7px; border-radius: 4px; }
+  /* CLI mockup */
+  .cli { background: var(--term-bg); color: var(--term-fg); font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace; font-size: 15px; padding: 28px 32px; border-radius: 12px; margin: 28px 0; line-height: 1.7; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
+  .cli .prompt { color: var(--term-prompt); }
+  .cli .input { color: var(--term-input); }
+  .cli .tap { color: var(--term-tap); }
+  .cli .err { color: var(--term-err); }
+  .cli .ok { color: var(--term-ok); }
+  .cli .cursor { color: var(--term-comment); animation: caret 1.1s steps(2, jump-none) infinite; }
+  @keyframes caret { 50% { opacity: 0; } }
+  /* Colophon */
+  .colophon { margin-top: 48px; color: var(--text-strong); opacity: .55; font-size: 13px; letter-spacing: .01em; }
+  @media (max-width: 820px) {
+    .iterations-grid { grid-template-columns: 1fr; gap: 16px; }
+  }
+  @media (max-width: 640px) {
+    .page { padding: 40px 20px 80px; }
+    .gallery { grid-template-columns: repeat(3, 1fr); }
+    .iteration { padding: 18px 20px; }
+    .iteration-number { top: 14px; right: 16px; }
+    .icon-display { margin-left: 0; }
+    .decision { padding: 16px 18px; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gallery-item { transition: none; }
+    .gallery-item:hover { transform: none; }
+    .cli .cursor { animation: none; }
+  }
+</style>
+</head>
+<body>
+<div class="page">
+<h1>20 Interpretations of "Tap"</h1>
+<p class="subtitle">20 independent agents, 20 unique metaphors, 20 SVG icons — each answering one question: <em>what does "tap" mean to you?</em></p>
+<blockquote>The app is called <strong>tap</strong> — a Copilot CLI extension that adds background event filtering and injection. It lets you "tap into" streams of data, filter noise, and surface important signals into your coding session. But "tap" is a word with many meanings. We asked 20 agents to each bring their own.</blockquote>
+<!-- ═══ THE BRIEF ═══ -->
+<h2>The Brief</h2>
+<h3 class="section-lede">What we needed before exploring</h3>
+<div class="section-body">
+  <p>Two artifacts, for the same product. Both have to feel like the same idea.</p>
+</div>
+<ol class="req-list">
+  <li>
+    <span class="req-num">01</span>
+    <span class="req-body"><strong>A 64 × 64 icon.</strong> An SVG mark for the Copilot CLI extension card. One size, one strong rendering — we don't need to scale down for very small contexts.</span>
+  </li>
+  <li>
+    <span class="req-num">02</span>
+    <span class="req-body"><strong>A terminal glyph.</strong> One to three characters — ASCII or Unicode — that prefix every message tap injects into the CLI. Must render in monospace fonts (Cascadia, Fira, Consolas), stay visually distinct from prompt markers like <code class="chip">$</code> <code class="chip">❯</code> <code class="chip">▶</code>, and connect semantically to the icon.</span>
+  </li>
+</ol>
+<p class="brief-coda">The icon brands the product. The glyph attaches to every line it speaks. They have to be the same idea in two media.</p>
+<hr class="divider">
+<!-- ═══ BRAINSTORMING ═══ -->
+<h2>Brainstorming — 20 Agents, 20 Metaphors</h2>
+<h3 class="section-lede">Each agent answered the same question independently: <em>what does "tap" mean to you?</em></h3>
+<div class="section-body">
+  <p>The brief was deliberately open. Pick a metaphor. Design the icon. Propose a glyph. We wanted variety, not consensus — to see which metaphors held up at icon sizes <em>and</em> in monospace text, and which collapsed when one of those constraints squeezed.</p>
+</div>
+<div class="gallery">
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h8c1.1 0 2 .9 2 2v1c0 .6-.4 1-1 1h-1v2c0 .6-.4 1-1 1H8" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 6v4" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="16" r="1.5" stroke="#3994BC" stroke-width="1.2" fill="none"/></svg>
+    <span class="gallery-num">01</span><span class="gallery-name">Data Tap</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10 L18 10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M10 10 L10 6" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M8 4 L10 6 L12 4" stroke="#3994BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="10" cy="10" r="1" fill="#3994BC"/><path d="M6 8 Q8 9 6 10 Q8 11 6 12" stroke="#3994BC" stroke-width="1" fill="none" opacity="0.6"/></svg>
+    <span class="gallery-num">02</span><span class="gallery-name">Wire Tap</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 14L12 14L16 6" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="5" cy="4" r="0.5" fill="#3994BC"/><circle cx="8" cy="3" r="0.5" fill="#3994BC"/><circle cx="11" cy="4" r="0.5" fill="#3994BC"/><circle cx="14" cy="3.5" r="0.5" fill="#3994BC"/><circle cx="15" cy="5" r="0.5" fill="#3994BC"/><circle cx="10" cy="16.5" r="0.8" fill="#2D7D9E"/></svg>
+    <span class="gallery-num">03</span><span class="gallery-name">Data Funnel</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none"><path d="M2 10 L7 10 L9 10 L10 5 L11 10 L13 10 L18 10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="5" r="1.5" fill="#3994BC"/></svg>
+    <span class="gallery-num">04</span><span class="gallery-name">Signal Spike</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 3C6 2 6.5 1.5 7.5 1.5C8.5 1.5 9 2 9 3V17C9 18 8.5 18.5 7.5 18.5C6.5 18.5 6 18 6 17V3Z" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><path d="M9 10H12C12.8 10 13.5 10.7 13.5 11.5C13.5 12.3 12.8 13 12 13H11" stroke="#2D7D9E" stroke-width="1.1" stroke-linecap="round"/><circle cx="11.5" cy="11.5" r="0.3" fill="#3994BC"/><path d="M11.2 13.2C11.2 13.8 11.7 14.3 12.3 14.3C12.9 14.3 13.4 13.8 13.4 13.2" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/></svg>
+    <span class="gallery-num">05</span><span class="gallery-name">Maple Tap</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="2" y1="10" x2="7" y2="10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><line x1="13" y1="10" x2="18" y2="10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="10" cy="10" r="3" stroke="#2D7D9E" stroke-width="1.5"/><line x1="10" y1="7" x2="10" y2="4" stroke="#3994BC" stroke-width="1.5" stroke-linecap="round"/><line x1="8" y1="4" x2="12" y2="4" stroke="#3994BC" stroke-width="1.5" stroke-linecap="round"/></svg>
+    <span class="gallery-num">06</span><span class="gallery-name">Pipeline Valve</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2C10 1.5 10.5 1 11 1C11.5 1 12 1.5 12 2V8L13.5 7C14 6.7 14.5 6.8 14.8 7.2C15.1 7.6 15 8.1 14.6 8.4L11.8 10.5C11.3 10.9 10.7 10.9 10.2 10.5L7.4 8.4C7 8.1 6.9 7.6 7.2 7.2C7.5 6.8 8 6.7 8.5 7L10 8V2Z" stroke="#2D7D9E" stroke-width="1" stroke-linejoin="round"/><circle cx="10" cy="12" r="2" stroke="#3994BC" stroke-width="0.8" opacity="0.8"/><circle cx="10" cy="12" r="4" stroke="#3994BC" stroke-width="0.6" opacity="0.5"/><circle cx="10" cy="12" r="6" stroke="#3994BC" stroke-width="0.4" opacity="0.3"/></svg>
+    <span class="gallery-num">07</span><span class="gallery-name">Gentle Tap</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="2" y1="10" x2="18" y2="10" stroke="#2D7D9E" stroke-width="1"/><circle cx="4" cy="7" r="0.8" fill="#3994BC"/><line x1="7" y1="7" x2="9" y2="7" stroke="#3994BC" stroke-width="1.2"/><circle cx="12" cy="7" r="0.8" fill="#3994BC"/><line x1="15" y1="7" x2="17" y2="7" stroke="#3994BC" stroke-width="1.2"/><line x1="3" y1="13" x2="5" y2="13" stroke="#2D7D9E" stroke-width="1.2"/><circle cx="8" cy="13" r="0.8" fill="#2D7D9E"/><circle cx="11" cy="13" r="0.8" fill="#2D7D9E"/><line x1="14" y1="13" x2="16" y2="13" stroke="#2D7D9E" stroke-width="1.2"/></svg>
+    <span class="gallery-num">08</span><span class="gallery-name">Morse Signal</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="10" y1="18" x2="10" y2="8" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="10" cy="8" r="1" fill="#2D7D9E"/><path d="M 7 8 A 3 3 0 0 1 13 8" stroke="#2D7D9E" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 5 8 A 5 5 0 0 1 15 8" stroke="#3994BC" stroke-width="1.5" fill="none" stroke-linecap="round"/><path d="M 3 8 A 7 7 0 0 1 17 8" stroke="#2D7D9E" stroke-width="1.2" fill="none" stroke-linecap="round"/><rect x="8.5" y="15" width="3" height="3" fill="#2D7D9E" rx="0.5"/></svg>
+    <span class="gallery-num">09</span><span class="gallery-name">Signal Antenna</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="3" stroke="#2D7D9E" stroke-width="0.8" opacity="0.6"/><circle cx="10" cy="10" r="5.5" stroke="#2D7D9E" stroke-width="0.6" opacity="0.4"/><circle cx="10" cy="10" r="8" stroke="#2D7D9E" stroke-width="0.4" opacity="0.3"/><line x1="10" y1="10" x2="10" y2="2" stroke="#3994BC" stroke-width="0.8"/><line x1="10" y1="10" x2="16.5" y2="5.5" stroke="#3994BC" stroke-width="0.6" opacity="0.7"/><circle cx="14.9" cy="6.1" r="1" fill="#3994BC"/><circle cx="10" cy="10" r="0.8" fill="#2D7D9E"/></svg>
+    <span class="gallery-num">10</span><span class="gallery-name">Sonar Ping</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2 L10 8 L10 12 L10 18" stroke="#2D7D9E" stroke-width="1.5" opacity="0.4" stroke-linecap="round"/><path d="M10 2 L10 8" stroke="#2D7D9E" stroke-width="2" stroke-linecap="round"/><path d="M10 8 Q12 9 14 11 Q16 13 17 16" stroke="#3994BC" stroke-width="2.5" stroke-linecap="round" fill="none"/><circle cx="10" cy="8" r="1" fill="#3994BC"/></svg>
+    <span class="gallery-num">11</span><span class="gallery-name">Stream Fork</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="5" y1="5" x2="15" y2="15" stroke="#2D7D9E" stroke-width="1.6" stroke-linecap="round"/><line x1="15" y1="5" x2="5" y2="15" stroke="#2D7D9E" stroke-width="1.6" stroke-linecap="round"/><circle cx="10" cy="3" r="0.8" fill="#3994BC"/><circle cx="17" cy="10" r="0.8" fill="#3994BC"/><circle cx="10" cy="17" r="0.8" fill="#3994BC"/><circle cx="3" cy="10" r="0.8" fill="#3994BC"/></svg>
+    <span class="gallery-num">12</span><span class="gallery-name">Strike Mark</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10C2 10 5.5 4 10 4C14.5 4 18 10 18 10C18 10 14.5 16 10 16C5.5 16 2 10 2 10Z" stroke="#2D7D9E" stroke-width="1.5" stroke-linejoin="round"/><circle cx="11" cy="9.5" r="3" stroke="#2D7D9E" stroke-width="1.5" fill="none"/><circle cx="11.5" cy="9" r="1.2" fill="#3994BC"/><path d="M1 6L3 8" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><path d="M1 14L3 12" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><path d="M19 6L17 8" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><circle cx="16" cy="4" r="1.5" fill="#3994BC"/></svg>
+    <span class="gallery-num">13</span><span class="gallery-name">Watchful Monitor</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="#2D7D9E" stroke-width="1.2" fill="none"/><g stroke="#2D7D9E" stroke-width="0.8"><line x1="4" y1="6" x2="16" y2="6"/><line x1="4" y1="8.5" x2="16" y2="8.5"/><line x1="4" y1="11" x2="16" y2="11"/><line x1="4" y1="13.5" x2="16" y2="13.5"/><line y1="4" x1="6" y2="16" x2="6"/><line y1="4" x1="8.5" y2="16" x2="8.5"/><line y1="4" x1="11" y2="16" x2="11"/><line y1="4" x1="13.5" y2="16" x2="13.5"/></g><circle cx="8.5" cy="8.5" r="0.8" fill="#3994BC"/><circle cx="13.5" cy="11" r="0.7" fill="#3994BC"/></svg>
+    <span class="gallery-num">14</span><span class="gallery-name">Data Sieve</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12c0-3.5 2.5-6 4-6s4 2.5 4 6v1h-8v-1z" stroke="#2D7D9E" stroke-width="1.5" stroke-dasharray="2 1" stroke-linecap="round"/><path d="M5 13h10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M10 15v1a1 1 0 0 1-2 0v-1" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M15 11c0.5-0.5 1-1 1.5-1" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><path d="M16 13c0.7-0.3 1.3-0.7 2-1" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/></svg>
+    <span class="gallery-num">15</span><span class="gallery-name">Smart Bell</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="8,6 14,10 8,14" stroke="#2D7D9E" stroke-width="1.5" fill="none"/><line x1="2" y1="10" x2="8" y2="10" stroke="#2D7D9E" stroke-width="1.5"/><line x1="14" y1="10" x2="18" y2="8" stroke="#2D7D9E" stroke-width="1.2"/><line x1="14" y1="10" x2="18" y2="10" stroke="#3994BC" stroke-width="1.8"/><line x1="14" y1="10" x2="18" y2="12" stroke="#2D7D9E" stroke-width="1.2"/><line x1="14" y1="10" x2="17.5" y2="14" stroke="#2D7D9E" stroke-width="1"/></svg>
+    <span class="gallery-num">16</span><span class="gallery-name">Signal Prism</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="11" r="1.5" stroke="#2D7D9E" stroke-width="0.4" opacity="1"/><circle cx="10" cy="11" r="3" stroke="#2D7D9E" stroke-width="0.3" opacity="0.7"/><circle cx="10" cy="11" r="4.5" stroke="#2D7D9E" stroke-width="0.25" opacity="0.4"/><circle cx="10" cy="11" r="6" stroke="#2D7D9E" stroke-width="0.2" opacity="0.2"/><path d="M10 7C9.5 7 9.2 7.4 9.2 7.8C9.2 8.4 10 9.5 10 9.5S10.8 8.4 10.8 7.8C10.8 7.4 10.5 7 10 7Z" fill="#3994BC"/></svg>
+    <span class="gallery-num">17</span><span class="gallery-name">Signal Drop</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 4C3 2.5 4 2 5 2C6 2 7 2.5 7 4C7 5 6.5 6 5.5 6.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><path d="M13 4C13 2.5 14 2 15 2C16 2 17 2.5 17 4C17 5 16.5 6 15.5 6.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><path d="M5.5 6.5C6.5 7 8 7.5 10 8.5C12 9.5 13.5 7 14.5 6.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" fill="none"/><path d="M10 8.5L10 13" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><circle cx="10" cy="15" r="2" stroke="#3994BC" stroke-width="1.5" fill="none"/><line x1="6" y1="18" x2="14" y2="18" stroke="#3994BC" stroke-width="1" opacity="0.6"/></svg>
+    <span class="gallery-num">18</span><span class="gallery-name">Stethoscope</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2h10v2.8c0 1.2-.8 2-2 2.8L10 10l3 2.4c1.2.8 2 1.6 2 2.8V18H5v-2c0-1.2.8-2 2-2.8L10 10 7 7.6C5.8 6.8 5 6 5 4.8V2z" stroke="#2D7D9E" stroke-width="1.2" stroke-linejoin="round"/><circle cx="8" cy="3.6" r="0.7" fill="#3994BC"/><circle cx="10.5" cy="4.2" r="0.5" fill="#3994BC"/><circle cx="12" cy="3.8" r="0.6" fill="#3994BC"/><circle cx="9.5" cy="5.4" r="0.4" fill="#3994BC"/><circle cx="11.5" cy="5.2" r="0.4" fill="#3994BC"/><circle cx="9" cy="14.5" r="0.7" fill="#2D7D9E"/><circle cx="11" cy="15.2" r="0.5" fill="#2D7D9E"/></svg>
+    <span class="gallery-num">19</span><span class="gallery-name">Time Filter</span>
+  </div>
+  <div class="gallery-item">
+    <svg width="48" height="48" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10h12" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="15.5" cy="10" r="3" stroke="#2D7D9E" stroke-width="1.5" fill="none"/><circle cx="15.5" cy="10" r="2" stroke="#3994BC" stroke-width="0.8" fill="none"/><circle cx="15.5" cy="10" r="1" stroke="#3994BC" stroke-width="0.6" fill="none"/><circle cx="2" cy="10" r="1.2" stroke="#2D7D9E" stroke-width="1.2" fill="none"/><circle cx="15.5" cy="10" r="0.3" fill="#3994BC"/></svg>
+    <span class="gallery-num">20</span><span class="gallery-name">Telescope</span>
+  </div>
+</div>
+<hr class="divider">
+<!-- ═══ DETAILED ITERATIONS ═══ -->
+<div class="iterations-grid">
+<!-- 01 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">01</span>
+    <div class="iteration-content">
+      <div class="category">Physical Metaphor</div>
+      <div class="iteration-title">The Water Tap — Data Tap</div>
+      <p class="interpretation">To me, "tap" means a faucet that controls water flow. This extension is like a tap on a data pipeline — you turn it to filter and control what information flows into your coding session. It extracts valuable drops from the data stream.</p>
+      <p class="approach">A minimal faucet silhouette with a simple spout and handle using clean strokes. A single droplet below represents the filtered, important events that make it through. The stroke-only design ensures clarity at small icon sizes.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8h8c1.1 0 2 .9 2 2v1c0 .6-.4 1-1 1h-1v2c0 .6-.4 1-1 1H8" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 6v4" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="16" r="1.5" stroke="#3994BC" stroke-width="1.2" fill="none"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">⊐•</span><span class="tap">tap:</span> <span class="msg">1 new event flowed through filter</span></div>
+    </div>
+  </div>
+</div>
+<!-- 02 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">02</span>
+    <div class="iteration-content">
+      <div class="category">Surveillance</div>
+      <div class="iteration-title">The Wire Tap</div>
+      <p class="interpretation">To me, "tap" evokes surveillance and monitoring — like tapping into a phone line or wire to listen for important communications. The extension silently monitors background data streams, filtering out noise and only surfacing critical signals when they matter.</p>
+      <p class="approach">A clean signal line with a branch point where the "tap" connects, featuring a small lightning bolt to indicate active monitoring. Teal tones suggest digital signals and surveillance technology.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10 L18 10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M10 10 L10 6" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M8 4 L10 6 L12 4" stroke="#3994BC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="10" cy="10" r="1" fill="#3994BC"/><path d="M6 8 Q8 9 6 10 Q8 11 6 12" stroke="#3994BC" stroke-width="1" fill="none" opacity="0.6"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">╫</span><span class="tap">tap:</span> <span class="msg">monitoring api.log on port 8080</span></div>
+    </div>
+  </div>
+</div>
+<!-- 03 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">03</span>
+    <div class="iteration-content">
+      <div class="category">Filtering</div>
+      <div class="iteration-title">The Funnel — Data Funnel</div>
+      <p class="interpretation">"Tap" means filtering signal from noise — like tapping into a data stream to extract only what matters. The funnel represents this transformation, where chaotic input becomes focused, actionable output.</p>
+      <p class="approach">A simple funnel/cone shape with multiple small elements entering the wide top and a single clean drop emerging from the narrow bottom. Stroke-based design with teal palette for technical precision.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6L8 14L12 14L16 6" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/><circle cx="5" cy="4" r="0.5" fill="#3994BC"/><circle cx="8" cy="3" r="0.5" fill="#3994BC"/><circle cx="11" cy="4" r="0.5" fill="#3994BC"/><circle cx="14" cy="3.5" r="0.5" fill="#3994BC"/><circle cx="15" cy="5" r="0.5" fill="#3994BC"/><circle cx="10" cy="16.5" r="0.8" fill="#2D7D9E"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">▽</span><span class="tap">tap:</span> <span class="msg">247 events filtered → 3 surfaced</span></div>
+    </div>
+  </div>
+</div>
+<!-- 04 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">04</span>
+    <div class="iteration-content">
+      <div class="category">Medical</div>
+      <div class="iteration-title">The Heartbeat Monitor — Signal Spike</div>
+      <p class="interpretation">"Tap" is a vital signs monitor for your code — it watches the continuous stream of development events and filters out the noise. When something critical happens, it spikes the signal and injects that important event directly into your awareness.</p>
+      <p class="approach">A clean EKG-style heartbeat line that runs mostly flat across the icon with one sharp spike in the center. A small dot marks the peak where the critical event gets injected.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none"><path d="M2 10 L7 10 L9 10 L10 5 L11 10 L13 10 L18 10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10" cy="5" r="1.5" fill="#3994BC"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">‾⋀‾</span><span class="tap">tap:</span> <span class="err">anomaly spike in test run #4821</span></div>
+    </div>
+  </div>
+</div>
+<!-- 05 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">05</span>
+    <div class="iteration-content">
+      <div class="category">Natural</div>
+      <div class="iteration-title">The Maple Tap</div>
+      <p class="interpretation">"Tap" means tapping a maple tree for its precious sap — drilling into the raw source to extract the sweet essence. Just like filtering data streams, you pierce through the noise (bark and wood) to collect the valuable signal (sap).</p>
+      <p class="approach">A simple tree trunk with a small spigot inserted horizontally, with a droplet forming below to show the extraction process. Organic, rounded forms with stroke-based styling.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 3C6 2 6.5 1.5 7.5 1.5C8.5 1.5 9 2 9 3V17C9 18 8.5 18.5 7.5 18.5C6.5 18.5 6 18 6 17V3Z" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><path d="M9 10H12C12.8 10 13.5 10.7 13.5 11.5C13.5 12.3 12.8 13 12 13H11" stroke="#2D7D9E" stroke-width="1.1" stroke-linecap="round"/><circle cx="11.5" cy="11.5" r="0.3" fill="#3994BC"/><path d="M11.2 13.2C11.2 13.8 11.7 14.3 12.3 14.3C12.9 14.3 13.4 13.8 13.4 13.2" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">┠○</span><span class="tap">tap:</span> <span class="msg">extracted 1 critical event from build log</span></div>
+    </div>
+  </div>
+</div>
+<!-- 06 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">06</span>
+    <div class="iteration-content">
+      <div class="category">Industrial</div>
+      <div class="iteration-title">The Pipeline Valve</div>
+      <p class="interpretation">To me, "tap" is an industrial valve on a data pipeline that controls the flow of information. You can open it wide to let all events through, close it to block noise, or adjust it to a precise trickle of important signals.</p>
+      <p class="approach">A horizontal pipe with a circular valve junction and a control handle on top. Simple geometric shapes with clean strokes create an industrial, functional aesthetic.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="2" y1="10" x2="7" y2="10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><line x1="13" y1="10" x2="18" y2="10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="10" cy="10" r="3" stroke="#2D7D9E" stroke-width="1.5"/><line x1="10" y1="7" x2="10" y2="4" stroke="#3994BC" stroke-width="1.5" stroke-linecap="round"/><line x1="8" y1="4" x2="12" y2="4" stroke="#3994BC" stroke-width="1.5" stroke-linecap="round"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">─⊕─</span><span class="tap">tap:</span> <span class="msg">filter 'errors-only' opened — 3 events through</span></div>
+    </div>
+  </div>
+</div>
+<!-- 07 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">07</span>
+    <div class="iteration-content">
+      <div class="category">Interaction</div>
+      <div class="iteration-title">The Finger Tap — Gentle Tap</div>
+      <p class="interpretation">"Tap" represents the gentlest form of communication — a light finger touch that draws attention without disruption. It's the digital equivalent of a shoulder tap, providing meaningful signals precisely when needed.</p>
+      <p class="approach">A minimalist finger making contact with concentric ripple circles that emanate outward, symbolizing the propagation of important information. Ripples suggest filtered, purposeful notifications.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2C10 1.5 10.5 1 11 1C11.5 1 12 1.5 12 2V8L13.5 7C14 6.7 14.5 6.8 14.8 7.2C15.1 7.6 15 8.1 14.6 8.4L11.8 10.5C11.3 10.9 10.7 10.9 10.2 10.5L7.4 8.4C7 8.1 6.9 7.6 7.2 7.2C7.5 6.8 8 6.7 8.5 7L10 8V2Z" stroke="#2D7D9E" stroke-width="1" stroke-linejoin="round"/><circle cx="10" cy="12" r="2" stroke="#3994BC" stroke-width="0.8" opacity="0.8"/><circle cx="10" cy="12" r="4" stroke="#3994BC" stroke-width="0.6" opacity="0.5"/><circle cx="10" cy="12" r="6" stroke="#3994BC" stroke-width="0.4" opacity="0.3"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">(·)</span><span class="tap">tap:</span> <span class="msg">shoulder tap — PR #37 needs review</span></div>
+    </div>
+  </div>
+</div>
+<!-- 08 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">08</span>
+    <div class="iteration-content">
+      <div class="category">Communication</div>
+      <div class="iteration-title">The Morse Key — Morse Signal</div>
+      <p class="interpretation">"Tap" evokes telegraph communication — the rhythmic tap-tap-tap of morse code translating raw signals into meaningful messages. The extension acts like a telegraph operator, decoding streams of data and filtering noise to surface important signals.</p>
+      <p class="approach">Abstract dots and dashes (morse code pattern) arranged around a horizontal baseline, suggesting signal decoding in progress. Minimal geometric elements remain clear at small sizes.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="2" y1="10" x2="18" y2="10" stroke="#2D7D9E" stroke-width="1"/><circle cx="4" cy="7" r="0.8" fill="#3994BC"/><line x1="7" y1="7" x2="9" y2="7" stroke="#3994BC" stroke-width="1.2"/><circle cx="12" cy="7" r="0.8" fill="#3994BC"/><line x1="15" y1="7" x2="17" y2="7" stroke="#3994BC" stroke-width="1.2"/><line x1="3" y1="13" x2="5" y2="13" stroke="#2D7D9E" stroke-width="1.2"/><circle cx="8" cy="13" r="0.8" fill="#2D7D9E"/><circle cx="11" cy="13" r="0.8" fill="#2D7D9E"/><line x1="14" y1="13" x2="16" y2="13" stroke="#2D7D9E" stroke-width="1.2"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">·−·</span><span class="tap">tap:</span> <span class="err">decoded: 3 errors in api.log</span></div>
+    </div>
+  </div>
+</div>
+<!-- 09 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">09</span>
+    <div class="iteration-content">
+      <div class="category">Broadcast</div>
+      <div class="iteration-title">The Antenna — Signal Antenna</div>
+      <p class="interpretation">"Tap" means tuning into the right frequency from a chaotic spectrum of signals. Like adjusting a radio antenna to cut through static and lock onto a clear station, this extension filters background noise to surface the important data streams you need.</p>
+      <p class="approach">A vertical antenna with concentric signal arcs radiating outward, where one arc is highlighted to represent the filtered "locked-in" frequency. Clean geometric lines remain crisp at small sizes.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="10" y1="18" x2="10" y2="8" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="10" cy="8" r="1" fill="#2D7D9E"/><path d="M 7 8 A 3 3 0 0 1 13 8" stroke="#2D7D9E" stroke-width="1.2" fill="none" stroke-linecap="round"/><path d="M 5 8 A 5 5 0 0 1 15 8" stroke="#3994BC" stroke-width="1.5" fill="none" stroke-linecap="round"/><path d="M 3 8 A 7 7 0 0 1 17 8" stroke="#2D7D9E" stroke-width="1.2" fill="none" stroke-linecap="round"/><rect x="8.5" y="15" width="3" height="3" fill="#2D7D9E" rx="0.5"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">Y))</span><span class="tap">tap:</span> <span class="msg">tuned to deploy.log — 1 active signal</span></div>
+    </div>
+  </div>
+</div>
+<!-- 10 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">10</span>
+    <div class="iteration-content">
+      <div class="category">Detection</div>
+      <div class="iteration-title">The Sonar Ping</div>
+      <p class="interpretation">"Tap" is a sonar pulse sent into the chaotic depths of system output, detecting when something significant bounces back. Like a submarine's sonar, it cuts through the noise to pinpoint critical signals — errors, status changes, events that matter.</p>
+      <p class="approach">A radar sweep design with concentric circles representing the pulse waves, a rotating scan line from the center, and a bright signal dot detected on one of the rings. Clean stroke-based geometry.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="3" stroke="#2D7D9E" stroke-width="0.8" opacity="0.6"/><circle cx="10" cy="10" r="5.5" stroke="#2D7D9E" stroke-width="0.6" opacity="0.4"/><circle cx="10" cy="10" r="8" stroke="#2D7D9E" stroke-width="0.4" opacity="0.3"/><line x1="10" y1="10" x2="10" y2="2" stroke="#3994BC" stroke-width="0.8"/><line x1="10" y1="10" x2="16.5" y2="5.5" stroke="#3994BC" stroke-width="0.6" opacity="0.7"/><circle cx="14.9" cy="6.1" r="1" fill="#3994BC"/><circle cx="10" cy="10" r="0.8" fill="#2D7D9E"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">((•))</span><span class="tap">tap:</span> <span class="err">ping detected exit code 1 in run #4821</span></div>
+    </div>
+  </div>
+</div>
+<!-- 11 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">11</span>
+    <div class="iteration-content">
+      <div class="category">Flow</div>
+      <div class="iteration-title">The Stream Fork</div>
+      <p class="interpretation">To me, "tap" means branching off from a main stream of data flow. Like a river fork where water splits, the extension creates a strategic diversion, capturing and redirecting important signals while letting the rest continue unnoticed.</p>
+      <p class="approach">A vertical flowing line that elegantly forks to the right. The main stream continues downward in a faded state while the branch curves prominently toward the viewer, symbolizing selective filtering and injection.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 2 L10 8 L10 12 L10 18" stroke="#2D7D9E" stroke-width="1.5" opacity="0.4" stroke-linecap="round"/><path d="M10 2 L10 8" stroke="#2D7D9E" stroke-width="2" stroke-linecap="round"/><path d="M10 8 Q12 9 14 11 Q16 13 17 16" stroke="#3994BC" stroke-width="2.5" stroke-linecap="round" fill="none"/><circle cx="10" cy="8" r="1" fill="#3994BC"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">├&gt;</span><span class="tap">tap:</span> <span class="msg">branched off — 1 event injected</span></div>
+    </div>
+  </div>
+</div>
+<!-- 12 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">12</span>
+    <div class="iteration-content">
+      <div class="category">Energy</div>
+      <div class="iteration-title">The Strike Mark</div>
+      <p class="interpretation">"Tap" means leaving a small mark when something hits. Most events glance off and disappear; the ones that matter strike home and register on every axis. The mark is the trace they leave — quick, locatable, hard to argue with.</p>
+      <p class="approach">Two crossed diagonal strokes form the strike itself, with four small accent dots at the cardinal positions to anchor the moment in space. Stroke-only and geometric — designed to read clearly even when reduced to a single character of inline text.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="5" y1="5" x2="15" y2="15" stroke="#2D7D9E" stroke-width="1.6" stroke-linecap="round"/><line x1="15" y1="5" x2="5" y2="15" stroke="#2D7D9E" stroke-width="1.6" stroke-linecap="round"/><circle cx="10" cy="3" r="0.8" fill="#3994BC"/><circle cx="17" cy="10" r="0.8" fill="#3994BC"/><circle cx="10" cy="17" r="0.8" fill="#3994BC"/><circle cx="3" cy="10" r="0.8" fill="#3994BC"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">※</span><span class="tap">tap:</span> <span class="err">build failed — exit code 1</span></div>
+    </div>
+  </div>
+</div>
+<!-- 13 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">13</span>
+    <div class="iteration-content">
+      <div class="category">Perception</div>
+      <div class="iteration-title">The Watchman — Watchful Monitor</div>
+      <p class="interpretation">"Tap" means being the silent sentinel of your development environment. An ever-vigilant watchman monitors the constant stream of background events, filtering out the noise while keeping its focus sharp for the signals that truly matter.</p>
+      <p class="approach">A stylized eye with an alert, slightly off-center pupil to suggest active scanning. Signal lines radiating from the eye indicate monitoring capabilities, with a notification indicator showing readiness.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10C2 10 5.5 4 10 4C14.5 4 18 10 18 10C18 10 14.5 16 10 16C5.5 16 2 10 2 10Z" stroke="#2D7D9E" stroke-width="1.5" stroke-linejoin="round"/><circle cx="11" cy="9.5" r="3" stroke="#2D7D9E" stroke-width="1.5" fill="none"/><circle cx="11.5" cy="9" r="1.2" fill="#3994BC"/><path d="M1 6L3 8" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><path d="M1 14L3 12" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><path d="M19 6L17 8" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><circle cx="16" cy="4" r="1.5" fill="#3994BC"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">◉</span><span class="tap">tap:</span> <span class="msg">watching 3 channels — 1 active</span></div>
+    </div>
+  </div>
+</div>
+<!-- 14 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">14</span>
+    <div class="iteration-content">
+      <div class="category">Filtering</div>
+      <div class="iteration-title">The Sieve — Data Sieve</div>
+      <p class="interpretation">"Tap" is a fine mesh sieve cast into the data stream — most events pass through as noise, but the important signals get caught in the filter. The mesh itself represents the EventFilter rules that determine what stays and what flows away.</p>
+      <p class="approach">A circular sieve with a stroke-based grid pattern, showing small dots falling through the mesh while one or two larger dots are caught at intersections. The grid uses primary teal while caught signals use the brighter accent.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" stroke="#2D7D9E" stroke-width="1.2" fill="none"/><g stroke="#2D7D9E" stroke-width="0.8"><line x1="4" y1="6" x2="16" y2="6"/><line x1="4" y1="8.5" x2="16" y2="8.5"/><line x1="4" y1="11" x2="16" y2="11"/><line x1="4" y1="13.5" x2="16" y2="13.5"/><line y1="4" x1="6" y2="16" x2="6"/><line y1="4" x1="8.5" y2="16" x2="8.5"/><line y1="4" x1="11" y2="16" x2="11"/><line y1="4" x1="13.5" y2="16" x2="13.5"/></g><circle cx="8.5" cy="8.5" r="0.8" fill="#3994BC"/><circle cx="13.5" cy="11" r="0.7" fill="#3994BC"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">▦</span><span class="tap">tap:</span> <span class="msg">sieved 247 events → 3 caught</span></div>
+    </div>
+  </div>
+</div>
+<!-- 15 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">15</span>
+    <div class="iteration-content">
+      <div class="category">Notification</div>
+      <div class="iteration-title">The Smart Bell</div>
+      <p class="interpretation">"Tap" is the intelligent bell that cuts through the noise — silent for hours until that one critical moment when it delivers a perfectly timed chime. It's selective notification at its finest, filtering out the chaos to surface only what truly matters.</p>
+      <p class="approach">A bell silhouette with dashed lines to represent its selective nature, paired with a single sound wave emanating from one side. Muted sections suggest intelligent filtering.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12c0-3.5 2.5-6 4-6s4 2.5 4 6v1h-8v-1z" stroke="#2D7D9E" stroke-width="1.5" stroke-dasharray="2 1" stroke-linecap="round"/><path d="M5 13h10" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M10 15v1a1 1 0 0 1-2 0v-1" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><path d="M15 11c0.5-0.5 1-1 1.5-1" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/><path d="M16 13c0.7-0.3 1.3-0.7 2-1" stroke="#3994BC" stroke-width="1" stroke-linecap="round"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">(!)</span><span class="tap">tap:</span> <span class="ok">PR #37 approved by @sarah</span></div>
+    </div>
+  </div>
+</div>
+<!-- 16 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">16</span>
+    <div class="iteration-content">
+      <div class="category">Optics</div>
+      <div class="iteration-title">The Prism — Signal Prism</div>
+      <p class="interpretation">"Tap" is a prism that refracts the chaotic stream of development data into distinct, actionable signals. It transforms overwhelming noise of logs, events, and outputs into a clean spectrum where each type of information has its place and purpose.</p>
+      <p class="approach">A geometric triangular prism at the center with a single input beam from the left that splits into multiple output streams on the right. One output beam highlighted in the accent color represents the "injected" signal.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="8,6 14,10 8,14" stroke="#2D7D9E" stroke-width="1.5" fill="none"/><line x1="2" y1="10" x2="8" y2="10" stroke="#2D7D9E" stroke-width="1.5"/><line x1="14" y1="10" x2="18" y2="8" stroke="#2D7D9E" stroke-width="1.2"/><line x1="14" y1="10" x2="18" y2="10" stroke="#3994BC" stroke-width="1.8"/><line x1="14" y1="10" x2="18" y2="12" stroke="#2D7D9E" stroke-width="1.2"/><line x1="14" y1="10" x2="17.5" y2="14" stroke="#2D7D9E" stroke-width="1"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">▷⫶</span><span class="tap">tap:</span> <span class="msg">split log stream into 3 channels</span></div>
+    </div>
+  </div>
+</div>
+<!-- 17 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">17</span>
+    <div class="iteration-content">
+      <div class="category">Zen</div>
+      <div class="iteration-title">The Ripple — Signal Drop</div>
+      <p class="interpretation">"Tap" represents the precise moment when a meaningful signal breaks through the noise — like a single drop creating perfect ripples in still water. It's about capturing that transformative instant when background chaos becomes focused insight.</p>
+      <p class="approach">Concentric circles radiating from a center point with decreasing opacity to show ripples fading outward. A small teardrop above the center represents the incoming event. Minimalist, zen-like geometry.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="11" r="1.5" stroke="#2D7D9E" stroke-width="0.4" opacity="1"/><circle cx="10" cy="11" r="3" stroke="#2D7D9E" stroke-width="0.3" opacity="0.7"/><circle cx="10" cy="11" r="4.5" stroke="#2D7D9E" stroke-width="0.25" opacity="0.4"/><circle cx="10" cy="11" r="6" stroke="#2D7D9E" stroke-width="0.2" opacity="0.2"/><path d="M10 7C9.5 7 9.2 7.4 9.2 7.8C9.2 8.4 10 9.5 10 9.5S10.8 8.4 10.8 7.8C10.8 7.4 10.5 7 10 7Z" fill="#3994BC"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">◌</span><span class="tap">tap:</span> <span class="msg">1 event rippled through filter</span></div>
+    </div>
+  </div>
+</div>
+<!-- 18 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">18</span>
+    <div class="iteration-content">
+      <div class="category">Medical</div>
+      <div class="iteration-title">The Stethoscope — Diagnostic Stethoscope</div>
+      <p class="interpretation">"Tap" is diagnostic listening — placing your ear on the system to hear its heartbeat through layers of noise. Like a stethoscope filtering body sounds to detect arrhythmias, the extension listens for critical signals while ignoring normal operational beats.</p>
+      <p class="approach">A simplified stethoscope with curved earpieces, connecting tube, and chest piece touching a monitored surface. Clean stroke-based design with medical precision and smooth curves.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 4C3 2.5 4 2 5 2C6 2 7 2.5 7 4C7 5 6.5 6 5.5 6.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><path d="M13 4C13 2.5 14 2 15 2C16 2 17 2.5 17 4C17 5 16.5 6 15.5 6.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><path d="M5.5 6.5C6.5 7 8 7.5 10 8.5C12 9.5 13.5 7 14.5 6.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" fill="none"/><path d="M10 8.5L10 13" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round"/><circle cx="10" cy="15" r="2" stroke="#3994BC" stroke-width="1.5" fill="none"/><line x1="6" y1="18" x2="14" y2="18" stroke="#3994BC" stroke-width="1" opacity="0.6"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">⌒○</span><span class="tap">tap:</span> <span class="msg">irregular pattern in api.log</span></div>
+    </div>
+  </div>
+</div>
+<!-- 19 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">19</span>
+    <div class="iteration-content">
+      <div class="category">Time</div>
+      <div class="iteration-title">The Hourglass — Time Filter</div>
+      <p class="interpretation">"Tap" represents the flow of time and data streams, where events continuously pass through like sand in an hourglass. The narrow filter point allows only relevant signals to reach your coding environment.</p>
+      <p class="approach">An hourglass silhouette with geometric precision, showing abundant data particles above the constriction and selective, highlighted events below. The minimalist stroke design emphasizes the filtering action at the narrow waist.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 2h10v2.8c0 1.2-.8 2-2 2.8L10 10l3 2.4c1.2.8 2 1.6 2 2.8V18H5v-2c0-1.2.8-2 2-2.8L10 10 7 7.6C5.8 6.8 5 6 5 4.8V2z" stroke="#2D7D9E" stroke-width="1.2" stroke-linejoin="round"/><circle cx="8" cy="3.6" r="0.7" fill="#3994BC"/><circle cx="10.5" cy="4.2" r="0.5" fill="#3994BC"/><circle cx="12" cy="3.8" r="0.6" fill="#3994BC"/><circle cx="9.5" cy="5.4" r="0.4" fill="#3994BC"/><circle cx="11.5" cy="5.2" r="0.4" fill="#3994BC"/><circle cx="9" cy="14.5" r="0.7" fill="#2D7D9E"/><circle cx="11" cy="15.2" r="0.5" fill="#2D7D9E"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">⧖</span><span class="tap">tap:</span> <span class="msg">30s window — 3 events caught</span></div>
+    </div>
+  </div>
+</div>
+<!-- 20 -->
+<div class="iteration">
+  <div class="iteration-header">
+    <span class="iteration-number">20</span>
+    <div class="iteration-content">
+      <div class="category">Focus</div>
+      <div class="iteration-title">The Telescope — Signal Telescope</div>
+      <p class="interpretation">To me, "tap" represents a telescope that peers through the vast noise of background processes to bring distant, important signals into sharp focus. It's about having the right tool to see what matters when everything else is just blurred static in the distance.</p>
+      <p class="approach">A clean, stroke-based telescope with concentric focusing rings at the lens end and a small star visible through the scope. The design emphasizes zooming in on signal through noise, using simple geometric forms.</p>
+    </div>
+  </div>
+  <div class="icon-display">
+    <div class="icon-size">
+      <svg width="64" height="64" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 10h12" stroke="#2D7D9E" stroke-width="1.5" stroke-linecap="round"/><circle cx="15.5" cy="10" r="3" stroke="#2D7D9E" stroke-width="1.5" fill="none"/><circle cx="15.5" cy="10" r="2" stroke="#3994BC" stroke-width="0.8" fill="none"/><circle cx="15.5" cy="10" r="1" stroke="#3994BC" stroke-width="0.6" fill="none"/><circle cx="2" cy="10" r="1.2" stroke="#2D7D9E" stroke-width="1.2" fill="none"/><circle cx="15.5" cy="10" r="0.3" fill="#3994BC"/></svg>
+      <span class="size-label">64 × 64 icon</span>
+    </div>
+    <div class="glyph-card">
+      <span class="glyph-tag">Terminal prefix</span>
+      <div class="glyph-cli"><span class="glyph">─○</span><span class="tap">tap:</span> <span class="msg">zoomed in on test run #4821</span></div>
+    </div>
+  </div>
+</div>
+</div><!-- /.iterations-grid -->
+<hr class="divider">
+<!-- ═══ THEMES ═══ -->
+<h2>Recurring Themes</h2>
+<p><strong class="highlight">Filtering.</strong> The strongest cluster — funnel, sieve, prism, hourglass — all different shapes for the same idea: separating signal from noise. This is the core function of the extension.</p>
+<p><strong class="highlight">Monitoring.</strong> Wire tap, watchman, sonar, antenna, heartbeat — the extension as a silent observer. It watches so you don't have to, and only speaks when something changes.</p>
+<p><strong class="highlight">Flow control.</strong> Water tap, pipeline valve, stream fork — the extension as a mechanism that controls what passes through. You adjust the EventFilter like turning a valve.</p>
+<p><strong class="highlight">Gentle interruption.</strong> Finger tap, smart bell, ripple — the extension as a polite notifier. It doesn't scream; it taps your shoulder.</p>
+<p><strong class="highlight">Extraction.</strong> Maple tap, tree tap, strike mark — the extension reaches into raw sources and pulls out what's valuable. Most of the source is noise; the extract is signal.</p>
+<hr class="divider">
+<!-- ═══ CONVERGENCE ═══ -->
+<h2>Convergence — Why ※</h2>
+<h3 class="section-lede">After 20 explorations, three patterns showed up across the strongest entries.</h3>
+<div class="section-body">
+  <p><strong>Diagonal strokes carry intersection energy.</strong> The strike, the prism splitting, the wire tap branching off — all read as "something crossed paths here."</p>
+  <p><strong>Cardinal dots read as captured signals at any size.</strong> Sonar ping, strike mark, sieve. Four points fix a moment in space.</p>
+  <p><strong>No literal metaphor survived as a single character in a terminal.</strong> Faucets, hourglasses, antennas — they need too much detail to read at 12px monospace. Only the abstract marks scaled.</p>
+  <p>The ※ Reference Mark (U+203B) already encodes the first two: an X with four cardinal dots, in one Unicode codepoint. It renders in every monospace font. It literally means <em>"look here, this matters."</em> The icon and the glyph become the same character — which is what we needed all along.</p>
+  <p>Iteration 12 (Strike Mark) was the closest precursor: same X, same four dots. The convergence wasn't a leap — it was recognizing what the strongest exploration had already found.</p>
+</div>
+<hr class="divider">
+<!-- ═══ GEN 21: THE ※ MARK ═══ -->
+<h2>Gen 21 — The ※ Reference Mark</h2>
+<h3>One character. Ten icons.</h3>
+<p>After 20 metaphor explorations, the identity converged on a single Unicode character: <strong style="font-size: 26px; color: var(--text-strong); line-height: 1;">※</strong> (U+203B, Reference Mark). It's perfect — it literally means "look here, this is a reference to something important." That's exactly what tap does: it references the important events from background noise.</p>
+<p>The ※ shape is an <strong>X</strong> — two diagonal strokes — with <strong>dots at the four cardinal positions</strong> (top, bottom, left, right), nestled between the arms. The diagonals are the streams being monitored. The dots are the signals captured at each compass point.</p>
+<blockquote>The mark says: "I noticed something. Look here."</blockquote>
+<div class="icon-row" style="margin-top: 32px;">
+  <!-- 1: Pure ※ -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <defs><linearGradient id="i1-xgrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#3994BC"/><stop offset="100%" stop-color="#2D7D9E"/></linearGradient></defs>
+  <path d="M5.8 5.8 L14.2 14.2" stroke="url(#i1-xgrad)" stroke-width="2.5" stroke-linecap="round" fill="none"/>
+  <path d="M14.2 5.8 L5.8 14.2" stroke="url(#i1-xgrad)" stroke-width="2.5" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="4.0" r="1.9" fill="#3994BC"/><circle cx="16.0" cy="10" r="1.9" fill="#3994BC"/><circle cx="10" cy="16.0" r="1.9" fill="#2D7D9E"/><circle cx="4.0" cy="10" r="1.9" fill="#2D7D9E"/>
+</svg>
+    <span class="icon-label">Pure ※</span>
+  </div>
+  <!-- 2: ※ in Circle -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <circle cx="10" cy="10" r="7.5" stroke="#2D7D9E" stroke-width="1.4" fill="none" stroke-linecap="round"/>
+  <line x1="14.8" y1="4.7" x2="15.8" y2="3.7" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
+  <line x1="15.0" y1="15.0" x2="16.0" y2="16.0" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
+  <line x1="4.7" y1="14.8" x2="3.7" y2="15.8" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
+  <line x1="5.0" y1="5.0" x2="4.0" y2="4.0" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.7"/>
+  <path d="M6.2 6.2 L13.8 13.8" stroke="#3994BC" stroke-width="2.0" stroke-linecap="round" fill="none"/>
+  <path d="M13.8 6.2 L6.2 13.8" stroke="#3994BC" stroke-width="2.0" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="2.5" r="1.3" fill="#3994BC"/><circle cx="17.5" cy="10" r="1.3" fill="#3994BC"/><circle cx="10" cy="17.5" r="1.3" fill="#2D7D9E"/><circle cx="2.5" cy="10" r="1.3" fill="#2D7D9E"/>
+</svg>
+    <span class="icon-label">※ in Circle</span>
+  </div>
+  <!-- 3: ※ Pulse — EKG waveform replaces one diagonal -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <defs><linearGradient id="i3-ekg" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="#5BB8DA"/><stop offset="100%" stop-color="#3994BC"/></linearGradient></defs>
+  <path d="M15.5 4.5 L4.5 15.5" stroke="#2D7D9E" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+  <path d="M4.5 4.5 L8.5 8.5 L8.2 11.5 L11.0 9.0 L11.5 11.5 L15.5 15.5" stroke="url(#i3-ekg)" stroke-width="2.0" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  <circle cx="10" cy="4.0" r="1.5" fill="#5BB8DA"/><circle cx="16.0" cy="10" r="1.5" fill="#3994BC"/><circle cx="10" cy="16.0" r="1.5" fill="#2D7D9E"/><circle cx="4.0" cy="10" r="1.5" fill="#2D7D9E"/>
+</svg>
+    <span class="icon-label">※ Pulse</span>
+  </div>
+  <!-- 4: ※ Radar -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <circle cx="10" cy="10" r="3.5" stroke="#2D7D9E" stroke-width="0.7" fill="none" opacity="0.35"/>
+  <circle cx="10" cy="10" r="6" stroke="#2D7D9E" stroke-width="0.7" fill="none" opacity="0.35"/>
+  <circle cx="10" cy="10" r="8.5" stroke="#2D7D9E" stroke-width="0.7" fill="none" opacity="0.35"/>
+  <path d="M10 10 L4.34 4.34 A8.5 8.5 0 0 1 10 1.5 Z" fill="#3994BC" opacity="0.30"/>
+  <line x1="10" y1="10" x2="5" y2="5" stroke="#5BB8DA" stroke-width="1.5" stroke-linecap="round" opacity="0.9"/>
+  <path d="M5.8 5.8 L14.2 14.2" stroke="#2D7D9E" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+  <path d="M14.2 5.8 L5.8 14.2" stroke="#2D7D9E" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="4.0" r="1.3" fill="#3994BC"/><circle cx="16.0" cy="10" r="1.3" fill="#3994BC"/><circle cx="10" cy="16.0" r="1.3" fill="#2D7D9E"/><circle cx="4.0" cy="10" r="1.3" fill="#2D7D9E"/>
+  <circle cx="5.5" cy="5" r="0.9" fill="#5BB8DA" opacity="0.8"/>
+</svg>
+    <span class="icon-label">※ Radar</span>
+  </div>
+  <!-- 5: ※ Tap Point — mark at a wire junction -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <line x1="0.5" y1="9" x2="19.5" y2="9" stroke="#2D7D9E" stroke-width="1.0" stroke-linecap="round" opacity="0.4"/>
+  <line x1="0.5" y1="11" x2="19.5" y2="11" stroke="#2D7D9E" stroke-width="1.0" stroke-linecap="round" opacity="0.4"/>
+  <path d="M2.5 9.5 L4 10 L2.5 10.5" stroke="#3994BC" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.6"/>
+  <path d="M15.5 9.5 L17 10 L15.5 10.5" stroke="#3994BC" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" fill="none" opacity="0.6"/>
+  <path d="M5.5 5.5 L14.5 14.5" stroke="#3994BC" stroke-width="2.2" stroke-linecap="round" fill="none"/>
+  <path d="M14.5 5.5 L5.5 14.5" stroke="#3994BC" stroke-width="2.2" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="4.0" r="1.6" fill="#3994BC"/><circle cx="16.0" cy="10" r="1.6" fill="#3994BC"/><circle cx="10" cy="16.0" r="1.6" fill="#2D7D9E"/><circle cx="4.0" cy="10" r="1.6" fill="#2D7D9E"/>
+</svg>
+    <span class="icon-label">※ Tap Point</span>
+  </div>
+</div>
+<div class="icon-row">
+  <!-- 6: ※ Signal — one dot broadcasting -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <circle cx="10" cy="3.5" r="3.5" fill="#3994BC" opacity="0.2"/>
+  <path d="M6 3.5 A4 4 0 0 1 14 3.5" stroke="#5BB8DA" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.5"/>
+  <path d="M7.5 3.5 A2.5 2.5 0 0 1 12.5 3.5" stroke="#5BB8DA" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.6"/>
+  <path d="M5.8 5.8 L14.2 14.2" stroke="#2D7D9E" stroke-width="2.0" stroke-linecap="round" fill="none"/>
+  <path d="M14.2 5.8 L5.8 14.2" stroke="#2D7D9E" stroke-width="2.0" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="3.5" r="2.0" fill="#5BB8DA"/>
+  <circle cx="16.0" cy="10" r="1.0" fill="#2D7D9E" opacity="0.4"/><circle cx="10" cy="16.0" r="1.0" fill="#2D7D9E" opacity="0.4"/><circle cx="4.0" cy="10" r="1.0" fill="#2D7D9E" opacity="0.4"/>
+</svg>
+    <span class="icon-label">※ Signal</span>
+  </div>
+  <!-- 7: ※ Filter — noise in from top, signal out bottom -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <defs><linearGradient id="i7-out" x1="0.5" y1="0" x2="0.5" y2="1"><stop offset="0%" stop-color="#3994BC"/><stop offset="100%" stop-color="#5BB8DA"/></linearGradient></defs>
+  <line x1="3" y1="0.5" x2="8" y2="4.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.35"/>
+  <line x1="6" y1="0" x2="9" y2="4" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="10" y1="0" x2="10" y2="4.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.5" stroke-dasharray="1.5 1"/>
+  <line x1="14" y1="0" x2="11" y2="4" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.4"/>
+  <line x1="17" y1="0.5" x2="12" y2="4.5" stroke="#2D7D9E" stroke-width="1.2" stroke-linecap="round" opacity="0.35"/>
+  <path d="M5.5 5.5 L14.5 14.5" stroke="#3994BC" stroke-width="2.0" stroke-linecap="round" fill="none"/>
+  <path d="M14.5 5.5 L5.5 14.5" stroke="#3994BC" stroke-width="2.0" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="4.5" r="1.5" fill="#3994BC"/><circle cx="15.5" cy="10" r="1.5" fill="#3994BC"/><circle cx="10" cy="15.5" r="1.5" fill="#3994BC"/><circle cx="4.5" cy="10" r="1.5" fill="#3994BC"/>
+  <line x1="10" y1="15.5" x2="10" y2="19.5" stroke="#3994BC" stroke-width="4" stroke-linecap="round" opacity="0.1"/>
+  <line x1="10" y1="15.5" x2="10" y2="19.5" stroke="url(#i7-out)" stroke-width="2.2" stroke-linecap="round" opacity="0.9"/>
+</svg>
+    <span class="icon-label">※ Filter</span>
+  </div>
+  <!-- 8: ※ Ripple -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <circle cx="10" cy="10" r="9.5" stroke="#2D7D9E" stroke-width="0.5" fill="none" opacity="0.2"/>
+  <circle cx="10" cy="10" r="7.0" stroke="#2D7D9E" stroke-width="0.7" fill="none" opacity="0.35"/>
+  <circle cx="10" cy="10" r="4.5" stroke="#3994BC" stroke-width="1.0" fill="none" opacity="0.55"/>
+  <path d="M5.8 5.8 L14.2 14.2" stroke="#2D7D9E" stroke-width="2.2" stroke-linecap="round" fill="none"/>
+  <path d="M14.2 5.8 L5.8 14.2" stroke="#2D7D9E" stroke-width="2.2" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="4.0" r="1.6" fill="#3994BC"/><circle cx="16.0" cy="10" r="1.6" fill="#3994BC"/><circle cx="10" cy="16.0" r="1.6" fill="#2D7D9E"/><circle cx="4.0" cy="10" r="1.6" fill="#2D7D9E"/>
+</svg>
+    <span class="icon-label">※ Ripple</span>
+  </div>
+  <!-- 9: ※ Badge — rounded square -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <defs><linearGradient id="i9-bg" x1="0.5" y1="0" x2="0.5" y2="1"><stop offset="0%" stop-color="#3994BC"/><stop offset="100%" stop-color="#256D8A"/></linearGradient></defs>
+  <rect x="1.5" y="1.5" width="17" height="17" rx="3.8" fill="url(#i9-bg)"/>
+  <line x1="5" y1="2.5" x2="15" y2="2.5" stroke="white" stroke-width="0.5" stroke-linecap="round" opacity="0.2"/>
+  <path d="M6.2 6.2 L13.8 13.8" stroke="#D0ECF5" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+  <path d="M13.8 6.2 L6.2 13.8" stroke="#D0ECF5" stroke-width="1.8" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="4.5" r="1.15" fill="white" opacity="0.9"/><circle cx="15.5" cy="10" r="1.15" fill="white" opacity="0.9"/><circle cx="10" cy="15.5" r="1.15" fill="white" opacity="0.9"/><circle cx="4.5" cy="10" r="1.15" fill="white" opacity="0.9"/>
+</svg>
+    <span class="icon-label">※ Badge</span>
+  </div>
+  <!-- 10: ※ Minimal -->
+  <div class="icon-cell">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="64" height="64">
+  <path d="M6.0 6.0 L14.0 14.0" stroke="#297AA0" stroke-width="1.6" stroke-linecap="round" fill="none"/>
+  <path d="M14.0 6.0 L6.0 14.0" stroke="#297AA0" stroke-width="1.6" stroke-linecap="round" fill="none"/>
+  <circle cx="10" cy="4.2" r="0.8" fill="#297AA0"/><circle cx="15.8" cy="10" r="0.8" fill="#297AA0"/><circle cx="10" cy="15.8" r="0.8" fill="#297AA0"/><circle cx="4.2" cy="10" r="0.8" fill="#297AA0"/>
+</svg>
+    <span class="icon-label">※ Minimal</span>
+  </div>
+</div>
+<div class="decision">
+  <strong>Why ※ works for tap:</strong>
+  <p>It literally means "reference mark" — a typographic symbol that says <em>"look here, this matters."</em> That's exactly what an injected event does. The X strokes are the streams being monitored from all angles. The four cardinal dots are signals captured between the streams — one for each EventFilter outcome: drop, keep, surface, inject. In the CLI, it's just <code>※ tap:</code> — distinctive, compact, and impossible to confuse with anything else.</p>
+</div>
+<h2>In the CLI</h2>
+<h3>How ※ looks as a message prefix</h3>
+<div class="cli">
+  <span class="prompt">❯</span> <span class="input">working on auth module...</span><br>
+  <br>
+  <span class="tap">※ tap:</span> <span class="err">Build failed on run #4821 — exit code 1</span><br>
+  <span class="tap">※ tap:</span> <span class="ok">PR #37 approved by @sarah</span><br>
+  <span class="tap">※ tap:</span> <span class="err">3 new errors in api.log</span><br>
+  <br>
+  <span class="prompt">❯</span> <span class="cursor">█</span>
+</div>
+<p class="colophon">April 2026. 20 agents. 20 metaphors. 10 ※ variations. One mark: <em>※ tap</em>.</p>
+</div>
+</body>
+</html>