npm - roxxie-proxy-u-prod - Versions diffs - 0.2.3 → 0.2.4 - Mend

roxxie-proxy-u-prod 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/README.md +6 -6
package/dist/assets/{index-BQkXFDet.js → index-MRhaNu_Q.js} +195 -135
package/embed.js +1 -1
package/examples/single-page.html +2 -2
package/package.json +1 -1
package/runtime/index.html +3 -3
package/scripts/verify.mjs +2 -2
package/source/packages/chrome/src/Tab/History.test.ts +137 -0
package/source/packages/chrome/src/Tab/History.ts +8 -3
package/source/packages/chrome/src/Tab/Tab.tsx +4 -1
package/source/packages/chrome/src/components/Omnibar/Omnibox.tsx +28 -38
package/source/packages/chrome/src/components/Omnibar/autocomplete.test.ts +51 -0
package/source/packages/chrome/src/components/Omnibar/autocomplete.ts +30 -0
package/source/packages/chrome/src/pages/AdvancedSettings.tsx +225 -0
package/source/packages/chrome/src/pages/SettingsPage.tsx +11 -0
package/source/packages/chrome/src/pages/nodes.test.ts +94 -0
package/source/packages/chrome/src/pages/nodes.ts +108 -0
package/source/packages/chrome/src/proxy/user-agent.test.ts +78 -0
package/source/packages/chrome/src/services/SettingsService.ts +8 -1
package/source/packages/roxxie-transport/package.json +1 -1
package/source/packages/roxxie-transport/src/transport.ts +51 -7
package/source/packages/scramjet/packages/core/src/fetch/headers.ts +8 -0
package/source/packages/scramjet/packages/core/src/fetch/user-agent.ts +51 -0
package/source/packages/tracker-protocol/package.json +1 -1
package/source/packages/tracker-protocol/src/index.ts +22 -0
package/source/pnpm-lock.yaml +1 -1
package/standalone.html +2 -2

package/embed.js CHANGED Viewed

@@ -3,7 +3,7 @@
 	"use strict";
 	var DEFAULT_SHELL_URL =
-		"https://unpkg.com/roxxie-proxy-u-prod@0.2.3/runtime/index.html";
+		"https://unpkg.com/roxxie-proxy-u-prod@0.2.4/runtime/index.html";
 	var loadingScript = document.currentScript;
 	function resolveContainer(target) {

package/examples/single-page.html CHANGED Viewed

@@ -18,8 +18,8 @@
 		<div id="roxxie-browser"></div>
 		<script
 			defer
-			src="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.3/embed.js"
-			integrity="sha384-yu0TlvCJ9LcKoOG66anQWT/iHEz3uC7rUGLmaDZV9otcFcWsQ6EvX8y2GPuxFsOH"
+			src="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.4/embed.js"
+			integrity="sha384-o6wwoyCvQbj3evNh2USZSUAOc625OxxX2yUnWs7o2i4NmKGhII4Y9SxvCG03OjAk"
 			crossorigin="anonymous"
 			data-roxxie-target="#roxxie-browser"
 		></script>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "roxxie-proxy-u-prod",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Production CDN assets and embed loader for Roxxie Proxy U",
   "license": "AGPL-3.0-only",
   "private": false,

package/runtime/index.html CHANGED Viewed

@@ -2,14 +2,14 @@
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
-		<link rel="icon" type="image/png" sizes="any" href="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.3/dist/favicon.png" />
+		<link rel="icon" type="image/png" sizes="any" href="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.4/dist/favicon.png" />
 		<meta name="theme-color" content="#222230" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Roxxie Proxy U</title>
 		<!--ssr-head-->
-		<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.3/dist/assets/index-BQkXFDet.js"></script>
-		<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.3/dist/assets/index-EeRhLAof.css">
+		<script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.4/dist/assets/index-MRhaNu_Q.js"></script>
+		<link rel="stylesheet" crossorigin href="https://cdn.jsdelivr.net/npm/roxxie-proxy-u-prod@0.2.4/dist/assets/index-EeRhLAof.css">
 	</head>
 	<body>

package/scripts/verify.mjs CHANGED Viewed

@@ -118,8 +118,8 @@ if (
 	throw new Error("Start screen must remain flat and glow-free");
 }
-if (manifest.version !== "0.2.3") {
-	throw new Error("This production release must be version 0.2.3");
+if (manifest.version !== "0.2.4") {
+	throw new Error("This production release must be version 0.2.4");
 }
 const embedBytes = await readFile(join(packageRoot, "embed.js"));

package/source/packages/chrome/src/Tab/History.test.ts ADDED Viewed

@@ -0,0 +1,137 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+// History records visited pages into the global profile; stub it so the model
+// can be exercised on its own.
+vi.mock("..", () => ({
+	profileService: { globalhistory: [] as unknown[] },
+}));
+import { History } from "./History";
+/** Only the surface History touches on its owning tab. */
+function fakeTab() {
+	return {
+		url: null as URL | null,
+		title: null as string | null,
+		icon: null as string | null,
+		canGoBack: false,
+		canGoForward: false,
+		navigated: [] as string[],
+		_directnavigate(url: URL) {
+			this.navigated.push(url.href);
+			this.url = url;
+		},
+	};
+}
+function makeHistory() {
+	const tab = fakeTab();
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const history = new History(tab as any);
+	return { tab, history };
+}
+const A = new URL("https://a.example/");
+const B = new URL("https://b.example/");
+const C = new URL("https://c.example/");
+const D = new URL("https://d.example/");
+describe("tab history", () => {
+	let tab: ReturnType<typeof fakeTab>;
+	let history: History;
+	beforeEach(() => {
+		({ tab, history } = makeHistory());
+	});
+	it("tracks a linear trail and walks back through it", () => {
+		history.push(A);
+		history.push(B);
+		history.push(C);
+		expect(history.current().url.href).toBe(C.href);
+		expect(history.canGoBack()).toBe(true);
+		expect(history.canGoForward()).toBe(false);
+		expect(history.go(-1).url.href).toBe(B.href);
+		expect(history.go(-1).url.href).toBe(A.href);
+		expect(history.canGoBack()).toBe(false);
+	});
+	it("keeps the current entry when a new navigation forks the trail", () => {
+		// Regression: the fork used to splice from the current index rather than
+		// after it, deleting the entry the user was on. index then pointed past the
+		// end of the array, so states[index] was undefined and going back walked
+		// into that hole.
+		history.push(A);
+		history.push(B);
+		history.push(C);
+		history.go(-2);
+		expect(history.current().url.href).toBe(A.href);
+		history.push(D);
+		expect(history.states.map((s) => s.url.href)).toEqual([A.href, D.href]);
+		expect(history.index).toBe(1);
+		expect(history.current().url.href).toBe(D.href);
+		expect(history.states[history.index]).toBeDefined();
+	});
+	it("goes back to a real page after forking rather than an empty state", () => {
+		history.push(A);
+		history.push(B);
+		history.push(C);
+		history.go(-2);
+		history.push(D);
+		expect(history.canGoBack()).toBe(true);
+		const back = history.go(-1);
+		expect(back).toBeDefined();
+		expect(back.url).toBeInstanceOf(URL);
+		expect(back.url.href).toBe(A.href);
+		// The URL actually handed to the tab must be a real page, never "undefined".
+		expect(tab.navigated.at(-1)).toBe(A.href);
+		expect(tab.navigated.some((href) => href.includes("undefined"))).toBe(false);
+	});
+	it("never reports canGoBack while sitting on the first entry", () => {
+		history.push(A);
+		history.push(B);
+		history.go(-1);
+		expect(history.index).toBe(0);
+		expect(history.canGoBack()).toBe(false);
+	});
+	it("clamps overshooting travel to the ends of the trail", () => {
+		history.push(A);
+		history.push(B);
+		expect(history.go(-99).url.href).toBe(A.href);
+		expect(history.go(99).url.href).toBe(B.href);
+	});
+	it("replaces the current entry without growing the trail", () => {
+		history.push(A);
+		history.push(B);
+		history.replace(C, null, null, false);
+		expect(history.states.map((s) => s.url.href)).toEqual([A.href, C.href]);
+		expect(history.index).toBe(1);
+	});
+	it("survives a round trip through serialization", () => {
+		history.push(A);
+		history.push(B);
+		history.go(-1);
+		const restoredTab = fakeTab();
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		const restored = new History(restoredTab as any, history.serialize());
+		expect(restored.index).toBe(history.index);
+		expect(restored.current().url.href).toBe(A.href);
+		expect(restored.canGoForward()).toBe(true);
+	});
+});

package/source/packages/chrome/src/Tab/History.ts CHANGED Viewed

@@ -94,8 +94,11 @@ export class History extends StatefulClass {
 			// disown states we're removing
 			this.states.slice(this.index + 1).forEach((state) => this.disown(state));
-			// "fork" history tree, creating a new timeline
-			this.states.splice(this.index, this.states.length - this.index);
+			// "fork" history tree, creating a new timeline. Only the entries *after*
+			// the current one are dropped: removing the current entry as well left
+			// index pointing past the end of the array, so states[index] was
+			// undefined and going back navigated into that hole.
+			this.states.splice(this.index + 1);
 		}
 		const hstate = new HistoryState({ url, state, title });
 		if (virtual) hstate.virtual = true;
@@ -129,7 +132,9 @@ export class History extends StatefulClass {
 			this.current().title = title;
 			this.current().favicon = null;
 		} else {
-			return this.push(url, state);
+			// push takes (url, title, state, navigate); passing state positionally
+			// as the title corrupted the new entry.
+			return this.push(url, title, state, navigate);
 		}
 		if (navigate) {

package/source/packages/chrome/src/Tab/Tab.tsx CHANGED Viewed

@@ -204,7 +204,10 @@ export class Tab extends StatefulClass {
 		this.history.push(url, null, null, true, false);
 	}
 	replaceNavigate(url: URL) {
-		this.history.replace(url, null, true);
+		// replace takes (url, title, state, navigate); `true` was landing in the
+		// state slot, so the replacement carried a bogus state and never navigated
+		// explicitly.
+		this.history.replace(url, null, null, true);
 	}
 	back() {

package/source/packages/chrome/src/components/Omnibar/Omnibox.tsx CHANGED Viewed

@@ -9,6 +9,7 @@ import {
 	type OmniboxResult,
 } from "./suggestions";
 import { trimUrl } from "./utils";
+import { inlineCompletion } from "./autocomplete";
 import { UrlInput } from "@components/Omnibar/UrlInput";
 import { Suggestion } from "@components/Omnibar/Suggestion";
 import { requestUnfocusFrames } from "@components/Shell";
@@ -97,32 +98,19 @@ export function Omnibox(
 		// if the user is actually trying to search something we can kill the trending suggestions
 		this.trendingSuggestions = [];
-		fetchSuggestions(this.realvalue, this.suggestionDenied, (results) => {
+		// Capture the flag for this run. It is cleared synchronously below, well
+		// before fetchSuggestions calls back, so the callback cannot read it.
+		const justDeleted = this.suggestionDenied;
+		fetchSuggestions(this.realvalue, justDeleted, (results) => {
 			this.searchSuggestions = results;
 			const firstResult = results[0];
 			if (!firstResult) return;
-			if (firstResult.kind === "search") {
-				if (!firstResult.title) return;
-				if (this.realvalue.length >= firstResult.title.length) return;
-				if (
-					!firstResult.title
-						.toLowerCase()
-						.startsWith(this.realvalue.toLowerCase())
-				)
-					return;
-				let currentCursor = this.input.selectionStart || 0;
-				this.input.setSelectionRange(
-					currentCursor,
-					currentCursor + firstResult.title.length
-				);
-				this.value = firstResult.title;
-				this.input.setSelectionRange(
-					currentCursor,
-					currentCursor + firstResult.title.length
-				);
+			let candidate: string | null | undefined;
+			if (firstResult.kind === "search") {
+				candidate = firstResult.title;
 			} else {
 				if (!firstResult.url) return;
@@ -136,24 +124,26 @@ export function Omnibox(
 				if (normalizedUrl.endsWith("/") && !this.realvalue.endsWith("/")) {
 					normalizedUrl = normalizedUrl.slice(0, -1);
 				}
-				if (this.realvalue.length >= normalizedUrl.length) return;
-				if (
-					!normalizedUrl.toLowerCase().startsWith(this.realvalue.toLowerCase())
-				)
-					return;
-				let currentCursor = this.input.selectionStart || 0;
-				this.input.setSelectionRange(
-					currentCursor,
-					currentCursor + normalizedUrl.length
-				);
-				this.value = normalizedUrl;
-				this.input.setSelectionRange(
-					currentCursor,
-					currentCursor + normalizedUrl.length
-				);
+				candidate = normalizedUrl;
 			}
+			const completion = inlineCompletion(
+				this.realvalue,
+				candidate,
+				justDeleted
+			);
+			if (completion === null) return;
+			const currentCursor = this.input.selectionStart || 0;
+			this.input.setSelectionRange(
+				currentCursor,
+				currentCursor + completion.length
+			);
+			this.value = completion;
+			this.input.setSelectionRange(
+				currentCursor,
+				currentCursor + completion.length
+			);
 		});
 		this.suggestionDenied = false;
 	});

package/source/packages/chrome/src/components/Omnibar/autocomplete.test.ts ADDED Viewed

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { inlineCompletion } from "./autocomplete";
+describe("omnibox inline completion", () => {
+	it("completes a prefix while the user is typing", () => {
+		expect(inlineCompletion("ama", "amazon.com", false)).toBe("amazon.com");
+	});
+	it("never re-adds text right after a deletion", () => {
+		// The completion is written back into the box with its tail selected, so
+		// re-adding it after a backspace means the next backspace only removes the
+		// completion again and the final character can never be deleted.
+		expect(inlineCompletion("a", "amazon.com", true)).toBeNull();
+	});
+	it("leaves an emptied box empty", () => {
+		expect(inlineCompletion("", "amazon.com", true)).toBeNull();
+		expect(inlineCompletion("", "amazon.com", false)).toBeNull();
+	});
+	it("ignores candidates that are not a continuation of the input", () => {
+		expect(inlineCompletion("xyz", "amazon.com", false)).toBeNull();
+	});
+	it("matches case-insensitively but preserves the candidate's casing", () => {
+		expect(inlineCompletion("AmA", "amazon.com", false)).toBe("amazon.com");
+	});
+	it("adds nothing when the candidate is not longer than the input", () => {
+		expect(inlineCompletion("amazon.com", "amazon.com", false)).toBeNull();
+		expect(inlineCompletion("amazon.com/x", "amazon.com", false)).toBeNull();
+	});
+	it("tolerates a missing candidate", () => {
+		expect(inlineCompletion("ama", undefined, false)).toBeNull();
+		expect(inlineCompletion("ama", null, false)).toBeNull();
+		expect(inlineCompletion("ama", "", false)).toBeNull();
+	});
+	it("lets a full deletion sequence reach an empty box", () => {
+		// Walk "ama" down to "" the way repeated backspaces would, asserting the
+		// box is never refilled at any step.
+		let typed = "ama";
+		while (typed.length > 0) {
+			typed = typed.slice(0, -1);
+			expect(inlineCompletion(typed, "amazon.com", true)).toBeNull();
+		}
+		expect(typed).toBe("");
+	});
+});

package/source/packages/chrome/src/components/Omnibar/autocomplete.ts ADDED Viewed

@@ -0,0 +1,30 @@
+/**
+ * Inline omnibox autocompletion.
+ *
+ * The omnibox completes what you type by writing the candidate into the input
+ * and selecting the added tail, so the next keystroke replaces it. That is only
+ * correct while text is being *added*. Applying it after a deletion makes the
+ * next backspace consume the re-added completion instead of the character the
+ * user meant to remove, which strands the final character permanently.
+ */
+/**
+ * The text to place in the omnibox, or null to leave what the user typed alone.
+ *
+ * @param typed what the user actually has in the box
+ * @param candidate the top suggestion, if any
+ * @param justDeleted whether the last edit removed characters
+ */
+export function inlineCompletion(
+	typed: string,
+	candidate: string | undefined | null,
+	justDeleted: boolean
+): string | null {
+	// Never re-add text the user is in the middle of removing.
+	if (justDeleted) return null;
+	if (!typed || !candidate) return null;
+	// A candidate that is not strictly longer adds nothing to complete.
+	if (candidate.length <= typed.length) return null;
+	if (!candidate.toLowerCase().startsWith(typed.toLowerCase())) return null;
+	return candidate;
+}

package/source/packages/chrome/src/pages/AdvancedSettings.tsx ADDED Viewed

@@ -0,0 +1,225 @@
+import { css, type FC } from "dreamland/core";
+import { Button } from "@components/Button";
+import { roxxieTransport } from "../proxy/roxxie";
+import { settingsService } from "..";
+import {
+	AUTOMATIC_NODE,
+	buildNodeRows,
+	nodeSummary,
+	resolvePreferredNode,
+	type NodeRow,
+} from "./nodes";
+/**
+ * Exit-node picker. Lists the nodes the tracker is currently offering, what
+ * version of the node software each is running, and lets the user pin one
+ * instead of letting the browser choose by load and latency.
+ */
+export function AdvancedSettings(
+	this: FC<
+		Record<string, never>,
+		{
+			rows: NodeRow[];
+			loading: boolean;
+			error: string | null;
+			selected: string;
+		}
+	>
+) {
+	this.rows = [];
+	this.loading = false;
+	this.error = null;
+	this.selected = settingsService.settings.preferredNodeId || AUTOMATIC_NODE;
+	const refresh = async () => {
+		if (!roxxieTransport) {
+			this.error = "The proxy transport is not running yet.";
+			return;
+		}
+		this.loading = true;
+		this.error = null;
+		try {
+			const candidates = await roxxieTransport.listNodes();
+			this.rows = buildNodeRows(
+				candidates,
+				roxxieTransport.connectedNode?.node.nodeId
+			);
+			// A pin left over from a node that has since disappeared reads as
+			// automatic rather than showing a selection that cannot be honoured.
+			this.selected = resolvePreferredNode(
+				settingsService.settings.preferredNodeId,
+				this.rows
+			);
+		} catch (error) {
+			this.error =
+				error instanceof Error ? error.message : "Could not reach the tracker.";
+		} finally {
+			this.loading = false;
+		}
+	};
+	const choose = (nodeId: string) => {
+		this.selected = nodeId;
+		settingsService.settings.preferredNodeId = nodeId;
+		roxxieTransport?.setPreferredNode(nodeId || undefined);
+	};
+	void refresh();
+	return (
+		<section class="setting-section">
+			<div class="section-header">
+				<h2>Exit Nodes</h2>
+			</div>
+			<div class="section-content">
+				<div class="setting-group">
+					<h4>Node Selection</h4>
+					<p class="setting-description">
+						Traffic leaves through one of these community nodes. Automatic picks
+						the least loaded node with the best latency. Choosing a node applies
+						to the next connection.
+					</p>
+					<div class="node-actions">
+						<Button
+							variant="secondary"
+							on:click={() => void refresh()}
+							disabled={use(this.loading)}
+						>
+							{use(this.loading).map((l) => (l ? "Refreshing…" : "Refresh"))}
+						</Button>
+						{use(this.selected).map(
+							(selected) =>
+								selected !== AUTOMATIC_NODE && (
+									<Button
+										variant="secondary"
+										on:click={() => choose(AUTOMATIC_NODE)}
+									>
+										Use automatic
+									</Button>
+								)
+						)}
+					</div>
+					{use(this.error).map(
+						(error) => error && <p class="node-error">{error}</p>
+					)}
+					<div class="node-list">
+						<label class="node-option" class:selected={use(this.selected).map(
+							(s) => s === AUTOMATIC_NODE
+						)}>
+							<input
+								type="radio"
+								name="roxxie-node"
+								checked={use(this.selected).map((s) => s === AUTOMATIC_NODE)}
+								on:change={() => choose(AUTOMATIC_NODE)}
+							/>
+							<span class="node-text">
+								<span class="node-name">Automatic</span>
+								<span class="node-meta">
+									Pick the fastest available node for me
+								</span>
+							</span>
+						</label>
+						{use(this.rows).map((rows) =>
+							rows.length === 0 && !this.loading ? (
+								<p class="node-empty">No nodes are available right now.</p>
+							) : (
+								rows.map((row) => (
+									<label
+										class="node-option"
+										class:selected={use(this.selected).map(
+											(s) => s === row.nodeId
+										)}
+									>
+										<input
+											type="radio"
+											name="roxxie-node"
+											checked={use(this.selected).map((s) => s === row.nodeId)}
+											on:change={() => choose(row.nodeId)}
+										/>
+										<span class="node-text">
+											<span class="node-name">
+												{row.name}
+												{row.connected && (
+													<span class="node-badge">connected</span>
+												)}
+											</span>
+											<span class="node-meta">{nodeSummary(row)}</span>
+											<span class="node-id">{row.nodeId}</span>
+										</span>
+									</label>
+								))
+							)
+						)}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+}
+AdvancedSettings.style = css`
+	:scope .node-actions {
+		display: flex;
+		gap: var(--space-sm);
+		margin-block: var(--space-sm);
+	}
+	:scope .node-list {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xs);
+	}
+	:scope .node-option {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--space-sm);
+		padding: var(--space-sm);
+		border: 1px solid var(--popup_border);
+		border-radius: var(--radius-md, 8px);
+		cursor: pointer;
+	}
+	:scope .node-option.selected {
+		border-color: var(--tab_line);
+	}
+	:scope .node-text {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		min-width: 0;
+	}
+	:scope .node-name {
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		gap: var(--space-xs);
+	}
+	:scope .node-badge {
+		font-size: 0.75em;
+		font-weight: 500;
+		padding: 1px 6px;
+		border-radius: 999px;
+		background: var(--tab_line);
+		color: var(--toolbar);
+	}
+	:scope .node-meta {
+		opacity: 0.8;
+		font-size: 0.9em;
+	}
+	:scope .node-id {
+		opacity: 0.5;
+		font-size: 0.8em;
+		font-family: monospace;
+		overflow-wrap: anywhere;
+	}
+	:scope .node-error {
+		color: var(--error, #e57373);
+	}
+	:scope .node-empty,
+	:scope .setting-description {
+		opacity: 0.8;
+	}
+`;

package/source/packages/chrome/src/pages/SettingsPage.tsx CHANGED Viewed

@@ -26,6 +26,7 @@ import {
 	iconRefresh,
 } from "../icons";
 import { settingsService } from "..";
+import { AdvancedSettings } from "./AdvancedSettings";
 function ThemePreview(this: FC<{ theme: (typeof THEMES)[number] }>) {
 	const theme = this.theme;
@@ -701,6 +702,7 @@ export function SettingsPage(
 					{button("appearance", iconBrush, "Appearance")}
 					{button("search", iconSearch, "Search")}
 					{button("privacy", iconPrivacy, "Privacy & Security")}
+					{button("advanced", iconOptions, "Advanced Settings")}
 					{/* {button("extensions", iconExtension, "Extensions")} */}
 					{button("about", iconAbout, "About")}
 				</nav>
@@ -1303,6 +1305,15 @@ export function SettingsPage(
 						) : null
 					)}
+					{/* Advanced Tab */}
+					{use(this.selected).map((selected) =>
+						selected === "advanced" ? (
+							<div class="settings-tab">
+								<AdvancedSettings />
+							</div>
+						) : null
+					)}
 					{/* About Tab */}
 					{use(this.selected).map((selected) =>
 						selected === "about" ? (