v0.1.0 commit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.superpowers/brainstorm/20960-1774881654/.server-stopped

@@ -0,0 +1 @@
+{"reason":"idle timeout","timestamp":1774884294221}

.superpowers/brainstorm/20960-1774881654/.server.log

@@ -0,0 +1,10 @@
+{"type":"server-started","port":63304,"host":"127.0.0.1","url_host":"localhost","url":"http://localhost:63304","screen_dir":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting-2.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/changelog-layout.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/roadmap-tab.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/roadmap-votes.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/feedback-form.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/feedback-form-v2.html"}
+{"type":"screen-added","file":"/Users/sean/Dev/battl/gunbuilder-prototype/.superpowers/brainstorm/20960-1774881654/waiting-3.html"}
+{"type":"server-stopped","reason":"idle timeout"}

.superpowers/brainstorm/20960-1774881654/.server.pid

@@ -0,0 +1 @@
+20969

.superpowers/brainstorm/20960-1774881654/changelog-layout.html

@@ -0,0 +1,113 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  h2 { font-size: 13px; font-weight: 600; color: #a1a1aa; margin-bottom: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
+
+  /* ── Tabs ── */
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  /* ── Changelog entries ── */
+  .entries { display: flex; flex-direction: column; gap: 0; }
+  .entry { display: grid; grid-template-columns: 120px 1fr; gap: 0 32px; border-bottom: 1px solid #18181b; padding: 32px 0; }
+  .entry:last-child { border-bottom: none; }
+  .entry-meta { padding-top: 4px; }
+  .entry-version { font-size: 12px; font-weight: 700; color: #fbbf24; font-family: monospace; margin-bottom: 4px; }
+  .entry-date { font-size: 11px; color: #3f3f46; }
+  .entry-title { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 8px; }
+  .entry-body { font-size: 13px; color: #71717a; line-height: 1.7; }
+  .entry-tags { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
+  .tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.05em; text-transform: uppercase; }
+  .tag-feature { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
+  .tag-fix { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
+  .tag-improvement { background: rgba(147,197,253,0.1); color: #93c5fd; border: 1px solid rgba(147,197,253,0.2); }
+
+  /* ── Roadmap items ── */
+  .roadmap { display: flex; flex-direction: column; gap: 12px; }
+  .roadmap-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #1c1c1f; border-radius: 10px; background: #0d0d0f; }
+  .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
+  .status-planned { background: #3f3f46; }
+  .status-inprogress { background: #fbbf24; box-shadow: 0 0 8px rgba(251,191,36,0.4); }
+  .status-shipped { background: #4ade80; }
+  .roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
+  .roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.6; }
+  .status-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; margin-left: auto; flex-shrink: 0; }
+  .badge-planned { background: rgba(63,63,70,0.4); color: #71717a; border: 1px solid #27272a; }
+  .badge-inprogress { background: rgba(251,191,36,0.1); color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); }
+  .badge-shipped { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  /* ── Section separators for roadmap ── */
+  .roadmap-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #3f3f46; margin: 24px 0 10px; }
+  .roadmap-group-label:first-child { margin-top: 0; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab active">What's New</div>
+    <div class="tab">What's Next</div>
+    <div class="tab">Give Feedback</div>
+  </div>
+
+  <!-- WHAT'S NEW -->
+  <div id="whats-new">
+    <div class="entries">
+      <div class="entry">
+        <div class="entry-meta">
+          <div class="entry-version">v0.4</div>
+          <div class="entry-date">Mar 28, 2026</div>
+        </div>
+        <div>
+          <div class="entry-tags">
+            <span class="tag tag-feature">Feature</span>
+            <span class="tag tag-improvement">Improvement</span>
+          </div>
+          <div class="entry-title">Homepage redesign + open access</div>
+          <div class="entry-body">Removed the beta gate. New landing page explains what Battl does without the jargon. Compatibility conflict warnings now surface inline while you build.</div>
+        </div>
+      </div>
+
+      <div class="entry">
+        <div class="entry-meta">
+          <div class="entry-version">v0.3</div>
+          <div class="entry-date">Mar 14, 2026</div>
+        </div>
+        <div>
+          <div class="entry-tags">
+            <span class="tag tag-feature">Feature</span>
+            <span class="tag tag-fix">Fix</span>
+          </div>
+          <div class="entry-title">Shareable build links + vault</div>
+          <div class="entry-body">Save and share builds with a single link. Anyone can view the parts list without an account. Fixed gas system validation that was incorrectly flagging mid-length configs.</div>
+        </div>
+      </div>
+
+      <div class="entry">
+        <div class="entry-meta">
+          <div class="entry-version">v0.2</div>
+          <div class="entry-date">Feb 28, 2026</div>
+        </div>
+        <div>
+          <div class="entry-tags">
+            <span class="tag tag-feature">Feature</span>
+          </div>
+          <div class="entry-title">Live pricing from real retailers</div>
+          <div class="entry-body">AvantLink feed integration. Running total updates as you add parts. Prices are pulled daily — no estimated MSRP, no sponsored rankings.</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/feedback-form-v2.html

@@ -0,0 +1,88 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  .feedback-header { margin-bottom: 28px; }
+  .feedback-header h2 { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
+  .feedback-header p { font-size: 13px; color: #52525b; line-height: 1.6; }
+
+  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
+  .form-field { margin-bottom: 20px; }
+  .form-label { font-size: 11px; font-weight: 600; color: #71717a; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; display: block; }
+  .form-input, .form-select, .form-textarea {
+    width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
+    background: #0d0d0f; border: 1px solid #27272a; border-radius: 8px;
+    color: #e4e4e7; outline: none;
+  }
+  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(251,191,36,0.4); }
+  .form-textarea { resize: vertical; min-height: 160px; line-height: 1.6; }
+  .form-select { appearance: none; cursor: pointer; }
+  .form-hint { font-size: 11px; color: #3f3f46; margin-top: 6px; }
+  .char-count { font-size: 11px; color: #3f3f46; text-align: right; margin-top: 6px; }
+
+  .form-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
+  .form-footer-note { font-size: 11px; color: #3f3f46; }
+
+  .btn-submit {
+    display: inline-flex; align-items: center; gap: 8px;
+    background: rgba(251,191,36,0.9); color: #000; font-size: 13px; font-weight: 700;
+    padding: 10px 28px; border-radius: 8px; border: none; cursor: pointer;
+    letter-spacing: 0.02em; font-family: inherit;
+  }
+  .btn-submit:hover { background: #fbbf24; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab">What's Next</div>
+    <div class="tab active">Give Feedback</div>
+  </div>
+
+  <div class="feedback-header">
+    <h2>Tell us what you think.</h2>
+    <p>Bug, feature idea, or general thought — we read everything. Rough language welcome.</p>
+  </div>
+
+  <div class="form-row">
+    <div class="form-field">
+      <label class="form-label">Category</label>
+      <select class="form-select">
+        <option>Bug report</option>
+        <option>Feature request</option>
+        <option>General feedback</option>
+      </select>
+    </div>
+    <div class="form-field">
+      <label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional — if you want a reply)</span></label>
+      <input class="form-input" type="email" placeholder="you@email.com" />
+    </div>
+  </div>
+
+  <div class="form-field">
+    <label class="form-label">Message</label>
+    <textarea class="form-textarea" placeholder="What's on your mind?"></textarea>
+    <div class="char-count">0 / 1000</div>
+  </div>
+
+  <div class="form-footer">
+    <span class="form-footer-note">We'll only use your email to follow up on your feedback.</span>
+    <button class="btn-submit">Send Feedback →</button>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/feedback-form.html

@@ -0,0 +1,160 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  /* ── Shared form styles ── */
+  .form-label { font-size: 11px; font-weight: 600; color: #71717a; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; display: block; }
+  .form-field { margin-bottom: 20px; }
+  .form-input, .form-select, .form-textarea {
+    width: 100%; padding: 10px 14px; font-size: 13px; font-family: inherit;
+    background: #0d0d0f; border: 1px solid #27272a; border-radius: 8px;
+    color: #e4e4e7; outline: none;
+  }
+  .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: rgba(251,191,36,0.4); }
+  .form-textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
+  .form-select { appearance: none; cursor: pointer; }
+  .form-hint { font-size: 11px; color: #3f3f46; margin-top: 6px; }
+  .btn-submit {
+    display: inline-flex; align-items: center; gap-8px; gap: 8px;
+    background: rgba(251,191,36,0.9); color: #000; font-size: 13px; font-weight: 700;
+    padding: 10px 24px; border-radius: 8px; border: none; cursor: pointer;
+    letter-spacing: 0.02em; font-family: inherit;
+  }
+  .btn-submit:hover { background: #fbbf24; }
+
+  /* ── Split view ── */
+  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
+
+  /* ── Page form (tab) ── */
+  .feedback-page { max-width: 560px; }
+  .feedback-page-header { margin-bottom: 28px; }
+  .feedback-page-header h2 { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -0.015em; margin-bottom: 6px; }
+  .feedback-page-header p { font-size: 13px; color: #52525b; line-height: 1.6; }
+
+  /* ── Modal ── */
+  .modal-wrap { position: relative; }
+  .modal-label { font-size: 10px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #52525b; margin-bottom: 12px; text-align: center; }
+  .modal {
+    background: #111113; border: 1px solid #27272a; border-radius: 14px;
+    padding: 28px; width: 100%;
+    box-shadow: 0 24px 80px rgba(0,0,0,0.6);
+  }
+  .modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+  .modal-title { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
+  .modal-close { font-size: 18px; color: #3f3f46; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; line-height: 1; }
+  .modal-close:hover { color: #71717a; }
+
+  /* Nav trigger button (shown for context) */
+  .nav-context { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #18181b; }
+  .nav-context-label { font-size: 10px; color: #3f3f46; letter-spacing: 0.05em; }
+  .btn-feedback-nav {
+    padding: 6px 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
+    border: 1px solid #27272a; color: #71717a; background: transparent;
+    cursor: pointer; font-family: inherit; letter-spacing: 0.02em;
+  }
+
+  .divider { width: 1px; background: #18181b; align-self: stretch; }
+
+  .char-count { font-size: 11px; color: #3f3f46; text-align: right; margin-top: 6px; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab">What's Next</div>
+    <div class="tab active">Give Feedback</div>
+  </div>
+
+  <div class="split">
+
+    <!-- LEFT: Tab / page form -->
+    <div>
+      <p class="modal-label" style="text-align:left; margin-bottom: 20px;">Give Feedback tab (full page)</p>
+      <div class="feedback-page">
+        <div class="feedback-page-header">
+          <h2>Tell us what you think.</h2>
+          <p>Bug, feature idea, or general thought — we read everything. Rough language welcome.</p>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Category</label>
+          <select class="form-select">
+            <option>Bug report</option>
+            <option>Feature request</option>
+            <option>General feedback</option>
+          </select>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Message</label>
+          <textarea class="form-textarea" placeholder="What's on your mind?"></textarea>
+          <div class="char-count">0 / 1000</div>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional — if you want a reply)</span></label>
+          <input class="form-input" type="email" placeholder="you@email.com" />
+          <p class="form-hint">We'll only use this to follow up on your feedback.</p>
+        </div>
+
+        <button class="btn-submit">Send Feedback →</button>
+      </div>
+    </div>
+
+    <div class="divider"></div>
+
+    <!-- RIGHT: Modal (triggered from nav/footer) -->
+    <div>
+      <div class="nav-context">
+        <span class="nav-context-label">Triggered from nav/footer →</span>
+        <button class="btn-feedback-nav">Send Feedback</button>
+      </div>
+      <p class="modal-label">Modal</p>
+      <div class="modal">
+        <div class="modal-header">
+          <span class="modal-title">Send Feedback</span>
+          <button class="modal-close">✕</button>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Category</label>
+          <select class="form-select">
+            <option>Bug report</option>
+            <option>Feature request</option>
+            <option>General feedback</option>
+          </select>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Message</label>
+          <textarea class="form-textarea" style="min-height:100px;" placeholder="What's on your mind?"></textarea>
+          <div class="char-count">0 / 1000</div>
+        </div>
+
+        <div class="form-field">
+          <label class="form-label">Email <span style="color:#3f3f46; font-weight:400; text-transform:none; letter-spacing:0;">(optional)</span></label>
+          <input class="form-input" type="email" placeholder="you@email.com" />
+        </div>
+
+        <button class="btn-submit" style="width:100%; justify-content:center;">Send Feedback →</button>
+      </div>
+    </div>
+
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/roadmap-tab.html

@@ -0,0 +1,104 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  .roadmap { display: flex; flex-direction: column; gap: 10px; }
+  .roadmap-item { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid #1c1c1f; border-radius: 10px; background: #0d0d0f; }
+  .dot-col { display: flex; flex-direction: column; align-items: center; gap: 0; padding-top: 5px; flex-shrink: 0; }
+  .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
+  .status-planned .status-dot { background: #3f3f46; }
+  .status-inprogress .status-dot { background: #fbbf24; box-shadow: 0 0 10px rgba(251,191,36,0.5); }
+  .status-shipped .status-dot { background: #4ade80; }
+  .roadmap-body { flex: 1; }
+  .roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
+  .roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.65; }
+  .status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; flex-shrink: 0; margin-top: 2px; }
+  .status-planned .status-badge { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
+  .status-inprogress .status-badge { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
+  .status-shipped .status-badge { background: rgba(74,222,128,0.08); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); }
+
+  .group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #3f3f46; margin: 28px 0 10px; }
+  .group-label:first-child { margin-top: 0; }
+
+  .roadmap-note { margin-top: 32px; padding: 16px 20px; border: 1px solid #18181b; border-radius: 8px; font-size: 12px; color: #3f3f46; line-height: 1.6; }
+  .roadmap-note a { color: #52525b; text-decoration: underline; text-underline-offset: 3px; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab active">What's Next</div>
+    <div class="tab">Give Feedback</div>
+  </div>
+
+  <div class="roadmap">
+    <div class="group-label">In Progress</div>
+
+    <div class="roadmap-item status-inprogress">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Compatibility engine — gas system + buffer</div>
+        <div class="roadmap-item-desc">Automatic warnings when barrel length and gas system length don't match, and when buffer weight conflicts with your stock/brace selection.</div>
+      </div>
+      <span class="status-badge">In Progress</span>
+    </div>
+
+    <div class="roadmap-item status-inprogress">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Mobile builder experience</div>
+        <div class="roadmap-item-desc">Full 375px breakpoint pass on the builder, parts browser, and build summary. Lighthouse score target ≥70.</div>
+      </div>
+      <span class="status-badge">In Progress</span>
+    </div>
+
+    <div class="group-label">Planned</div>
+
+    <div class="roadmap-item status-planned">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Expanded parts catalog</div>
+        <div class="roadmap-item-desc">50–75 SKUs across all 10 slots, 3–5 options per category, with live AvantLink pricing.</div>
+      </div>
+      <span class="status-badge">Planned</span>
+    </div>
+
+    <div class="roadmap-item status-planned">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Build guides — first wave</div>
+        <div class="roadmap-item-desc">Three long-form guides targeting "AR-15 build planner" and related keywords. Written for the ICP: experienced shooter, not an expert builder.</div>
+      </div>
+      <span class="status-badge">Planned</span>
+    </div>
+
+    <div class="roadmap-item status-planned">
+      <div class="dot-col"><span class="status-dot"></span></div>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Caliber cross-compatibility checks</div>
+        <div class="roadmap-item-desc">Flag mismatches between upper and lower when mixing calibers (e.g., .300 Blackout upper on a 5.56 lower).</div>
+      </div>
+      <span class="status-badge">Planned</span>
+    </div>
+
+    <div class="roadmap-note">
+      Have something you want to see? <a href="#">Give us feedback →</a>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/roadmap-votes.html

@@ -0,0 +1,150 @@
+<style>
+  * { box-sizing: border-box; margin: 0; padding: 0; }
+  body { background: #09090b; color: #f4f4f5; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; padding: 32px 24px; }
+  .wrap { max-width: 900px; margin: 0 auto; }
+
+  .tabs { display: flex; gap: 0; border-bottom: 1px solid #27272a; margin-bottom: 40px; }
+  .tab { padding: 10px 20px; font-size: 13px; font-weight: 500; color: #71717a; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
+  .tab.active { color: #fbbf24; border-bottom-color: #fbbf24; }
+
+  .page-header { margin-bottom: 40px; }
+  .page-label { font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #52525b; margin-bottom: 8px; }
+  .page-title { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.02em; margin-bottom: 6px; }
+  .page-sub { font-size: 14px; color: #52525b; }
+
+  .roadmap { display: flex; flex-direction: column; gap: 10px; }
+
+  .roadmap-item {
+    display: grid;
+    grid-template-columns: 52px 1fr auto;
+    gap: 0 16px;
+    align-items: center;
+    padding: 20px;
+    border: 1px solid #1c1c1f;
+    border-radius: 10px;
+    background: #0d0d0f;
+  }
+
+  /* Upvote button */
+  .upvote {
+    display: flex; flex-direction: column; align-items: center; justify-content: center;
+    gap: 3px; width: 44px; height: 52px;
+    border: 1px solid #27272a; border-radius: 8px; background: transparent;
+    cursor: pointer; color: #52525b; transition: all 0.15s;
+    font-size: 11px; font-weight: 700; font-family: inherit;
+  }
+  .upvote:hover { border-color: #fbbf24; color: #fbbf24; background: rgba(251,191,36,0.06); }
+  .upvote.voted { border-color: rgba(251,191,36,0.4); color: #fbbf24; background: rgba(251,191,36,0.08); }
+  .upvote svg { width: 14px; height: 14px; }
+
+  .roadmap-body { }
+  .roadmap-item-title { font-size: 14px; font-weight: 600; color: #e4e4e7; margin-bottom: 4px; }
+  .roadmap-item-desc { font-size: 12px; color: #52525b; line-height: 1.65; }
+
+  .right-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
+  .status-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 99px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
+  .badge-planned { background: rgba(63,63,70,0.4); color: #52525b; border: 1px solid #27272a; }
+  .badge-inprogress { background: rgba(251,191,36,0.08); color: #fbbf24; border: 1px solid rgba(251,191,36,0.25); }
+
+  .group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #3f3f46; margin: 28px 0 10px; }
+  .group-label:first-child { margin-top: 0; }
+
+  .roadmap-note { margin-top: 32px; padding: 16px 20px; border: 1px solid #18181b; border-radius: 8px; font-size: 12px; color: #3f3f46; line-height: 1.6; }
+  .roadmap-note a { color: #52525b; text-decoration: underline; text-underline-offset: 3px; }
+
+  .auth-hint { font-size: 10px; color: #3f3f46; margin-top: 4px; }
+</style>
+
+<div class="wrap">
+  <div class="page-header">
+    <p class="page-label">Battl Builders</p>
+    <h1 class="page-title">Updates</h1>
+    <p class="page-sub">What we've shipped and what's coming next.</p>
+  </div>
+
+  <div class="tabs">
+    <div class="tab">What's New</div>
+    <div class="tab active">What's Next</div>
+    <div class="tab">Give Feedback</div>
+  </div>
+
+  <div class="roadmap">
+    <div class="group-label">In Progress</div>
+
+    <div class="roadmap-item">
+      <button class="upvote voted" title="Remove vote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        24
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Compatibility engine — gas system + buffer</div>
+        <div class="roadmap-item-desc">Automatic warnings when barrel length and gas system length don't match, and when buffer weight conflicts with your stock or brace selection.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-inprogress">In Progress</span>
+      </div>
+    </div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        11
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Mobile builder experience</div>
+        <div class="roadmap-item-desc">Full 375px breakpoint pass on the builder, parts browser, and build summary. Lighthouse score target ≥70.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-inprogress">In Progress</span>
+      </div>
+    </div>
+
+    <div class="group-label">Planned</div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        38
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Expanded parts catalog</div>
+        <div class="roadmap-item-desc">50–75 SKUs across all 10 slots, 3–5 options per category, with live AvantLink pricing.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-planned">Planned</span>
+      </div>
+    </div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        17
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Caliber cross-compatibility checks</div>
+        <div class="roadmap-item-desc">Flag mismatches between upper and lower when mixing calibers (e.g., .300 Blackout upper on a 5.56 lower).</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-planned">Planned</span>
+      </div>
+    </div>
+
+    <div class="roadmap-item">
+      <button class="upvote" title="Upvote">
+        <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 2l5 7H3z"/></svg>
+        9
+      </button>
+      <div class="roadmap-body">
+        <div class="roadmap-item-title">Build guides — first wave</div>
+        <div class="roadmap-item-desc">Three long-form guides targeting "AR-15 build planner" and related keywords. Written for the ICP: experienced shooter, not an expert builder.</div>
+      </div>
+      <div class="right-col">
+        <span class="status-badge badge-planned">Planned</span>
+      </div>
+    </div>
+
+    <div class="roadmap-note">
+      Don't see what you need? <a href="#">Give us feedback →</a>
+    </div>
+  </div>
+</div>

.superpowers/brainstorm/20960-1774881654/waiting-2.html

@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>

.superpowers/brainstorm/20960-1774881654/waiting-3.html

@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>

.superpowers/brainstorm/20960-1774881654/waiting.html

@@ -0,0 +1,3 @@
+<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
+  <p class="subtitle">Continuing in terminal...</p>
+</div>

app/(app)/changelog/page.tsx

@@ -0,0 +1,45 @@
+import type { Metadata } from 'next'
+import { changelogEntriesQuery, roadmapItemsQuery } from '@/lib/sanity'
+import { sanityFetch } from '@/lib/sanityFetch'
+import { ChangelogTabs } from '@/components/ChangelogTabs'
+import type { ChangelogEntry, RoadmapItemData } from '@/types/changelog'
+
+export const revalidate = 60
+
+export const metadata: Metadata = {
+  title: "What's New — Battl Builders",
+  description:
+    'Release notes, upcoming features, and product updates from Battl Builders.',
+}
+
+export default async function ChangelogPage() {
+  let entries: ChangelogEntry[] = []
+  let roadmapItems: RoadmapItemData[] = []
+
+  try {
+    entries = await sanityFetch<ChangelogEntry[]>(changelogEntriesQuery)
+  } catch (err) {
+    console.error('[Changelog] entries fetch failed:', err)
+  }
+
+  try {
+    roadmapItems = await sanityFetch<RoadmapItemData[]>(roadmapItemsQuery)
+  } catch (err) {
+    console.error('[Changelog] roadmap fetch failed:', err)
+  }
+
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-10">
+      <header className="mb-10">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
+          Battl Builders
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold tracking-tight">Updates</h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          What we&apos;ve shipped and what&apos;s coming next.
+        </p>
+      </header>
+      <ChangelogTabs entries={entries} roadmapItems={roadmapItems} />
+    </main>
+  )
+}

app/(app)/feedback/page.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from 'next'
+import { FeedbackForm } from '@/components/FeedbackForm'
+
+export const metadata: Metadata = {
+  title: 'Send Feedback — Battl Builders',
+  description:
+    'Report a bug, suggest a feature, or share a thought with the Battl Builders team.',
+}
+
+export default function FeedbackPage() {
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-10">
+      <header className="mb-10">
+        <p className="text-xs font-semibold uppercase tracking-[0.2em] text-zinc-500">
+          Battl Builders
+        </p>
+        <h1 className="mt-2 text-3xl font-semibold tracking-tight">
+          Send Feedback
+        </h1>
+        <p className="mt-2 text-sm text-zinc-400">
+          Bug, feature idea, or general thought — we read everything.
+        </p>
+      </header>
+      <FeedbackForm />
+    </main>
+  )
+}

app/admin/feedback/page.tsx

@@ -0,0 +1,194 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useAuth } from '@/context/AuthContext'
+
+type FeedbackSubmission = {
+  id: string
+  category: 'BUG' | 'FEATURE_REQUEST' | 'GENERAL'
+  message: string
+  email: string | null
+  // ipAddress is returned by the API but not displayed in the table (privacy/noise)
+  reviewed: boolean
+  createdAt: string
+}
+
+const CATEGORY_LABELS: Record<string, string> = {
+  BUG: 'Bug',
+  FEATURE_REQUEST: 'Feature Request',
+  GENERAL: 'General',
+}
+
+const CATEGORY_STYLES: Record<string, string> = {
+  BUG: 'bg-red-500/10 text-red-400 border border-red-500/20',
+  FEATURE_REQUEST: 'bg-amber-500/10 text-amber-400 border border-amber-500/20',
+  GENERAL: 'bg-zinc-800 text-zinc-400 border border-zinc-700',
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+export default function AdminFeedbackPage() {
+  const { getAuthHeaders } = useAuth()
+  const [items, setItems] = useState<FeedbackSubmission[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [categoryFilter, setCategoryFilter] = useState('ALL')
+  const [reviewedFilter, setReviewedFilter] = useState('ALL')
+
+  async function load() {
+    try {
+      setLoading(true)
+      setError(null)
+      const res = await fetch('/api/admin/feedback', {
+        headers: getAuthHeaders(),
+        credentials: 'include',
+      })
+      if (!res.ok) throw new Error(`Failed to load feedback (${res.status})`)
+      setItems(await res.json())
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    load()
+  }, []) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function toggleReviewed(item: FeedbackSubmission) {
+    const prev = items
+    setItems((cur) =>
+      cur.map((i) => (i.id === item.id ? { ...i, reviewed: !i.reviewed } : i))
+    )
+    try {
+      const res = await fetch(`/api/admin/feedback/${item.id}`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json', ...getAuthHeaders() },
+        credentials: 'include',
+        body: JSON.stringify({ reviewed: !item.reviewed }),
+      })
+      if (!res.ok) setItems(prev)
+    } catch {
+      setItems(prev)
+    }
+  }
+
+  const filtered = items.filter((i) => {
+    if (categoryFilter !== 'ALL' && i.category !== categoryFilter) return false
+    if (reviewedFilter === 'REVIEWED' && !i.reviewed) return false
+    if (reviewedFilter === 'UNREVIEWED' && i.reviewed) return false
+    return true
+  })
+
+  return (
+    <div>
+      <div className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">Feedback</h1>
+          <p className="mt-1 text-sm text-zinc-400">
+            User-submitted feedback. Mark items reviewed to track triage.
+          </p>
+        </div>
+        <button
+          onClick={load}
+          className="rounded-md border border-zinc-800 px-3 py-1.5 text-xs text-zinc-400 hover:text-zinc-200"
+        >
+          Refresh
+        </button>
+      </div>
+
+      <div className="mb-6 flex gap-3">
+        <select
+          value={categoryFilter}
+          onChange={(e) => setCategoryFilter(e.target.value)}
+          className="rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300"
+        >
+          <option value="ALL">All categories</option>
+          <option value="BUG">Bug</option>
+          <option value="FEATURE_REQUEST">Feature Request</option>
+          <option value="GENERAL">General</option>
+        </select>
+        <select
+          value={reviewedFilter}
+          onChange={(e) => setReviewedFilter(e.target.value)}
+          className="rounded-md border border-zinc-800 bg-zinc-950 px-3 py-1.5 text-xs text-zinc-300"
+        >
+          <option value="ALL">All statuses</option>
+          <option value="UNREVIEWED">Unreviewed</option>
+          <option value="REVIEWED">Reviewed</option>
+        </select>
+        <span className="ml-auto self-center text-xs text-zinc-600">
+          {filtered.length} of {items.length} submissions
+        </span>
+      </div>
+
+      {loading && <p className="text-sm text-zinc-500">Loading…</p>}
+      {error && <p className="text-sm text-red-400">{error}</p>}
+
+      {!loading && !error && filtered.length === 0 && (
+        <p className="text-sm text-zinc-500">No submissions match your filters.</p>
+      )}
+
+      {!loading && !error && filtered.length > 0 && (
+        <div className="overflow-x-auto rounded-xl border border-zinc-800">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-zinc-800 text-left text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+                <th className="px-4 py-3">Date</th>
+                <th className="px-4 py-3">Category</th>
+                <th className="px-4 py-3">Message</th>
+                <th className="px-4 py-3">Email</th>
+                <th className="px-4 py-3">Reviewed</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-zinc-900">
+              {filtered.map((item) => (
+                <tr key={item.id} className="hover:bg-zinc-950/60">
+                  <td className="whitespace-nowrap px-4 py-3 text-xs text-zinc-500">
+                    {formatDate(item.createdAt)}
+                  </td>
+                  <td className="px-4 py-3">
+                    <span
+                      className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${
+                        CATEGORY_STYLES[item.category]
+                      }`}
+                    >
+                      {CATEGORY_LABELS[item.category]}
+                    </span>
+                  </td>
+                  <td className="max-w-sm px-4 py-3 text-xs text-zinc-300">
+                    {item.message.length > 120
+                      ? `${item.message.slice(0, 120)}…`
+                      : item.message}
+                  </td>
+                  <td className="px-4 py-3 text-xs text-zinc-500">
+                    {item.email ?? '—'}
+                  </td>
+                  <td className="px-4 py-3">
+                    <button
+                      onClick={() => toggleReviewed(item)}
+                      className={`rounded px-2 py-0.5 text-[10px] font-semibold transition-colors ${
+                        item.reviewed
+                          ? 'bg-green-500/10 text-green-400 hover:bg-red-500/10 hover:text-red-400'
+                          : 'bg-zinc-800 text-zinc-500 hover:bg-green-500/10 hover:text-green-400'
+                      }`}
+                    >
+                      {item.reviewed ? 'Reviewed' : 'Mark reviewed'}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

app/admin/layout.tsx

@@ -19,6 +19,7 @@ import {
   Wand2,
   FolderKanban,
   Shield,
+  MessageSquare,
 } from "lucide-react";
 
 const navGroups: AdminNavGroup[] = [
@@ -89,6 +90,11 @@ const navGroups: AdminNavGroup[] = [
         href: "/admin/email/send",
         icon: <Mail className="h-4 w-4" />,
       },
+      {
+        label: "Feedback",
+        href: "/admin/feedback",
+        icon: <MessageSquare className="h-4 w-4" />,
+      },
     ],
   },
   {

app/api/admin/feedback/[id]/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function PATCH(
+  req: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+  if (!token) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { id } = await params
+  const body = await req.json()
+
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/v1/admin/feedback/${id}`, {
+      method: 'PATCH',
+      headers: {
+        Authorization: `Bearer ${token}`,
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify(body),
+      cache: 'no-store',
+    })
+    if (!res.ok) {
+      return NextResponse.json({ error: await res.text() }, { status: res.status })
+    }
+    return res.status === 204
+      ? new NextResponse(null, { status: 204 })
+      : NextResponse.json(await res.json())
+  } catch (e) {
+    return NextResponse.json({ error: 'Request failed' }, { status: 500 })
+  }
+}

app/api/admin/feedback/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function GET(req: NextRequest) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+  if (!token) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const params = req.nextUrl.searchParams.toString()
+  try {
+    const res = await fetch(
+      `${API_BASE_URL}/api/v1/admin/feedback${params ? `?${params}` : ''}`,
+      {
+        headers: { Authorization: `Bearer ${token}`, Accept: 'application/json' },
+        cache: 'no-store',
+      }
+    )
+    if (!res.ok) {
+      return NextResponse.json({ error: await res.text() }, { status: res.status })
+    }
+    return NextResponse.json(await res.json())
+  } catch (e) {
+    return NextResponse.json({ error: 'Request failed' }, { status: 500 })
+  }
+}

app/api/feedback/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from 'next/server'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function POST(req: NextRequest) {
+  let body: unknown
+  try {
+    body = await req.json()
+  } catch {
+    return NextResponse.json({ error: 'Invalid request' }, { status: 400 })
+  }
+
+  const ip =
+    req.headers.get('x-forwarded-for')?.split(',')[0]?.trim() ??
+    req.headers.get('x-real-ip') ??
+    'unknown'
+  const userAgent = req.headers.get('user-agent') ?? 'unknown'
+
+  try {
+    const res = await fetch(`${API_BASE_URL}/api/v1/feedback`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ ...(body as object), ipAddress: ip, userAgent }),
+      cache: 'no-store',
+    })
+
+    if (!res.ok) {
+      const text = await res.text().catch(() => '')
+      console.error('[/api/feedback] Spring Boot error:', res.status, text)
+      return NextResponse.json({ error: 'Failed to submit' }, { status: res.status })
+    }
+
+    return NextResponse.json({ ok: true })
+  } catch (e) {
+    console.error('[/api/feedback] proxy error:', e)
+    return NextResponse.json({ error: 'Service unavailable' }, { status: 500 })
+  }
+}

app/api/roadmap/[sanityId]/vote/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function POST(
+  req: NextRequest,
+  { params }: { params: Promise<{ sanityId: string }> }
+) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+  if (!token) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 })
+  }
+
+  const { sanityId } = await params
+
+  try {
+    const res = await fetch(
+      `${API_BASE_URL}/api/v1/roadmap/${encodeURIComponent(sanityId)}/vote`,
+      {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${token}`, Accept: 'application/json' },
+        cache: 'no-store',
+      }
+    )
+    if (!res.ok) {
+      return NextResponse.json({ error: await res.text() }, { status: res.status })
+    }
+    return NextResponse.json(await res.json())
+  } catch (e) {
+    return NextResponse.json({ error: 'Request failed' }, { status: 500 })
+  }
+}

app/api/roadmap/votes/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+const API_BASE_URL = process.env.API_BASE_URL || process.env.NEXT_PUBLIC_API_BASE_URL
+
+export async function GET(req: NextRequest) {
+  const cookieStore = await cookies()
+  const token = cookieStore.get('session_token')?.value
+
+  const headers: Record<string, string> = { Accept: 'application/json' }
+  if (token) headers['Authorization'] = `Bearer ${token}`
+
+  const ids = req.nextUrl.searchParams.get('ids') ?? ''
+
+  try {
+    const res = await fetch(
+      `${API_BASE_URL}/api/v1/roadmap/votes?ids=${encodeURIComponent(ids)}`,
+      { headers, cache: 'no-store' }
+    )
+    if (!res.ok) {
+      // Degrade gracefully — return empty map so UI shows 0 votes
+      return NextResponse.json({})
+    }
+    return NextResponse.json(await res.json())
+  } catch {
+    return NextResponse.json({})
+  }
+}

app/page.tsx

@@ -373,6 +373,9 @@ export default function HomePage() {
           <div className="mx-auto flex max-w-5xl items-center justify-between border-t border-zinc-900/60 px-4 py-4 text-[11px] text-zinc-700">
             <span>© {new Date().getFullYear()} BATTL BUILDERS™</span>
             <div className="flex gap-4">
+              <Link href="/feedback" className="hover:text-zinc-500">
+                Send Feedback
+              </Link>
               <Link href="/privacy" className="hover:text-zinc-500">
                 Privacy
               </Link>

components/ChangelogTabs.tsx

@@ -0,0 +1,315 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { PortableTextRenderer } from '@/components/PortableTextRenderer'
+import { RoadmapItem } from '@/components/RoadmapItem'
+import { FeedbackForm } from '@/components/FeedbackForm'
+import type { ChangelogEntry, RoadmapItemData, Tab, VoteState } from '@/types/changelog'
+import { useAuth } from '@/context/AuthContext'
+import Link from 'next/link'
+
+const TABS: { id: Tab; label: string }[] = [
+  { id: 'whats-new', label: "What's New" },
+  { id: 'whats-next', label: "What's Next" },
+  { id: 'give-feedback', label: 'Give Feedback' },
+]
+
+const TAG_STYLES: Record<string, string> = {
+  feature: 'bg-amber-500/10 text-amber-400 border border-amber-500/25',
+  fix: 'bg-green-500/10 text-green-400 border border-green-500/20',
+  improvement: 'bg-blue-400/10 text-blue-400 border border-blue-400/20',
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  })
+}
+
+export function ChangelogTabs({
+  entries,
+  roadmapItems,
+}: {
+  entries: ChangelogEntry[]
+  roadmapItems: RoadmapItemData[]
+}) {
+  const [activeTab, setActiveTab] = useState<Tab>('whats-new')
+
+  const [voteState, setVoteState] = useState<Record<string, VoteState>>(
+    () =>
+      Object.fromEntries(
+        roadmapItems.map((item) => [
+          item._id,
+          { count: 0, voted: false, loading: false },
+        ])
+      )
+  )
+
+  const { user } = useAuth()
+  const [showSignInPrompt, setShowSignInPrompt] = useState(false)
+  const signInTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const [votesFetched, setVotesFetched] = useState(false)
+
+  // Clear sign-in prompt timer on unmount
+  useEffect(() => () => { if (signInTimerRef.current) clearTimeout(signInTimerRef.current) }, [])
+
+  // Stable key for roadmapItems identity — avoids unstable array reference in deps
+  const roadmapIdKey = roadmapItems.map((i) => i._id).join(',')
+
+  // Fetch vote state when the What's Next tab is first viewed
+  useEffect(() => {
+    if (activeTab !== 'whats-next' || votesFetched || !roadmapIdKey) return
+    setVotesFetched(true)
+
+    fetch(`/api/roadmap/votes?ids=${encodeURIComponent(roadmapIdKey)}`, {
+      credentials: 'include',
+    })
+      .then((r) => (r.ok ? r.json() : {}))
+      .then((data: Record<string, { count: number; voted: boolean }>) => {
+        setVoteState((prev) => {
+          const next = { ...prev }
+          for (const [id, v] of Object.entries(data)) {
+            next[id] = { count: v.count, voted: v.voted, loading: false }
+          }
+          return next
+        })
+      })
+      .catch(() => {
+        // Spring Boot not yet available — silently keep count=0
+      })
+  }, [activeTab, votesFetched, roadmapIdKey]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  async function handleVote(id: string) {
+    if (!user) {
+      if (signInTimerRef.current) clearTimeout(signInTimerRef.current)
+      setShowSignInPrompt(true)
+      signInTimerRef.current = setTimeout(() => setShowSignInPrompt(false), 4000)
+      return
+    }
+
+    const current = voteState[id] ?? { count: 0, voted: false, loading: false }
+
+    // Optimistic update
+    setVoteState((prev) => ({
+      ...prev,
+      [id]: {
+        count: current.voted ? current.count - 1 : current.count + 1,
+        voted: !current.voted,
+        loading: true,
+      },
+    }))
+
+    try {
+      const res = await fetch(`/api/roadmap/${encodeURIComponent(id)}/vote`, {
+        method: 'POST',
+        credentials: 'include',
+      })
+      if (res.ok) {
+        const data: { count: number; voted: boolean } = await res.json()
+        setVoteState((prev) => ({
+          ...prev,
+          [id]: { count: data.count, voted: data.voted, loading: false },
+        }))
+      } else {
+        setVoteState((prev) => ({ ...prev, [id]: { ...current, loading: false } }))
+      }
+    } catch {
+      setVoteState((prev) => ({ ...prev, [id]: { ...current, loading: false } }))
+    }
+  }
+
+  useEffect(() => {
+    const hash = window.location.hash.replace('#', '') as Tab
+    if (TABS.some((t) => t.id === hash)) setActiveTab(hash)
+  }, [])
+
+  function handleTabChange(tab: Tab) {
+    setActiveTab(tab)
+    window.history.replaceState(null, '', `#${tab}`)
+  }
+
+  return (
+    <div>
+      {/* Tab bar */}
+      <div className="mb-10 flex border-b border-zinc-800">
+        {TABS.map(({ id, label }) => (
+          <button
+            key={id}
+            onClick={() => handleTabChange(id)}
+            className={[
+              '-mb-px border-b-2 px-5 py-2.5 text-sm font-medium transition-colors',
+              activeTab === id
+                ? 'border-amber-400 text-amber-400'
+                : 'border-transparent text-zinc-500 hover:text-zinc-300',
+            ].join(' ')}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+
+      {/* ── What's New ── */}
+      {activeTab === 'whats-new' && (
+        <div>
+          {entries.length === 0 ? (
+            <p className="text-sm text-zinc-500">
+              No releases yet — check back soon.
+            </p>
+          ) : (
+            <div className="divide-y divide-zinc-900">
+              {entries.map((entry) => (
+                <div
+                  key={entry._id}
+                  className="grid grid-cols-[120px_1fr] gap-8 py-8"
+                >
+                  <div className="pt-1">
+                    <p className="font-mono text-xs font-bold text-amber-400">
+                      {entry.version}
+                    </p>
+                    <p className="mt-1 text-[11px] text-zinc-600">
+                      {formatDate(entry.publishedAt)}
+                    </p>
+                  </div>
+                  <div>
+                    {(entry.tags?.length ?? 0) > 0 && (
+                      <div className="mb-2.5 flex flex-wrap gap-1.5">
+                        {(entry.tags ?? []).map((tag) => (
+                          <span
+                            key={tag}
+                            className={`rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wide ${
+                              TAG_STYLES[tag] ??
+                              'border border-zinc-700 bg-zinc-800 text-zinc-400'
+                            }`}
+                          >
+                            {tag}
+                          </span>
+                        ))}
+                      </div>
+                    )}
+                    <h3 className="mb-3 text-[17px] font-semibold text-white">
+                      {entry.title}
+                    </h3>
+                    {entry.body && (
+                      <div className="text-sm text-zinc-400">
+                        <PortableTextRenderer value={entry.body} />
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* ── What's Next ── */}
+      {activeTab === 'whats-next' && (
+        <div>
+          {roadmapItems.length === 0 ? (
+            <p className="text-sm text-zinc-500">
+              No roadmap items yet — check back soon.
+            </p>
+          ) : (
+            <>
+              {(() => {
+                const inProgress = roadmapItems.filter((i) => i.status === 'in-progress')
+                const planned = roadmapItems.filter((i) => i.status === 'planned')
+                return (
+                  <>
+                    {inProgress.length > 0 && (
+                      <div className="mb-8">
+                        <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-600">
+                          In Progress
+                        </p>
+                        <div className="flex flex-col gap-2.5">
+                          {inProgress.map((item) => (
+                            <RoadmapItem
+                              key={item._id}
+                              id={item._id}
+                              title={item.title}
+                              description={item.description}
+                              status={item.status}
+                              vote={
+                                voteState[item._id] ?? {
+                                  count: 0,
+                                  voted: false,
+                                  loading: false,
+                                }
+                              }
+                              onVote={handleVote}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+
+                    {planned.length > 0 && (
+                      <div>
+                        <p className="mb-3 text-[10px] font-bold uppercase tracking-[0.18em] text-zinc-600">
+                          Planned
+                        </p>
+                        <div className="flex flex-col gap-2.5">
+                          {planned.map((item) => (
+                            <RoadmapItem
+                              key={item._id}
+                              id={item._id}
+                              title={item.title}
+                              description={item.description}
+                              status={item.status}
+                              vote={
+                                voteState[item._id] ?? {
+                                  count: 0,
+                                  voted: false,
+                                  loading: false,
+                                }
+                              }
+                              onVote={handleVote}
+                            />
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </>
+                )
+              })()}
+
+              <p className="mt-8 text-xs text-zinc-600">
+                Don&apos;t see what you need?{' '}
+                <button
+                  onClick={() => handleTabChange('give-feedback')}
+                  className="underline underline-offset-2 hover:text-zinc-300"
+                >
+                  Give us feedback →
+                </button>
+              </p>
+
+              {showSignInPrompt && (
+                <p className="mt-3 text-xs text-amber-400">
+                  <Link href="/login" className="underline underline-offset-2 hover:text-amber-300">
+                    Sign in
+                  </Link>{' '}
+                  to upvote roadmap items.
+                </p>
+              )}
+            </>
+          )}
+        </div>
+      )}
+
+      {/* ── Give Feedback ── */}
+      {activeTab === 'give-feedback' && (
+        <div>
+          <div className="mb-8">
+            <h2 className="text-xl font-bold text-white">Tell us what you think.</h2>
+            <p className="mt-1.5 text-sm text-zinc-500">
+              Bug, feature idea, or general thought — we read everything.
+            </p>
+          </div>
+          <FeedbackForm />
+        </div>
+      )}
+    </div>
+  )
+}

components/FeedbackForm.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import { useState } from 'react'
+
+type Status = 'idle' | 'loading' | 'done' | 'error'
+
+const CATEGORIES = [
+  { value: 'BUG', label: 'Bug report' },
+  { value: 'FEATURE_REQUEST', label: 'Feature request' },
+  { value: 'GENERAL', label: 'General feedback' },
+]
+
+export function FeedbackForm({ onSuccess, autoFocus = false }: { onSuccess?: () => void; autoFocus?: boolean }) {
+  const [category, setCategory] = useState('BUG')
+  const [message, setMessage] = useState('')
+  const [email, setEmail] = useState('')
+  const [status, setStatus] = useState<Status>('idle')
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!message.trim()) return
+    setStatus('loading')
+    try {
+      const res = await fetch('/api/feedback', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          category,
+          message: message.trim(),
+          email: email.trim() || undefined,
+        }),
+      })
+      if (res.ok) {
+        setStatus('done')
+        onSuccess?.()
+      } else {
+        setStatus('error')
+      }
+    } catch {
+      setStatus('error')
+    }
+  }
+
+  if (status === 'done') {
+    return (
+      <div className="py-6 text-center">
+        <p className="text-sm font-semibold text-amber-400">Thanks — we got it.</p>
+        <p className="mt-1 text-xs text-zinc-500">
+          We read everything. If you left an email we&apos;ll follow up.
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+        <div>
+          <label htmlFor="feedback-category" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+            Category
+          </label>
+          <select
+            id="feedback-category"
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            disabled={status === 'loading'}
+            autoFocus={autoFocus}
+            className="w-full appearance-none rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
+          >
+            {CATEGORIES.map((c) => (
+              <option key={c.value} value={c.value}>
+                {c.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div>
+          <label htmlFor="feedback-email" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+            Email{' '}
+            <span className="font-normal normal-case tracking-normal text-zinc-600">
+              (optional — if you want a reply)
+            </span>
+          </label>
+          <input
+            id="feedback-email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="you@email.com"
+            disabled={status === 'loading'}
+            className="w-full rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm text-zinc-200 placeholder-zinc-600 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
+          />
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="feedback-message" className="mb-2 block text-[11px] font-semibold uppercase tracking-wider text-zinc-500">
+          Message
+        </label>
+        <textarea
+          id="feedback-message"
+          value={message}
+          onChange={(e) => setMessage(e.target.value.slice(0, 1000))}
+          placeholder="What's on your mind?"
+          rows={5}
+          required
+          disabled={status === 'loading'}
+          className="w-full resize-y rounded-lg border border-zinc-800 bg-zinc-950 px-3 py-2.5 text-sm leading-relaxed text-zinc-200 placeholder-zinc-600 focus:border-amber-500/40 focus:outline-none disabled:opacity-50"
+        />
+        <p className="mt-1.5 text-right text-[11px] text-zinc-600">
+          {message.length} / 1000
+        </p>
+      </div>
+
+      <div className="flex items-center justify-between gap-4">
+        <p className="text-[11px] text-zinc-600">
+          We&apos;ll only use your email to follow up on your feedback.
+        </p>
+        <button
+          type="submit"
+          disabled={status === 'loading' || !message.trim()}
+          className="shrink-0 rounded-lg bg-amber-500/90 px-6 py-2.5 text-sm font-bold text-black hover:bg-amber-400 disabled:opacity-50"
+        >
+          {status === 'loading' ? 'Sending…' : 'Send Feedback →'}
+        </button>
+      </div>
+
+      {status === 'error' && (
+        <p className="text-xs text-red-400">Something went wrong. Try again.</p>
+      )}
+    </form>
+  )
+}

components/FeedbackModal.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import { useEffect } from 'react'
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import { FeedbackForm } from '@/components/FeedbackForm'
+
+export function FeedbackModal({
+  open,
+  onClose,
+}: {
+  open: boolean
+  onClose: () => void
+}) {
+  useEffect(() => {
+    if (!open) return
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKey)
+    return () => document.removeEventListener('keydown', onKey)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="feedback-modal-title"
+    >
+      <div
+        className="absolute inset-0 bg-black/70 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div className="relative z-10 w-full max-w-lg rounded-2xl border border-zinc-800 bg-zinc-950 p-7 shadow-2xl">
+        <div className="mb-5 flex items-center justify-between">
+          <h2 id="feedback-modal-title" className="text-base font-bold text-white">Send Feedback</h2>
+          <button
+            onClick={onClose}
+            className="text-zinc-500 hover:text-zinc-300"
+            aria-label="Close"
+          >
+            <XMarkIcon className="h-5 w-5" />
+          </button>
+        </div>
+        <FeedbackForm onSuccess={onClose} autoFocus />
+      </div>
+    </div>
+  )
+}

components/RoadmapItem.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import { ChevronUpIcon } from '@heroicons/react/20/solid'
+import type { VoteState } from '@/types/changelog'
+
+export function RoadmapItem({
+  id,
+  title,
+  description,
+  status,
+  vote,
+  onVote,
+}: {
+  id: string
+  title: string
+  description: string
+  status: 'planned' | 'in-progress'
+  vote: VoteState
+  onVote: (id: string) => void
+}) {
+  const statusBadgeClass =
+    status === 'in-progress'
+      ? 'border-amber-500/25 bg-amber-500/10 text-amber-400'
+      : 'border-zinc-700 bg-zinc-800/40 text-zinc-500'
+
+  return (
+    <div className="grid grid-cols-[52px_1fr_auto] items-center gap-4 rounded-xl border border-zinc-800/60 bg-zinc-950/60 p-5">
+      {/* Upvote button */}
+      <button
+        onClick={() => onVote(id)}
+        disabled={vote.loading}
+        title={vote.voted ? 'Remove vote' : 'Upvote'}
+        className={[
+          'flex h-[52px] w-11 flex-col items-center justify-center gap-0.5 rounded-lg border text-xs font-bold transition-colors disabled:opacity-50',
+          vote.voted
+            ? 'border-amber-500/40 bg-amber-500/10 text-amber-400'
+            : 'border-zinc-700 text-zinc-500 hover:border-amber-500/40 hover:text-amber-400',
+        ].join(' ')}
+      >
+        <ChevronUpIcon className="h-4 w-4" />
+        <span>{vote.count}</span>
+      </button>
+
+      {/* Content */}
+      <div>
+        <p className="text-sm font-semibold text-zinc-200">{title}</p>
+        <p className="mt-1 text-xs leading-relaxed text-zinc-500">{description}</p>
+      </div>
+
+      {/* Status badge */}
+      <span
+        className={`rounded-full border px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${statusBadgeClass}`}
+      >
+        {status === 'in-progress' ? 'In Progress' : 'Planned'}
+      </span>
+    </div>
+  )
+}

components/TopNav.tsx

@@ -3,9 +3,11 @@
 
 import Link from "next/link";
 import Image from "next/image";
+import { useState } from "react";
 import { usePathname } from "next/navigation";
 
 import { useAuth } from "@/context/AuthContext";
+import { FeedbackModal } from "@/components/FeedbackModal";
 
 function NavLink({
   href,
@@ -38,8 +40,10 @@ function NavLink({
 export function TopNav() {
   const { user, logout, loading } = useAuth();
   const isAuthenticated = !!user;
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
 
   return (
+    <>
     <header className="border-b border-zinc-200 bg-white/95 dark:border-zinc-800 dark:bg-black/95 backdrop-blur">
       <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-2">
         {/* Left: Brand / Home */}
@@ -65,6 +69,13 @@ export function TopNav() {
 
         {/* Right side actions */}
         <div className="flex items-center justify-end gap-3 sm:gap-4">
+          <button
+            type="button"
+            onClick={() => setFeedbackOpen(true)}
+            className="hidden text-xs font-medium text-zinc-500 hover:text-zinc-300 transition-colors sm:inline"
+          >
+            Send Feedback
+          </button>
           {loading ? (
             <span className="text-xs text-zinc-500">Checking session…</span>
           ) : isAuthenticated ? (
@@ -103,6 +114,8 @@ export function TopNav() {
         </div>
       </div>
     </header>
+    <FeedbackModal open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
+    </>
   );
 }
 export default TopNav;

docs/superpowers/specs/2026-03-30-changelog-feedback-design.md

@@ -0,0 +1,235 @@
+# Changelog, Roadmap & Feedback Design Spec
+
+**Date:** 2026-03-30
+**Status:** Approved
+
+---
+
+## Overview
+
+Add a public `/changelog` page with three tabs (What's New, What's Next, Give Feedback), auth-gated upvoting on roadmap items, a shared feedback form available as a standalone page and a modal triggered from the nav/footer, and an admin view for reviewing submissions.
+
+---
+
+## Goals
+
+- Publicly share release notes (changelog) and upcoming work (roadmap)
+- Let authenticated users upvote roadmap items to signal priority
+- Collect structured user feedback (bug / feature / general) with optional email
+- Store feedback in Spring Boot DB, reviewable in the admin panel
+- Add "Send Feedback" entry point to TopNav and homepage footer
+
+---
+
+## Routes
+
+| Route | Description |
+|---|---|
+| `/changelog` | Three-tab page: What's New / What's Next / Give Feedback |
+| `/feedback` | Standalone feedback page — full-width `FeedbackForm` |
+| `/admin/feedback` | Admin table of feedback submissions |
+
+Tab state on `/changelog` is driven by URL hash (`#whats-new`, `#whats-next`, `#give-feedback`) so tabs are deep-linkable. When no hash is present, the default active tab is **What's New**. The "Don't see what you need? Give us feedback →" nudge on the roadmap tab links to `#give-feedback`.
+
+### Middleware
+
+`/changelog` and `/feedback` are public routes — no authentication required. Both must be added to `isPublicPath()` in `middleware.ts` so they remain accessible when `LAUNCH_ONLY_ROOT=true`. The Next.js proxy routes `/api/feedback` (POST) and `/api/roadmap/votes` (GET) require no auth and will pass through middleware as-is since they are not prefixed with `/api/admin` or matched by `isProtectedLaunchPath()`. This is intentional and requires no middleware change for those API routes.
+
+---
+
+## Sanity Schema (two new document types)
+
+### `changelogEntry`
+
+| Field | Type | Notes |
+|---|---|---|
+| `title` | string | Display title of the release |
+| `version` | string | e.g. `v0.4` |
+| `publishedAt` | datetime | Controls ordering and display date |
+| `tags` | array of string | Values: `feature`, `fix`, `improvement` |
+| `body` | Portable Text | Rich text body |
+
+### `roadmapItem`
+
+| Field | Type | Notes |
+|---|---|---|
+| `title` | string | Short item title |
+| `description` | text | Plain-text description |
+| `status` | string enum | `planned` \| `in-progress` \| `shipped` |
+| `order` | number | Manual sort order within each status group |
+
+Both use the existing Sanity project (`zal102rv`, dataset `production`). GROQ query strings are added to `lib/sanity.ts` alongside the existing `postsQuery`. The RSC page **must call `sanityFetch()` from `lib/sanityFetch.ts`** to execute those queries — not `client.fetch()` from the Sanity client directly. This is the same pattern used by the guides page and is required for correct behaviour in Docker/server environments where CDN DNS resolution fails.
+
+Pages use `export const revalidate = 60` ISR, consistent with guides.
+
+The Sanity `_id` of each `roadmapItem` serves as the foreign key in Spring Boot's votes table — no additional ID field required. Sanity `_id` values are stable UUIDs.
+
+### GROQ Query Filters
+
+- `changelogEntriesQuery`: filter `_type == "changelogEntry" && publishedAt <= now()`, order by `publishedAt desc`
+- `roadmapItemsQuery`: filter `_type == "roadmapItem" && status != "shipped"`, order by `order asc` within each status group. **Shipped items are excluded from the roadmap query** — when an item ships, the author changes its status to `shipped` in Sanity and creates a corresponding `changelogEntry`. The roadmap tab never displays shipped items.
+
+---
+
+## Spring Boot Backend
+
+### New Tables
+
+**`feedback`**
+
+| Column | Type | Notes |
+|---|---|---|
+| `id` | UUID, PK | |
+| `category` | enum | `BUG`, `FEATURE_REQUEST`, `GENERAL` |
+| `message` | text | Max 1000 chars, enforced at API level |
+| `email` | varchar, nullable | Optional follow-up email |
+| `ip_address` | varchar | Captured server-side for spam visibility |
+| `user_agent` | varchar | Captured server-side for spam visibility |
+| `reviewed` | boolean, default false | Admin marks reviewed |
+| `created_at` | timestamp | |
+
+Rate limiting on `POST /api/v1/feedback` is deferred — IP and user agent capture provides enough visibility for manual spam review at this scale.
+
+**`roadmap_votes`**
+
+| Column | Type | Notes |
+|---|---|---|
+| `user_id` | UUID, FK → users | Part of composite PK |
+| `sanity_item_id` | varchar | Part of composite PK; Sanity `_id` of the roadmap item |
+| `created_at` | timestamp | |
+| | PRIMARY KEY(user_id, sanity_item_id) | Composite PK — enforces one vote per user per item |
+
+### New API Endpoints (Spring Boot)
+
+| Method | Path | Auth | Notes |
+|---|---|---|---|
+| `POST` | `/api/v1/feedback` | None | Creates feedback record; captures IP + user agent server-side |
+| `GET` | `/api/v1/roadmap/votes?ids=...` | Optional | Returns vote counts + current user's voted state for a list of Sanity IDs. For unauthenticated callers, returns vote counts with `voted: false` for all items — never 401. |
+| `POST` | `/api/v1/roadmap/{sanityId}/vote` | Required | Toggles vote on/off; returns new count and voted state |
+
+### Next.js Proxy Routes
+
+All three endpoints are proxied via `app/api/` — client code never calls Spring Boot directly, consistent with the existing proxy pattern.
+
+| Next.js route | Proxies to |
+|---|---|
+| `POST /api/feedback` | `POST /api/v1/feedback` |
+| `GET /api/roadmap/votes` | `GET /api/v1/roadmap/votes` |
+| `POST /api/roadmap/[sanityId]/vote` | `POST /api/v1/roadmap/:id/vote` |
+
+The Next.js proxy for `POST /api/feedback` captures `x-forwarded-for` and `user-agent` from the incoming request headers and forwards them to Spring Boot — the client form never sends these values.
+
+---
+
+## Frontend Components
+
+### New Files
+
+| File | Type | Responsibility |
+|---|---|---|
+| `app/(app)/changelog/page.tsx` | RSC | Fetches Sanity changelog + roadmap data via `sanityFetch`, renders tab shell + passes data as props |
+| `components/ChangelogTabs.tsx` | `"use client"` | Hash-based tab switcher (default: `#whats-new`), renders all three tab panels |
+| `components/RoadmapItem.tsx` | `"use client"` | Single roadmap item with optimistic upvote toggle |
+| `components/FeedbackForm.tsx` | `"use client"` | Shared form (category + message + email), posts to `/api/feedback` |
+| `components/FeedbackModal.tsx` | `"use client"` | Backdrop + dialog wrapper around `FeedbackForm` |
+| `app/(app)/feedback/page.tsx` | RSC | Standalone page rendering `FeedbackForm` full-width |
+| `app/admin/feedback/page.tsx` | RSC | Admin table of submissions, sortable + filterable |
+| `app/api/feedback/route.ts` | API route | Proxy to Spring Boot; forwards IP + user-agent headers |
+| `app/api/roadmap/votes/route.ts` | API route | Proxy to Spring Boot |
+| `app/api/roadmap/[sanityId]/vote/route.ts` | API route | Proxy to Spring Boot |
+
+### Modified Files
+
+| File | Change |
+|---|---|
+| `lib/sanity.ts` | Add `changelogEntriesQuery` and `roadmapItemsQuery` |
+| `middleware.ts` | Add `/changelog` and `/feedback` to `isPublicPath()` |
+| `components/TopNav.tsx` | Add "Send Feedback" ghost button; modal open state is local to `TopNav` via `useState` |
+| `app/page.tsx` | Add "Send Feedback" link to the homepage's inline footer (homepage-only; this is intentional — TopNav covers all other pages) |
+
+### FeedbackModal State
+
+`FeedbackModal` open/close state is managed locally in `TopNav` with `useState`. No global context or portal is required — the modal renders inside `TopNav`'s JSX and is positioned fixed via CSS. This is sufficient given "Send Feedback" is the only trigger point in the nav.
+
+---
+
+## UI Design
+
+### `/changelog` Page Header
+
+```
+BATTL BUILDERS            (small caps label)
+Updates                   (h1)
+What we've shipped and what's coming next.   (subhead)
+
+[ What's New ] [ What's Next ] [ Give Feedback ]   (tab bar, amber underline on active)
+```
+
+### What's New Tab
+
+Two-column entry layout: left column is version + date (120px fixed), right column is tags + title + body. Entries separated by bottom border, ordered newest first.
+
+Tag values rendered as small pill badges:
+- `feature` → amber
+- `fix` → green
+- `improvement` → blue
+
+### What's Next Tab
+
+Items grouped under "In Progress" and "Planned" headings. Shipped items are never shown here (filtered out in the GROQ query). Each item is a card with:
+- **Left:** upvote button (chevron up + count) — bordered pill, amber when voted
+- **Center:** title + description
+- **Right:** status badge (In Progress = amber, Planned = muted)
+
+Unauthenticated users clicking upvote are prompted to sign in (toast). Voted state is toggled optimistically — rolls back on error.
+
+Footer nudge: *"Don't see what you need? Give us feedback →"* links to `#give-feedback`.
+
+### Give Feedback Tab & `/feedback` Page
+
+Full-width form:
+- Category + email in a two-column row
+- Message textarea (full width, 1000 char limit with counter)
+- Submit button bottom-right, privacy note bottom-left
+
+### Feedback Modal
+
+Triggered by "Send Feedback" in TopNav and homepage inline footer. Same fields as the tab form. Full-width submit button inside the modal.
+
+---
+
+## Admin View (`/admin/feedback`)
+
+Table with columns: Date, Category, Message (truncated to 120 characters), Email, Reviewed. Sortable by date. Filterable by category (Bug / Feature / General) and reviewed status. Follows existing admin page patterns.
+
+---
+
+## Feedback Form Fields
+
+| Field | Required | Validation |
+|---|---|---|
+| Category | Yes | One of: Bug report, Feature request, General feedback |
+| Message | Yes | 1–1000 characters |
+| Email | No | Valid email format if provided |
+
+`ip_address` and `user_agent` are captured server-side in the Next.js proxy route — never sent from the client form.
+
+---
+
+## SEO Metadata
+
+Both `/changelog` and `/feedback` export a `metadata` object following the existing page pattern:
+
+- `/changelog`: `title: "What's New — Battl Builders"`, relevant description
+- `/feedback`: `title: "Send Feedback — Battl Builders"`, relevant description
+
+---
+
+## Out of Scope
+
+- Email notifications when feedback is submitted (separate task)
+- Sorting roadmap items by vote count (manual `order` field only for now)
+- Public display of vote counts on the changelog tab
+- Sanity Studio schema deployment (handled separately via Sanity CLI)
+- Spring Boot entity/migration code (lives in `ballistic-builder-spring` repo, tracked separately)
+- Rate limiting on the feedback endpoint (deferred; IP capture provides visibility at current scale)

lib/sanity.ts

@@ -55,3 +55,19 @@ export const postBySlugQuery = `
 export const postSlugsQuery = `
   *[_type == "post" && defined(slug.current)] { "slug": slug.current }
 `
+
+/** All changelog entries — published, newest first */
+export const changelogEntriesQuery = `
+  *[_type == "changelogEntry" && publishedAt <= now()]
+  | order(publishedAt desc) {
+    _id, title, version, publishedAt, tags, body
+  }
+`
+
+/** Roadmap items — excludes shipped, sorted by manual order */
+export const roadmapItemsQuery = `
+  *[_type == "roadmapItem" && status != "shipped"]
+  | order(order asc) {
+    _id, title, description, status, order
+  }
+`

middleware.ts

@@ -25,6 +25,10 @@ function isPublicPath(pathname: string) {
   if (pathname === "/guides") return true;
   if (pathname.startsWith("/guides/")) return true;
 
+  // Changelog and feedback — always public
+  if (pathname === "/changelog") return true;
+  if (pathname === "/feedback") return true;
+
   // Static / framework assets
   if (pathname.startsWith("/_next")) return true;
   if (pathname === "/favicon.ico") return true;

types/changelog.ts

@@ -0,0 +1,24 @@
+export type ChangelogEntry = {
+  _id: string
+  title: string
+  version: string
+  publishedAt: string
+  tags?: string[]
+  body: unknown[]
+}
+
+export type RoadmapItemData = {
+  _id: string
+  title: string
+  description: string
+  status: 'planned' | 'in-progress'
+  order: number
+}
+
+export type Tab = 'whats-new' | 'whats-next' | 'give-feedback'
+
+export type VoteState = {
+  count: number
+  voted: boolean
+  loading: boolean
+}