Merge branch 'main' into mind/snapshots-polish

Author: mindapivessa

.npmrc

@@ -0,0 +1,5 @@
+# @vercel/analytics declares optional peers for other frameworks (e.g.
+# @sveltejs/kit) that npm's strict resolver conflicts against our vite/vitest
+# tree. We only use the Next.js path, so relax peer resolution for a clean,
+# reproducible install here and on Vercel's build.
+legacy-peer-deps=true

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Base
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

app/analytics/events.ts

@@ -0,0 +1,38 @@
+// Custom analytics events for omni-ui, sent to Vercel Web Analytics via track().
+//
+// These name the key conversion steps so journeys and dropoff are visible in the
+// Vercel Analytics Events panel. Enterprise allows up to 8 properties per event;
+// values must be strings/numbers/booleans/null (no nesting, <=255 chars each).
+//
+// Prefer these named helpers over calling track() inline so event names and
+// property shapes stay consistent.
+
+import { track } from '@vercel/analytics';
+
+// Side-nav navigation between the consolidated surfaces.
+export function trackNavClick(destination: string): void {
+  track('nav_click', { destination });
+}
+
+// --- Snapshots download funnel: network -> preset -> copy command ---
+
+export function trackSnapshotNetworkSelect(network: string): void {
+  track('snapshot_network_select', { network });
+}
+
+export function trackSnapshotPresetSelect(preset: string): void {
+  track('snapshot_preset_select', { preset });
+}
+
+// The funnel's conversion step: copying the generated download command.
+export function trackSnapshotCommandCopy(network: string, preset: string | null): void {
+  track('snapshot_command_copy', { network, preset: preset ?? 'custom' });
+}
+
+// --- Faucet request funnel: submitted -> success | error ---
+
+export type FaucetStatus = 'submitted' | 'success' | 'error';
+
+export function trackFaucetRequest(token: string, status: FaucetStatus): void {
+  track('faucet_request', { token, status });
+}

app/api/gate/route.ts

@@ -0,0 +1,43 @@
+import { NextResponse } from 'next/server';
+
+// Verifies the temporary site password (see middleware.ts) and, on success,
+// sets an httpOnly cookie that the middleware checks. Reads the password from
+// SITE_PASSWORD; nothing is hardcoded.
+
+export const runtime = 'nodejs';
+
+const COOKIE = 'site_gate';
+const MAX_AGE_SECONDS = 60 * 60 * 24 * 7; // 7 days
+
+export async function POST(request: Request) {
+  const password = process.env.SITE_PASSWORD;
+
+  // Gate disabled (no password configured) -> nothing to verify.
+  if (!password) {
+    return NextResponse.json({ ok: true });
+  }
+
+  let provided = '';
+  try {
+    const body: unknown = await request.json();
+    if (body && typeof body === 'object' && 'password' in body) {
+      provided = String((body as { password: unknown }).password);
+    }
+  } catch {
+    provided = '';
+  }
+
+  if (provided !== password) {
+    return NextResponse.json({ ok: false }, { status: 401 });
+  }
+
+  const res = NextResponse.json({ ok: true });
+  res.cookies.set(COOKIE, password, {
+    httpOnly: true,
+    secure: true,
+    sameSite: 'strict',
+    path: '/',
+    maxAge: MAX_AGE_SECONDS,
+  });
+  return res;
+}

app/components/AppShell.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { AnimatePresence, motion } from 'motion/react';
 
+import { trackNavClick } from '../analytics/events';
 import { isTabActive, NAV_ITEMS, NavIcon, tabsForPath, titleForPath } from '../navigation';
 import { BLUE, BORDER, DISABLED, INK, MUTED, SELECTED } from '../theme';
 import { spectrum } from '../spectrum';
@@ -227,7 +228,14 @@ function NavRow({ icon, label, href, active, enabled, onNavigate, layoutScope =
 
   if (!enabled) return row;
   return (
-    <Link href={href} style={styles.navLink} onClick={onNavigate}>
+    <Link
+      href={href}
+      style={styles.navLink}
+      onClick={() => {
+        trackNavClick(label);
+        onNavigate?.();
+      }}
+    >
       {row}
     </Link>
   );

app/components/ui/CommandBox.tsx

@@ -10,25 +10,28 @@ type CommandBoxProps = {
   /** Uppercase label shown in the header. */
   label?: string;
   className?: string;
+  /** Called after the command is successfully copied (e.g. for analytics). */
+  onCopy?: () => void;
 };
 
 // Labeled, monospaced code block with a copy-to-clipboard button. Extracted
 // from the snapshots download command so any CLI/command display can reuse it.
-export function CommandBox({ command, label = 'Command', className }: CommandBoxProps) {
+export function CommandBox({ command, label = 'Command', className, onCopy }: CommandBoxProps) {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(() => {
     async function copy() {
       try {
         await navigator.clipboard.writeText(command);
         setCopied(true);
+        onCopy?.();
         setTimeout(() => setCopied(false), 2000);
       } catch {
         // ignore clipboard failures
       }
     }
     void copy();
-  }, [command]);
+  }, [command, onCopy]);
 
   return (
     <div className={cn('overflow-hidden rounded-[10px] border border-bds-gray-10', className)}>

app/layout.tsx

@@ -3,6 +3,8 @@ import './globals.css';
 import { PropsWithChildren } from 'react';
 import localFont from 'next/font/local';
 
+import { Analytics } from '@vercel/analytics/next';
+
 import { AppShell } from './components/AppShell';
 
 const baseSansMono = localFont({
@@ -62,6 +64,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
     >
       <body>
         <AppShell>{children}</AppShell>
+        <Analytics />
       </body>
     </html>
   );

app/snapshots/page.tsx

@@ -10,6 +10,12 @@ import { EmptyState } from '../components/ui/EmptyState';
 import { Tabs } from '../components/ui/Tabs';
 import { Text } from '../components/ui/Text';
 
+import {
+  trackSnapshotCommandCopy,
+  trackSnapshotNetworkSelect,
+  trackSnapshotPresetSelect,
+} from '../analytics/events';
+
 import {
   CHAIN_NAME_BY_NETWORK,
   formatBytes,
@@ -255,10 +261,16 @@ export default function SnapshotsPage() {
     [snapshots],
   );
 
+  function handleNetworkChange(next: string) {
+    setNetwork(next);
+    trackSnapshotNetworkSelect(next);
+  }
+
   function selectPreset(name: PresetName) {
     setPreset(name);
     const def = PRESETS.find((p) => p.name === name);
     if (def) setSelectedComponents([...def.components]);
+    trackSnapshotPresetSelect(name);
   }
 
   function toggleComponent(name: string) {

app/vibenet/faucet/page.tsx

@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import type { ChangeEvent, FormEvent, MouseEvent, ReactNode } from 'react';
 
+import { trackFaucetRequest } from '../../analytics/events';
 import { Button } from '../../components/ui/Button';
 import { Card } from '../../components/ui/Card';
 import { cn } from '../../components/ui/cn';
@@ -78,11 +79,14 @@ export default function FaucetPage() {
       }
       setBusy(true);
       setDrip({ phase: 'pending', tokenId });
+      trackFaucetRequest(tokenId, 'submitted');
       try {
         const outcome = await token.drip(address);
         setDrip({ phase: 'success', tokenId, outcome });
+        trackFaucetRequest(tokenId, 'success');
       } catch (err) {
         setDrip({ phase: 'error', tokenId, message: dripErrorMessage(err) });
+        trackFaucetRequest(tokenId, 'error');
       } finally {
         setBusy(false);
         refreshStatus();

middleware.ts

@@ -0,0 +1,98 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+// TEMPORARY site-wide password gate.
+//
+// Active only when SITE_PASSWORD is set. Set it in Vercel's Production
+// environment so the gate shows on production only; leave it unset for local
+// dev and preview. The password itself is never committed — it lives in the
+// env var.
+//
+// The gate covers UI pages only. /api/* is intentionally left public so the
+// snapshots API stays reachable by external consumers.
+//
+// To remove the gate later: delete this file and app/api/gate/route.ts, and
+// unset SITE_PASSWORD in Vercel.
+
+const COOKIE = 'site_gate';
+
+export function middleware(req: NextRequest) {
+  const password = process.env.SITE_PASSWORD;
+
+  // No password configured (local dev / preview) -> no gate.
+  if (!password || process.env.NODE_ENV === 'development') {
+    return NextResponse.next();
+  }
+
+  if (req.cookies.get(COOKIE)?.value === password) {
+    return NextResponse.next();
+  }
+
+  return new NextResponse(gateHtml(), {
+    status: 401,
+    headers: {
+      'content-type': 'text/html; charset=utf-8',
+      'cache-control': 'no-store',
+    },
+  });
+}
+
+// Match everything except the public API, Next internals, and static assets.
+export const config = {
+  matcher: ['/((?!api/|_next/static|_next/image|favicon.ico|robots.txt|sitemap.xml).*)'],
+};
+
+// Self-contained gate screen (no app layout / external assets), posts the
+// password to /api/gate and reloads on success.
+function gateHtml(): string {
+  return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="robots" content="noindex" />
+<title>Base Labs</title>
+<style>
+  :root { color-scheme: light; }
+  * { box-sizing: border-box; }
+  body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
+         font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; background:#0000ff; }
+  .card { background:#fff; padding:32px; border-radius:14px; width:100%; max-width:340px;
+          box-shadow:0 10px 40px rgba(0,0,0,.25); }
+  h1 { font-size:16px; margin:0 0 4px; color:#111; }
+  p { font-size:13px; color:#666; margin:0 0 20px; }
+  input { width:100%; padding:10px 12px; font-size:14px; border:1px solid #ddd; border-radius:8px;
+          outline:none; color:#111; }
+  input:focus { border-color:#0000ff; }
+  button { width:100%; margin-top:12px; padding:10px 12px; font-size:14px; font-weight:500;
+           color:#fff; background:#0000ff; border:none; border-radius:8px; cursor:pointer; }
+  .err { color:#c00; font-size:12px; margin-top:10px; min-height:16px; }
+</style>
+</head>
+<body>
+  <form class="card" id="gate">
+    <h1>Base Labs</h1>
+    <p>This site is password protected.</p>
+    <input id="pw" type="password" placeholder="Password" autocomplete="current-password" autofocus />
+    <button type="submit">Enter</button>
+    <div class="err" id="err"></div>
+  </form>
+  <script>
+    var f = document.getElementById('gate');
+    var pw = document.getElementById('pw');
+    var err = document.getElementById('err');
+    f.addEventListener('submit', function (ev) {
+      ev.preventDefault();
+      err.textContent = '';
+      fetch('/api/gate', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ password: pw.value }),
+      }).then(function (r) {
+        if (r.ok) { location.reload(); }
+        else { err.textContent = 'Incorrect password'; pw.value = ''; pw.focus(); }
+      }).catch(function () { err.textContent = 'Something went wrong. Try again.'; });
+    });
+  </script>
+</body>
+</html>`;
+}