feat(webui): internet sharing UI — exit-offer toggle + peer route-via selector

CellNetwork page (CellPanel):
- Internet Sharing section below service toggles
- Toggle: 'Offer my internet to <cell>' (calls PUT /api/cells/<n>/exit-offer)
- Read-only indicator: whether remote cell offers internet back
- Contextual hints explaining what each party needs to do next

Peers page:
- Fetches connected cells on mount
- Edit modal: Internet Exit dropdown (route-via) showing all connected cells
  with ✓ marker for cells that have offered internet
- Warning if selected cell hasn't offered internet yet
- On save, calls PUT /api/peers/<n>/route-via only when value changed
- Table badge shows 'via <cell>' for peers with active routing

api.js:
- cellLinkAPI.setExitOffer(cellName, offered)
- peerRegistryAPI.setRouteVia(peerName, viaCell)

Tests (vitest + @testing-library/react):
- 19 new frontend tests in src/__tests__/
  - CellNetworkInternetSharing.test.jsx (10 tests)
  - PeersRouteVia.test.jsx (9 tests)
- make test-webui target runs them via docker node:18-alpine

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

webui/src/pages/CellNetwork.jsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Link2, Link2Off, Copy, CheckCheck, RefreshCw, Plug, Unplug, Globe, Wifi, Calendar, FolderOpen, Mail, HardDrive, ChevronDown, ChevronRight } from 'lucide-react';
+import { Link2, Link2Off, Copy, CheckCheck, RefreshCw, Plug, Unplug, Globe, Wifi, Calendar, FolderOpen, Mail, HardDrive, ChevronDown, ChevronRight, ArrowUpFromLine } from 'lucide-react';
 import { cellLinkAPI } from '../services/api';
 import { useConfig } from '../contexts/ConfigContext';
 import QRCode from 'qrcode';
@@ -143,6 +143,8 @@ function CellPanel({ conn, onDisconnect, addToast }) {
   const [inboundPerms, setInboundPerms] = useState(conn.permissions?.inbound || {});
   const [saving, setSaving] = useState({});
   const [confirmDisconnect, setConfirmDisconnect] = useState(false);
+  const [exitOffered, setExitOffered] = useState(!!conn.exit_offered);
+  const [savingExit, setSavingExit] = useState(false);
 
   const handleToggle = async (serviceKey, newValue) => {
     setSaving(s => ({ ...s, [serviceKey]: true }));
@@ -158,6 +160,19 @@ function CellPanel({ conn, onDisconnect, addToast }) {
     }
   };
 
+  const handleExitToggle = async (newValue) => {
+    setSavingExit(true);
+    try {
+      await cellLinkAPI.setExitOffer(conn.cell_name, newValue);
+      setExitOffered(newValue);
+      addToast(`Internet sharing ${newValue ? 'offered' : 'withdrawn'}`);
+    } catch {
+      addToast('Failed to update internet sharing', 'error');
+    } finally {
+      setSavingExit(false);
+    }
+  };
+
   const hasRevokedService = Object.values(inboundPerms).some(v => !v);
 
   return (
@@ -246,6 +261,39 @@ function CellPanel({ conn, onDisconnect, addToast }) {
                 </p>
               </div>
             </div>
+            {/* ── Internet sharing ───────────────────────────────────── */}
+            <div className="mt-4 pt-4 border-t border-gray-100">
+              <p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-3 flex items-center gap-1.5">
+                <ArrowUpFromLine className="h-3.5 w-3.5" /> Internet Sharing
+              </p>
+              <div className="flex flex-col sm:flex-row sm:items-center gap-4">
+                <ServiceShareToggle
+                  serviceKey="internet"
+                  label={`Offer my internet to ${conn.cell_name}`}
+                  Icon={Globe}
+                  enabled={exitOffered}
+                  saving={savingExit}
+                  onChange={handleExitToggle}
+                />
+                <div className={`flex items-center gap-1.5 text-sm ${conn.remote_exit_offered ? 'text-green-700' : 'text-gray-400'}`}>
+                  <span className={`inline-block h-2 w-2 rounded-full flex-shrink-0 ${conn.remote_exit_offered ? 'bg-green-500' : 'bg-gray-300'}`} />
+                  {conn.remote_exit_offered
+                    ? <>{conn.cell_name} offers internet</>
+                    : <>{conn.cell_name} doesn't offer internet</>}
+                </div>
+              </div>
+              {exitOffered && (
+                <p className="text-xs text-gray-400 mt-2">
+                  The {conn.cell_name} admin can route their peers' internet through your connection via Peers → Edit peer → Internet Exit.
+                </p>
+              )}
+              {conn.remote_exit_offered && (
+                <p className="text-xs text-gray-400 mt-2">
+                  You can route any local peer's internet through {conn.cell_name} via Peers → Edit peer → Internet Exit.
+                </p>
+              )}
+            </div>
+
             <div className="mt-4 pt-3 border-t border-gray-100 flex flex-wrap items-center justify-between gap-3">
               <dl className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-500">
                 {conn.vpn_subnet && <div><dt className="inline text-gray-400">Subnet </dt><dd className="inline font-mono">{conn.vpn_subnet}</dd></div>}

webui/src/pages/Peers.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Plus, Trash2, Edit, Eye, Shield, Copy, Download, Key, AlertTriangle, CheckCircle, Globe, Lock, Users, Server } from 'lucide-react';
-import { peerRegistryAPI, wireguardAPI, getCsrfToken } from '../services/api';
+import { peerRegistryAPI, wireguardAPI, cellLinkAPI, getCsrfToken } from '../services/api';
 import { useConfig } from '../contexts/ConfigContext';
 import QRCode from 'qrcode';
 
@@ -62,6 +62,7 @@ function Peers() {
   ];
 
   const [peers, setPeers] = useState([]);
+  const [connectedCells, setConnectedCells] = useState([]);
   const [serverConf, setServerConf] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
   const [showAddModal, setShowAddModal] = useState(false);
@@ -77,7 +78,10 @@ function Peers() {
   const [errors, setErrors] = useState({});
   const [toast, setToast] = useState(null);
 
-  useEffect(() => { fetchPeers(); }, []);
+  useEffect(() => {
+    fetchPeers();
+    cellLinkAPI.listConnections().then(r => setConnectedCells(r.data || [])).catch(() => {});
+  }, []);
 
   const showToast = (msg, type = 'success') => {
     setToast({ msg, type });
@@ -249,6 +253,13 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
         persistent_keepalive: formData.persistent_keepalive,
       });
 
+      // Route-via is a separate endpoint (triggers WG + iptables changes)
+      const oldRouteVia = selectedPeer.route_via || null;
+      const newRouteVia = formData.route_via || null;
+      if (oldRouteVia !== newRouteVia) {
+        await peerRegistryAPI.setRouteVia(selectedPeer.name, newRouteVia);
+      }
+
       setShowEditModal(false);
       setSelectedPeer(null);
       fetchPeers();
@@ -317,6 +328,7 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
       service_access: peer.service_access || ['calendar', 'files', 'mail', 'webdav'],
       peer_access: peer.peer_access !== false,
       create_calendar: false,
+      route_via: peer.route_via || null,
     });
     setErrors({});
     setShowAdvanced(false);
@@ -405,6 +417,33 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
           description={`This peer can communicate with other VPN peers (${serverConf?.vpn_network || 'VPN subnet'})`}
         />
       </div>
+
+      {connectedCells.length > 0 && (
+        <div>
+          <div className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-1.5">
+            <Globe className="h-4 w-4" /> Internet Exit
+          </div>
+          <select
+            value={data.route_via || ''}
+            onChange={e => onChange({ route_via: e.target.value || null })}
+            className="input"
+          >
+            <option value="">Direct (this cell's connection)</option>
+            {connectedCells.map(cell => (
+              <option key={cell.cell_name} value={cell.cell_name}>
+                Via {cell.cell_name}
+                {cell.remote_exit_offered ? ' ✓ offers internet' : ''}
+              </option>
+            ))}
+          </select>
+          <p className="text-xs text-gray-400 mt-1">
+            Route this peer's internet traffic through a connected cell.
+            {data.route_via && !connectedCells.find(c => c.cell_name === data.route_via)?.remote_exit_offered && (
+              <span className="text-yellow-600 ml-1">The selected cell hasn't offered their internet yet.</span>
+            )}
+          </p>
+        </div>
+      )}
     </div>
   );
 
@@ -480,6 +519,11 @@ PersistentKeepalive = ${peer.persistent_keepalive || 25}`;
                         <AccessBadge key={s.key} icon={Server} label={s.label} active={(peer.service_access || SERVICES.map(s=>s.key)).includes(s.key)} />
                       ))}
                       <AccessBadge icon={Users} label="Peers" active={peer.peer_access !== false} />
+                      {peer.route_via && (
+                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-700 mr-1">
+                          <Globe className="h-3 w-3 mr-0.5" />via {peer.route_via}
+                        </span>
+                      )}
                     </div>
                   </td>
                   <td className="px-6 py-4">