@riceawa/dsh-lan-gateway 0.5.5 → 0.6.0

package/lib/index.js

@@ -1897,33 +1897,91 @@ const name = "dsh-lan-gateway";
 /** Requires the web server service (binds before this row's apply runs) and the tool registry. */
 const inject = ["webServer", "tools"];
 /**
-* The `lan-gateway` user-settings namespace, mirroring the composition schema.
-* A plain string literal: dsh-settings dropped the `settingsNamespace()` brand
-* helper in 0.1.2-rc.1 and `register` validates the literal itself, so this
-* shape works against both that release line and the older branded one.
+* Schemastery configuration validated by the Loader.
+*
+* Every field is `.volatile()`, which is what lets the Settings service write
+* it: 0.1.7 projects only volatile fields into forms and refuses an edit to any
+* other path (`not volatile`). The mark also changes the runtime shape — a
+* volatile field arrives as a reference (see `ConfigRefs`), never as the plain
+* value the rest of this file expects — so read it through `readConfig`.
 */
-const NS = "lan-gateway";
-/** Schemastery configuration validated by the Loader. */
 const Config = z.object({
-	enabled: z.boolean().default(false),
-	gatewayPort: z.natural().min(1).max(65535).default(3081),
-	dshTargetPort: z.natural().min(1).max(65535),
-	lanCidrs: z.array(String).default([...DEFAULT_LAN_CIDR_STRINGS]),
-	lanPasswordless: z.boolean().default(false),
-	authRequired: z.boolean().default(true),
-	cookieMaxAgeDays: z.natural().min(1).max(365).default(7),
-	cookieName: z.string().default("dsh_gw_auth"),
-	tlsEnabled: z.boolean().default(false),
-	tlsMode: z.union([z.const("self-signed"), z.const("custom")]).default("self-signed"),
-	tlsCertPath: z.string(),
-	tlsKeyPath: z.string(),
-	tlsSelfSignedHosts: z.string().default("localhost"),
-	tlsCertMaxAgeDays: z.natural().min(1).max(3650).default(825),
-	allowInsecurePlaintext: z.boolean().default(false),
-	trustedTerminator: z.string(),
-	secureCookies: z.boolean()
+	enabled: z.boolean().default(false).volatile(),
+	gatewayPort: z.natural().min(1).max(65535).default(3081).volatile(),
+	dshTargetPort: z.natural().min(1).max(65535).volatile(),
+	lanCidrs: z.array(String).default([...DEFAULT_LAN_CIDR_STRINGS]).volatile(),
+	lanPasswordless: z.boolean().default(false).volatile(),
+	authRequired: z.boolean().default(true).volatile(),
+	cookieMaxAgeDays: z.natural().min(1).max(365).default(7).volatile(),
+	cookieName: z.string().default("dsh_gw_auth").volatile(),
+	tlsEnabled: z.boolean().default(false).volatile(),
+	tlsMode: z.union([z.const("self-signed"), z.const("custom")]).default("self-signed").volatile(),
+	tlsCertPath: z.string().volatile(),
+	tlsKeyPath: z.string().volatile(),
+	tlsSelfSignedHosts: z.string().default("localhost").volatile(),
+	tlsCertMaxAgeDays: z.natural().min(1).max(3650).default(825).volatile(),
+	allowInsecurePlaintext: z.boolean().default(false).volatile(),
+	trustedTerminator: z.string().volatile(),
+	secureCookies: z.boolean().volatile()
 });
 /**
+* Unwrap the config references into the plain values every other function in
+* this file reads. Called on each access rather than once, because a settings
+* write updates the references in place.
+* @param refs - the config object handed to `apply`.
+* @returns one detached plain snapshot.
+*/
+function readConfig(refs) {
+	const dshTargetPort = refs.dshTargetPort?.get();
+	const authRequired = refs.authRequired?.get();
+	const tlsCertPath = refs.tlsCertPath?.get();
+	const tlsKeyPath = refs.tlsKeyPath?.get();
+	const tlsSelfSignedHosts = refs.tlsSelfSignedHosts?.get();
+	const trustedTerminator = refs.trustedTerminator?.get();
+	const secureCookies = refs.secureCookies?.get();
+	return {
+		enabled: refs.enabled.get(),
+		gatewayPort: refs.gatewayPort.get(),
+		lanCidrs: [...refs.lanCidrs.get()],
+		lanPasswordless: refs.lanPasswordless.get(),
+		cookieMaxAgeDays: refs.cookieMaxAgeDays.get(),
+		cookieName: refs.cookieName.get(),
+		tlsEnabled: refs.tlsEnabled.get(),
+		tlsMode: refs.tlsMode.get(),
+		tlsCertMaxAgeDays: refs.tlsCertMaxAgeDays.get(),
+		allowInsecurePlaintext: refs.allowInsecurePlaintext.get(),
+		...dshTargetPort !== void 0 ? { dshTargetPort } : {},
+		...authRequired !== void 0 ? { authRequired } : {},
+		...tlsCertPath !== void 0 ? { tlsCertPath } : {},
+		...tlsKeyPath !== void 0 ? { tlsKeyPath } : {},
+		...tlsSelfSignedHosts !== void 0 ? { tlsSelfSignedHosts } : {},
+		...trustedTerminator !== void 0 ? { trustedTerminator } : {},
+		...secureCookies !== void 0 ? { secureCookies } : {}
+	};
+}
+/**
+* Build the reference-shaped config `apply` receives, exactly as the Loader
+* builds it. Exported for tests that drive `apply` directly.
+* @param raw - a config object; missing fields take their schema defaults.
+* @returns one reference per volatile field.
+*/
+function configRefs(raw) {
+	return Config(raw);
+}
+/**
+* Validate a raw config object the way the Loader does, and unwrap it.
+*
+* `Config` marks every field volatile, so a validation hands the values back as
+* references (typed deeply-readonly by schemastery); this returns the plain
+* shape the rest of the file reads. Used to judge a config the Settings card is
+* about to save, before it is persisted.
+* @param raw - a config object; missing fields take their schema defaults.
+* @returns the validated plain config.
+*/
+function validateConfig(raw) {
+	return readConfig(configRefs(raw));
+}
+/**
 * The fail-closed problems that prevent a config from enabling the listener.
 * Returns every problem (not just the first) so the operator sees the full
 * migration at once. Exported for tests.
@@ -2101,16 +2159,18 @@ function apply(ctx, config) {
 	let connectionGeneration = 0;
 	/** Builds a fresh shared-session relay for a dsh port, once the base supports sessions. */
 	let makeRelay;
-	/** The authoritative config: settings section when attached, else composition. */
-	let configSource = () => config;
-	/** Whether writes go to the settings section rather than staying in memory. */
+	/** Whether the settings service is attached, so writes reach the profile entry. */
 	let settingsAttached = false;
-	/** The settings scope for the `lan-gateway` namespace, while one is attached. */
-	let settingsScope;
 	/**
-	* The settings provider, for the one write a scope cannot express: a section
-	* key must be *removed* to re-inherit the composition layer, and only the
-	* provider's path-addressed `mutate` can unset one.
+	* This plugin's own Loader entry id. dsh 0.1.7 addresses a settings write by
+	* the *entry id* — the `lan-gateway` namespace this plugin used to register
+	* with is gone along with `settingsScope`.
+	*/
+	let settingsEntryId;
+	/**
+	* The settings service, for the one write a merge patch cannot express: a key
+	* must be *removed* to re-inherit the composition layer, and only its
+	* path-addressed `mutate` can unset one.
 	*/
 	let settingsProvider;
 	/**
@@ -2121,7 +2181,7 @@ function apply(ctx, config) {
 	let lifecycle = Promise.resolve();
 	/** Set by the dispose hook; a start that completes after it must undo itself. */
 	let disposed = false;
-	const effective = () => configSource();
+	const effective = () => readConfig(config);
 	/** Queue one lifecycle action behind every action already running. */
 	const enqueue = (reason, action) => {
 		lifecycle = lifecycle.then(action).catch((error) => {
@@ -2198,26 +2258,26 @@ function apply(ctx, config) {
 			}
 		});
 	};
-	/** Record the run intent where it will survive: the settings section, or memory. */
+	/** Record the run intent where it will survive: the profile entry, or memory. */
 	const setRunIntent = async (enabled) => {
-		if (settingsAttached && settingsScope !== void 0) {
-			await settingsScope.update({ enabled });
+		if (settingsAttached && settingsProvider !== void 0 && settingsEntryId !== void 0) {
+			await settingsProvider.update(settingsEntryId, { enabled });
 			return;
 		}
 		manualOverride = enabled;
 	};
 	ctx.inject(["settings"], (sctx) => {
-		const scope = sctx.settings.register(NS, Config, { base: config });
-		settingsScope = scope;
+		const entryId = ctx.fiber.entry?.options.id;
+		if (entryId === void 0) return;
+		settingsEntryId = entryId;
 		settingsProvider = sctx.settings;
 		settingsAttached = true;
-		configSource = () => scope.get();
-		sctx.effect(() => scope.watch(() => {
+		sctx.effect(() => sctx.settings.configure({ auto: false }, ctx.fiber));
+		sctx.effect(() => ctx.on("loader/volatile-update", () => {
 			syncGateway("settings change");
 		}));
 		sctx.effect(() => () => {
-			configSource = () => config;
-			settingsScope = void 0;
+			settingsEntryId = void 0;
 			settingsProvider = void 0;
 			settingsAttached = false;
 			syncGateway("settings detach");
@@ -2282,12 +2342,14 @@ function apply(ctx, config) {
 			send(400, { error: "body must be a config object" });
 			return;
 		}
-		if (settingsProvider === void 0) {
+		const settings = settingsProvider;
+		const entryId = settingsEntryId;
+		if (settings === void 0 || entryId === void 0) {
 			send(409, { error: "settings service unavailable — edit the profile patch (cordis.patch.yml) instead" });
 			return;
 		}
 		const { patch, clear, unknown } = buildConfigPatch(submitted);
-		const candidate = Config({
+		const candidate = validateConfig({
 			...effective(),
 			...patch
 		});
@@ -2306,7 +2368,7 @@ function apply(ctx, config) {
 				op: "unset",
 				path: [key]
 			}))];
-			if (ops.length > 0) await settingsProvider.mutate(NS, ops);
+			if (ops.length > 0) await settings.mutate(entryId, ops);
 			await syncGateway("config route save");
 			const next = { ...snapshot() };
 			if (unknown.length > 0) next["ignored"] = unknown;
@@ -2434,4 +2496,4 @@ function apply(ctx, config) {
 	}, "dsh-lan-gateway: listener lifecycle");
 }
 //#endregion
-export { Config, apply, buildConfigPatch, gatewayStartProblems, inject, isTrustedConfigRequest, name, resolveSecureCookies };
+export { Config, apply, buildConfigPatch, configRefs, gatewayStartProblems, inject, isTrustedConfigRequest, name, readConfig, resolveSecureCookies, validateConfig };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riceawa/dsh-lan-gateway",
   "description": "LAN/internet reverse-proxy gateway for the DeepSeek Harness web GUI: binds 0.0.0.0 and forwards to the loopback dsh web server. Default-deny: every source (loopback, LAN, internet) must sign in with an HMAC session cookie unless lanPasswordless is explicitly enabled; against dsh >= 0.1.2-rc.1 the gateway relays one shared upstream browser session, so the harness's own authorization still gates every request. Fail-closed start guard (password required, plaintext needs an explicit opt-in), session revocation by epoch (password changes and secret rotation kill cookies and live WebSockets), same-site/Origin fence on HTTP and WebSocket upgrades, optional TLS (auto self-signed or user-supplied certs), and a Settings → Plugins card for live adjustment of port, CIDRs, auth, and TLS. Includes an insecure-origin UUID shim client bundle: on gateway-served plain-HTTP origins browsers lack crypto.randomUUID, so the client half patches a getRandomValues-backed randomUUID onto the Crypto prototype, fixing workspace open over LAN without touching DSH source.",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -42,22 +42,34 @@
     }
   },
   "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.2",
-    "@deepseek-ai/dsh-settings": "^0.1.2-rc.1 || ^0.1.5-rc.2",
-    "@deepseek-ai/dsh-tools": "^0.1.2-rc.1 || ^0.1.5-rc.2",
-    "@deepseek-ai/schemastery": "^3.18.2"
+    "@deepseek-ai/cordis": "^4.0.4",
+    "@deepseek-ai/dsh-settings": "^0.1.7-rc.2 || ^0.2.0-rc.1",
+    "@deepseek-ai/dsh-tools": "^0.1.7-rc.2 || ^0.2.0-rc.1",
+    "@deepseek-ai/schemastery": "^3.18.4"
   },
   "devDependencies": {
-    "@deepseek-ai/cordis": "4.0.2",
-    "@deepseek-ai/dsh-brand": "0.1.5-rc.2",
+    "@deepseek-ai/cordis": "4.0.4",
+    "@deepseek-ai/cordis-plugin-loader": "1.0.5",
+    "@deepseek-ai/cosmokit": "1.8.5",
+    "@deepseek-ai/dsh-brand": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-agent": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-invariants": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-ptc-runtime": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-sandbox": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-sandbox-policy": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-session": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-system-prompt": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-user-approval": "0.1.7-rc.2",
     "@deepseek-ai/dsh-client-runtime": "0.1.1-rc.2",
-    "@deepseek-ai/dsh-client-ui-slots": "0.1.5-rc.2",
-    "@deepseek-ai/dsh-llm": "0.1.5-rc.2",
-    "@deepseek-ai/dsh-scope": "0.1.5-rc.2",
-    "@deepseek-ai/dsh-settings": "0.1.5-rc.2",
-    "@deepseek-ai/dsh-tools": "0.1.5-rc.2",
-    "@deepseek-ai/dsh-util-values": "0.1.5-rc.2",
-    "@deepseek-ai/schemastery": "3.18.2",
+    "@deepseek-ai/dsh-client-ui-plugin-manager": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-settings": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-client-ui-slots": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-llm": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-scope": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-settings": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-tools": "0.1.7-rc.2",
+    "@deepseek-ai/dsh-util-values": "0.1.7-rc.2",
+    "@deepseek-ai/schemastery": "3.18.4",
     "@types/node": "^22.0.0",
     "@types/react": "~18.3.1",
     "react": "^18.2.0",

package/src/client/index.ts

@@ -7,10 +7,9 @@
  *    installs a getRandomValues-backed `randomUUID` on the Crypto prototype at
  *    module scope. With TLS enabled the origin is secure and the shim is a
  *    no-op.
- * 2. Settings card: registers the LAN gateway card into the official
- *    Settings → Plugins page (`settings.plugin.item` slot), editing the
- *    `lan-gateway` settings namespace so port, CIDRs, auth, and TLS are
- *    adjustable from the GUI.
+ * 2. Settings card: registers the LAN gateway card into the official Plugins
+ *    page (`plugins.item` slot) so port, CIDRs, auth, and TLS stay adjustable
+ *    from the GUI.
  */
 
 /** RFC 4122 v4 UUID from crypto.getRandomValues (available on insecure origins). */
@@ -62,12 +61,25 @@ export function installRandomUuidShim(): boolean {
 installRandomUuidShim()
 
 import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
-import { LanGatewayCard } from './lan-gateway-card.tsx'
+// Type-only, and never bundled: the Plugins page's slot contract (`plugins.item`)
+// and the settings domain's `configForms` service both resolve from the web
+// shell's frozen module table. Importing them is what subjects the registration
+// below to the platform's own contract instead of a local copy that drifts the
+// next time upstream renames a slot.
+import type {} from '@deepseek-ai/dsh-client-ui-plugin-manager/client'
+import type {} from '@deepseek-ai/dsh-client-ui-settings/client'
+import { LanGatewayCard, cardTitle } from './lan-gateway-card.tsx'
 
 export const name = 'dsh-lan-gateway'
 
-/** Only the slots service: the card itself is self-loading (ModLens-style). */
-export const inject = ['slots']
+/**
+ * The profile entry id this plugin's bundle patch composes it under, and the
+ * settings namespace dsh ≥ 0.1.7 addresses every write by.
+ */
+const ENTRY_ID = 'dsh-lan-gateway'
+
+/** The slots service the card rides, and the settings mirror the gate reads. */
+export const inject = ['slots', 'configForms']
 
 /**
  * Mount the settings card and the UUID shim.
@@ -76,28 +88,26 @@ export const inject = ['slots']
 export function apply(ctx: ClientContext): void {
   installRandomUuidShim()
 
-  // The card rides the official Plugins → Configurable tab. Like ModLens, it
-  // registers with no inject face and fetches its own loopback config route,
-  // so it has no settings/locale/connection service dependencies.
+  // The card rides the official Plugins page. Like ModLens it registers with no
+  // inject face and fetches its own loopback config route, so it depends on no
+  // settings, locale, or connection service.
   //
-  // The `settings.plugin.item` slot is keyed BY the settings namespace the
-  // card edits (rc.8 contract): the configurable tab only dispatches entries
-  // whose `options.key` is both present and served by the Host's settings
-  // describe mirror. Registering with `id` alone throws
-  // `keyed slot "settings.plugin.item" requires options.key` and the card
-  // silently disappears from Settings → Plugins.
+  // dsh 0.1.7 replaced the namespace-keyed `settings.plugin.item` slot with the
+  // list slot `plugins.item`, which is where a host-plane plugin's own
+  // configuration page belongs ("one companion package per host-plane
+  // namespace"); the page renders the contribution as the card's one-liner and,
+  // once opened, as the body of the plugin's own page. Registering into the
+  // retired slot left the card invisible on 0.1.7.
   //
-  // `id`/`order` ride the legacy list-slot shape (older DSH versions
-  // dispatched this slot by id): harmless metadata on the keyed slot, and
-  // what keeps the card mounting if this plugin ever loads into an older
-  // deployment. Spread from a typed constant so the keyed registration type
-  // stays exact.
-  const legacyListOptions = { id: 'lan-gateway', order: 30 } as const
-  ctx.slots.inject('settings.plugin.item', function* () {
-    yield ctx.slots.register({
-      name: 'settings.plugin.item',
-      key: 'lan-gateway',
-      ...legacyListOptions,
-    }, LanGatewayCard)
-  })
+  // `whileServed` keeps the entry off the page until the Host's settings mirror
+  // serves this plugin's entry. That is the one gate worth having: without a
+  // Loader entry there is nothing to write to, and the card would appear only
+  // to fail every save with the route's 409.
+  ctx.effect(() => ctx.configForms.whileServed([ENTRY_ID], () =>
+    ctx.slots.inject('plugins.item', () => ctx.slots.register({
+      name: 'plugins.item',
+      id: ENTRY_ID,
+      order: 30,
+      label: () => cardTitle(),
+    }, LanGatewayCard))))
 }

package/src/client/lan-gateway-card.tsx

@@ -1,17 +1,23 @@
 /**
- * The lan-gateway settings card shown in the official DSH Settings → Plugins
- * page (the `settings.plugin.item` slot).
+ * The lan-gateway settings card, rendered by the official DSH Plugins page
+ * through its `plugins.item` slot.
  *
  * ModLens-style: the card carries NO injected services. It reads and writes
  * the loopback-only `/lan-gateway/config` host route (the browser never sees
- * the settings seam or any secret), so the client bundle's only dependency is
- * the `slots` service that every plugin already has.
+ * the settings seam or any secret), so the only platform service it needs is
+ * the `slots` service every plugin already has.
  *
  * @module @riceawa/dsh-lan-gateway/client/card
  */
 
 import { useEffect, useState, type ChangeEvent, type ReactNode } from 'react'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+// Type-only. The Plugins page owns the `plugins.item` contract, and its own
+// doc says a registrant merges that contract with `import type` instead of
+// importing the package at runtime. Taking the contract from its owner is also
+// what turns the next upstream rename of this slot into a compile error here,
+// rather than a card that quietly stops rendering.
+import type {} from '@deepseek-ai/dsh-client-ui-plugin-manager/client'
 import {
   FIELDS,
   TRISTATE_OPTIONS,
@@ -22,23 +28,12 @@ import {
 } from '../config-fields.ts'
 
 /**
- * The official Settings → Plugins page declares the `settings.plugin.item`
- * slot keyed by the settings namespace each card edits (newer DSH releases;
- * older releases dispatched it as a list slot by `id`). The published package
- * ships no `src/`, so the entry is re-declared here — the runtime slot is
- * real; this only restores the compile-time table.
+ * Props the renderer binds for this card. The Plugins page asks for either the
+ * card's one-liner (`summary`) or the body of its own page (`page`), and draws
+ * the page's title, icon, and crumb itself. The card needs no injected face —
+ * it fetches its own route.
  */
-declare module '@deepseek-ai/dsh-client-ui-slots' {
-  interface SlotMap {
-    /** One plugin's card inside the plugin configuration section. */
-    'settings.plugin.item': { kind: 'keyed'; scope: 'root'; owner: { children?: never } }
-  }
-}
-
-/**
- * Props the renderer binds for this card (unused — the card is self-loading).
- */
-export type LanGatewayCardProps = PropsRuntime<'settings.plugin.item'>
+export type LanGatewayCardProps = PropsRuntime<'plugins.item'>
 
 /**
  * The card's field table and value codecs live in `config-fields.ts`, shared
@@ -192,6 +187,15 @@ function labels(): Labels {
   return lang.startsWith('zh') ? LABELS.zh : LABELS.en
 }
 
+/**
+ * The card's title in the browser's language, for the Plugins page's list
+ * entry. A thunk so the label follows the page's locale without re-registering.
+ * @returns the localized card title.
+ */
+export function cardTitle(): string {
+  return labels().title
+}
+
 /* ------------------------------------------------------------------ */
 /* Card                                                                */
 /* ------------------------------------------------------------------ */
@@ -199,10 +203,14 @@ function labels(): Labels {
 /**
  * Render the LAN gateway card. Self-loading: fetches the config route on
  * mount, posts the edited config on save.
- * @param _props - unused; the card needs no injected face.
- * @returns the card, or nothing while the route is unreachable.
+ *
+ * `view` swaps between the card's one-liner and its page body, so the branch
+ * sits after the hooks: the Plugins page re-renders one contribution under the
+ * other view when the card is opened.
+ * @param props - the view the Plugins page is asking for.
+ * @returns the one-liner, the card, or nothing while the route is unreachable.
  */
-export function LanGatewayCard(_props: LanGatewayCardProps): ReactNode {
+export function LanGatewayCard(props: LanGatewayCardProps): ReactNode {
   const t = labels()
   const [open, setOpen] = useState(false)
   const [route, setRoute] = useState<RouteState | null>(null)
@@ -225,6 +233,12 @@ export function LanGatewayCard(_props: LanGatewayCardProps): ReactNode {
     return () => { cancelled = true }
   }, [])
 
+  // The Plugins page lists this plugin as one card and opens its own page on
+  // demand: `summary` is the one-liner the list shows, `page` the body. The
+  // hooks above run for both views, because the same contribution flips
+  // between them.
+  if (props.view === 'summary') return t.description
+
   // A remote browser reaches this card through the gateway, which answers 403
   // for the plugin's own prefix by design, so the route is unreachable exactly
   // where a user is most likely to go looking for the setting. Rendering
@@ -232,7 +246,7 @@ export function LanGatewayCard(_props: LanGatewayCardProps): ReactNode {
   // a broken one; say what is wrong and where the card does work instead.
   if (loadFailed) {
     return (
-      <li style={styles.card}>
+      <div style={styles.card}>
         <div style={styles.header}>
           <span style={styles.headerTop}>
             <span style={styles.name}>{t.title}</span>
@@ -242,7 +256,7 @@ export function LanGatewayCard(_props: LanGatewayCardProps): ReactNode {
         <div style={styles.body}>
           <p style={styles.hint}>{t.readOnly}</p>
         </div>
-      </li>
+      </div>
     )
   }
   if (route === null) return null
@@ -407,7 +421,7 @@ export function LanGatewayCard(_props: LanGatewayCardProps): ReactNode {
   const statusLine = `${route.running ? t.running : t.stopped} · ${t.tls}: ${route.tls} · :${route.port}`
 
   return (
-    <li style={open ? { ...styles.card, ...styles.cardOpen } : styles.card}>
+    <div style={open ? { ...styles.card, ...styles.cardOpen } : styles.card}>
       <button
         type="button"
         style={styles.header}
@@ -449,7 +463,7 @@ export function LanGatewayCard(_props: LanGatewayCardProps): ReactNode {
           </div>
         )
         : null}
-    </li>
+    </div>
   )
 }