Phase 3 and 4

packages/client/src/components/ConnectivityBanner.tsx

@@ -1,26 +1,62 @@
 /**
- * Thin connectivity banner — used on pages outside the BidderLayout shell
- * (auth pages, staff tools, display board).
+ * Connectivity banner — shown below the header on non-connected states.
  *
- * Hidden when fully connected.
+ * Displays:
+ *  - Connection path: public, local-LAN, or offline
+ *  - Outbox count: how many bids are queued for sync
  */
 import { useConnectivityStore } from "../store/connectivity.js";
 
 const CONFIGS = {
-  local:   { bg: "bg-gold-500",  text: "Local network — offline-capable" },
-  offline: { bg: "bg-red-500",   text: "Offline — bids will sync when reconnected" },
+  local: {
+    bg: "bg-gold-500",
+    text: "Local network — offline-capable",
+    icon: "🌐",
+  },
+  offline: {
+    bg: "bg-red-500",
+    text: "Offline — bids will sync when reconnected",
+    icon: "📡",
+  },
 } as const;
 
 export function ConnectivityBanner() {
   const status = useConnectivityStore((s) => s.status);
-  if (status === "connected") return null;
+  const outboxCount = useConnectivityStore((s) => s.outboxCount);
+  const localUrl = useConnectivityStore((s) => s.localUrl);
+
+  if (status === "connected") {
+    // Only show a small badge if there are pending bids, even when connected
+    if (outboxCount > 0) {
+      return (
+        <div className="bg-gold-500 text-white text-center text-xs py-1.5 px-4 font-medium">
+          Syncing {outboxCount} queued bid{outboxCount !== 1 ? "s" : ""}…
+        </div>
+      );
+    }
+    return null;
+  }
 
   const cfg = CONFIGS[status as keyof typeof CONFIGS];
   if (!cfg) return null;
 
+  const label =
+    status === "local" && localUrl
+      ? `Local: ${new URL(localUrl).hostname}`
+      : cfg.text;
+
   return (
-    <div className={`${cfg.bg} text-white text-center text-xs py-1.5 px-4 font-semibold tracking-wide`}>
-      {cfg.text}
+    <div className={`${cfg.bg} text-white text-xs py-1.5 px-4 font-medium`}>
+      <div className="flex items-center justify-between max-w-xl mx-auto">
+        <span>
+          {cfg.icon} {label}
+        </span>
+        {outboxCount > 0 && (
+          <span className="bg-white/20 rounded-full px-2 py-0.5 text-[10px] font-bold tabular-nums">
+            {outboxCount} queued
+          </span>
+        )}
+      </div>
     </div>
   );
 }