roxxie-proxy-u-prod 0.2.2 → 0.2.4

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

@@ -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

@@ -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" ? (

package/source/packages/chrome/src/pages/nodes.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from "vitest";
+
+import {
+	AUTOMATIC_NODE,
+	type CandidateNode,
+	buildNodeRows,
+	nodeSummary,
+	resolvePreferredNode,
+	toNodeRow,
+	versionLabel,
+} from "./nodes";
+
+function candidate(overrides: Partial<CandidateNode> = {}): CandidateNode {
+	return {
+		nodeId: "018f1f5e-7b2a-7c35-8b1d-2a4d9f8e6c10",
+		name: "Roxxie community node",
+		activeSessions: 1,
+		maxSessions: 8,
+		utilization: 0.125,
+		protocolVersion: "6.0",
+		packageVersion: "0.5.1",
+		platform: "linux",
+		...overrides,
+	};
+}
+
+describe("advanced settings node list", () => {
+	it("surfaces the node software version", () => {
+		const row = toNodeRow(candidate());
+		expect(row.version).toBe("0.5.1");
+		expect(versionLabel(row)).toBe("v0.5.1");
+	});
+
+	it("says so plainly when a tracker does not report a version", () => {
+		// Trackers older than the version field omit it; showing "v undefined"
+		// would be worse than admitting we do not know.
+		const row = toNodeRow(candidate({ packageVersion: undefined }));
+		expect(row.version).toBeNull();
+		expect(versionLabel(row)).toBe("version unknown");
+	});
+
+	it("marks which node is currently connected", () => {
+		const row = toNodeRow(candidate(), candidate().nodeId);
+		expect(row.connected).toBe(true);
+		expect(toNodeRow(candidate(), "someone-else").connected).toBe(false);
+	});
+
+	it("renders load as a clamped percentage", () => {
+		expect(toNodeRow(candidate({ utilization: 0 })).loadPercent).toBe(0);
+		expect(toNodeRow(candidate({ utilization: 0.5 })).loadPercent).toBe(50);
+		expect(toNodeRow(candidate({ utilization: 1 })).loadPercent).toBe(100);
+		expect(toNodeRow(candidate({ utilization: 2 })).loadPercent).toBe(100);
+		expect(toNodeRow(candidate({ utilization: -1 })).loadPercent).toBe(0);
+		expect(toNodeRow(candidate({ utilization: Number.NaN })).loadPercent).toBe(
+			0
+		);
+	});
+
+	it("lists the least loaded node first", () => {
+		const rows = buildNodeRows([
+			candidate({ nodeId: "c", name: "C", utilization: 0.9 }),
+			candidate({ nodeId: "a", name: "A", utilization: 0.1 }),
+			candidate({ nodeId: "b", name: "B", utilization: 0.5 }),
+		]);
+		expect(rows.map((row) => row.nodeId)).toEqual(["a", "b", "c"]);
+	});
+
+	it("orders ties stably so the list does not reshuffle", () => {
+		const rows = buildNodeRows([
+			candidate({ nodeId: "z", name: "Same", utilization: 0.2 }),
+			candidate({ nodeId: "a", name: "Same", utilization: 0.2 }),
+		]);
+		expect(rows.map((row) => row.nodeId)).toEqual(["a", "z"]);
+	});
+
+	it("summarises a node in one line", () => {
+		expect(nodeSummary(toNodeRow(candidate()))).toBe(
+			"v0.5.1 · linux · 1/8 sessions · 13% load"
+		);
+	});
+
+	it("keeps a pin that still matches an offered node", () => {
+		const rows = buildNodeRows([candidate({ nodeId: "keep" })]);
+		expect(resolvePreferredNode("keep", rows)).toBe("keep");
+	});
+
+	it("falls back to automatic when the pinned node is gone", () => {
+		// Otherwise the user would be stuck pointing at a node that no longer
+		// exists with no obvious way back.
+		const rows = buildNodeRows([candidate({ nodeId: "present" })]);
+		expect(resolvePreferredNode("vanished", rows)).toBe(AUTOMATIC_NODE);
+		expect(resolvePreferredNode("", rows)).toBe(AUTOMATIC_NODE);
+	});
+});

package/source/packages/chrome/src/pages/nodes.ts

@@ -0,0 +1,108 @@
+/**
+ * The parts of a tracker candidate this page renders. Declared structurally so
+ * the settings page does not need a direct dependency on the tracker protocol
+ * package.
+ */
+export type CandidateNode = {
+	nodeId: string;
+	name: string;
+	activeSessions: number;
+	maxSessions: number;
+	utilization: number;
+	protocolVersion: string;
+	packageVersion?: string | undefined;
+	platform?: string | undefined;
+};
+
+/** A node as presented in Advanced settings. */
+export type NodeRow = {
+	nodeId: string;
+	name: string;
+	/** Node agent release, or null when the tracker does not report one. */
+	version: string | null;
+	platform: string | null;
+	activeSessions: number;
+	maxSessions: number;
+	/** 0-100, rounded, clamped. */
+	loadPercent: number;
+	protocolVersion: string;
+	connected: boolean;
+};
+
+/** Value used in the picker to mean "let the browser choose". */
+export const AUTOMATIC_NODE = "";
+
+function clampPercent(value: number): number {
+	if (!Number.isFinite(value)) return 0;
+	return Math.min(100, Math.max(0, Math.round(value * 100)));
+}
+
+export function toNodeRow(
+	candidate: CandidateNode,
+	connectedNodeId?: string
+): NodeRow {
+	return {
+		nodeId: candidate.nodeId,
+		name: candidate.name,
+		// Trackers predating version reporting simply omit it.
+		version: candidate.packageVersion ?? null,
+		platform: candidate.platform ?? null,
+		activeSessions: candidate.activeSessions,
+		maxSessions: candidate.maxSessions,
+		loadPercent: clampPercent(candidate.utilization),
+		protocolVersion: candidate.protocolVersion,
+		connected: candidate.nodeId === connectedNodeId,
+	};
+}
+
+/**
+ * Least loaded first, so the ordering matches how a node would be picked
+ * automatically. Ties fall back to name then id to keep the list from
+ * reshuffling between refreshes.
+ */
+export function sortNodeRows(rows: readonly NodeRow[]): NodeRow[] {
+	return [...rows].sort(
+		(left, right) =>
+			left.loadPercent - right.loadPercent ||
+			left.activeSessions - right.activeSessions ||
+			left.name.localeCompare(right.name) ||
+			left.nodeId.localeCompare(right.nodeId)
+	);
+}
+
+export function buildNodeRows(
+	candidates: readonly CandidateNode[],
+	connectedNodeId?: string
+): NodeRow[] {
+	return sortNodeRows(
+		candidates.map((candidate) => toNodeRow(candidate, connectedNodeId))
+	);
+}
+
+/** Version text for display, distinguishing "unknown" from a real version. */
+export function versionLabel(row: NodeRow): string {
+	return row.version === null ? "version unknown" : `v${row.version}`;
+}
+
+/** Short summary line shown under each node's name. */
+export function nodeSummary(row: NodeRow): string {
+	const parts = [versionLabel(row)];
+	if (row.platform) parts.push(row.platform);
+	parts.push(`${row.activeSessions}/${row.maxSessions} sessions`);
+	parts.push(`${row.loadPercent}% load`);
+	return parts.join(" · ");
+}
+
+/**
+ * Whether a saved preference still refers to a node the tracker is offering.
+ * A stale pin is treated as automatic rather than leaving the user stuck.
+ */
+export function resolvePreferredNode(
+	preferredNodeId: string,
+	rows: readonly NodeRow[]
+): string {
+	if (!preferredNodeId) return AUTOMATIC_NODE;
+	return rows.some((row) => row.nodeId === preferredNodeId)
+		? preferredNodeId
+		: AUTOMATIC_NODE;
+}

package/source/packages/chrome/src/proxy/Controller.ts

@@ -15,6 +15,7 @@ import {
 import { HttpCachePlugin } from "./cache";
 import { adBlockPlugin } from "..";
 import { runtimeAssetUrl } from "../runtime-base.ts";
+import { navigationCommitTracker } from "./navigation";
 
 export function makeId(): string {
 	return Math.random().toString(36).substring(2, 10);
@@ -69,6 +70,12 @@ export class Controller {
 				};
 
 				const fetchresp = await handlefetch(request, this);
+				navigationCommitTracker.observe({
+					destination: data.destination,
+					requestUrl: data.rawUrl,
+					status: fetchresp.status,
+					location: fetchresp.headers.get("location"),
+				});
 
 				const response: TransferResponse = {
 					status: fetchresp.status,
@@ -87,6 +94,11 @@ export class Controller {
 				return [response, transfer];
 			} catch (e: any) {
 				console.error("Error in controller fetch:", e);
+				navigationCommitTracker.observe({
+					destination: data.destination,
+					requestUrl: data.rawUrl,
+					status: 500,
+				});
 				return [
 					{
 						status: 500,

package/source/packages/chrome/src/proxy/ProxyFrame.ts

@@ -1,23 +1,40 @@
 import { rewriteUrl } from "@mercuryworkshop/scramjet/bundled";
 import { Controller, controllerForURL } from "./Controller";
+import { navigationCommitTracker } from "./navigation";
 
 export class ProxyFrame {
 	frame: HTMLIFrameElement;
 	controller: Controller | null = null;
-	constructor() {
+	private cancelPendingCommit: (() => void) | null = null;
+
+	constructor(private onNavigationCommit: () => void) {
 		this.frame = document.createElement("iframe");
 	}
 
 	async go(url: URL) {
+		this.cancelPendingNavigation();
 		let controller = await controllerForURL(url);
 		this.controller = controller;
 
 		const prefix = controller.prefix;
 
-		this.frame.src = rewriteUrl(url, controller.fetchHandler.context, {
+		const rewrittenUrl = rewriteUrl(url, controller.fetchHandler.context, {
 			origin: prefix, // origin/base don't matter here because we're always sending an absolute URL
 			base: prefix,
 		});
+		this.cancelPendingCommit = navigationCommitTracker.begin(
+			rewrittenUrl,
+			() => {
+				this.cancelPendingCommit = null;
+				this.onNavigationCommit();
+			}
+		);
+		this.frame.src = rewrittenUrl;
+	}
+
+	cancelPendingNavigation() {
+		this.cancelPendingCommit?.();
+		this.cancelPendingCommit = null;
 	}
 
 	reload() {

package/source/packages/chrome/src/proxy/cache.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, it } from "vitest";
+
+import {
+	CACHE_NAME,
+	hasCompleteBufferedBody,
+	upstreamContentLength,
+} from "./cache";
+
+describe("HTTP cache response integrity", () => {
+	it("rotates the cache namespace after the incomplete-body bug", () => {
+		expect(CACHE_NAME).toBe("scramjet-http-cache-v3");
+	});
+
+	it("parses only one safe canonical Content-Length", () => {
+		expect(upstreamContentLength(new Headers())).toBeNull();
+		expect(
+			upstreamContentLength(new Headers({ "content-length": "1176872" }))
+		).toBe(1_176_872);
+		expect(
+			upstreamContentLength(new Headers({ "content-length": "01" }))
+		).toBeNull();
+		expect(
+			upstreamContentLength(new Headers({ "content-length": "1, 1" }))
+		).toBeNull();
+		expect(
+			upstreamContentLength(
+				new Headers({ "content-length": "9007199254740992" })
+			)
+		).toBeNull();
+	});
+
+	it("rejects a truncated buffered GET body", () => {
+		const headers = new Headers({ "content-length": "1176872" });
+		expect(
+			hasCompleteBufferedBody("GET", headers, new ArrayBuffer(861_092))
+		).toBe(false);
+		expect(
+			hasCompleteBufferedBody("GET", headers, new ArrayBuffer(1_176_872))
+		).toBe(true);
+	});
+
+	it("does not apply GET body-size semantics to HEAD", () => {
+		const headers = new Headers({ "content-length": "1176872" });
+		expect(hasCompleteBufferedBody("HEAD", headers, null)).toBe(true);
+	});
+
+	it("allows transfer-delimited GET bodies without Content-Length", () => {
+		expect(
+			hasCompleteBufferedBody("GET", new Headers(), new ArrayBuffer(123))
+		).toBe(true);
+	});
+});

package/source/packages/chrome/src/proxy/cache.ts

@@ -57,7 +57,7 @@ import {
 } from "@mercuryworkshop/scramjet/bundled";
 import { BareResponse } from "@mercuryworkshop/proxy-transports";
 
-export const CACHE_NAME = "scramjet-http-cache-v2";
+export const CACHE_NAME = "scramjet-http-cache-v3";
 
 /** Header recording when this entry entered the cache (ms since epoch). */
 const STORED_AT_HEADER = "x-sj-cached-at";
@@ -223,6 +223,33 @@ function nativeHeadersFromRaw(
 	return h;
 }
 
+/**
+ * Parse a single, valid HTTP Content-Length value. Invalid, duplicated, or
+ * unsafe values are ignored rather than guessed at.
+ */
+export function upstreamContentLength(headers: Headers): number | null {
+	const raw = headers.get("content-length");
+	if (raw === null || !/^(?:0|[1-9][0-9]*)$/u.test(raw)) return null;
+
+	const parsed = Number(raw);
+	return Number.isSafeInteger(parsed) ? parsed : null;
+}
+
+/**
+ * Whether a buffered response is complete according to a valid upstream
+ * Content-Length. Only GET is checked: a HEAD response legitimately has no
+ * body even when it advertises the size a corresponding GET would have.
+ */
+export function hasCompleteBufferedBody(
+	method: string,
+	headers: Headers,
+	body: ArrayBuffer | null
+): boolean {
+	if (method !== "GET") return true;
+	const expected = upstreamContentLength(headers);
+	return expected === null || expected === (body?.byteLength ?? 0);
+}
+
 /** Strip our internal bookkeeping from a stored Response's headers. */
 function strippedHeadersFromStored(stored: Response): Headers {
 	const out = new Headers();
@@ -351,9 +378,11 @@ export class HttpCachePlugin extends Plugin {
 			if (props.earlyResponse) return;
 
 			const cache = await this.openCache();
-			const stored = await cache.match(
-				buildCacheKeyRequest(ctx.parsed.url.href, req.initialHeaders)
+			const cacheKey = buildCacheKeyRequest(
+				ctx.parsed.url.href,
+				req.initialHeaders
 			);
+			const stored = await cache.match(cacheKey);
 			if (!stored) {
 				return;
 			}
@@ -409,6 +438,14 @@ export class HttpCachePlugin extends Plugin {
 
 			const isNullBody = NULL_BODY_STATUSES.has(stored.status);
 			const earlyBody = isNullBody ? null : await stored.arrayBuffer();
+			if (!hasCompleteBufferedBody(req.method, stored.headers, earlyBody)) {
+				try {
+					await cache.delete(cacheKey);
+				} catch {
+					console.warn("[scramjet-http-cache] invalid entry delete failed");
+				}
+				return;
+			}
 
 			const earlyResponse = BareResponse.fromNativeResponse(
 				new Response(earlyBody, {
@@ -446,6 +483,11 @@ export class HttpCachePlugin extends Plugin {
 				props.response
 			);
 			props.response = replacement;
+			if (!hasCompleteBufferedBody(req.method, headers, bodyBuffer)) {
+				throw new TypeError(
+					"Upstream response body does not match its Content-Length"
+				);
+			}
 
 			const cacheKey = buildCacheKeyRequest(
 				ctx.parsed.url.href,
@@ -458,14 +500,16 @@ export class HttpCachePlugin extends Plugin {
 				props.response.rawHeaders
 			);
 
-			try {
-				const cache = await this.openCache();
-				await cache.put(cacheKey, toStore);
-			} catch (err) {
-				// Cache.put can fail on opaque or oddly-headered responses;
-				// don't let a cache write failure break the actual fetch.
-				console.warn("[scramjet-http-cache] cache.put failed:", err);
-			}
+			// The body has already been buffered and the pipeline has an independent
+			// replacement response. Persisting that copy must not hold up rewriting
+			// and rendering the live response.
+			void this.openCache()
+				.then(async (cache) => cache.put(cacheKey, toStore))
+				.catch(() => {
+					// Cache.put can fail on opaque or oddly-headered responses; don't
+					// let a cache write failure break the actual fetch.
+					console.warn("[scramjet-http-cache] cache.put failed");
+				});
 		});
 	}