@remit/web-client 0.0.85 → 0.0.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.85",
+  "version": "0.0.86",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/components/settings/TlsRootCaDownload.render.test.ts

@@ -0,0 +1,37 @@
+/**
+ * React-render smoke test for `TlsRootCaDownload`: it must render only when
+ * this deployment's runtime config reports TLS_MODE=internal, since every
+ * other mode either has no local root CA (acme, tailscale) or serves plain
+ * HTTP (off).
+ */
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import React, { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { TlsRootCaDownload } from "./TlsRootCaDownload";
+
+// See MessageToolbar.render.test.ts: the SSR test loader transpiles remit-ui
+// `.tsx` (ButtonLink, here) with the classic JSX runtime, which needs a
+// global `React`.
+(globalThis as { React?: typeof React }).React = React;
+
+afterEach(() => {
+	globalThis.__REMIT_CONFIG__ = undefined;
+});
+
+describe("TlsRootCaDownload", () => {
+	it("renders the download row when tlsMode is internal", () => {
+		globalThis.__REMIT_CONFIG__ = { tlsMode: "internal" };
+		const html = renderToString(createElement(TlsRootCaDownload) as never);
+		assert.match(html, /TLS root certificate/);
+		assert.match(html, /href="\/tls-root-ca\.crt"/);
+	});
+
+	for (const mode of ["acme", "tailscale", "off", undefined]) {
+		it(`renders nothing when tlsMode is ${mode ?? "unset (default off)"}`, () => {
+			globalThis.__REMIT_CONFIG__ = mode ? { tlsMode: mode } : {};
+			const html = renderToString(createElement(TlsRootCaDownload) as never);
+			assert.equal(html, "");
+		});
+	}
+});

package/src/components/settings/TlsRootCaDownload.tsx

@@ -0,0 +1,33 @@
+/**
+ * Settings > Advanced, shown only for TLS_MODE=internal (deploy/vps/README.md,
+ * "TLS", has the rationale). Downloads the same root CA `remit cert` exports,
+ * served by deploy/vps/caddy/internal.caddy — reachable in-app instead of
+ * over SSH.
+ */
+import { ButtonLink } from "@remit/ui";
+import { ShieldCheck } from "lucide-react";
+import { getRuntimeConfig } from "@/runtime-config";
+
+export function TlsRootCaDownload() {
+	if (getRuntimeConfig().tlsMode !== "internal") return null;
+
+	return (
+		<div className="border-t border-line pt-4 mt-4">
+			<p className="text-sm font-medium text-fg mb-1">TLS root certificate</p>
+			<p className="text-sm text-fg-muted mb-2">
+				This deployment signs its own certificate. Import it into the trust
+				store of each device you browse from, and the browser warning stops for
+				good.
+			</p>
+			<ButtonLink
+				href="/tls-root-ca.crt"
+				download
+				variant="secondary"
+				size="sm"
+				icon={<ShieldCheck className="size-3.5" />}
+			>
+				Download root certificate
+			</ButtonLink>
+		</div>
+	);
+}

package/src/routes/settings/advanced.tsx

@@ -7,6 +7,7 @@ import { SettingsShell } from "@remit/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { SelfUpdatePanel } from "@/components/settings/SelfUpdatePanel";
+import { TlsRootCaDownload } from "@/components/settings/TlsRootCaDownload";
 import { AppVersion } from "@/components/ui/AppVersion";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
 
@@ -49,6 +50,7 @@ function AdvancedSettings() {
 				Notification rules, data export, and raw sync diagnostics are coming in
 				a future release.
 			</p>
+			<TlsRootCaDownload />
 			<div className="border-t border-line pt-4 mt-4">
 				<p className="text-sm font-medium text-fg mb-1">About</p>
 				<AppVersion />

package/src/runtime-config.test.ts

@@ -0,0 +1,26 @@
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import { getRuntimeConfig } from "./runtime-config";
+
+afterEach(() => {
+	globalThis.__REMIT_CONFIG__ = undefined;
+});
+
+describe("getRuntimeConfig tlsMode", () => {
+	it("defaults to off when config.js sets nothing", () => {
+		globalThis.__REMIT_CONFIG__ = {};
+		assert.equal(getRuntimeConfig().tlsMode, "off");
+	});
+
+	it("passes through each recognized TLS_MODE value", () => {
+		for (const mode of ["internal", "acme", "tailscale", "off"] as const) {
+			globalThis.__REMIT_CONFIG__ = { tlsMode: mode };
+			assert.equal(getRuntimeConfig().tlsMode, mode);
+		}
+	});
+
+	it("falls back to off for a value config.js never declares", () => {
+		globalThis.__REMIT_CONFIG__ = { tlsMode: "quantum" };
+		assert.equal(getRuntimeConfig().tlsMode, "off");
+	});
+});

package/src/runtime-config.ts

@@ -19,6 +19,18 @@ export interface RumConfig {
 	region: string;
 }
 
+/**
+ * The deployment's TLS termination, mirroring TLS_MODE (deploy/vps/remit.env.template).
+ * "internal" is the only mode with a locally-signed root CA worth offering for
+ * download — the others are already publicly trusted or plain HTTP.
+ */
+export type TlsMode = "internal" | "acme" | "tailscale" | "off";
+
+const TLS_MODES: readonly TlsMode[] = ["internal", "acme", "tailscale", "off"];
+
+const isTlsMode = (value: unknown): value is TlsMode =>
+	typeof value === "string" && (TLS_MODES as readonly string[]).includes(value);
+
 export interface RemitRuntimeConfig {
 	apiUrl: string;
 	appOrigin: string;
@@ -27,6 +39,7 @@ export interface RemitRuntimeConfig {
 	rum: RumConfig;
 	mailboxPollIntervalSeconds?: string;
 	disableDevtools: boolean;
+	tlsMode: TlsMode;
 }
 
 interface RawRuntimeConfig {
@@ -37,6 +50,7 @@ interface RawRuntimeConfig {
 	rum?: Partial<RumConfig>;
 	mailboxPollIntervalSeconds?: string | number;
 	disableDevtools?: boolean;
+	tlsMode?: string;
 }
 
 declare global {
@@ -71,5 +85,6 @@ export const getRuntimeConfig = (): RemitRuntimeConfig => {
 				? String(raw.mailboxPollIntervalSeconds)
 				: undefined,
 		disableDevtools: raw.disableDevtools ?? false,
+		tlsMode: isTlsMode(raw.tlsMode) ? raw.tlsMode : "off",
 	};
 };