mockaton 8.16.1 → 8.16.3

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "HTTP Mock Server",
 	"type": "module",
-	"version": "8.16.1",
+	"version": "8.16.3",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -25,7 +25,9 @@ const dashboardAssets = [
 
 export const apiGetRequests = new Map([
 	[API.dashboard, serveDashboard],
-	...dashboardAssets.map(f => [API.dashboard + f, serveDashboardAsset(f)]),
+	...dashboardAssets.map(f => [
+		API.dashboard + f, serveDashboardAsset(f)
+	]),
 	[API.cors, getIsCorsAllowed],
 	[API.static, listStaticFiles],
 	[API.mocks, listMockBrokers],
@@ -49,7 +51,7 @@ export const apiPatchRequests = new Map([
 	[API.globalDelay, setGlobalDelay],
 	[API.collectProxied, setCollectProxied],
 	[API.delayStatic, setStaticRouteIsDelayed],
-	[API.notFoundStatic, setStaticRouteIsNotFound]
+	[API.staticStatus, setStaticRouteStatusCode]
 ])
 
 
@@ -66,7 +68,7 @@ function serveDashboardAsset(f) {
 
 function listCookies(_, response) { sendJSON(response, cookie.list()) }
 function listComments(_, response) { sendJSON(response, mockBrokersCollection.extractAllComments()) }
-function listStaticFiles(req, response) { sendJSON(response, getStaticFilesCollection()) }
+function listStaticFiles(_, response) { sendJSON(response, getStaticFilesCollection()) }
 function getGlobalDelay(_, response) { sendJSON(response, config.delay) }
 function listMockBrokers(_, response) { sendJSON(response, mockBrokersCollection.getAll()) }
 function getProxyFallback(_, response) { sendJSON(response, config.proxyFallback) }
@@ -86,12 +88,10 @@ function longPollClientSyncVersion(req, response) {
 	}
 
 	response.setTimeout(LONG_POLL_SERVER_TIMEOUT, onAddOrRemoveMock)
-
 	req.on('error', () => {
 		uiSyncVersion.unsubscribe(onAddOrRemoveMock)
 		response.destroy()
 	})
-
 	uiSyncVersion.subscribe(onAddOrRemoveMock)
 }
 
@@ -136,7 +136,7 @@ async function setRouteIsDelayed(req, response) {
 	else if (typeof delayed !== 'boolean')
 		sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
 	else {
-		broker.updateDelayed(body[DF.delayed])
+		broker.setDelayed(delayed)
 		sendOK(response)
 	}
 }
@@ -155,7 +155,7 @@ async function setRouteIsProxied(req, response) { // TESTME
 	else if (proxied && !config.proxyFallback)
 		sendUnprocessableContent(response, `There’s no proxy fallback`)
 	else {
-		broker.updateProxied(proxied)
+		broker.setProxied(proxied)
 		sendOK(response)
 	}
 }
@@ -198,17 +198,17 @@ async function setGlobalDelay(req, response) { // TESTME
 }
 
 
-async function setStaticRouteIsNotFound(req, response) {
+async function setStaticRouteStatusCode(req, response) {
 	const body = await parseJSON(req)
-	const shouldBeNotFound = body[DF.shouldBeNotFound]
+	const status = Number(body[DF.statusCode])
 	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
 
 	if (!broker) // TESTME
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)
-	else if (typeof shouldBeNotFound !== 'boolean')
-		sendUnprocessableContent(response, `Expected a boolean for "not found"`) // TESTME
+	else if (!(status === 200 || status === 404))
+		sendUnprocessableContent(response, `Expected a 200 or 404 status code. Received ${status}`) // TESTME
 	else {
-		broker.updateNotFound(body[DF.shouldBeNotFound])
+		broker.setStatus(status)
 		sendOK(response)
 	}
 }
@@ -216,15 +216,15 @@ async function setStaticRouteIsNotFound(req, response) {
 
 async function setStaticRouteIsDelayed(req, response) {
 	const body = await parseJSON(req)
-	const shouldBeNotFound = body[DF.delayed]
+	const delayed = body[DF.delayed]
 	const broker = findStaticBrokerByRoute(body[DF.routeUrlMask])
 
 	if (!broker) // TESTME
 		sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]}`)
-	else if (typeof shouldBeNotFound !== 'boolean')
-		sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
+	else if (typeof delayed !== 'boolean')
+		sendUnprocessableContent(response, `Expected a boolean for "delayed". Received ${delayed}`) // TESTME
 	else {
-		broker.updateDelayed(body[DF.delayed])
+		broker.setDelayed(delayed)
 		sendOK(response)
 	}
 }

package/src/ApiConstants.js

@@ -11,11 +11,11 @@ export const API = {
 	fallback: MOUNT + '/fallback',
 	globalDelay: MOUNT + '/global-delay',
 	mocks: MOUNT + '/mocks',
-	notFoundStatic: MOUNT + '/not-found-static',
 	proxied: MOUNT + '/proxied',
 	reset: MOUNT + '/reset',
 	select: MOUNT + '/select',
 	static: MOUNT + '/static',
+	staticStatus: MOUNT + '/static-status',
 	syncVersion: MOUNT + '/sync_version'
 }
 
@@ -24,7 +24,7 @@ export const DF = { // Dashboard Fields (XHR)
 	routeUrlMask: 'route_url_mask',
 	delayed: 'delayed',
 	proxied: 'proxied',
-	shouldBeNotFound: 'should_be_not_found',
+	statusCode: 'status_code',
 	syncVersion: 'last_received_sync_version'
 }
 

package/src/Commander.js

@@ -44,10 +44,10 @@ export class Commander {
 		})
 	}
 
-	setStaticRouteIs404(routeUrlMask, shouldBeNotFound) {
-		return this.#patch(API.notFoundStatic, {
+	setStaticRouteStatus(routeUrlMask, status) {
+		return this.#patch(API.staticStatus, {
 			[DF.routeUrlMask]: routeUrlMask,
-			[DF.shouldBeNotFound]: shouldBeNotFound
+			[DF.statusCode]: status
 		})
 	}
 

package/src/Dashboard.css

@@ -1,7 +1,6 @@
 :root {
-	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.15), 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+	--boxShadow1: 0 3px 1px -1px rgba(0, 0, 0, 0.04), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
 	--radius: 4px;
-	--radiusSmall: 4px;
 }
 
 @media (prefers-color-scheme: light) {
@@ -12,9 +11,10 @@
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #eee;
-		--colorHeaderBackground: #eee;
-		--colorSecondaryButtonBackground: #eee;
-		--colorSecondaryAction: #555;
+		--colorHeaderBackground: #f0f0f0;
+		--colorSecondaryButtonBackground: #fcfcfc;
+		--colorSecondaryActionBorder: #ddd;
+		--colorSecondaryAction: #666;
 		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
 		--colorLabel: #444;
@@ -31,6 +31,7 @@
 		--colorHeaderBackground: #111;
 		--colorComboBoxBackground: #2a2a2a;
 		--colorSecondaryButtonBackground: #2a2a2a;
+		--colorSecondaryActionBorder: #333;
 		--colorSecondaryAction: #999;
 		--colorComboBoxHeaderBackground: #222;
 		--colorDisabledMockSelector: #b9b9b9;
@@ -42,15 +43,22 @@
 	}
 }
 
-html, body {
+html,
+body {
+	overflow: hidden;
+	height: 100%;
+	padding: 0;
 	margin: 0;
+	background: var(--colorHeaderBackground);
 	font-size: 12px;
 }
 body {
-	padding: 16px;
+	display: grid;
+	grid-template-rows: auto 1fr;
 	background: var(--colorBackground);
 	color: var(--colorText);
 }
+
 * {
 	box-sizing: border-box;
 	padding: 0;
@@ -59,6 +67,7 @@ body {
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
 	outline: 0;
+	scrollbar-width: thin;
 }
 
 select, a, input, button, summary {
@@ -79,6 +88,7 @@ input[type=checkbox] ~ svg {
 }
 
 select {
+	border: 1px solid transparent;
 	font-size: 100%;
 	color: var(--colorText);
 	cursor: pointer;
@@ -86,16 +96,17 @@ select {
 	border-radius: var(--radius);
 	appearance: none;
 	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23888888'><path d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") no-repeat;
-	background-color: var(--colorComboBoxBackground);
 	background-size: 16px;
 	background-position: 100% center;
 
 	&:enabled {
-		box-shadow: var(--boxShadow1);
-	}
-	&:enabled:hover {
-		cursor: pointer;
-		background-color: var(--colorHover);
+		border-color: var(--colorSecondaryActionBorder);
+		background-color: var(--colorSecondaryButtonBackground);
+		&:hover {
+			border-color: var(--colorHover);
+			cursor: pointer;
+			background-color: var(--colorHover);
+		}
 	}
 	&:disabled {
 		cursor: not-allowed;
@@ -106,18 +117,19 @@ select {
 	color: var(--colorRed);
 }
 
-.Header {
-	position: fixed;
-	z-index: 100;
-	top: 0;
-	left: 0;
+header {
 	display: flex;
 	width: 100%;
-	align-items: flex-end;
 	padding: 16px;
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
-	gap: 10px;
+
+	> div {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: flex-end;
+		gap: 10px;
+	}
 
 	img {
 		width: 130px;
@@ -151,11 +163,11 @@ select {
 			width: 100%;
 			height: 28px;
 			padding: 4px 8px;
+			border: 0;
 			border-right: 3px solid transparent;
 			margin-top: 4px;
 			color: var(--colorText);
 			font-size: 11px;
-			box-shadow: var(--boxShadow1);
 			background-color: var(--colorComboBoxHeaderBackground);
 			border-radius: var(--radius);
 		}
@@ -219,56 +231,61 @@ select {
 		&:hover {
 			background: var(--colorRed);
 			color: white;
-			box-shadow: var(--boxShadow1);
 		}
 	}
 }
 
 
-.Main {
-	display: flex;
+main {
+	display: grid;
+	min-height: 0;
+	grid-template-columns: 50% 50%;
+
+	@media (max-width: 960px) {
+		grid-template-columns: 100%;
+		grid-template-rows: 50% 50%;
+		gap: 32px;
+	}
+
+	.leftSide {
+		padding: 16px;
+		padding-bottom: 0;
+		overflow-y: auto;
+	}
+
+	.rightSide {
+		padding-top: 16px;
+		padding-left: 16px;
+		overflow-y: auto;
+	}
 }
 
 table {
 	border-collapse: collapse;
 
 	th {
-		padding-top: 20px;
 		padding-bottom: 2px;
-		padding-left: 99px;
+		padding-left: 110px;
 		text-align: left;
 	}
 
-	tr {
-		border-top: 2px solid transparent;
+	tbody {
+		border-bottom: 20px solid transparent;
 	}
 }
 
-.MockList {
-	display: flex;
-	align-items: flex-start;
-	margin-top: 64px;
-
-	&.empty {
-		margin-top: 80px;
-	}
+.empty {
+	margin-top: 80px;
 }
 
 
 .PayloadViewer {
-	position: sticky;
-	top: 62px;
-	width: 50%;
-	margin-top: 62px;
-	margin-left: 20px;
-
-	h2 {
-		padding-top: 20px;
-	}
-
+	/*h2 {*/
+	/*	top: 0;*/
+	/*	position: sticky;*/
+	/*	background: var(--colorBackground);*/
+	/*}*/
 	pre {
-		overflow: auto;
-		max-height: calc(100vh - 72px);
 		padding-top: 12px;
 
 		code {
@@ -285,20 +302,16 @@ table {
 
 .PreviewLink {
 	position: relative;
-	left: -6px;
+	left: -8px;
 	display: inline-block;
-	width: 272px;
-	padding: 8px 6px;
+	width: 240px;
+	padding: 8px;
+	margin-left: 4px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
 	text-decoration: none;
 	word-break: break-word;
 
-	span {
-		opacity: 0.6;
-		filter: saturate(0);
-	}
-
 	&:hover {
 		background: var(--colorHover);
 	}
@@ -309,11 +322,10 @@ table {
 }
 
 .MockSelector {
-	width: 260px;
-	height: 30px;
+	width: 100%;
+	height: 26px;
 	padding-right: 5px;
 	padding-left: 16px;
-	border: 0;
 	text-align: right;
 	direction: rtl;
 	text-overflow: ellipsis;
@@ -329,6 +341,7 @@ table {
 	}
 	&:disabled {
 		padding-right: 4px;
+		border-color: transparent;
 		appearance: none;
 		background: transparent;
 		cursor: default;
@@ -363,33 +376,32 @@ table {
 	margin-left: 8px;
 	> input {
 		&:checked ~ svg {
+			border-color: var(--colorAccent);
 			fill: var(--colorAccent);
 			background: var(--colorAccent);
 			stroke: var(--colorBackground);
 		}
 
 		&:enabled:hover:not(:checked) ~ svg {
-			border-color: var(--colorText);
+			border-color: var(--colorHover);
 			background: var(--colorHover);
 			stroke: var(--colorText);
 		}
 	}
 
 	> svg {
-		width: 19px;
-		height: 19px;
+		width: 22px;
+		height: 22px;
+		border: 1px solid var(--colorSecondaryActionBorder);
 		stroke-width: 2.5px;
 		border-radius: 50%;
-		background: var(--colorSecondaryButtonBackground);
-		box-shadow: var(--boxShadow1);
 	}
 }
 
 .ProxyToggler {
 	padding: 1px 3px;
-	background: var(--colorSecondaryButtonBackground);
-	border-radius: var(--radiusSmall);
-	box-shadow: var(--boxShadow1);
+	border: 1px solid var(--colorSecondaryActionBorder);
+	border-radius: var(--radius);
 
 	&:has(input:checked),
 	&:has(input:disabled) {
@@ -414,7 +426,7 @@ table {
 		}
 
 		&:disabled ~ svg {
-			stroke-opacity: 0.5;
+			stroke-opacity: 0.4;
 			cursor: not-allowed;
 			box-shadow: none;
 			fill: transparent;
@@ -430,7 +442,7 @@ table {
 		width: 18px;
 		height: 18px;
 		stroke-width: 2px;
-		border-radius: var(--radiusSmall);
+		border-radius: var(--radius);
 	}
 }
 
@@ -452,6 +464,7 @@ table {
 		}
 
 		&:checked ~ span {
+			border-color: var(--colorRed);
 			color: white;
 			background: var(--colorRed);
 		}
@@ -459,14 +472,14 @@ table {
 
 	> span {
 		padding: 4px;
+		border: 1px solid var(--colorSecondaryActionBorder);
 		font-size: 10px;
 		font-weight: bold;
 		color: var(--colorSecondaryAction);
-		border-radius: var(--radiusSmall);
-		background: var(--colorSecondaryButtonBackground);
-		box-shadow: var(--boxShadow1);
+		border-radius: var(--radius);
 
 		&:hover {
+			border-color: var(--colorLightRed);
 			background: var(--colorLightRed);
 			color: var(--colorRed);
 		}
@@ -501,7 +514,6 @@ table {
 
 
 .StaticFilesList {
-	margin-top: 8px;
 
 	a {
 		display: inline-block;
@@ -513,14 +525,14 @@ table {
 		&:hover {
 			text-decoration: underline;
 		}
-
-		span {
-			opacity: 0.6;
-			filter: saturate(0);
-		}
 	}
 }
 
+.dittoDir {
+	opacity: 0.9;
+	filter: saturate(0);
+}
+
 
 /* 
  * Prism 

package/src/Dashboard.js

@@ -24,15 +24,16 @@ const Strings = {
 	fallback_server_placeholder: 'Type Server Address',
 	got: 'Got',
 	internal_server_error: 'Internal Server Error',
-	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
 	not_found: 'Not Found',
 	pick_comment: 'Pick Comment…',
+	preview: 'Preview',
 	proxied: 'Proxied',
 	proxy_toggler: 'Proxy Toggler',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
-	static_get: 'Static GET'
+	static_get: 'Static GET',
+	title: 'Mockaton'
 }
 
 const CSS = {
@@ -41,9 +42,9 @@ const CSS = {
 	FallbackBackend: 'FallbackBackend',
 	Field: 'Field',
 	GlobalDelayField: 'GlobalDelayField',
-	Header: 'Header',
 	InternalServerErrorToggler: 'InternalServerErrorToggler',
-	Main: 'Main',
+	MainLeftSide: 'leftSide',
+	MainRightSide: 'rightSide',
 	MockList: 'MockList',
 	MockSelector: 'MockSelector',
 	NotFoundToggler: 'NotFoundToggler',
@@ -57,21 +58,20 @@ const CSS = {
 	SpinnerClockMinuteHand: 'MinuteHand',
 	StaticFilesList: 'StaticFilesList',
 
-	red: 'red',
-	empty: 'empty',
 	chosen: 'chosen',
-	status4xx: 'status4xx',
-	nonDefault: 'nonDefault'
+	dittoDir: 'dittoDir',
+	empty: 'empty',
+	nonDefault: 'nonDefault',
+	red: 'red',
+	status4xx: 'status4xx'
 }
 
 const r = createElement
 const s = createSvgElement
-const mockaton = new Commander(window.location.origin)
 
-const SPINNER_DELAY = 180
+const mockaton = new Commander(window.location.origin)
 let globalDelay = 1200
 
-
 init()
 initLongPoll()
 
@@ -85,20 +85,20 @@ function init() {
 		mockaton.getProxyFallback(),
 		mockaton.listStaticFiles()
 	].map(api => api.then(response => response.ok && response.json())))
-		.then(data => document.body.replaceChildren(App(data)))
+		.then(data => document.body.replaceChildren(...App(data)))
 		.catch(onError)
 }
 
-function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbackAddress, staticFiles]) {
+function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbackAddress, staticBrokers]) {
 	globalDelay = delay
-	return (
-		r('div', null,
-			r(Header, { cookies, comments, delay, fallbackAddress, collectProxied }),
-			r('main', { className: CSS.Main },
-				r('div', null,
-					r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
-					r(StaticFilesList, { staticFiles })),
-				r(PayloadViewer))))
+	return [
+		r(Header, { cookies, comments, delay, fallbackAddress, collectProxied }),
+		r('main', null,
+			r('div', { className: CSS.MainLeftSide },
+				r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
+				r(StaticFilesList, { brokers: staticBrokers })),
+			r('div', { className: CSS.MainRightSide },
+				r(PayloadViewer)))]
 }
 
 
@@ -106,13 +106,14 @@ function App([brokersByMethod, cookies, comments, delay, collectProxied, fallbac
 
 function Header({ cookies, comments, delay, fallbackAddress, collectProxied }) {
 	return (
-		r('menu', { className: CSS.Header },
+		r('header', null,
 			r(Logo),
-			r(CookieSelector, { cookies }),
-			r(BulkSelector, { comments }),
-			r(GlobalDelayField, { delay }),
-			r(ProxyFallbackField, { fallbackAddress, collectProxied }),
-			r(ResetButton)))
+			r('div', null,
+				r(CookieSelector, { cookies }),
+				r(BulkSelector, { comments }),
+				r(GlobalDelayField, { delay }),
+				r(ProxyFallbackField, { fallbackAddress, collectProxied }),
+				r(ResetButton))))
 }
 
 function Logo() {
@@ -251,10 +252,10 @@ function MockList({ brokersByMethod, canProxy }) {
 	const hasMocks = Object.keys(brokersByMethod).length
 	if (!hasMocks)
 		return (
-			r('div', { className: cssClass(CSS.MockList, CSS.empty) },
+			r('div', { className: CSS.empty },
 				Strings.no_mocks_found))
 	return (
-		r('div', { className: CSS.MockList },
+		r('div', null,
 			r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
 				r(SectionByMethod, { method, brokers, canProxy })))))
 }
@@ -298,10 +299,11 @@ function PreviewLink({ method, urlMask, urlMaskDittoed }) {
 			href: urlMask,
 			onClick
 		}, ditto
-			? [r('span', null, ditto), tail]
+			? [r('span', { className: CSS.dittoDir }, ditto), tail]
 			: tail))
 }
 
+/** @param {{ broker: MockBroker }} props */
 function MockSelector({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(this.value)
@@ -338,6 +340,7 @@ function MockSelector({ broker }) {
 			}, file))))
 }
 
+/** @param {{ broker: MockBroker }} props */
 function DelayRouteToggler({ broker }) {
 	function onChange() {
 		const { method, urlMask } = parseFilename(broker.mocks[0])
@@ -356,6 +359,7 @@ function DelayRouteToggler({ broker }) {
 			TimerIcon()))
 }
 
+/** @param {{ broker: MockBroker }} props */
 function InternalServerErrorToggler({ broker }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
@@ -381,6 +385,7 @@ function InternalServerErrorToggler({ broker }) {
 			r('span', null, '500')))
 }
 
+/** @param {{ broker: MockBroker, disabled: boolean }} props */
 function ProxyToggler({ broker, disabled }) {
 	function onChange() {
 		const { urlMask, method } = parseFilename(broker.mocks[0])
@@ -404,32 +409,34 @@ function ProxyToggler({ broker, disabled }) {
 }
 
 
-
-/** # StaticFilesList */
-
-function StaticFilesList({ staticFiles }) {
-	if (!Object.keys(staticFiles).length)
+/**
+ * # StaticFilesList
+ * @param {{ brokers: StaticBroker[] }} props
+ */
+function StaticFilesList({ brokers }) {
+	if (!Object.keys(brokers).length)
 		return null
-	const paths = dittoSplitPaths(Object.keys(staticFiles)).map(([ditto, tail]) => ditto
-		? [r('span', null, ditto), tail]
+	const dp = dittoSplitPaths(Object.keys(brokers)).map(([ditto, tail]) => ditto
+		? [r('span', { className: CSS.dittoDir }, ditto), tail]
 		: tail)
 	return (
 		r('table', { className: CSS.StaticFilesList },
 			r('tbody', null,
 				r('th', { colspan: 4 }, Strings.static_get),
-				Object.values(staticFiles).map((broker, i) =>
+				Object.values(brokers).map((broker, i) =>
 					r('tr', null,
 						r('td', null, r(ProxyStaticToggler, {})),
 						r('td', null, r(DelayStaticRouteToggler, { broker })),
 						r('td', null, r(NotFoundToggler, { broker })),
-						r('td', null, r('a', { href: broker.file, target: '_blank' }, paths[i]))
+						r('td', null, r('a', { href: broker.route, target: '_blank' }, dp[i]))
 					)))))
 }
 
 
+/** @param {{ broker: StaticBroker }} props */
 function DelayStaticRouteToggler({ broker }) {
 	function onChange() {
-		mockaton.setStaticRouteIsDelayed(broker.file, this.checked)
+		mockaton.setStaticRouteIsDelayed(broker.route, this.checked)
 			.catch(onError)
 	}
 	return (
@@ -445,9 +452,10 @@ function DelayStaticRouteToggler({ broker }) {
 			TimerIcon()))
 }
 
+/** @param {{ broker: StaticBroker }} props */
 function NotFoundToggler({ broker }) {
 	function onChange() {
-		mockaton.setStaticRouteIs404(broker.file, this.checked)
+		mockaton.setStaticRouteStatus(broker.route, this.checked ? 404 : 200)
 			.catch(onError)
 	}
 	return (
@@ -457,15 +465,13 @@ function NotFoundToggler({ broker }) {
 			},
 			r('input', {
 				type: 'checkbox',
-				checked: broker.should404,
+				checked: broker.status === 404,
 				onChange
 			}),
 			r('span', null, '404')))
 }
 
-
-// TODO
-function ProxyStaticToggler({}) {
+function ProxyStaticToggler({}) { // TODO
 	function onChange() {
 	}
 	return (
@@ -490,7 +496,7 @@ const payloadViewerRef = useRef()
 function PayloadViewer() {
 	return (
 		r('div', { className: CSS.PayloadViewer },
-			r('h2', { ref: payloadViewerTitleRef }, Strings.mock),
+			r('h2', { ref: payloadViewerTitleRef }, Strings.preview),
 			r('pre', null,
 				r('code', { ref: payloadViewerRef }, Strings.click_link_to_preview))))
 }
@@ -523,7 +529,7 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 }
 
 async function previewMock(method, urlMask, href) {
-	const timer = setTimeout(renderSpinner, SPINNER_DELAY)
+	const timer = setTimeout(renderSpinner, 180)
 	const response = await fetch(href, { method })
 	clearTimeout(timer)
 	await updatePayloadViewer(method, urlMask, response)

package/src/MockBroker.js

@@ -83,11 +83,11 @@ export class MockBroker {
 		this.currentMock.file = filename
 	}
 
-	updateDelayed(delayed) {
+	setDelayed(delayed) {
 		this.currentMock.delayed = delayed
 	}
 
-	updateProxied(proxied) {
+	setProxied(proxied) {
 		if (proxied)
 			this.selectFile('')
 		else

package/src/Mockaton.js

@@ -54,7 +54,7 @@ async function onRequest(req, response) {
 		else if (method === 'GET' && apiGetRequests.has(url))
 			apiGetRequests.get(url)(req, response)
 
-		else if (method === 'GET' && findStaticBrokerByRoute(req.url))
+		else if (method === 'GET' && findStaticBrokerByRoute(url))
 			await dispatchStatic(req, response)
 
 		else

package/src/StaticDispatcher.js

@@ -1,37 +1,24 @@
-import { join, basename } from 'node:path'
 import { readFileSync } from 'node:fs'
+import { join, basename } from 'node:path'
 
 import { mimeFor } from './utils/mime.js'
+import { listFilesRecursively } from './utils/fs.js'
 import { config, isFileAllowed, calcDelay } from './config.js'
 import { sendPartialContent, sendNotFound } from './utils/http-response.js'
-import { isDirectory, isFile, listFilesRecursively } from './utils/fs.js'
 
 
 class StaticBroker {
-	constructor(file) {
-		this.file = file
+	constructor(route) {
+		this.route = route
 		this.delayed = false
-		this.should404 = false
-		this.resolvedPath = this.#staticFilePath()
-	}
-
-	#staticFilePath() { // url is absolute e.g. /home/../.. => /
-		let candidate = join(config.staticDir, this.file)
-		if (isDirectory(candidate))
-			candidate = join(candidate, 'index.html')
-		if (isFile(candidate))
-			return candidate
-	}
-
-	updateDelayed(value) {
-		this.delayed = value
+		this.status = 200 // 200 or 404
 	}
 
-	updateNotFound(value) {
-		this.should404 = value
-	}
+	setDelayed(value) { this.delayed = value }
+	setStatus(value) { this.status = value }
 }
 
+/** @type {{ [route: string]: StaticBroker }} */
 let collection = {}
 
 export function initStaticCollection() {
@@ -41,23 +28,27 @@ export function initStaticCollection() {
 		.forEach(registerStaticMock)
 }
 
+
 /** @returns {boolean} registered */
-export function registerStaticMock(file) {
-	if (!isFileAllowed(basename(file)))
+export function registerStaticMock(relativeFile) {
+	if (!isFileAllowed(basename(relativeFile)))
 		return false
 
-	file = '/' + file
-	if (findStaticBrokerByRoute(file))
+	const route = '/' + relativeFile
+	if (findStaticBrokerByRoute(route))
 		return false
 
-	collection[file] = new StaticBroker(file)
+	collection[route] = new StaticBroker(route)
 	return true
 }
 
-export function unregisterStaticMock(file) {
-	delete collection['/' + file]
+
+export function unregisterStaticMock(relativeFile) {
+	delete collection['/' + relativeFile]
 }
 
+
+/** @returns {StaticBroker | undefined} */
 export function findStaticBrokerByRoute(route) {
 	return collection[route] || collection[join(route, 'index.html')]
 }
@@ -66,15 +57,16 @@ export function getStaticFilesCollection() {
 	return collection
 }
 
+
 export async function dispatchStatic(req, response) {
 	const broker = findStaticBrokerByRoute(req.url)
 
 	setTimeout(async () => {
-		if (!broker || broker.should404) { // TESTME
+		if (!broker || broker.status === 404) { // TESTME
 			sendNotFound(response)
 			return
 		}
-		const file = broker.resolvedPath
+		const file = join(config.staticDir, broker.route)
 		if (req.headers.range)
 			await sendPartialContent(response, req.headers.range, file)
 		else {

package/src/mockBrokersCollection.js

@@ -1,3 +1,5 @@
+import { basename } from 'node:path'
+
 import { cookie } from './cookie.js'
 import { MockBroker } from './MockBroker.js'
 import { listFilesRecursively } from './utils/fs.js'
@@ -38,7 +40,7 @@ export function init() {
 /** @returns {boolean} registered */
 export function registerMock(file, isFromWatcher = false) {
 	if (findBrokerByFilename(file)?.hasMock(file)
-		|| !isFileAllowed(file)
+		|| !isFileAllowed(basename(file)) // TESTME
 		|| !filenameIsValid(file))
 		return false