feat(feedback): private BugDrop intake, docked control, a11y, and asset fingerprints

Add account-free BugDrop reporting to elevated-applicant-feedback with travel-data
masking and GitHub fallback, move the report control into the sidebar footer,
raise muted-text contrast to WCAG AA, and fingerprint CSS/JS so style updates
stop requiring a hard refresh.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: jssturm

.cursor/rules/zoo-anti-loop-shield.mdc

@@ -2,7 +2,7 @@
 description: Anti-Loop & Anti-Hallucination Shield (Zoo mandate)
 alwaysApply: true
 source: .roo/rules/11-anti-loop-hallucination-shield.md
-syncedAt: 2026-07-27T17:34:09.037Z
+syncedAt: 2026-07-29T13:43:43.180Z
 ---
 
 # Anti-Loop & Anti-Hallucination Shield

.cursor/rules/zoo-paperclip-munger.mdc

@@ -2,7 +2,7 @@
 description: Paperclip + Munger Operating Model (Zoo mandate)
 alwaysApply: true
 source: .roo/rules/08-paperclip-munger-operating-model.md
-syncedAt: 2026-07-27T17:34:09.036Z
+syncedAt: 2026-07-29T13:43:43.179Z
 ---
 
 # Paperclip + Munger Operating Model

.cursor/rules/zoo-path-safety.mdc

@@ -2,7 +2,7 @@
 description: Path Safety (Zoo mandate)
 alwaysApply: true
 source: .roo/rules/00-paths.md
-syncedAt: 2026-07-27T17:34:09.031Z
+syncedAt: 2026-07-29T13:43:43.170Z
 ---
 
 # Path Safety

.cursor/rules/zoo-pre-response-checklist.mdc

@@ -2,7 +2,7 @@
 description: Pre-Response Self-Audit (Zoo mandate)
 alwaysApply: true
 source: .roo/rules/10-pre-response-checklist.md
-syncedAt: 2026-07-27T17:34:09.036Z
+syncedAt: 2026-07-29T13:43:43.180Z
 ---
 
 # Pre-Response Self-Audit

.cursor/rules/zoo-three-failure-rule.mdc

@@ -2,7 +2,7 @@
 description: Three-Failure Rule (Zoo mandate)
 alwaysApply: true
 source: .roo/rules/02-three-failure-rule.md
-syncedAt: 2026-07-27T17:34:09.034Z
+syncedAt: 2026-07-29T13:43:43.176Z
 ---
 
 # Three-Failure Rule

app/main.py

@@ -3,12 +3,13 @@
 import copy
 import logging
 import os
+import re
 from contextlib import asynccontextmanager
 from typing import Optional
 
 from fastapi import Depends, FastAPI, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import FileResponse
+from fastapi.responses import FileResponse, HTMLResponse
 from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
 from fastapi.staticfiles import StaticFiles
 from pydantic import BaseModel, Field
@@ -397,6 +398,30 @@ def start_day(request: Request, payload: TravelRequest) -> dict:
 # Static file serving (mounted after API routes so they take precedence)
 # ---------------------------------------------------------------------------
 _static_dir = os.path.join(os.path.dirname(__file__), "..", "static")
+
+# Asset URLs in served HTML get a fingerprint query so a browser refetches CSS/JS
+# only when the file actually changes. Without it, cached styles survive updates.
+_ASSET_REF = re.compile(r'(?P<attr>href|src)="(?P<path>/(?:css|js)/[^"?]+)"')
+
+
+def _asset_fingerprint(url_path: str) -> str:
+    try:
+        return str(int(os.path.getmtime(os.path.join(_static_dir, url_path.lstrip("/")))))
+    except OSError:
+        return "0"
+
+
+def _html_with_versioned_assets(path: str) -> HTMLResponse:
+    with open(path, encoding="utf-8") as handle:
+        html = handle.read()
+    html = _ASSET_REF.sub(
+        lambda m: f'{m.group("attr")}="{m.group("path")}?v={_asset_fingerprint(m.group("path"))}"',
+        html,
+    )
+    # The document must revalidate, otherwise the new fingerprints stay invisible.
+    return HTMLResponse(html, headers={"Cache-Control": "no-cache"})
+
+
 if os.path.isdir(_static_dir):
     app.mount("/static", StaticFiles(directory=_static_dir), name="static")
 
@@ -405,7 +430,7 @@ async def serve_app():
         """Serve the main app UI."""
         app_path = os.path.join(_static_dir, "app.html")
         if os.path.isfile(app_path):
-            return FileResponse(app_path)
+            return _html_with_versioned_assets(app_path)
         return {"status": "ok", "note": "Plan-It — app UI not found"}
 
     @app.get("/{full_path:path}", dependencies=[], include_in_schema=False)
@@ -419,7 +444,7 @@ async def spa_fallback(full_path: str):
         # SPA fallback — serve index.html for client-side routes
         index_path = os.path.join(_static_dir, "index.html")
         if os.path.isfile(index_path):
-            return FileResponse(index_path)
+            return _html_with_versioned_assets(index_path)
         return {"status": "ok", "note": "Plan-It API — static UI not found"}
 else:
     @app.get("/", include_in_schema=False)

static/app.html

@@ -19,14 +19,6 @@
   <!-- Sidebar overlay for mobile -->
   <div id="sidebar-overlay" class="sidebar-overlay"></div>
 
-  <!-- Bug Report FAB (floating action button) -->
-  <div id="bug-report-fab" class="bug-report-fab">
-    <span class="bug-report-fab-badge">· alpha</span>
-    <button id="btn-bug-report" class="bug-report-fab-btn" data-i18n-html="bug.fab">
-      🐛 Report a bug
-    </button>
-  </div>
-
   <!-- =======================================================================
        App Shell
        ======================================================================= -->
@@ -58,7 +50,7 @@
         </button>
 
         <div class="sidebar-nav-label mt-4" data-i18n="nav.savedPlan">Saved Plan</div>
-        <div id="sidebar-saved-plans">
+        <div id="sidebar-saved-plans" data-bugdrop-mask>
           <div class="text-xs text-muted" style="padding: var(--space-2) var(--space-3);" data-i18n="nav.noSavedPlans">
             No saved plans yet
           </div>
@@ -80,6 +72,13 @@
             <span class="theme-toggle-label" id="theme-toggle-label">Dark</span>
           </button>
         </div>
+        <div id="bug-report-fab" class="bug-report-fab">
+          <span class="bug-report-fab-badge" data-i18n="bug.sectionLabel">Feedback · alpha</span>
+          <button id="btn-bug-report" class="bug-report-fab-btn" data-i18n-html="bug.fab">
+            🐛 Report a bug
+          </button>
+        </div>
+
         <div class="health-indicator">
           <span id="health-dot" class="health-dot"></span>
           <span id="health-label" data-i18n="health.checking">API checking...</span>
@@ -113,7 +112,7 @@ <h2 data-i18n="newTrip.title">Plan Your Trip</h2>
         <div class="card" style="max-width:720px;">
           <div class="form-group">
               <label class="form-label" for="trip-input" data-i18n="newTrip.whatsYourTrip">What's your trip?</label>
-              <textarea id="trip-input" class="form-textarea" rows="8"
+              <textarea id="trip-input" class="form-textarea" rows="8" data-bugdrop-mask
                 data-i18n-placeholder="newTrip.tripPlaceholder"
                 placeholder="e.g. Drive to Kennedy Space Center from Orlando tomorrow — stop for lunch, stay overnight at a hotel near Cocoa Beach, and drive back the next morning. Need long-term parking at KSC."></textarea>
               <div class="form-hint" data-i18n="newTrip.tripHint">Include as many details as possible — venue, date, mode of travel (drive/fly), meal stops, hotel stays, long-term parking, return trip, and any special interests. The more you tell us, the better your itinerary.</div>
@@ -122,13 +121,13 @@ <h2 data-i18n="newTrip.title">Plan Your Trip</h2>
           <div class="grid-2">
             <div class="form-group">
               <label class="form-label" for="trip-departure" data-i18n="newTrip.departureTime">Departure Time</label>
-              <div class="time-input-group">
+              <div class="time-input-group" data-bugdrop-mask>
                 <input id="trip-departure-hh" class="form-input time-input-hh" type="text"
                   placeholder="07" maxlength="2" autocomplete="off" />
                 <span class="time-colon">:</span>
                 <input id="trip-departure-mm" class="form-input time-input-mm" type="text"
                   placeholder="00" maxlength="2" autocomplete="off" />
-                <div class="ampm-toggle" id="trip-departure-ampm">
+                <div class="ampm-toggle" id="trip-departure-ampm" data-bugdrop-mask>
                   <button type="button" class="ampm-btn active" data-period="AM">AM</button>
                   <button type="button" class="ampm-btn" data-period="PM">PM</button>
                 </div>
@@ -137,15 +136,15 @@ <h2 data-i18n="newTrip.title">Plan Your Trip</h2>
             </div>
             <div class="form-group">
               <label class="form-label" for="trip-start" data-i18n="newTrip.startingLocation">Starting Location (Street Address, City, State, Zip Code)</label>
-              <input id="trip-start" class="form-input" type="text"
+              <input id="trip-start" class="form-input" type="text" data-bugdrop-mask
                 data-i18n-placeholder="newTrip.startPlaceholder"
                 placeholder="e.g. 9801 International Dr, Orlando, Florida 32819" />
               <div class="form-hint" data-i18n="newTrip.startHint">Required if provided — must include street address, city, state, and zip code, separated by commas.</div>
             </div>
           </div>
           <div class="form-group">
             <label class="form-label" for="trip-restaurants" data-i18n="newTrip.restaurantPrefs">Restaurant Preferences</label>
-            <input id="trip-restaurants" class="form-input" type="text"
+            <input id="trip-restaurants" class="form-input" type="text" data-bugdrop-mask
               data-i18n-placeholder="newTrip.restaurantPlaceholder"
               placeholder="e.g. vegetarian, Italian, $$-$$$ range" />
             <div class="form-hint" data-i18n="newTrip.restaurantHint">Diet, cuisine, or price preferences for meal stops.</div>
@@ -165,7 +164,7 @@ <h2 data-i18n="newTrip.title">Plan Your Trip</h2>
         </div>
 
         <!-- Result area (hidden until plan is generated) -->
-        <div id="result-new-trip" class="hidden" style="margin-top: var(--space-8);"></div>
+        <div id="result-new-trip" class="hidden" style="margin-top: var(--space-8);" data-bugdrop-mask></div>
       </section>
 
       <!-- Page: My Plans -->
@@ -174,7 +173,7 @@ <h2 data-i18n="newTrip.title">Plan Your Trip</h2>
           <h2 data-i18n="myPlans.title">My Plans</h2>
           <p data-i18n="myPlans.subtitle">Previously generated itineraries stored in this session.</p>
         </div>
-        <div id="plans-list"></div>
+        <div id="plans-list" data-bugdrop-mask></div>
         <div id="plans-empty" class="empty-state hidden">
           <div class="empty-state-icon">&#128203;</div>
           <div class="empty-state-title" data-i18n="myPlans.emptyTitle">No saved plans</div>
@@ -186,10 +185,10 @@ <h2 data-i18n="myPlans.title">My Plans</h2>
       <section id="page-plan-detail" class="page hidden">
         <div class="page-header">
           <button class="btn btn-sm btn-ghost mb-2" id="btn-back-plans">&#8592; <span data-i18n="myPlans.title">Back to Plans</span></button>
-          <h2 id="plan-detail-title" data-i18n="topbar.itinerary">Itinerary</h2>
-          <p id="plan-detail-subtitle"></p>
+          <h2 id="plan-detail-title" data-i18n="topbar.itinerary" data-bugdrop-mask>Itinerary</h2>
+          <p id="plan-detail-subtitle" data-bugdrop-mask></p>
         </div>
-        <div id="plan-detail-content"></div>
+        <div id="plan-detail-content" data-bugdrop-mask></div>
       </section>
     </main>
   </div>
@@ -198,13 +197,26 @@ <h2 id="plan-detail-title" data-i18n="topbar.itinerary">Itinerary</h2>
   <div id="toast-container" class="toast-container"></div>
 
   <!-- Modal Container (rendered dynamically) -->
-  <div id="modal-container"></div>
+  <div id="modal-container" data-bugdrop-mask></div>
 
   <!-- =======================================================================
        Application JavaScript
        ======================================================================= -->
   <script src="/js/i18n.js"></script>
   <script src="/js/app.js"></script>
+  <script
+    id="planit-bugdrop"
+    src="https://bugdrop.neonwatty.workers.dev/widget.v1.js"
+    data-repo="jssturm/elevated-applicant-feedback"
+    data-button="false"
+    data-theme="auto"
+    data-screenshot="optional"
+    data-send-console-logs="false"
+    data-show-name="false"
+    data-show-email="false"
+    data-show-issue-link="never"
+    data-welcome="Describe the Plan-It problem. Screenshots are optional and are sent privately to our feedback intake through BugDrop."
+  ></script>
 
 <script>
   // Only load Vercel Analytics in production (skip local/dev 404 noise)

static/css/app.css

@@ -20,7 +20,8 @@
 
   --color-text-primary: #111827;
   --color-text-secondary: #5f6675;
-  --color-text-muted: #9098a8;
+  /* WCAG 2.1 AA: 4.5:1 against the darkest light surface (--color-bg-chip). */
+  --color-text-muted: #656c7a;
   --color-text-inverse: #ffffff;
 
   --color-accent: #4f5ef5;
@@ -110,7 +111,8 @@ html.dark {
 
   --color-text-primary: #e8eaed;
   --color-text-secondary: #9aa0a8;
-  --color-text-muted: #6b7280;
+  /* WCAG 2.1 AA: 4.5:1 against the lightest dark surface (--color-bg-chip). */
+  --color-text-muted: #8b92a0;
   --color-text-inverse: #0f1117;
 
   --color-accent: #6b78f7;
@@ -182,8 +184,6 @@ html.dark .ea-tooltip.flip::after {
   border-bottom-color: #334155;
 }
 
-html.dark .bug-report-fab { background: #1e293b; border-color: #334155; }
-
 /* --------------------------------------------------------------------------
    Reset & Base
    -------------------------------------------------------------------------- */
@@ -1984,50 +1984,48 @@ ul, ol {
 }
 
 /* --------------------------------------------------------------------------
-   Bug Report FAB (floating action button)
+   Bug Report control (docked in the sidebar footer)
    -------------------------------------------------------------------------- */
 .bug-report-fab {
-  position: fixed;
-  bottom: var(--space-4);
-  left: var(--space-4);
-  z-index: 70;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  background: var(--color-bg-card);
-  border: 1px solid var(--color-border);
-  border-radius: 9999px;
-  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
-  box-shadow: var(--shadow-elevated);
-  backdrop-filter: blur(8px);
+  margin-bottom: var(--space-3);
 }
 
 .bug-report-fab-badge {
+  display: block;
   font-size: var(--text-xs);
   font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   color: var(--color-text-muted);
-  white-space: nowrap;
+  margin-bottom: var(--space-1);
 }
 
 .bug-report-fab-btn {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 0.25rem;
-  background: var(--color-accent-muted);
-  color: var(--color-accent);
-  border: none;
-  border-radius: 9999px;
-  padding: 0.25rem 0.75rem;
-  font-size: var(--text-xs);
-  font-weight: 600;
+  gap: var(--space-2);
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-bg-input);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  color: var(--color-text-primary);
   cursor: pointer;
-  transition: background var(--transition-fast), color var(--transition-fast);
-  white-space: nowrap;
+  transition: border-color var(--transition-fast), background var(--transition-fast);
 }
 
 .bug-report-fab-btn:hover {
-  background: var(--color-accent);
-  color: var(--color-text-inverse);
+  border-color: var(--color-text-muted);
+  background: var(--color-bg-chip);
+}
+
+.bug-report-fab-btn:focus-visible {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: 0 0 0 3px var(--color-accent-muted);
 }
 
 /* Bug report modal — review payload before sending */
@@ -2062,12 +2060,6 @@ ul, ol {
   font-size: 0.85rem;
 }
 
-/* Responsive — hide badge on very small screens */
-@media (max-width: 480px) {
-  .bug-report-fab-badge {
-    display: none;
-  }
-}
 
 /* --------------------------------------------------------------------------
    Crowd Prediction Banner

static/index.html

@@ -320,9 +320,6 @@ <h2>From a Sentence to a Complete Itinerary</h2>
 
 <footer>
   <p>
-    <strong>Plan-It</strong> — Open source under MIT License.
-  </p>
-  <p style="margin-top:0.75rem">
     <a href="https://elevated-applicant.vercel.app/career-portfolio" style="font-weight:600">👤 Jeff Sturm — Career Portfolio</a>
     &middot;
     <a href="https://www.linkedin.com/in/jeff-sturm-8830aa27/" target="_blank" rel="noopener">LinkedIn Profile ↗</a>