fix(webui): require token_issue_secret for LAN access with frontend auth

When host is set to 0.0.0.0, the gateway now enforces that either token
or token_issue_secret must be configured — it refuses to start otherwise.

Bootstrap endpoint behavior:
- token_issue_secret configured: always validate regardless of source IP
  (handles reverse-proxy scenarios where all connections appear as localhost)
- No secret: only localhost can bootstrap (local dev mode)

The frontend shows an authentication form when bootstrap returns 401/403,
persists the secret in localStorage, and retries automatically on reload.

webui/src/App.tsx

@@ -9,14 +9,23 @@ import { preloadMarkdownText } from "@/components/MarkdownText";
 import { useSessions } from "@/hooks/useSessions";
 import { useTheme } from "@/hooks/useTheme";
 import { cn } from "@/lib/utils";
-import { deriveWsUrl, fetchBootstrap } from "@/lib/bootstrap";
+import {
+  clearSavedSecret,
+  deriveWsUrl,
+  fetchBootstrap,
+  loadSavedSecret,
+  saveSecret,
+} from "@/lib/bootstrap";
 import { NanobotClient } from "@/lib/nanobot-client";
 import { ClientProvider } from "@/providers/ClientProvider";
 import type { ChatSummary } from "@/lib/types";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 type BootState =
   | { status: "loading" }
   | { status: "error"; message: string }
+  | { status: "auth"; failed?: boolean }
   | {
       status: "ready";
       client: NanobotClient;
@@ -28,6 +37,60 @@ const SIDEBAR_STORAGE_KEY = "nanobot-webui.sidebar";
 const SIDEBAR_WIDTH = 272;
 type ShellView = "chat" | "settings";
 
+function AuthForm({
+  failed,
+  onSecret,
+}: {
+  failed: boolean;
+  onSecret: (secret: string) => void;
+}) {
+  const { t } = useTranslation();
+  const [value, setValue] = useState("");
+  const [submitting, setSubmitting] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const secret = value.trim();
+    if (!secret) return;
+    setSubmitting(true);
+    onSecret(secret);
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center px-6">
+      <form
+        onSubmit={handleSubmit}
+        className="flex w-full max-w-sm flex-col gap-4"
+      >
+        <div className="flex flex-col items-center gap-1 text-center">
+          <p className="text-lg font-semibold">{t("app.auth.title")}</p>
+          <p className="text-sm text-muted-foreground">{t("app.auth.hint")}</p>
+        </div>
+        {failed && (
+          <p className="text-center text-sm text-destructive">
+            {t("app.auth.invalid")}
+          </p>
+        )}
+        <Input
+          type="password"
+          placeholder={t("app.auth.placeholder")}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          disabled={submitting}
+          autoFocus
+        />
+        <Button
+          type="submit"
+          className="w-full"
+          disabled={!value.trim() || submitting}
+        >
+          {t("app.auth.submit")}
+        </Button>
+      </form>
+    </div>
+  );
+}
+
 function readSidebarOpen(): boolean {
   if (typeof window === "undefined") return true;
   try {
@@ -43,40 +106,55 @@ export default function App() {
   const { t } = useTranslation();
   const [state, setState] = useState<BootState>({ status: "loading" });
 
+  const bootstrapWithSecret = useCallback(
+    (secret: string) => {
+      let cancelled = false;
+      (async () => {
+        setState({ status: "loading" });
+        try {
+          const boot = await fetchBootstrap("", secret);
+          if (cancelled) return;
+          if (secret) saveSecret(secret);
+          const url = deriveWsUrl(boot.ws_path, boot.token);
+          const client = new NanobotClient({
+            url,
+            onReauth: async () => {
+              try {
+                const refreshed = await fetchBootstrap("", secret);
+                return deriveWsUrl(refreshed.ws_path, refreshed.token);
+              } catch {
+                return null;
+              }
+            },
+          });
+          client.connect();
+          setState({
+            status: "ready",
+            client,
+            token: boot.token,
+            modelName: boot.model_name ?? null,
+          });
+        } catch (e) {
+          if (cancelled) return;
+          const msg = (e as Error).message;
+          if (msg.includes("HTTP 401") || msg.includes("HTTP 403")) {
+            setState({ status: "auth", failed: true });
+          } else {
+            setState({ status: "error", message: msg });
+          }
+        }
+      })();
+      return () => {
+        cancelled = true;
+      };
+    },
+    [],
+  );
+
   useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const boot = await fetchBootstrap();
-        if (cancelled) return;
-        const url = deriveWsUrl(boot.ws_path, boot.token);
-        const client = new NanobotClient({
-          url,
-          onReauth: async () => {
-            try {
-              const refreshed = await fetchBootstrap();
-              return deriveWsUrl(refreshed.ws_path, refreshed.token);
-            } catch {
-              return null;
-            }
-          },
-        });
-        client.connect();
-        setState({
-          status: "ready",
-          client,
-          token: boot.token,
-          modelName: boot.model_name ?? null,
-        });
-      } catch (e) {
-        if (cancelled) return;
-        setState({ status: "error", message: (e as Error).message });
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, []);
+    const saved = loadSavedSecret();
+    return bootstrapWithSecret(saved);
+  }, [bootstrapWithSecret]);
 
   useEffect(() => {
     const warm = () => preloadMarkdownText();
@@ -110,6 +188,14 @@ export default function App() {
       </div>
     );
   }
+  if (state.status === "auth") {
+    return (
+      <AuthForm
+        failed={!!state.failed}
+        onSecret={(s) => bootstrapWithSecret(s)}
+      />
+    );
+  }
   if (state.status === "error") {
     return (
       <div className="flex h-full w-full items-center justify-center px-4 text-center">
@@ -130,18 +216,26 @@ export default function App() {
     );
   };
 
+  const handleLogout = () => {
+    if (state.status === "ready") {
+      state.client.close();
+    }
+    clearSavedSecret();
+    setState({ status: "auth" });
+  };
+
   return (
     <ClientProvider
       client={state.client}
       token={state.token}
       modelName={state.modelName}
     >
-      <Shell onModelNameChange={handleModelNameChange} />
+      <Shell onModelNameChange={handleModelNameChange} onLogout={handleLogout} />
     </ClientProvider>
   );
 }
 
-function Shell({ onModelNameChange }: { onModelNameChange: (modelName: string | null) => void }) {
+function Shell({ onModelNameChange, onLogout }: { onModelNameChange: (modelName: string | null) => void; onLogout: () => void }) {
   const { t, i18n } = useTranslation();
   const { theme, toggle } = useTheme();
   const { sessions, loading, refresh, createChat, deleteChat } = useSessions();
@@ -319,6 +413,7 @@ function Shell({ onModelNameChange }: { onModelNameChange: (modelName: string |
             onToggleTheme={toggle}
             onBackToChat={() => setView("chat")}
             onModelNameChange={onModelNameChange}
+            onLogout={onLogout}
           />
         ) : (
           <ThreadShell

webui/src/components/settings/SettingsView.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { ChevronLeft, Loader2 } from "lucide-react";
+import { useTranslation } from "react-i18next";
 
 import { LanguageSwitcher } from "@/components/LanguageSwitcher";
 import { Button } from "@/components/ui/button";
@@ -14,11 +15,13 @@ interface SettingsViewProps {
   onToggleTheme: () => void;
   onBackToChat: () => void;
   onModelNameChange: (modelName: string | null) => void;
+  onLogout?: () => void;
 }
 
 export function SettingsView({
   onBackToChat,
   onModelNameChange,
+  onLogout,
 }: SettingsViewProps) {
   const { token } = useClient();
   const [settings, setSettings] = useState<SettingsPayload | null>(null);
@@ -115,6 +118,7 @@ export function SettingsView({
             dirty={dirty}
             saving={saving}
             onSave={save}
+            onLogout={onLogout}
           />
         ) : null}
       </main>
@@ -129,6 +133,7 @@ function SettingsSection({
   dirty,
   saving,
   onSave,
+  onLogout,
 }: {
   form: {
     model: string;
@@ -142,7 +147,9 @@ function SettingsSection({
   dirty: boolean;
   saving: boolean;
   onSave: () => void;
+  onLogout?: () => void;
 }) {
+  const { t } = useTranslation();
   return (
     <div className="space-y-7">
       <section>
@@ -192,6 +199,19 @@ function SettingsSection({
           </SettingsRow>
         </SettingsGroup>
       </section>
+
+      {onLogout && (
+        <section>
+          <h2 className="mb-2 px-2 text-xs font-medium text-muted-foreground">{t("app.account.section")}</h2>
+          <SettingsGroup>
+            <SettingsRow title={t("app.account.logoutHint")}>
+              <Button size="sm" variant="outline" onClick={onLogout}>
+                {t("app.account.logout")}
+              </Button>
+            </SettingsRow>
+          </SettingsGroup>
+        </section>
+      )}
     </div>
   );
 }

webui/src/i18n/locales/en/common.json

@@ -9,6 +9,18 @@
       "title": "Couldn't reach nanobot",
       "gatewayHint": "Make sure the gateway is running (`nanobot gateway`) and that this page is open on the same machine."
     },
+    "auth": {
+      "title": "Authentication required",
+      "hint": "Enter the secret configured as tokenIssueSecret in your gateway config.",
+      "placeholder": "Password",
+      "submit": "Connect",
+      "invalid": "Invalid password. Try again."
+    },
+    "account": {
+      "section": "Account",
+      "logoutHint": "Disconnect this browser from the gateway.",
+      "logout": "Sign out"
+    },
     "documentTitle": {
       "base": "nanobot",
       "chat": "{{title}} · nanobot"

webui/src/lib/bootstrap.ts

@@ -1,15 +1,51 @@
 import type { BootstrapResponse } from "./types";
 
+const SECRET_STORAGE_KEY = "nanobot-webui.bootstrap-secret";
+
+/** Read a previously saved bootstrap secret from localStorage. */
+export function loadSavedSecret(): string {
+  if (typeof window === "undefined") return "";
+  try {
+    return window.localStorage.getItem(SECRET_STORAGE_KEY) ?? "";
+  } catch {
+    return "";
+  }
+}
+
+/** Persist the bootstrap secret so page reloads don't re-prompt. */
+export function saveSecret(secret: string): void {
+  try {
+    window.localStorage.setItem(SECRET_STORAGE_KEY, secret);
+  } catch {
+    // ignore storage errors (private mode, etc.)
+  }
+}
+
+/** Clear the saved bootstrap secret (sign out). */
+export function clearSavedSecret(): void {
+  try {
+    window.localStorage.removeItem(SECRET_STORAGE_KEY);
+  } catch {
+    // ignore
+  }
+}
+
 /**
  * Fetch a short-lived token + the WebSocket path from the gateway's
- * ``/webui/bootstrap`` endpoint. Localhost-only on the server side.
+ * ``/webui/bootstrap`` endpoint.
  */
 export async function fetchBootstrap(
   baseUrl: string = "",
+  secret: string = "",
 ): Promise<BootstrapResponse> {
+  const headers: Record<string, string> = {};
+  if (secret) {
+    headers["X-Nanobot-Auth"] = secret;
+  }
   const res = await fetch(`${baseUrl}/webui/bootstrap`, {
     method: "GET",
     credentials: "same-origin",
+    headers,
   });
   if (!res.ok) {
     throw new Error(`bootstrap failed: HTTP ${res.status}`);

webui/src/tests/app-layout.test.tsx

@@ -46,6 +46,9 @@ vi.mock("@/lib/bootstrap", () => ({
     expires_in: 300,
   }),
   deriveWsUrl: vi.fn(() => "ws://test"),
+  loadSavedSecret: vi.fn(() => ""),
+  saveSecret: vi.fn(),
+  clearSavedSecret: vi.fn(),
 }));
 
 vi.mock("@/lib/nanobot-client", () => {