UX: drop Exports tab, auto-spin Roulette on first visit

- Remove the Exports sub-tab entirely — it was a one-shot action poorly
placed as a dedicated tab. Download buttons (KML / GeoJSON / CSV) and
the Google My Maps instructions now live in a #download-bar at the top
of Browse, revealed when showSubTabBar() fires.
- Roulette now auto-spins on first visit: showSubTab('roulette') triggers
spin-btn.click() if #pick-card is still hidden. Subsequent tab switches
don't re-spin (card is already visible).
- Clean up orphaned success-block / success-ring CSS (no longer used).
- Update test_routes.py: assert no exports tab, assert download-bar is
inside the explore panel.
- CLAUDE.md + README.md updated to reflect two-sub-tab nav.

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

CLAUDE.md

@@ -55,15 +55,16 @@ The app has a **permanent two-level nav** visible from first page load:
 ```
 [📥 Extract]  [🗺 Explore]       ← #top-nav, always sticky at top
                 ├── import card   (shown until data loads)
-                └── [⬇ Exports] [🎲 Roulette] [📋 Browse]  ← #sub-tab-bar, after data loads
+                └── [🎲 Roulette] [📋 Browse]  ← #sub-tab-bar, after data loads
 ```
 
 - **Extract tab** (`#top-panel-extract`): upload card, model picker, run button, progress card.
 - **Explore tab** (`#top-panel-explore`): import card at top; once data loads the import card hides
-  and `#sub-tab-bar` appears with three sub-panels.
-- After extraction completes → `showTopTab('explore')` → `showSubTabBar(jobId)` → `showSubTab('roulette')` + nudge toast.
+  and `#sub-tab-bar` appears with two sub-panels.
+- After extraction completes → `showTopTab('explore')` → `showSubTabBar(jobId)` → `showSubTab('roulette')` (auto-spins) + nudge toast.
 - After KML/CSV import → same but `showSubTab('browse')`.
 - `＋ New` button: `showTopTab('extract')` (no page reload — preserves Extract form state).
+- **Roulette auto-spins** on first visit: `showSubTab('roulette')` triggers `$('spin-btn').click()` if `#pick-card` is still hidden (no previous result). Subsequent tab switches do not re-spin.
 
 **Food-only filter** — `FOOD_CATEGORIES = new Set(['Restaurant','Bar','Cafe','Bakery','Market'])` in
 `app.js`; matching `FOOD_CATEGORIES` set in `web/app.py`. `filterState.foodOnly` defaults `true`
@@ -73,10 +74,14 @@ The app has a **permanent two-level nav** visible from first page load:
 **`POST /import`** — accepts `.kml` or `.csv`, writes job CSV+KML, returns `{job_id, rows, pinned}`
 with `step:"done"` immediately (no SSE stream).
 
+**Downloads** live in the Browse sub-panel (`#download-bar`), revealed when `showSubTabBar` is called.
+Buttons: `#download-btn` (KML), `#download-geojson-btn`, `#download-csv-btn` — onclick set in
+both `showDownload` (post-extraction) and `handleImportFile` (post-import).
+
 Key JS functions:
 - `showTopTab(name)` — switches top-level Extract / Explore panels
-- `showSubTabBar(jobId)` — hides import card, reveals `#sub-tab-bar` inside Explore
-- `showSubTab(name)` — switches sub-panels (exports / roulette / browse)
+- `showSubTabBar(jobId)` — hides import card, reveals `#sub-tab-bar` + `#download-bar` inside Explore
+- `showSubTab(name)` — switches sub-panels (roulette / browse); auto-spins roulette on first visit
 - `updateTabBadges()` — sets badge counts and stat strip
 
 KML parser convention: folder nesting = country (outer) → city (inner); `<coordinates>` order is

README.md

@@ -304,11 +304,10 @@ The UI lets you:
 - **Watch real-time progress** as posts are extracted, geocoded, and mapped
 - **Two-tab layout visible from first load** — the app shows two top-level tabs immediately on the landing page:
   - **📥 Extract** — upload your Instagram export, pick a model, run the pipeline, watch real-time progress
-  - **🗺 Explore** — for returning users; drop your `places_map.kml` or `places_full.csv` here to skip re-extraction entirely. Once data loads, three sub-tabs appear:
-    - **⬇ Exports** — download KML / GeoJSON / CSV + step-by-step Google My Maps import guide
-    - **🎲 Roulette** — random place picker, filtered by category, city, or distance from your location. Default after extraction
-    - **📋 Browse** — stats bar, interactive Leaflet map, full-text search, filters, and card grid. Default after import
-  - After extraction completes, the app automatically jumps to Explore → Roulette
+  - **🗺 Explore** — for returning users; drop your `places_map.kml` or `places_full.csv` here to skip re-extraction entirely. Once data loads, two sub-tabs appear:
+    - **🎲 Roulette** — random place picker that auto-spins on first visit, filtered by category, city, or distance from your location. Default after extraction
+    - **📋 Browse** — stats bar, interactive Leaflet map, full-text search, filters, and card grid with KML / GeoJSON / CSV download buttons at the top. Default after import
+  - After extraction completes, the app automatically jumps to Explore → Roulette (spins immediately)
 - **Preview pins on a map** — an in-app Leaflet/OpenStreetMap map renders every geocoded place so you can sanity-check for misplaced pins (e.g. a venue geocoded into the wrong country) before exporting. It follows your active filters and pins link back to the original reel
 - **Filter and search** — text search by name/city, country, category, and cuisine dropdowns, multi-select price range chips, "missing pins" toggle, and a **🍴 Food only** toggle (on by default) that limits Browse and Roulette to food/drink places (Restaurant, Bar, Cafe, Bakery, Market) — all client-side with instant results
 - **Fix extractions inline** — click any field (name, city, state, category, cuisine, occasion) directly on the card to edit it; changes are saved to the CSV immediately

tests/test_routes.py

@@ -70,9 +70,10 @@ try:
               html.index('id="sub-tab-bar"') > html.index('id="top-panel-explore"'))
         check("import-card inside explore panel",
               html.index('id="import-card"') > html.index('id="top-panel-explore"'))
-        check("sub-tab exports present",              'data-sub-tab="exports"' in html)
         check("sub-tab roulette present",             'data-sub-tab="roulette"' in html)
         check("sub-tab browse present",               'data-sub-tab="browse"' in html)
+        check("no exports sub-tab",                   'data-sub-tab="exports"' not in html)
+        check("download-bar in browse panel",         html.index('id="download-bar"') > html.index('id="top-panel-explore"'))
         check("no legacy #tab-bar id",                'id="tab-bar"' not in html)
         check("no legacy .tab-panel class",           'class="tab-panel"' not in html)
 

web/static/app.css

@@ -259,27 +259,7 @@
   }
   .status-msg.error { color: #ff6b6b; }
 
-  /* ── Download ────────────────────────────────────────────── */
-  #download-section { display: none; }
-
-  .success-ring {
-    display: inline-block;
-    padding: 3px;
-    background: var(--grad);
-    border-radius: 50%;
-    margin-bottom: 16px;
-  }
-  .success-inner {
-    background: var(--bg);
-    border-radius: 50%;
-    width: 64px; height: 64px;
-    display: flex; align-items: center; justify-content: center;
-    font-size: 28px;
-  }
-  .success-block { text-align: center; margin-bottom: 20px; }
-  .success-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; }
-  .success-stats { font-size: 0.85rem; color: var(--muted); }
-  .success-stats strong { color: var(--ig3); }
+  /* ── Download bar (Browse panel) ────────────────────────── */
 
   .download-row {
     display: flex; gap: 10px; margin-top: 10px;

web/static/app.js

@@ -33,7 +33,13 @@ function showSubTab(name) {
   );
   const panel = $('panel-' + name);
   if (panel) panel.classList.add('active');
-  if (name === 'roulette' && !_geolocationRequested) _requestGeolocation();
+  if (name === 'roulette') {
+    if (!_geolocationRequested) _requestGeolocation();
+    // Auto-spin on first visit (card not yet shown)
+    if (currentJobId && $('pick-card').style.display === 'none') {
+      setTimeout(() => $('spin-btn').click(), 120);
+    }
+  }
   if (name === 'browse' && _map) setTimeout(() => _map.invalidateSize(), 60);
 }
 
@@ -41,6 +47,7 @@ function showSubTabBar(jobId) {
   currentJobId = jobId;
   $('import-card').style.display  = 'none';
   $('sub-tab-bar').style.display  = 'block';
+  $('download-bar').style.display = 'block';
 }
 
 function updateTabBadges() {
@@ -145,6 +152,9 @@ async function handleImportFile(f) {
   status.textContent = '';
   showTopTab('explore');
   showSubTabBar(data.job_id);
+  $('download-btn').onclick = () => { window.location = '/download/' + data.job_id; };
+  $('download-geojson-btn').onclick = () => { window.location = '/download/' + data.job_id + '/geojson'; };
+  $('download-csv-btn').onclick = () => { window.location = '/download/' + data.job_id + '/csv'; };
   showSubTab('browse');
   loadResults(data.job_id);
   if (_clientGeocode) geocodeClientSide();
@@ -583,17 +593,11 @@ function listenProgress(jobId) {
 function showDownload(d) {
   $('progress-section').style.display = 'none';
 
-  const stats = [];
-  if (d.extracted) stats.push(`<strong>${d.extracted}</strong> places found`);
-  if (d.pinned)    stats.push(`<strong>${d.pinned}</strong> geocoded`);
-  if (d.cost)      stats.push(`~<strong>$${d.cost}</strong> Claude cost`);
-  $('success-stats').innerHTML = stats.join(' · ');
-
   $('download-btn').onclick = () => { window.location = '/download/' + currentJobId; };
   $('download-geojson-btn').onclick = () => { window.location = '/download/' + currentJobId + '/geojson'; };
   $('download-csv-btn').onclick = () => { window.location = '/download/' + currentJobId + '/csv'; };
 
-  // Jump to Explore, reveal sub-tab bar, default to Roulette
+  // Jump to Explore, reveal sub-tab bar, default to Roulette (auto-spins)
   showTopTab('explore');
   showSubTabBar(currentJobId);
   showSubTab('roulette');

web/templates/index.html

@@ -236,8 +236,7 @@
   <!-- Sub-tab bar (hidden until data loads) -->
   <div id="sub-tab-bar">
     <div class="sub-tab-bar-inner">
-      <button class="sub-tab-btn active" data-sub-tab="exports">⬇ Exports</button>
-      <button class="sub-tab-btn" data-sub-tab="roulette">🎲 Roulette<span class="tab-badge" id="badge-roulette"></span></button>
+      <button class="sub-tab-btn active" data-sub-tab="roulette">🎲 Roulette<span class="tab-badge" id="badge-roulette"></span></button>
       <button class="sub-tab-btn" data-sub-tab="browse">📋 Browse<span class="tab-badge" id="badge-browse"></span></button>
       <button class="sub-tab-btn sub-tab-btn-ghost" id="new-extract-btn">＋ New</button>
     </div>
@@ -248,35 +247,8 @@
     <div id="tab-stat-strip"></div>
   </div>
 
-  <!-- ── Exports sub-panel ──────────────────────────────────── -->
-  <div class="sub-panel" id="panel-exports">
-    <div class="card" id="download-section">
-      <div class="success-block">
-        <div class="success-ring"><div class="success-inner">✅</div></div>
-        <div class="success-title">Your map is ready!</div>
-        <div class="success-stats" id="success-stats"></div>
-      </div>
-      <button class="btn" id="download-btn">⬇ Download KML — Google My Maps</button>
-      <details style="max-width:520px;margin:10px auto 0;text-align:left;font-size:0.82rem;color:var(--muted);">
-        <summary style="cursor:pointer;font-weight:600;">How to import into Google My Maps (and use it on your phone)</summary>
-        <ol style="line-height:1.8;padding-left:18px;margin-top:8px;">
-          <li>Go to <a href="https://mymaps.google.com" target="_blank" rel="noopener">mymaps.google.com</a> → <strong>Create a new map</strong></li>
-          <li>Click <strong>Import</strong> on the base layer and upload the KML you just downloaded</li>
-          <li>Pins appear organised by country → city, each linking back to the original reel</li>
-          <li><strong>On your phone:</strong> open the Google Maps app → <em>Saved → Maps</em> to find your custom map and navigate to any pin</li>
-        </ol>
-        <p style="margin-top:6px;">Prefer no Google account? The KML also imports into <a href="https://organicmaps.app" target="_blank" rel="noopener">Organic Maps</a> or OsmAnd — fully offline, great for travelling abroad.</p>
-      </details>
-      <div class="download-row">
-        <button class="btn btn-outline" id="download-geojson-btn">⬇ GeoJSON</button>
-        <button class="btn btn-outline" id="download-csv-btn">⬇ CSV</button>
-      </div>
-      <p class="download-note">GeoJSON includes geocoded pins only · CSV includes all rows</p>
-    </div>
-  </div>
-
   <!-- ── Roulette sub-panel ─────────────────────────────────── -->
-  <div class="sub-panel" id="panel-roulette">
+  <div class="sub-panel active" id="panel-roulette">
     <div class="card" id="roulette-section">
       <p class="card-title">🎲 Place Roulette</p>
       <p style="font-size:0.85rem;color:var(--muted);margin-bottom:18px;">Can't decide where to go? Let the algorithm decide.</p>
@@ -311,7 +283,7 @@
       <button class="roulette-btn" id="spin-btn">
         <span class="dice">🎲</span><span>Spin the wheel</span>
       </button>
-      <div class="pick-card" id="pick-card">
+      <div class="pick-card" id="pick-card" style="display:none;">
         <div class="pick-name" id="pick-name"></div>
         <div class="pick-loc" id="pick-loc"></div>
         <div class="pick-meta" id="pick-meta"></div>
@@ -331,6 +303,24 @@
         <button class="new-banner-dismiss" id="new-banner-dismiss" type="button" title="Dismiss">✕</button>
       </div>
     </div>
+    <div id="download-bar" style="display:none; max-width:960px; margin:0 auto 12px; text-align:center;">
+      <button class="btn" id="download-btn">⬇ KML — Google My Maps</button>
+      <div class="download-row" style="margin-top:8px;">
+        <button class="btn btn-outline" id="download-geojson-btn">⬇ GeoJSON</button>
+        <button class="btn btn-outline" id="download-csv-btn">⬇ CSV</button>
+      </div>
+      <details style="max-width:520px;margin:10px auto 0;text-align:left;font-size:0.82rem;color:var(--muted);">
+        <summary style="cursor:pointer;font-weight:600;">How to import into Google My Maps</summary>
+        <ol style="line-height:1.8;padding-left:18px;margin-top:8px;">
+          <li>Go to <a href="https://mymaps.google.com" target="_blank" rel="noopener">mymaps.google.com</a> → <strong>Create a new map</strong></li>
+          <li>Click <strong>Import</strong> on the base layer and upload the KML you just downloaded</li>
+          <li>Pins appear organised by country → city, each linking back to the original reel</li>
+          <li><strong>On your phone:</strong> open the Google Maps app → <em>Saved → Maps</em> to find your custom map</li>
+        </ol>
+        <p style="margin-top:6px;">Prefer no Google account? The KML also imports into <a href="https://organicmaps.app" target="_blank" rel="noopener">Organic Maps</a> or OsmAnd — fully offline.</p>
+      </details>
+      <p class="download-note">GeoJSON includes geocoded pins only · CSV includes all rows</p>
+    </div>
     <div class="card" id="stats-bar" style="display:none; max-width:960px; margin:0 auto 16px;">
       <div class="stats-row">
         <div class="stat-chip"><span class="stat-icon">🍜</span><div><div class="stat-val" id="stat-total">—</div><div class="stat-label">places</div></div></div>