@harperfast/harper 5.2.12 → 5.2.14

package/security/certificateVerification/trustedIssuers.ts

@@ -0,0 +1,76 @@
+/**
+ * Resolves a client certificate's issuer from Harper's own trusted certificate authorities.
+ *
+ * Node completes a peer chain from the trust store only through the listener's default TLS
+ * context; Harper's client CAs live on the SNI contexts built by createTLSSelector, so whenever the
+ * client-sent chain is unavailable (every resumed TLS session; Node 26.8.0/26.8.1 on every
+ * connection, nodejs/node#65579) getPeerCertificate(true) exposes the leaf alone. The CA set that
+ * authorized the connection is the same set published here, so the issuer is recoverable from it
+ * unless it is an intermediate the client sent but Harper does not trust directly.
+ */
+
+import { X509Certificate, createHash } from 'node:crypto';
+
+const PEM_CERTIFICATE_PATTERN =
+	/-----BEGIN (?:TRUSTED |X509 )?CERTIFICATE-----[\s\S]*?-----END (?:TRUSTED |X509 )?CERTIFICATE-----/g;
+const MAX_RESOLVED_LEAVES = 10_000;
+
+let trustedAuthorities: X509Certificate[] = [];
+let publishedAuthorityPems = '';
+let resolvedIssuers = new Map<string, Buffer | null>();
+
+/**
+ * Publish the current trusted authority set (PEM strings, each possibly a bundle of several
+ * certificates). Replaces the previous generation atomically and drops its resolution cache,
+ * unless the set is unchanged. Unparseable certificates are skipped so one bad record cannot
+ * disable resolution for the rest; this never throws, because it runs inside the TLS selector's
+ * publication step.
+ */
+export function publishTrustedAuthorities(authorityPems: Iterable<unknown>): void {
+	const pems = Array.from(authorityPems).filter((pem): pem is string => typeof pem === 'string');
+	const joined = pems.join('\n');
+	if (joined === publishedAuthorityPems) return;
+	publishedAuthorityPems = joined;
+	const parsed: X509Certificate[] = [];
+	for (const pem of pems) {
+		for (const block of pem.match(PEM_CERTIFICATE_PATTERN) ?? []) {
+			try {
+				parsed.push(new X509Certificate(block));
+			} catch {}
+		}
+	}
+	trustedAuthorities = parsed;
+	resolvedIssuers = new Map();
+}
+
+/**
+ * Find the trusted authority that issued `leafDer`: subject/AKI match plus a signature check, so a
+ * same-named authority with a different key never counts, and a certificate is never its own
+ * issuer. Returns the issuer's DER, or undefined.
+ */
+export function resolveTrustedIssuer(leafDer: Buffer, fingerprint256?: string): Buffer | undefined {
+	if (trustedAuthorities.length === 0) return undefined;
+	const key = fingerprint256 ?? createHash('sha256').update(leafDer).digest('hex');
+	const cached = resolvedIssuers.get(key);
+	if (cached !== undefined) return cached ?? undefined;
+
+	let issuer: Buffer | null = null;
+	try {
+		const leaf = new X509Certificate(leafDer);
+		for (const authority of trustedAuthorities) {
+			try {
+				if (
+					authority.fingerprint256 !== leaf.fingerprint256 &&
+					leaf.checkIssued(authority) &&
+					leaf.verify(authority.publicKey)
+				) {
+					issuer = authority.raw;
+					break;
+				}
+			} catch {}
+		}
+	} catch {}
+	if (resolvedIssuers.size >= MAX_RESOLVED_LEAVES) resolvedIssuers.clear();
+	resolvedIssuers.set(key, issuer);
+	return issuer ?? undefined;
+}

package/security/certificateVerification/types.ts

@@ -17,6 +17,7 @@ export interface PeerCertificate {
 		[key: string]: any;
 	};
 	raw?: Buffer;
+	fingerprint256?: string;
 	issuerCertificate?: PeerCertificate;
 }
 

package/security/keys.ts

@@ -34,6 +34,7 @@ import { readFileSync, statSync } from 'node:fs';
 import { getTicketKeys, onMessageFromWorkers } from '../server/threads/manageThreads.js';
 import { isMainThread } from 'worker_threads';
 import { TLSSocket } from 'node:tls';
+import { publishTrustedAuthorities } from './certificateVerification/trustedIssuers.ts';
 
 const CERT_VALIDITY_DAYS = 3650;
 // Default interval (ms) for the periodic cert-file re-read safety net. The chokidar (inotify)
@@ -1212,6 +1213,8 @@ export function createTLSSelector(type, mtlsOptions?, liveReload = true): any {
 						scheduleRebuild();
 						return;
 					}
+					// only listener selectors publish: a one-shot client selector's pass may see no authority rows
+					if (liveReload) publishTrustedAuthorities(caCerts.values());
 					// A successful pass ends any warn latches so a later recurrence logs again.
 					if (server) {
 						server.tlsSelectorWaitedForSystemDb = false;

package/server/DESIGN.md

@@ -172,19 +172,20 @@ The `@table(cacheControl:)` value is persisted on the primary-key attribute (lik
 
 ## "Where is X" cheat sheet
 
-| Question                                                                  | Where                                                                                                                                                                     |
-| ------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Where do I register a new HTTP handler?                                   | `http.ts → httpServer()` (or `onRequest()` for the request-only form)                                                                                                     |
-| Where do I register a WebSocket handler?                                  | `http.ts → onWebSocket()`                                                                                                                                                 |
-| How does `before`/`after` middleware ordering work?                       | `middlewareChain.ts → topoSort`                                                                                                                                           |
-| Where does PROXY protocol get parsed?                                     | `serverHelpers/proxyProtocol.ts` (applied by `http.ts → enableProxyProtocol` / `createH2CProxyFront`)                                                                     |
-| How does an app read forwarded TLS facts (JA3/JA4, ALPN, SNI, mTLS cert)? | `request.connectionInfo` (`ConnectionInfo` from `serverHelpers/proxyProtocol.ts`); only set from a trusted PROXY v2 header on the UDS mirror, never from a request header |
-| Where is the REST request → Resource dispatch?                            | `REST.ts → http()`                                                                                                                                                        |
-| Where is the operations API request handled?                              | `operationsServer.ts → handler`                                                                                                                                           |
-| How are content types (de)serialized?                                     | `serverHelpers/contentTypes.ts`                                                                                                                                           |
-| Where do durable subscriptions live?                                      | `DurableSubscriptionsSession.ts`                                                                                                                                          |
-| How are sockets dispatched to worker threads?                             | `threads/socketRouter.ts`                                                                                                                                                 |
-| Where is the Operations API wired into Fastify?                           | `operationsServer.ts → buildServer`                                                                                                                                       |
+| Question                                                                   | Where                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| -------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Where do I register a new HTTP handler?                                    | `http.ts → httpServer()` (or `onRequest()` for the request-only form)                                                                                                                                                                                                                                                                                                                                                  |
+| Where do I register a WebSocket handler?                                   | `http.ts → onWebSocket()`                                                                                                                                                                                                                                                                                                                                                                                              |
+| How does `before`/`after` middleware ordering work?                        | `middlewareChain.ts → topoSort`                                                                                                                                                                                                                                                                                                                                                                                        |
+| Where does PROXY protocol get parsed?                                      | `serverHelpers/proxyProtocol.ts` (applied by `http.ts → enableProxyProtocol` / `createH2CProxyFront`)                                                                                                                                                                                                                                                                                                                  |
+| How does an app read forwarded TLS facts (JA3/JA4, ALPN, SNI, mTLS cert)?  | `request.connectionInfo` (`ConnectionInfo` from `serverHelpers/proxyProtocol.ts`); only set from a trusted PROXY v2 header on the UDS mirror, never from a request header                                                                                                                                                                                                                                              |
+| Why does mTLS revocation checking look up the client cert's issuer itself? | `security/certificateVerification/trustedIssuers.ts` — Node only completes a peer chain from the _listener_ context's store, but Harper's client CAs live on SNI contexts (`security/keys.ts → createTLSSelector`), so a resumed TLS session (and Node 26.8.0/26.8.1, nodejs/node#65579) exposes the leaf alone; `verifyCertificate` recovers the issuer from the published CA set and otherwise applies `failureMode` |
+| Where is the REST request → Resource dispatch?                             | `REST.ts → http()`                                                                                                                                                                                                                                                                                                                                                                                                     |
+| Where is the operations API request handled?                               | `operationsServer.ts → handler`                                                                                                                                                                                                                                                                                                                                                                                        |
+| How are content types (de)serialized?                                      | `serverHelpers/contentTypes.ts`                                                                                                                                                                                                                                                                                                                                                                                        |
+| Where do durable subscriptions live?                                       | `DurableSubscriptionsSession.ts`                                                                                                                                                                                                                                                                                                                                                                                       |
+| How are sockets dispatched to worker threads?                              | `threads/socketRouter.ts`                                                                                                                                                                                                                                                                                                                                                                                              |
+| Where is the Operations API wired into Fastify?                            | `operationsServer.ts → buildServer`                                                                                                                                                                                                                                                                                                                                                                                    |
 
 ---
 

package/server/loadRootComponents.js

@@ -1,6 +1,10 @@
 const { isMainThread } = require('worker_threads');
 const { getTables } = require('../resources/databases.ts');
-const { loadComponentDirectories, loadComponent } = require('../components/componentLoader.ts');
+const {
+	loadComponentDirectories,
+	loadComponent,
+	startSecretCustodyOnMainThread,
+} = require('../components/componentLoader.ts');
 const { resetResources } = require('../resources/Resources.ts');
 const configUtils = require('../config/configUtils.ts');
 const { dirname } = require('path');
@@ -15,7 +19,10 @@ let loadedComponents = new Map();
  */
 async function loadRootComponents(isWorkerThread = false) {
 	try {
-		if (isMainThread && !process.env.HARPER_SAFE_MODE) await installApplications();
+		if (isMainThread && !process.env.HARPER_SAFE_MODE) {
+			await startSecretCustodyOnMainThread();
+			await installApplications();
+		}
 	} catch (error) {
 		console.error(errorForLog(error));
 	}

package/server/threads/manageThreads.js

@@ -7,7 +7,7 @@ const { realExit } = require('./workerProcessGuard.ts');
 
 const { Worker, MessageChannel, parentPort, isMainThread, threadId, workerData } = require('worker_threads');
 const { spawn, spawnSync } = require('node:child_process');
-const { readFileSync } = require('node:fs');
+const { readdirSync, readFileSync } = require('node:fs');
 const { setTimeout: delay } = require('node:timers/promises');
 const { join, isAbsolute, extname } = require('path');
 const { pathToFileURL } = require('url');
@@ -156,6 +156,7 @@ module.exports = {
 	onThreadExit,
 	registerProcessGroup,
 	unregisterProcessGroup,
+	isProcessGroupAlive,
 	isThreadRunning,
 	waitUntilConfirmedGone,
 	restartNumber: workerData?.restartNumber || 1,
@@ -923,17 +924,23 @@ if (parentPort && workerData?.addPorts) {
 			}
 		});
 	let awaitTerminationRequestId = 0;
-	awaitProcessGroupTermination = (ownerThreadId) =>
+	awaitProcessGroupTermination = (ownerThreadId, signal) =>
 		new Promise((resolve) => {
 			// Deliberately no timeout: a contender must not reclaim a dead owner's lock while its
 			// process group might still be alive and mutating files, so this mirrors the unbounded
-			// wait Application.ts's waitForConfirmedTermination uses for the same reason.
+			// wait Application.ts's waitForConfirmedTermination uses for the same reason. A caller
+			// that needs its own bound (isThreadRunning) passes `signal` so this listener still gets
+			// torn down when that caller gives up, instead of leaking for the life of the worker.
 			const requestId = ++awaitTerminationRequestId;
 			parentPort.on('message', receiveConfirmation);
+			signal?.addEventListener('abort', cleanup, { once: true });
 			parentPort.postMessage({ type: AWAIT_PROCESS_GROUP_TERMINATION, ownerThreadId, requestId });
+			function cleanup() {
+				parentPort.off('message', receiveConfirmation);
+			}
 			function receiveConfirmation(message) {
 				if (message.type === PROCESS_GROUP_TERMINATION_CONFIRMED && message.requestId === requestId) {
-					parentPort.off('message', receiveConfirmation);
+					cleanup();
 					resolve();
 				}
 			}
@@ -966,33 +973,142 @@ const processGroupsByThread = new Map();
 // window component-preparation locking exists to close.
 const pendingProcessGroupTerminations = new Map();
 const PROCESS_GROUP_TERMINATION_POLL_MS = 25;
+const ZOMBIE_GROUP_MEMBER_SCAN_INTERVAL_MS = 1000;
+const PROCESS_GROUP_LIVENESS_WARNING_MS = 30000;
+// Bounds isThreadRunning's own wait (below); Application.ts's waitForConfirmedTermination stays
+// deliberately unbounded.
+const THREAD_RUNNING_TERMINATION_BACKSTOP_MS = PROCESS_GROUP_LIVENESS_WARNING_MS;
+const zombieGroupScanTimes = new Map();
+const processGroupLivenessStates = new Map();
+
+function processGroupExists(processGroupId) {
+	try {
+		process.kill(-processGroupId, 0);
+		return true;
+	} catch (error) {
+		return error.code === 'EPERM';
+	}
+}
+
+function processProbeError(error) {
+	return error?.code ?? error?.message ?? String(error ?? 'unknown error');
+}
 
-// A process-group leader spawned by a worker thread's own event loop is normally reaped by that
-// same loop when it dies. But the only caller of this check (waitForProcessGroupExit, for a
-// *dead* owner thread) runs after that loop is already gone, so nothing will ever reap it here:
-// kill(pid, 0) keeps succeeding forever against the zombie's still-allocated PID slot. A zombie
-// can no longer touch the filesystem, so treat a confirmed zombie as dead rather than poll
-// forever for a reap that will never come. Reproduced by killing a worker mid-install: the
-// installer's process-group leader becomes a permanent `Z` in /proc without this check.
-function isZombieProcessGroupLeader(processGroupId) {
-	if (process.platform !== 'linux') return false;
+function processGroupLeaderState(processGroupId, platform, readStat) {
+	if (platform !== 'linux') {
+		return { state: 'unknown', reason: `zombie-process detection is unavailable on ${platform}` };
+	}
 	let stat;
 	try {
-		stat = readFileSync(`/proc/${processGroupId}/stat`, 'utf8');
-	} catch {
-		return false;
+		stat = readStat(`/proc/${processGroupId}/stat`, 'utf8');
+	} catch (error) {
+		if (error.code === 'ENOENT' || error.code === 'ESRCH') return { state: 'missing' };
+		return {
+			state: 'unknown',
+			reason: `reading /proc/${processGroupId}/stat failed (${processProbeError(error)})`,
+		};
 	}
-	// Format is "pid (comm) state ..."; comm can contain spaces/parens, so anchor on the last ')'.
-	return stat[stat.lastIndexOf(')') + 2] === 'Z';
+	const fields = stat.slice(stat.lastIndexOf(')') + 2).split(' ');
+	if (Number(fields[2]) !== processGroupId) return { state: 'missing' };
+	return { state: fields[0] === 'Z' ? 'zombie' : 'alive' };
 }
 
-function processGroupIsAlive(processGroupId) {
+function scanLinuxProcessGroup(processGroupId, readDirectory, readStat) {
+	let processIds;
 	try {
-		process.kill(-processGroupId, 0);
+		processIds = readDirectory('/proc');
 	} catch (error) {
-		return error.code === 'EPERM';
+		return {
+			isAlive: null,
+			reason: `reading /proc failed (${processProbeError(error)})`,
+		};
+	}
+	for (const processId of processIds) {
+		if (!/^\d+$/.test(processId)) continue;
+		let stat;
+		try {
+			stat = readStat(`/proc/${processId}/stat`, 'utf8');
+		} catch (error) {
+			if (error.code === 'ENOENT' || error.code === 'ESRCH') continue; // already gone
+			// EACCES/EPERM (e.g. hidepid/ProtectProc) can only happen on a pid we don't own — we
+			// spawned our own group's members as this same user, so their stat is always readable —
+			// so it's not one of ours. Anything else is genuinely unknown, not "not ours".
+			if (error.code === 'EACCES' || error.code === 'EPERM') continue;
+			return {
+				isAlive: null,
+				reason: `reading /proc/${processId}/stat failed (${processProbeError(error)})`,
+			};
+		}
+		const fields = stat.slice(stat.lastIndexOf(')') + 2).split(' ');
+		const pgrp = Number(fields[2]);
+		if (!Number.isFinite(pgrp)) {
+			return { isAlive: null, reason: `/proc/${processId}/stat had an unparseable process-group field` };
+		}
+		if (pgrp !== processGroupId) continue;
+		if (fields[0] !== 'Z') return { isAlive: true, reason: `a live member was observed at pid ${processId}` };
 	}
-	return !isZombieProcessGroupLeader(processGroupId);
+	return { isAlive: false };
+}
+
+function keepProcessGroupAlive(processGroupId, reason, observationTime, warn) {
+	let livenessState = processGroupLivenessStates.get(processGroupId);
+	if (!livenessState) {
+		livenessState = { observedAt: observationTime, reason, warned: false };
+		processGroupLivenessStates.set(processGroupId, livenessState);
+	} else {
+		livenessState.reason = reason;
+	}
+	if (!livenessState.warned && observationTime - livenessState.observedAt >= PROCESS_GROUP_LIVENESS_WARNING_MS) {
+		livenessState.warned = true;
+		warn(
+			`Process group ${processGroupId} termination remains unconfirmed after ${PROCESS_GROUP_LIVENESS_WARNING_MS}ms: ${livenessState.reason}`
+		);
+	}
+	return true;
+}
+
+function clearProcessGroupLivenessState(processGroupId) {
+	zombieGroupScanTimes.delete(processGroupId);
+	processGroupLivenessStates.delete(processGroupId);
+}
+
+function isProcessGroupAlive(processGroupId, options) {
+	const platform = options?.platform ?? process.platform;
+	const groupExists = options?.processGroupExists ?? processGroupExists;
+	const readDirectory = options?.readDirectory ?? readdirSync;
+	const readStat = options?.readStat ?? readFileSync;
+	const observationTime = options?.now?.() ?? performance.now();
+	const warn = options?.warn ?? ((message) => harperLogger.warn(message));
+	if (!groupExists(processGroupId)) {
+		clearProcessGroupLivenessState(processGroupId);
+		return false;
+	}
+	const leaderState = processGroupLeaderState(processGroupId, platform, readStat);
+	if (leaderState.state === 'alive')
+		return keepProcessGroupAlive(processGroupId, 'the process-group leader is still alive', observationTime, warn);
+	if (leaderState.state === 'unknown')
+		return keepProcessGroupAlive(processGroupId, leaderState.reason, observationTime, warn);
+	const scanTime = observationTime;
+	const lastScan = zombieGroupScanTimes.get(processGroupId);
+	if (lastScan !== undefined && scanTime >= lastScan && scanTime - lastScan < ZOMBIE_GROUP_MEMBER_SCAN_INTERVAL_MS) {
+		const reason = processGroupLivenessStates.get(processGroupId)?.reason ?? 'the previous Linux scan is still current';
+		return keepProcessGroupAlive(processGroupId, reason, observationTime, warn);
+	}
+	zombieGroupScanTimes.set(processGroupId, scanTime);
+	let scanResult = scanLinuxProcessGroup(processGroupId, readDirectory, readStat);
+	if (scanResult.isAlive !== false)
+		return keepProcessGroupAlive(processGroupId, scanResult.reason, observationTime, warn);
+	// A second snapshot catches a member omitted after forking inside the first readdir/stat window.
+	// It narrows rather than closes the race because the second synchronous pass has the same gap.
+	scanResult = scanLinuxProcessGroup(processGroupId, readDirectory, readStat);
+	if (scanResult.isAlive !== false)
+		return keepProcessGroupAlive(processGroupId, scanResult.reason, observationTime, warn);
+	clearProcessGroupLivenessState(processGroupId);
+	return false;
+}
+
+function processGroupIsAlive(processGroupId) {
+	return isProcessGroupAlive(processGroupId);
 }
 
 async function waitForProcessGroupExit(processGroupId) {
@@ -1074,6 +1190,7 @@ function addProcessGroup(ownerThreadId, processGroupId) {
 }
 
 function removeProcessGroup(ownerThreadId, processGroupId) {
+	clearProcessGroupLivenessState(processGroupId);
 	const processGroups = processGroupsByThread.get(ownerThreadId);
 	if (!processGroups) return;
 	processGroups.delete(processGroupId);
@@ -1125,12 +1242,48 @@ function unregisterProcessGroup(processGroupId) {
 	else parentPort?.postMessage({ type: UNREGISTER_PROCESS_GROUP, processGroupId });
 }
 
+class ProcessGroupTerminationUnconfirmedError extends Error {
+	code = 'ERR_PROCESS_GROUP_TERMINATION_UNCONFIRMED';
+	constructor(ownerThreadId, timeoutMs) {
+		super(`Thread ${ownerThreadId}'s process-group termination could not be confirmed after ${timeoutMs}ms`);
+		this.name = 'ProcessGroupTerminationUnconfirmedError';
+	}
+}
+
+// Bounds awaitProcessGroupTermination for isThreadRunning below. Throws rather than resolving to
+// "not running": componentPreparationLock's ownerIsAlive/ownerLivenessConfirmed already treat a
+// throwing isOwnerAlive as "can't confirm — don't steal the claim, don't renew the deadline", so
+// the lock's own bounded wait is what eventually fails the waiter.
+async function awaitConfirmedProcessGroupTermination(ownerThreadId) {
+	const abortController = new AbortController();
+	let timedOut = false;
+	const timer = setTimeout(() => {
+		timedOut = true;
+		abortController.abort();
+	}, THREAD_RUNNING_TERMINATION_BACKSTOP_MS);
+	timer.unref?.();
+	try {
+		await Promise.race([
+			awaitProcessGroupTermination(ownerThreadId, abortController.signal),
+			new Promise((resolve) => abortController.signal.addEventListener('abort', resolve, { once: true })),
+		]);
+	} finally {
+		clearTimeout(timer);
+	}
+	if (timedOut) {
+		harperLogger.warn(
+			`Thread ${ownerThreadId}'s process-group termination could not be confirmed after ${THREAD_RUNNING_TERMINATION_BACKSTOP_MS}ms`
+		);
+		throw new ProcessGroupTerminationUnconfirmedError(ownerThreadId, THREAD_RUNNING_TERMINATION_BACKSTOP_MS);
+	}
+}
+
 async function isThreadRunning(ownerThreadId, timeoutMs = THREAD_INFO_REQUEST_TIMEOUT_MS) {
 	if (ownerThreadId === threadId || ownerThreadId === 0) return true;
 	if ((await getThreadInfo(timeoutMs)).some((worker) => worker.threadId === ownerThreadId)) return true;
 	// The thread itself is gone, but it may still own process groups whose forced termination is
 	// in flight — wait for that to be confirmed before reporting the owner as reclaimable.
-	await awaitProcessGroupTermination(ownerThreadId);
+	await awaitConfirmedProcessGroupTermination(ownerThreadId);
 	return false;
 }
 

package/studio/web/404.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Page Not Found — Harper Fabric</title>
+    <link rel="icon" type="image/svg+xml" href="/HDBDogOnly.svg" />
+    <link rel="icon" type="dynamic-favicon" href="/favicon_purple.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="noindex" />
+    <!-- Self-contained on purpose: this page is served when a URL matched nothing, so it must not
+         depend on a hashed bundle, a stylesheet, or a font that might itself be the thing missing. -->
+    <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      align-items: center;
+      background: linear-gradient(45deg, #312556, #403b8a, #7a3a87);
+      box-sizing: border-box;
+      color: #efefef;
+      display: flex;
+      font-family: helvetica, sans-serif;
+      justify-content: center;
+      line-height: 1.5;
+      min-height: 100vh;
+      padding: 2rem 1.5rem;
+    }
+
+    main {
+      max-width: 30rem;
+      text-align: center;
+    }
+
+    img {
+      height: 84px;
+      width: 84px;
+    }
+
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 400;
+      margin: 1.5rem 0 0.75rem;
+    }
+
+    p {
+      color: hsl(0, 0%, 85%);
+    }
+
+    a {
+      background-color: hsla(0, 0%, 0%, 0.35);
+      border-radius: 0.375rem;
+      color: #fff;
+      display: inline-block;
+      margin-top: 1.75rem;
+      padding: 0.625rem 1.25rem;
+      text-decoration: none;
+    }
+
+    a:hover,
+    a:focus-visible {
+      background-color: hsla(0, 0%, 0%, 0.6);
+    }
+    </style>
+  </head>
+
+  <body>
+    <main>
+      <img src="/HDBDogOnly.svg" alt="" width="84" height="84" />
+      <h1>Page not found</h1>
+      <p>
+        That address isn't part of Harper Fabric. If you followed a link from
+        outside Studio, it may have pointed somewhere that has since moved.
+      </p>
+      <a href="/">Go to Harper Fabric</a>
+    </main>
+  </body>
+</html>