Wire SPA captive-portal flow to bubble-netd (§6.5)

The §6.5 sign-in window flow becomes clickable end-to-end:

- New shared store frontend/src/lib/netStore.svelte.ts polls
  /net/signin/status every 5 s and exposes the result via Svelte
  runes. Components subscribe; the store handles the lifecycle.

- New components/SigninBanner.svelte mounts above main content
  in App.svelte. Renders only when state=open. Shows the deadline
  countdown, the allowed portal IPs, and the LAN→WAN port allowlist
  — every piece §6.5 says must be visible 'on every screen.' Has a
  one-click 'Close now' that calls /net/signin/close.

- Wifi.svelte gains a captive-portal card driven by /net/captive.
  When captive=true and the window is closed, the card surfaces the
  detected portal IPs and the 'Open sign-in window (10 min)' button.
  When captive=false, a small green confirmation. The mocked SSID
  scanner is preserved underneath since iwinfo isn't wired yet.

- A strict-mode toggle is exposed inline on /wifi (settings page
  doesn't exist yet); flipping it persists via /net/signin/strict
  and the captive-portal 'Open' button greys out with an
  explanation when strict mode is active.

App.svelte starts the net poll on boot via startPolling() and
returns the stop function from onMount() so the timer cleans up
on unmount.

Type-check 0/0; production build 73 KB JS / 26 KB gzipped, still
well under the §13.3 budget. End-to-end shapes verified against
a live bubble-netd via curl: status closed → open with countdown
→ strict-toggle → close.

Author: claude

frontend/src/App.svelte

@@ -2,6 +2,7 @@
   import { onMount } from 'svelte';
   import { currentPath, navigate, onChange } from './lib/router';
   import { session, logout, refresh } from './lib/session.svelte';
+  import { startPolling } from './lib/netStore.svelte';
   import * as api from './lib/api';
   import { ICON } from './lib/icons';
 
@@ -12,6 +13,7 @@
   import Vpn from './routes/Vpn.svelte';
   import Ssid from './routes/Ssid.svelte';
   import Dns from './routes/Dns.svelte';
+  import SigninBanner from './components/SigninBanner.svelte';
 
   let path = $state(currentPath());
 
@@ -23,7 +25,12 @@
   onMount(() => {
     void api.timeSync(Date.now());
     void refresh();
-    return onChange((p) => (path = p));
+    const stopRouter = onChange((p) => (path = p));
+    const stopNetPoll = startPolling(5000);
+    return () => {
+      stopRouter();
+      stopNetPoll();
+    };
   });
 
   const s = session();
@@ -58,6 +65,8 @@
       </div>
     </header>
 
+    <SigninBanner />
+
     <nav>
       {#each nav as item}
         <a

frontend/src/components/SigninBanner.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  // Per DESIGN.md §6.5 the captive-portal sign-in window must be
+  // visible on EVERY screen, not just the WiFi pane — it's a
+  // security-relevant state and easy to forget about. This banner
+  // mounts in App.svelte above the main content and renders only
+  // when the window is open.
+
+  import { net, closeSignin } from '../lib/netStore.svelte';
+  import { ICON } from '../lib/icons';
+
+  const s = net();
+
+  function fmtRemaining(sec: number): string {
+    const m = Math.floor(sec / 60);
+    const r = Math.max(0, sec - m * 60);
+    return m + 'm ' + r.toString().padStart(2, '0') + 's';
+  }
+</script>
+
+{#if s.signin?.state === 'open'}
+  <div class="banner" role="status" aria-live="polite">
+    <span class="icon">{ICON.warn}</span>
+    <div class="text">
+      <strong>Sign-in window open</strong>
+      <span class="rem">— {fmtRemaining(s.signin.remaining_sec ?? 0)} remaining</span>
+      <div class="detail">
+        LAN→WAN allowed to
+        <code>{(s.signin.portal_ips ?? []).join(', ') || '—'}</code>
+        on TCP <code>{(s.signin.allowed_ports ?? []).join(', ')}</code>.
+      </div>
+    </div>
+    <button onclick={closeSignin} class="close">Close now</button>
+  </div>
+{/if}
+
+<style>
+  .banner {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 12px;
+    align-items: center;
+    background: color-mix(in srgb, var(--accent-warn) 18%, var(--bg-elev));
+    border: 1px solid var(--accent-warn);
+    border-radius: var(--radius);
+    padding: 10px 12px;
+    margin-bottom: 12px;
+    color: var(--fg);
+    font-size: 13px;
+  }
+  .banner .icon { color: var(--accent-warn); font-size: 16px; }
+  .text { line-height: 1.4; }
+  .rem { color: var(--accent-warn); font-weight: 600; }
+  .detail { color: var(--fg-dim); font-size: 12px; }
+  code { background: var(--bg); padding: 1px 4px; border-radius: 3px; }
+  .close {
+    background: var(--bg-elev);
+    border-color: var(--accent-warn);
+    color: var(--accent-warn);
+  }
+</style>

frontend/src/lib/netStore.svelte.ts

@@ -0,0 +1,68 @@
+// Shared store that polls bubble-netd's /net/signin/status. Multiple
+// components subscribe (the global SigninBanner, the WiFi page's
+// captive-portal card, possibly future settings panels). DESIGN.md
+// §6.5 requires the open-window state to be visible on EVERY screen,
+// which is what this store + the banner mounted in App.svelte deliver.
+
+import * as api from './api';
+import type { CaptiveStatus, SigninStatus } from './api';
+
+interface NetState {
+  signin: SigninStatus | null;
+  captive: CaptiveStatus | null;
+  // Last error string surfaced from any net call. Cleared on success.
+  lastError: string | null;
+}
+
+const state: NetState = $state({ signin: null, captive: null, lastError: null });
+
+export function net(): NetState {
+  return state;
+}
+
+export async function refreshSignin(): Promise<void> {
+  const r = await api.netSigninStatus();
+  if (r.ok) {
+    state.signin = r.data;
+    state.lastError = null;
+  } else {
+    state.lastError = r.error.error;
+  }
+}
+
+export async function refreshCaptive(): Promise<void> {
+  const r = await api.netCaptive();
+  if (r.ok) {
+    state.captive = r.data;
+  }
+}
+
+export async function openSignin(portalIPs: string[], durationSec?: number) {
+  const r = await api.netSigninOpen(portalIPs, durationSec);
+  await refreshSignin();
+  return r;
+}
+
+export async function closeSignin() {
+  const r = await api.netSigninClose();
+  await refreshSignin();
+  return r;
+}
+
+let pollHandle: ReturnType<typeof setInterval> | null = null;
+
+// Start a low-frequency background poll. The banner subscribes to the
+// resulting state via Svelte runes. Idempotent.
+export function startPolling(intervalMs = 5000): () => void {
+  if (pollHandle !== null) return () => {};
+  void refreshSignin();
+  pollHandle = setInterval(() => {
+    void refreshSignin();
+  }, intervalMs);
+  return () => {
+    if (pollHandle !== null) {
+      clearInterval(pollHandle);
+      pollHandle = null;
+    }
+  };
+}

frontend/src/routes/Wifi.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { rpc } from '../lib/rpc';
+  import { net as netStore, refreshCaptive, refreshSignin, openSignin } from '../lib/netStore.svelte';
+  import * as api from '../lib/api';
   import { ICON } from '../lib/icons';
 
   interface ScanResult {
@@ -14,7 +16,15 @@
   let loading = $state(false);
   let connecting = $state<string | null>(null);
   let connected = $state<string | null>(null);
-  let captiveOpen = $state(false);
+  let captiveProbing = $state(false);
+  let opening = $state(false);
+  let signinError = $state('');
+
+  // Strict-mode toggle from §6.5. Lives here for now; if/when a Settings
+  // page lands it migrates there.
+  let strict = $state(false);
+
+  const ns = netStore();
 
   async function scan() {
     loading = true;
@@ -23,17 +33,47 @@
     if (r.ok) nets = r.data.results;
   }
 
-  async function connect(net: ScanResult) {
-    connecting = net.ssid;
+  async function probeCaptive() {
+    captiveProbing = true;
+    signinError = '';
+    await refreshCaptive();
+    captiveProbing = false;
+  }
+
+  async function openWindow() {
+    if (!ns.captive?.captive || (ns.captive.portal_ips ?? []).length === 0) {
+      signinError = 'no portal IPs detected; rerun the captive probe';
+      return;
+    }
+    opening = true;
+    signinError = '';
+    const r = await openSignin(ns.captive.portal_ips ?? [], 600);
+    opening = false;
+    if (!r.ok) signinError = r.error.error;
+  }
+
+  async function toggleStrict() {
+    strict = !strict;
+    const r = await api.netSigninStrict(strict);
+    if (!r.ok) {
+      signinError = r.error.error;
+      strict = !strict; // revert
+      return;
+    }
+    await refreshSignin();
+  }
+
+  async function connect(n: ScanResult) {
+    connecting = n.ssid;
     const r = await rpc.call<{ connected: boolean }>('wireless', 'connect', {
-      ssid: net.ssid,
-      encryption: net.encryption,
+      ssid: n.ssid,
+      encryption: n.encryption,
     });
     connecting = null;
     if (r.ok && r.data.connected) {
-      connected = net.ssid;
-      // Mock: any open network is "probably captive."
-      captiveOpen = net.encryption === 'open';
+      connected = n.ssid;
+      // After associating, immediately probe for a captive portal.
+      void probeCaptive();
     }
   }
 
@@ -44,7 +84,12 @@
     return '█   ';
   }
 
-  onMount(scan);
+  onMount(() => {
+    void scan();
+    void probeCaptive();
+    void refreshSignin();
+    if (ns.signin) strict = ns.signin.strict_mode;
+  });
 </script>
 
 <section>
@@ -61,17 +106,60 @@
       <div class="row">
         <span class="icon">{ICON.ok}</span>
         <strong>Connected to {connected}</strong>
+        <button onclick={probeCaptive} disabled={captiveProbing} class="reprobe">
+          <span class="icon" class:spin={captiveProbing}>{ICON.refresh}</span>
+          recheck
+        </button>
       </div>
-      {#if captiveOpen}
-        <p class="captive">
-          <span class="icon">{ICON.warn}</span>
-          Captive portal likely. Open the hotel login page to authenticate.
-        </p>
-        <button>Open hotel login</button>
+    </div>
+  {/if}
+
+  {#if ns.captive?.captive && ns.signin?.state !== 'open'}
+    <div class="card captive">
+      <div class="row">
+        <span class="icon">{ICON.warn}</span>
+        <strong>Hotel WiFi requires sign-in</strong>
+      </div>
+      <p class="hint">
+        A captive portal is intercepting traffic. Detected at
+        <code>{(ns.captive.portal_ips ?? []).join(', ') || 'unknown IP'}</code>.
+      </p>
+      <p class="detail">
+        Opening the sign-in window adds a tightly-scoped firewall hole:
+        LAN→WAN to those IPs only, on TCP 80/443, for 10 minutes. The
+        kill switch stays in place for everything else.
+      </p>
+      <div class="actions">
+        <button onclick={openWindow} disabled={opening || ns.signin?.strict_mode}>
+          {opening ? 'opening…' : 'Open sign-in window (10 min)'}
+        </button>
+        {#if ns.signin?.strict_mode}
+          <span class="dim">(disabled by strict mode)</span>
+        {/if}
+      </div>
+      {#if signinError}
+        <p class="err"><span class="icon">{ICON.err}</span> {signinError}</p>
       {/if}
     </div>
+  {:else if ns.captive && !ns.captive.captive}
+    <div class="card clean">
+      <span class="icon">{ICON.ok}</span>
+      Internet looks fine — no captive portal detected.
+    </div>
   {/if}
 
+  <label class="toggle strict">
+    <input type="checkbox" checked={ns.signin?.strict_mode ?? false} onchange={toggleStrict} />
+    <span>
+      <strong>Strict mode</strong>
+      <small>
+        Disable the captive-portal sign-in window entirely. With this on,
+        captive portals must be cleared via a separate dedicated SSID;
+        the kill switch is never relaxed. Recommended for high-threat trips.
+      </small>
+    </span>
+  </label>
+
   <ul class="list">
     {#each nets as net (net.bssid)}
       <li>
@@ -131,8 +219,52 @@
     display: grid;
     gap: 8px;
   }
+  .card.captive {
+    background: var(--bg-elev);
+    border: 1px solid var(--accent-warn);
+    border-radius: var(--radius);
+    padding: 12px;
+    margin-bottom: 12px;
+    display: grid;
+    gap: 8px;
+  }
+  .card.captive .icon { color: var(--accent-warn); }
+  .card.clean {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--bg-elev);
+    border: 1px solid var(--accent-ok);
+    border-radius: var(--radius);
+    padding: 8px 12px;
+    margin-bottom: 12px;
+    color: var(--accent-ok);
+    font-size: 13px;
+  }
   .row { display: flex; align-items: center; gap: 8px; }
-  .captive { color: var(--accent-warn); margin: 0; font-size: 13px; }
+  .row > strong { flex: 1; }
+  .hint { color: var(--fg-dim); font-size: 13px; margin: 0; line-height: 1.5; }
+  .detail { color: var(--fg-faint); font-size: 12px; margin: 0; line-height: 1.5; }
+  .err { color: var(--accent-err); font-size: 13px; margin: 0; }
+  .reprobe { background: transparent; border: 1px solid var(--border); padding: 4px 8px; font-size: 12px; }
+  .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  .dim { color: var(--fg-dim); font-size: 12px; }
+
+  .toggle.strict {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 12px;
+    align-items: start;
+    background: var(--bg-elev);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px;
+    margin-bottom: 12px;
+    cursor: pointer;
+  }
+  .toggle.strict input { width: auto; margin-top: 4px; }
+  .toggle.strict small { display: block; color: var(--fg-dim); margin-top: 2px; line-height: 1.5; }
+  code { background: var(--bg); padding: 1px 4px; border-radius: 3px; }
   .spin { display: inline-block; animation: spin 1s linear infinite; }
   @keyframes spin { to { transform: rotate(360deg); } }
 </style>