add one run.sh for the entire pipeline

frontend/index.html

@@ -191,9 +191,6 @@
             min-width: 80px;
         }
 
-        .browser-safari .tab .tab-icon {
-            display: none;
-        }
 
         .browser-safari .tab:hover {
             background: var(--tab-hover);
@@ -208,9 +205,6 @@
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         }
 
-        .browser-safari .tab-active .tab-icon {
-            display: inline;
-        }
 
         .tab-about .tab-title {
             font-weight: 600;
@@ -303,17 +297,11 @@
             border-radius: 8px;
         }
 
-        .browser-safari .iframe-urlbar .url-title {
-            display: none;
-        }
 
         .iframe-urlbar .tab-icon {
             flex-shrink: 0;
         }
 
-        .url-title-mobile {
-            display: none;
-        }
 
         .iframe-urlbar .url-text {
             font-size: 14px;
@@ -342,26 +330,36 @@
             min-width: 0;
         }
 
-        /* Mobile: title above address bar */
         @media (max-width: 640px) {
-            .iframe-toolbar {
+            .iframe-urlbar .url-title {
-                flex-wrap: wrap;
+                display: none;
             }
-            .iframe-toolbar .url-title-mobile {
+        }
-                width: 100%;
+
+        /* Title bar above address bar — hidden on desktop (title goes in urlbar) */
+        .iframe-titlebar {
+            display: none;
+            padding: 6px 12px 2px;
+            background: var(--tab-bg);
             font-size: 13px;
             color: var(--text);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-                padding: 0 4px 4px;
-                order: -1;
         }
-            .iframe-urlbar .url-title {
+
-                display: none;
+        @media (max-width: 640px) {
+            .iframe-titlebar {
+                display: block;
+                text-align: center;
             }
         }
 
+        /* Paused marquee row */
+        .tab-row.paused {
+            animation-play-state: paused !important;
+        }
+
         .iframe-close {
             background: none;
             border: none;
@@ -379,7 +377,7 @@
 
         .iframe-viewer iframe {
             width: 100%;
-            height: calc(75vh - 56px);
+            height: calc(75vh - 78px);
             border: none;
             background: white;
         }

frontend/site.js

@@ -17,6 +17,8 @@ const loadingEl = document.getElementById("loading");
 // Detect browser and OS, set classes on body for tab styling
 function detectBrowser() {
     const ua = navigator.userAgent;
+    // Mobile defaults to chrome styling
+    if (/iPhone|iPad|Android/.test(ua)) return "chrome";
     if (ua.includes("Firefox")) return "firefox";
     if (ua.includes("Edg/")) return "edge";
     if (ua.includes("Safari") && !ua.includes("Chrome") && !ua.includes("CriOS")) return "safari";
@@ -155,7 +157,9 @@ function startRowAnimation(row) {
         let pos = stagger * halfWidth;
         let lastTime = null;
 
+        row._rafId = true;
         function tick(now) {
+            if (row._paused) { lastTime = null; requestAnimationFrame(tick); return; }
             if (lastTime === null) { lastTime = now; requestAnimationFrame(tick); return; }
             pos += ((now - lastTime) / 1000) * pxPerSec;
             lastTime = now;
@@ -260,6 +264,7 @@ window.addEventListener("scroll", async () => {
 // Inline iframe viewer
 let activeViewer = null;
 let activeTab = null;
+let activeRow = null;
 
 function openInlineViewer(tabEl, entry, url) {
     // Close existing viewer
@@ -272,10 +277,25 @@ function openInlineViewer(tabEl, entry, url) {
     // Find the row this tab belongs to
     const row = tabEl.closest(".tab-row");
 
+    // Pause the marquee on the selected tab's row
+    row.classList.add("paused");
+    if (row._rafId) {
+        // Firefox rAF: store paused state
+        row._paused = true;
+    } else {
+        // CSS animation: getAnimations() to pause
+        row.getAnimations().forEach(a => a.pause());
+    }
+
     // Build the viewer
     const viewer = document.createElement("div");
     viewer.className = "iframe-viewer";
 
+    // Title bar
+    const titlebar = document.createElement("div");
+    titlebar.className = "iframe-titlebar";
+    titlebar.textContent = entry.title || entry.url;
+
     // Toolbar (address bar area)
     const toolbar = document.createElement("div");
     toolbar.className = "iframe-toolbar";
@@ -306,12 +326,6 @@ function openInlineViewer(tabEl, entry, url) {
 
     toolbar.appendChild(urlbar);
 
-    // Mobile: title shown above the URL bar (hidden on desktop via CSS)
-    const mobileTitle = document.createElement("span");
-    mobileTitle.className = "url-title-mobile";
-    mobileTitle.textContent = entry.title || "";
-    toolbar.appendChild(mobileTitle);
-
     const close = document.createElement("button");
     close.className = "iframe-close";
     close.textContent = "✕";
@@ -322,12 +336,14 @@ function openInlineViewer(tabEl, entry, url) {
     iframe.sandbox = "allow-scripts allow-same-origin allow-forms";
     iframe.src = url;
 
+    viewer.appendChild(titlebar);
     viewer.appendChild(toolbar);
     viewer.appendChild(iframe);
 
     // Insert after the row
     row.after(viewer);
     activeViewer = viewer;
+    activeRow = row;
 
     // Scroll so the viewer is visible
     viewer.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -338,6 +354,15 @@ function closeInlineViewer() {
         activeViewer.remove();
         activeViewer = null;
     }
+    if (activeRow) {
+        activeRow.classList.remove("paused");
+        if (activeRow._paused) {
+            activeRow._paused = false;
+        } else {
+            activeRow.getAnimations().forEach(a => a.play());
+        }
+        activeRow = null;
+    }
     if (activeTab) {
         activeTab.classList.remove("tab-active");
         activeTab = null;

infra/ec2-userdata.sh

@@ -9,6 +9,14 @@ export HOME=/root
 
 echo "=== EveryTab EC2 Bootstrap ==="
 
+# --- EBS readahead ---
+# Large readahead improves bundle gen throughput by prefetching icon files into page cache.
+# 16MB readahead (32768 sectors × 512 bytes). Safe for all pipeline stages.
+echo "--- Setting EBS readahead ---"
+ROOT_DEV=$(findmnt -no SOURCE / | sed 's/p[0-9]*$//')
+sudo blockdev --setra 32768 "$ROOT_DEV"
+echo "Readahead: $(blockdev --getra "$ROOT_DEV") sectors on $ROOT_DEV"
+
 # --- File descriptor limits ---
 echo "--- Raising file descriptor limits ---"
 echo '* soft nofile 65536' | sudo tee -a /etc/security/limits.conf

pipeline/03_icon_download/main.go

@@ -5,7 +5,6 @@ import (
 	"flag"
 	"fmt"
 	"log"
-	"math/rand"
 	"os"
 	"sync"
 	"sync/atomic"
@@ -138,9 +137,6 @@ func main() {
 				break
 			}
 
-			rand.Shuffle(len(icons), func(i, j int) {
-				icons[i], icons[j] = icons[j], icons[i]
-			})
 			for _, icon := range icons {
 				iconCh <- icon
 			}

pipeline/run.sh

@@ -0,0 +1,104 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Full pipeline run — chain all stages sequentially.
+# Run in tmux. Monitor from another pane with psql or htop.
+# Stops on any failure. Resume by commenting out completed stages.
+
+usage() {
+    cat <<'EOF'
+Usage: ./pipeline/run.sh --db-url DATABASE_URL [OPTIONS]
+
+Required:
+  --db-url URL          Postgres connection string
+
+Optional:
+  --limit N             CC-Index host limit (default: 0 = all)
+  --icons-dir DIR       Icon storage directory (default: ~/icons)
+  --site-bucket NAME    S3 bucket for bundles (default: everytab-site)
+  --help                Show this help message
+
+Example:
+  ./pipeline/run.sh --db-url "$DATABASE_URL"
+  ./pipeline/run.sh --db-url "$DATABASE_URL" --limit 3000000
+EOF
+    exit 0
+}
+
+# Defaults
+DB_URL=""
+LIMIT=0
+ICONS_DIR="$HOME/icons"
+SITE_BUCKET="everytab-site"
+
+if [ $# -eq 0 ]; then usage; fi
+
+while [ $# -gt 0 ]; do
+    case "$1" in
+        --help) usage ;;
+        --db-url) DB_URL="$2"; shift 2 ;;
+        --limit) LIMIT="$2"; shift 2 ;;
+        --icons-dir) ICONS_DIR="$2"; shift 2 ;;
+        --site-bucket) SITE_BUCKET="$2"; shift 2 ;;
+        *) echo "Unknown option: $1"; usage ;;
+    esac
+done
+
+if [ -z "$DB_URL" ]; then
+    echo "ERROR: --db-url is required"
+    exit 1
+fi
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+REPO_DIR="$(dirname "$SCRIPT_DIR")"
+START_TIME=$(date +%s)
+
+echo "=========================================="
+echo "  EveryTab Pipeline"
+echo "  $(date)"
+echo "  Limit: $LIMIT (0 = full run)"
+echo "=========================================="
+echo ""
+
+# --- Stage 1: CC-Index ---
+echo ">>> Stage 1: CC-Index Query"
+"$SCRIPT_DIR/01_cc_index/query.sh" --db-url "$DB_URL" --limit "$LIMIT"
+echo ""
+
+# --- Stage 2: WARC Parsing ---
+echo ">>> Stage 2: WARC Parsing"
+~/warc_parse --db "$DB_URL" --log-file "$HOME/warc_parse.log" --log-errors-only
+echo ""
+
+# --- Stage 3: Icon Download ---
+echo ">>> Stage 3: Icon Download"
+GOMEMLIMIT=12GiB ~/icon_download --db "$DB_URL" --icons-dir "$ICONS_DIR" --log-file "$HOME/icon_download.log" --log-errors-only
+echo ""
+
+# --- Stage 4: Best Icon Selection ---
+echo ">>> Stage 4: Best Icon Selection"
+psql "$DB_URL" -f "$SCRIPT_DIR/04_best_icon/select.sql"
+echo ""
+
+# --- Stage 5: Bundle Generation ---
+echo ">>> Stage 5: Bundle Generation"
+~/bundle_gen --db "$DB_URL" --icons-dir "$ICONS_DIR" --site-bucket "$SITE_BUCKET" --log-file "$HOME/bundle_gen.log" --log-errors-only
+echo ""
+
+# --- Stage 6: Frontend Deploy ---
+echo ">>> Stage 6: Frontend Deploy"
+TOTAL_BUNDLES=$(jq -r '.bundles_created' stats/05_bundle_gen.json)
+"$SCRIPT_DIR/06_frontend/deploy.sh" --total-bundles "$TOTAL_BUNDLES"
+echo ""
+
+# --- Done ---
+END_TIME=$(date +%s)
+DURATION=$(( END_TIME - START_TIME ))
+HOURS=$(( DURATION / 3600 ))
+MINS=$(( (DURATION % 3600) / 60 ))
+
+echo "=========================================="
+echo "  Pipeline Complete"
+echo "  $(date)"
+echo "  Total duration: ${HOURS}h ${MINS}m"
+echo "=========================================="