mockaton 8.7.7 → 8.8.1

package/README.md

@@ -3,8 +3,6 @@
 ![NPM Version](https://img.shields.io/npm/v/mockaton)
 ![NPM Version](https://img.shields.io/npm/l/mockaton)
 
-## Mock your APIs, Enhance your Development Workflow
-
 Mockaton is an HTTP mock server with the goal of making
 your frontend development and testing easier—and a lot more fun.
 
@@ -17,11 +15,31 @@ For example, for `/api/user/1234` the mock filename would be:
 my-mocks-dir/api/user/[user-id].GET.200.json
 ```
 
-## Scrapping Mocks from you Backend
 
-Mockaton can fallback to your real backend on routes you don’t have mocks for. For that,
-type your backend address in the **Fallback Backend** field. And if you
-check **Save Mocks**, it will collect those responses that hit your backend.
+## Dashboard
+In the dashboard you can select a mock variant for a particular route, among
+other features such as delaying responses, or triggering an autogenerated
+`500` (Internal Server Error). Nonetheless, there’s a programmatic API,
+which is handy for setting up tests  (see **Commander API** below).
+
+<picture>
+  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
+  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp860x800.dark.gold.png">
+  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
+</picture>
+
+
+
+## No Need to Mock Everything
+Mockaton can fallback to your real backend on routes you don’t have mocks
+for. For that, type your backend address in the **Fallback Backend** field.
+
+Similarly, if you already have mocks for a route you can check the
+☁️ **Cloud checkbox** and that route will be requested from your backend.
+
+
+## Scrapping Mocks from you Backend
+If you check **Save Mocks**, Mockaton will collect the responses that hit your backend.
 Those mocks will be saved to your `config.mocksDir` following the filename convention.
 
 
@@ -31,26 +49,15 @@ Those mocks will be saved to your `config.mocksDir` following the filename conve
 Want to mock a locked-out user or an invalid login attempt? 
 Add a comment to the filename in parentheses. For example:
 
-`api/login(locked out user).POST.423.json`
+<pre>
+api/login<b>(locked out user)</b>.POST.423.json
+</pre>
 
 ### Different response status code
 For instance, you can have mocks with a `4xx` or `5xx` status code for triggering
 error responses. Or with a `204` (No Content) for testing empty collections.
 
 
-## Dashboard
-In the dashboard you can select a mock variant for a particular route, among
-other features such as delaying responses, or triggering an autogenerated
-`500` (Internal Server Error). Nonetheless, there’s a programmatic API,
-which is handy for setting up tests  (see **Commander API** below).
-
-<picture>
-  <source media="(prefers-color-scheme: light)" srcset="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
-  <source media="(prefers-color-scheme: dark)" srcset="./pixaton-tests/pic-for-readme.vp860x800.dark.gold.png">
-  <img alt="Mockaton Dashboard" src="./pixaton-tests/pic-for-readme.vp860x800.light.gold.png">
-</picture>
-
-
 
 ## Basic Usage
 `tsx` is only needed if you want to write mocks in TypeScript.
@@ -295,9 +302,11 @@ checkbox, the delay amount is globally configurable.
 
 
 ### `proxyFallback?: string`
-Lets you specify a target server for serving routes you don’t have mocks for.
 For example, `config.proxyFallback = 'http://example.com'`
 
+Lets you specify a target server for serving routes you don’t have mocks for,
+or that you manually picked with the ☁️ **Cloud Checkbox**.
+
 ### `collectProxied?: boolean`
 Defaults to `false`. With this flag you can save mocks that hit
 your proxy fallback to `config.mocksDir`. If there are UUIDv4 in the
@@ -308,7 +317,10 @@ URL, the filename will have `[id]` in their place. For example,
   my-mocks-dir/api/user/[id]/likes.GET.200.json
 ```
 
-Your existing mocks won’t be overwritten (because they don’t hit the fallback server).
+Your existing mocks won’t be overwritten. That is, the routes you manually
+selected for using your backend with the ☁️ **Cloud Checkbox**, will have
+a unique filename comment.
+
 
 <details>
   <summary>Extension Details</summary>
@@ -495,6 +507,11 @@ first mock in alphabetical order that matches.
 await mockaton.setRouteIsDelayed('GET', '/api/foo', true)
 ```
 
+### Set Route is Proxied
+```js
+await mockaton.setRouteIsProxied('GET', '/api/foo', true)
+```
+
 ### Select a cookie
 In `config.cookies`, each key is the label used for selecting it.
 ```js
@@ -521,5 +538,5 @@ await mockaton.reset()
 
 <div style="display: flex; align-items: center; gap: 20px">
   <img src="fixtures-mocks/api/user/avatar.GET.200.png" width="170"/>
-  <p style="font-size: 18px">“Use Mockaton”</p>
+  <p style="font-size: 18px">“Mockaton”</p>
 </div>

package/package.json

@@ -2,7 +2,7 @@
 	"name": "mockaton",
 	"description": "A deterministic server-side for developing and testing frontend clients",
 	"type": "module",
-	"version": "8.7.7",
+	"version": "8.8.1",
 	"main": "index.js",
 	"types": "index.d.ts",
 	"license": "MIT",

package/src/Api.js

@@ -38,6 +38,7 @@ export const apiGetRequests = new Map([
 export const apiPatchRequests = new Map([
 	[API.select, selectMock],
 	[API.delay, setRouteIsDelayed],
+	[API.proxied, setRouteIsProxied],
 	[API.reset, reinitialize],
 	[API.cookies, selectCookie],
 	[API.fallback, updateProxyFallback],
@@ -118,13 +119,43 @@ async function selectMock(req, response) {
 async function setRouteIsDelayed(req, response) {
 	try {
 		const body = await parseJSON(req)
+		const delayed = body[DF.delayed]
 		const broker = mockBrokersCollection.getBrokerForUrl(
 			body[DF.routeMethod],
 			body[DF.routeUrlMask])
+
+		if (!broker) // TESTME
+			sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
+		else if (typeof delayed !== 'boolean')
+			sendUnprocessableContent(response, `Expected a boolean for "delayed"`) // TESTME
+		else {
+			broker.updateDelay(body[DF.delayed])
+			sendOK(response)
+		}
+	}
+	catch (error) {
+		sendBadRequest(response, error)
+	}
+}
+
+async function setRouteIsProxied(req, response) { // TESTME
+	try {
+		const body = await parseJSON(req)
+		const proxied = body[DF.proxied]
+		const broker = mockBrokersCollection.getBrokerForUrl(
+			body[DF.routeMethod],
+			body[DF.routeUrlMask])
+
 		if (!broker)
-			throw `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`
-		broker.updateDelay(body[DF.delayed])
-		sendOK(response)
+			sendUnprocessableContent(response, `Route does not exist: ${body[DF.routeUrlMask]} ${body[DF.routeUrlMask]}`)
+		else if (typeof proxied !== 'boolean')
+			sendUnprocessableContent(response, `Expected a boolean for "proxied"`)
+		else if (proxied && !config.proxyFallback)
+			sendUnprocessableContent(response, `There’s no proxy fallback`)
+		else {
+			broker.updateProxied(proxied)
+			sendOK(response)
+		}
 	}
 	catch (error) {
 		sendBadRequest(response, error)
@@ -134,12 +165,14 @@ async function setRouteIsDelayed(req, response) {
 async function updateProxyFallback(req, response) {
 	try {
 		const fallback = await parseJSON(req)
-		if (fallback && !URL.canParse(fallback))
+		if (fallback && !URL.canParse(fallback)) {
 			sendUnprocessableContent(response)
-		else {
-			config.proxyFallback = fallback
-			sendOK(response)
+			return
 		}
+		if (!fallback) // TESTME
+			mockBrokersCollection.ensureAllRoutesHaveSelectedMock()
+		config.proxyFallback = fallback
+		sendOK(response)
 	}
 	catch (error) {
 		sendBadRequest(response, error)

package/src/ApiConstants.js

@@ -10,6 +10,7 @@ export const API = {
 	cookies: MOUNT + '/cookies',
 	fallback: MOUNT + '/fallback',
 	collectProxied: MOUNT + '/collect-proxied',
+	proxied: MOUNT + '/proxied',
 	cors: MOUNT + '/cors',
 	static: MOUNT + '/static'
 }
@@ -17,7 +18,8 @@ export const API = {
 export const DF = { // Dashboard Fields (XHR)
 	routeMethod: 'route_method',
 	routeUrlMask: 'route_url_mask',
-	delayed: 'delayed'
+	delayed: 'delayed',
+	proxied: 'proxied'
 }
 
 export const DEFAULT_500_COMMENT = '(Mockaton 500)'

package/src/Commander.js

@@ -37,6 +37,14 @@ export class Commander {
 		})
 	}
 
+	setRouteIsProxied(routeMethod, routeUrlMask, proxied) {
+		return this.#patch(API.proxied, {
+			[DF.routeMethod]: routeMethod,
+			[DF.routeUrlMask]: routeUrlMask,
+			[DF.proxied]: proxied
+		})
+	}
+
 	listCookies() {
 		return this.#get(API.cookies)
 	}

package/src/Dashboard.css

@@ -1,5 +1,5 @@
 :root {
-	--boxShadow1: 0 2px 1px -1px rgba(0, 0, 0, 0.1), 0 1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.08);
+	--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);
 	--radius: 6px
 }
 
@@ -7,13 +7,14 @@
 	:root {
 		--color4xxBackground: #ffedd1;
 		--colorAccent: #0075db;
-		--colorAccentAlt: #008664;
+		--colorAccentAlt: #068564;
 		--colorBackground: #fff;
 		--colorComboBoxHeaderBackground: #fff;
 		--colorComboBoxBackground: #f7f7f7;
 		--colorHeaderBackground: #f3f3f3;
-		--colorSecondaryButtonBackground: #f3f3f3;
-		--colorDisabled: #444;
+		--colorSecondaryButtonBackground: transparent;
+		--colorSecondaryAction: #555;
+		--colorDisabledMockSelector: #444;
 		--colorHover: #dfefff;
 		--colorLabel: #444;
 		--colorLightRed: #ffe4ee;
@@ -29,9 +30,10 @@
 		--colorBackground: #161616;
 		--colorHeaderBackground: #090909;
 		--colorComboBoxBackground: #252525;
-		--colorSecondaryButtonBackground: #444;
+		--colorSecondaryButtonBackground: #202020;
+		--colorSecondaryAction: #bbb;
 		--colorComboBoxHeaderBackground: #222;
-		--colorDisabled: #bbb;
+		--colorDisabledMockSelector: #b9b9b9;
 		--colorHover: #023661;
 		--colorLabel: #aaa;
 		--colorLightRed: #ffe4ee;
@@ -101,11 +103,11 @@ select {
 	display: flex;
 	width: 100%;
 	align-items: flex-end;
-	padding: 15px 16px;
+	padding: 16px;
 	border-bottom: 1px solid rgba(127, 127, 127, 0.1);
 	background: var(--colorHeaderBackground);
 	box-shadow: var(--boxShadow1);
-	gap: 12px;
+	gap: 8px;
 
 	img {
 		width: 130px;
@@ -114,12 +116,14 @@ select {
 	}
 
 	.Field {
-		min-width: 150px;
+		width: 120px;
 
 		span {
-			display: block;
+			display: flex;
+			align-items: center;
 			color: var(--colorLabel);
 			font-size: 11px;
+			gap: 4px;
 		}
 
 		input[type=url],
@@ -140,7 +144,14 @@ select {
 
 		&.FallbackBackend {
 			position: relative;
-			width: 194px;
+			width: 210px;
+
+			svg {
+				width: 14px;
+				height: 14px;
+				fill: var(--colorLabel);
+				opacity: 0.6;
+			}
 
 			input[type=url] {
 				padding: 0 6px;
@@ -244,7 +255,7 @@ select {
 	position: relative;
 	left: -6px;
 	display: inline-block;
-	width: 280px;
+	width: 300px;
 	padding: 8px 6px;
 	border-radius: var(--radius);
 	color: var(--colorAccent);
@@ -260,7 +271,7 @@ select {
 }
 
 .MockSelector {
-	width: 300px;
+	width: 260px;
 	height: 30px;
 	border: 0;
 	border-left: 3px solid transparent;
@@ -277,12 +288,13 @@ select {
 		appearance: none;
 		background: transparent;
 		cursor: default;
-		color: var(--colorDisabled);
+		color: var(--colorDisabledMockSelector);
 		opacity: 1;
 	}
 }
 
-.DelayToggler {
+.DelayToggler,
+.ProxyToggler {
 	display: flex;
 	margin-left: 8px;
 	cursor: pointer;
@@ -297,25 +309,38 @@ select {
 			}
 		}
 
+		&:enabled:hover:not(:checked) ~ svg {
+			background: var(--colorHover);
+			fill: var(--colorText);
+		}
+
 		&:checked ~ svg {
 			background: var(--colorAccent);
 			fill: white;
 		}
+
+		&:disabled ~ svg {
+			opacity: .5;
+			cursor: not-allowed;
+		}
 	}
 
 	> svg {
 		width: 20px;
 		height: 20px;
 		vertical-align: bottom;
-		fill: var(--colorText);
+		fill: var(--colorSecondaryAction);
 		border-radius: 50%;
 		background: var(--colorSecondaryButtonBackground);
 		box-shadow: var(--boxShadow1);
+	}
+}
 
-		&:hover {
-			background: var(--colorHover);
-			fill: var(--colorText);
-		}
+.ProxyToggler {
+	> svg {
+		width: 24px;
+		padding: 3px;
+		border-radius: 4px;
 	}
 }
 
@@ -344,8 +369,8 @@ select {
 		padding: 5px 4px;
 		box-shadow: var(--boxShadow1);
 		font-size: 10px;
-		color: var(--colorText);
-		border-radius: 2px;
+		color: var(--colorSecondaryAction);
+		border-radius: 4px;
 		background: var(--colorSecondaryButtonBackground);
 
 		&:hover {

package/src/Dashboard.js

@@ -12,8 +12,8 @@ function syntaxHighlightJson(textBody) {
 
 
 const Strings = {
-	bulk_select_by_comment: 'Bulk Select by Comment',
-	bulk_select_by_comment_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
+	bulk_select: 'Bulk Select',
+	bulk_select_disabled_title: 'No mock files have comments, which are anything within parentheses on the filename.',
 	click_link_to_preview: 'Click a link to preview it',
 	cookie: 'Cookie',
 	cookie_disabled_title: 'No cookies specified in Config.cookies',
@@ -21,10 +21,13 @@ const Strings = {
 	empty_response_body: '/* Empty Response Body */',
 	fallback_server: 'Fallback Backend',
 	fallback_server_placeholder: 'Type Server Address',
+	got: 'Got',
 	internal_server_error: 'Internal Server Error',
 	mock: 'Mock',
 	no_mocks_found: 'No mocks found',
-	pick: 'Pick…',
+	pick_comment: 'Pick Comment…',
+	proxied: 'Proxied',
+	proxy_toggler: 'Proxy Toggler',
 	reset: 'Reset',
 	save_proxied: 'Save Mocks',
 	static_get: 'Static GET'
@@ -42,6 +45,7 @@ const CSS = {
 	PayloadViewer: 'PayloadViewer',
 	PreviewLink: 'PreviewLink',
 	ProgressBar: 'ProgressBar',
+	ProxyToggler: 'ProxyToggler',
 	ResetButton: 'ResetButton',
 	SaveProxiedCheckbox: 'SaveProxiedCheckbox',
 	StaticFilesList: 'StaticFilesList',
@@ -73,7 +77,7 @@ init()
 function App([brokersByMethod, cookies, comments, collectProxied, fallbackAddress, staticFiles]) {
 	return [
 		r(Header, { cookies, comments, fallbackAddress, collectProxied }),
-		r(MockList, { brokersByMethod }),
+		r(MockList, { brokersByMethod, canProxy: Boolean(fallbackAddress) }),
 		r(StaticFilesList, { staticFiles })
 	]
 }
@@ -121,7 +125,7 @@ function CookieSelector({ cookies }) {
 function BulkSelector({ comments }) {
 	// UX wise this should be a menu instead of this `select`.
 	// But this way is easier to implement, with a few hacks.
-	const firstOption = Strings.pick
+	const firstOption = Strings.pick_comment
 	function onChange() {
 		const value = this.value
 		this.value = firstOption // Hack 
@@ -135,19 +139,19 @@ function BulkSelector({ comments }) {
 		: [firstOption].concat(comments)
 	return (
 		r('label', { className: CSS.Field },
-			r('span', null, Strings.bulk_select_by_comment),
+			r('span', null, Strings.bulk_select),
 			r('select', {
 				className: CSS.BulkSelector,
 				'data-qaid': 'BulkSelector',
 				autocomplete: 'off',
 				disabled,
-				title: disabled ? Strings.bulk_select_by_comment_disabled_title : '',
+				title: disabled ? Strings.bulk_select_disabled_title : '',
 				onChange
 			}, list.map(value =>
 				r('option', { value }, value)))))
 }
 
-function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
+function ProxyFallbackField({ fallbackAddress, collectProxied }) {
 	function onChange() {
 		const saveCheckbox = this.closest(`.${CSS.FallbackBackend}`).querySelector('[type=checkbox]')
 		saveCheckbox.disabled = !this.validity.valid || !this.value.trim()
@@ -155,12 +159,16 @@ function ProxyFallbackField({ fallbackAddress = '', collectProxied }) {
 		if (!this.validity.valid)
 			this.reportValidity()
 		else
-			mockaton.setProxyFallback(this.value.trim()).catch(onError)
+			mockaton.setProxyFallback(this.value.trim())
+				.then(init)
+				.catch(onError)
 	}
 	return (
 		r('div', { className: cssClass(CSS.Field, CSS.FallbackBackend) },
 			r('label', null,
-				r('span', null, Strings.fallback_server),
+				r('span', null,
+					r(CloudIcon),
+					Strings.fallback_server),
 				r('input', {
 					type: 'url',
 					autocomplete: 'none',
@@ -205,7 +213,7 @@ function ResetButton() {
 
 // MockList ===============
 
-function MockList({ brokersByMethod }) {
+function MockList({ brokersByMethod, canProxy }) {
 	const hasMocks = Object.keys(brokersByMethod).length
 	if (!hasMocks)
 		return (
@@ -214,12 +222,12 @@ function MockList({ brokersByMethod }) {
 	return (
 		r('main', { className: CSS.MockList },
 			r('table', null, Object.entries(brokersByMethod).map(([method, brokers]) =>
-				r(SectionByMethod, { method, brokers }))),
+				r(SectionByMethod, { method, brokers, canProxy }))),
 			r(PayloadViewer)))
 }
 
 
-function SectionByMethod({ method, brokers }) {
+function SectionByMethod({ method, brokers, canProxy }) {
 	return (
 		r('tbody', null,
 			r('th', null, method),
@@ -231,7 +239,8 @@ function SectionByMethod({ method, brokers }) {
 						r('td', null, r(PreviewLink, { method, urlMask })),
 						r('td', null, r(MockSelector, { broker })),
 						r('td', null, r(DelayRouteToggler, { broker })),
-						r('td', null, r(InternalServerErrorToggler, { broker }))))))
+						r('td', null, r(InternalServerErrorToggler, { broker })),
+						r('td', null, r(ProxyToggler, { broker, disabled: !canProxy }))))))
 }
 
 
@@ -257,38 +266,35 @@ function PreviewLink({ method, urlMask }) {
 
 
 function MockSelector({ broker }) {
-	function className(defaultIsSelected, status) {
-		return cssClass(
-			CSS.MockSelector,
-			!defaultIsSelected && CSS.bold,
-			status >= 400 && status < 500 && CSS.status4xx)
-	}
-
 	function onChange() {
-		const { status, urlMask, method } = parseFilename(this.value)
+		const { urlMask, method } = parseFilename(this.value)
 		this.style.fontWeight = this.value === this.options[0].value // default is selected
 			? 'normal'
 			: 'bold'
 		mockaton.select(this.value)
-			.then(() => {
-				linkFor(method, urlMask)?.click()
-				checkbox500For(method, urlMask).checked = status === 500
-				this.className = className(this.value === this.options[0].value, status)
-			})
+			.then(init)
+			.then(() => linkFor(method, urlMask)?.click())
 			.catch(onError)
 	}
 
-	const selected = broker.currentMock.file
+	let selected = broker.currentMock.file
 	const { status, urlMask } = parseFilename(selected)
 	const files = broker.mocks.filter(item =>
 		status === 500 ||
 		!item.includes(DEFAULT_500_COMMENT))
+	if (!selected) {
+		selected = Strings.proxied
+		files.push(selected)
+	}
 
 	return (
 		r('select', {
 			'data-qaid': urlMask,
 			autocomplete: 'off',
-			className: className(selected === files[0], status),
+			className: cssClass(
+				CSS.MockSelector,
+				selected !== files[0] && CSS.bold,
+				status >= 400 && status < 500 && CSS.status4xx),
 			disabled: files.length <= 1,
 			onChange
 		}, files.map(file =>
@@ -317,12 +323,6 @@ function DelayRouteToggler({ broker }) {
 				onChange
 			}),
 			TimerIcon()))
-
-	function TimerIcon() {
-		return (
-			r('svg', { viewBox: '0 0 24 24' },
-				r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
-	}
 }
 
 
@@ -353,6 +353,30 @@ function InternalServerErrorToggler({ broker }) {
 	)
 }
 
+function ProxyToggler({ broker, disabled }) {
+	function onChange() {
+		const { urlMask, method } = parseFilename(this.name)
+		mockaton.setRouteIsProxied(method, urlMask, this.checked)
+			.then(init)
+			.then(() => linkFor(method, urlMask)?.click())
+			.catch(onError)
+	}
+	return (
+		r('label', {
+				className: CSS.ProxyToggler,
+				title: Strings.proxy_toggler
+			},
+			r('input', {
+				type: 'checkbox',
+				disabled,
+				name: broker.currentMock.file,
+				checked: !broker.currentMock.file,
+				onChange
+			}),
+			r(CloudIcon)))
+}
+
+
 
 // Payload Preview ===============
 
@@ -373,14 +397,21 @@ function PayloadViewerProgressBar() {
 			r('div', { style: { animationDuration: '1000ms' } }))) // TODO from Config.delay - 180
 }
 
-function PayloadViewerTitle({ file }) {
-	const { urlMask, method, status, ext } = parseFilename(file)
+function PayloadViewerTitle({ file, status, statusText }) {
+	const { urlMask, method, ext } = parseFilename(file)
 	return (
 		r('span', null,
 			urlMask + '.' + method + '.',
-			r('abbr', { title: HttpStatus[status] }, status),
+			r('abbr', { title: statusText }, status),
 			'.' + ext))
 }
+function PayloadViewerTitleWhenProxied({ mime, status, statusText }) {
+	return (
+		r('span', null,
+			Strings.got + ' ',
+			r('abbr', { title: statusText }, status),
+			' ' + mime))
+}
 
 async function previewMock(method, urlMask, href) {
 	const timer = setTimeout(renderProgressBar, 180)
@@ -394,10 +425,22 @@ async function previewMock(method, urlMask, href) {
 }
 
 async function updatePayloadViewer(method, urlMask, response) {
-	payloadViewerTitleRef.current.replaceChildren(
-		PayloadViewerTitle({ file: mockSelectorFor(method, urlMask).value }))
-
 	const mime = response.headers.get('content-type') || ''
+
+	const file = mockSelectorFor(method, urlMask).value
+	if (file === Strings.proxied)
+		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitleWhenProxied({
+			status: response.status,
+			statusText: response.statusText,
+			mime
+		}))
+	else
+		payloadViewerTitleRef.current.replaceChildren(PayloadViewerTitle({
+			status: response.status,
+			statusText: response.statusText,
+			file
+		}))
+
 	if (mime.startsWith('image/')) { // Naively assumes GET.200
 		payloadViewerRef.current.replaceChildren(
 			r('img', {
@@ -424,9 +467,6 @@ function trFor(method, urlMask) {
 function linkFor(method, urlMask) {
 	return trFor(method, urlMask)?.querySelector(`a.${CSS.PreviewLink}`)
 }
-function checkbox500For(method, urlMask) {
-	return trFor(method, urlMask)?.querySelector(`.${CSS.InternalServerErrorToggler} > input`)
-}
 function mockSelectorFor(method, urlMask) {
 	return trFor(method, urlMask)?.querySelector(`select.${CSS.MockSelector}`)
 }
@@ -458,6 +498,19 @@ function onError(error) {
 }
 
 
+function TimerIcon() {
+	return (
+		r('svg', { viewBox: '0 0 24 24' },
+			r('path', { d: 'M12 7H11v6l5 3.2.75-1.23-4.5-3z' })))
+}
+
+function CloudIcon() {
+	return (
+		r('svg', { viewBox: '0 0 24 24' },
+			r('path', { d: 'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.61 5.64 5.36 8.04 2.35 8.36 0 10.9 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4h2c0-2.76-1.86-5.08-4.4-5.78C8.61 6.88 10.2 6 12 6c3.03 0 5.5 2.47 5.5 5.5v.5H19c1.65 0 3 1.35 3 3s-1.35 3-3 3' })))
+}
+
+
 
 // Utils ============
 
@@ -504,91 +557,3 @@ function createSvgElement(tagName, props, ...children) {
 function useRef() {
 	return { current: null }
 }
-
-const HttpStatus = {
-	100: 'Continue',
-	101: 'Switching Protocols',
-	102: 'Processing',
-	103: 'Early Hints',
-	200: 'OK',
-	201: 'Created',
-	202: 'Accepted',
-	203: 'Non-Authoritative Information',
-	204: 'No Content',
-	205: 'Reset Content',
-	206: 'Partial Content',
-	207: 'Multi-Status',
-	208: 'Already Reported',
-	218: 'This is fine (Apache Web Server)',
-	226: 'IM Used',
-	300: 'Multiple Choices',
-	301: 'Moved Permanently',
-	302: 'Found',
-	303: 'See Other',
-	304: 'Not Modified',
-	306: 'Switch Proxy',
-	307: 'Temporary Redirect',
-	308: 'Resume Incomplete',
-	400: 'Bad Request',
-	401: 'Unauthorized',
-	402: 'Payment Required',
-	403: 'Forbidden',
-	404: 'Not Found',
-	405: 'Method Not Allowed',
-	406: 'Not Acceptable',
-	407: 'Proxy Authentication Required',
-	408: 'Request Timeout',
-	409: 'Conflict',
-	410: 'Gone',
-	411: 'Length Required',
-	412: 'Precondition Failed',
-	413: 'Request Entity Too Large',
-	414: 'Request-URI Too Long',
-	415: 'Unsupported Media Type',
-	416: 'Requested Range Not Satisfiable',
-	417: 'Expectation Failed',
-	418: 'I’m a teapot',
-	419: 'Page Expired (Laravel Framework)',
-	420: 'Method Failure (Spring Framework)',
-	421: 'Misdirected Request',
-	422: 'Unprocessable Entity',
-	423: 'Locked',
-	424: 'Failed Dependency',
-	426: 'Upgrade Required',
-	428: 'Precondition Required',
-	429: 'Too Many Requests',
-	431: 'Request Header Fields Too Large',
-	440: 'Login Time-out',
-	444: 'Connection Closed Without Response',
-	449: 'Retry With',
-	450: 'Blocked by Windows Parental Controls',
-	451: 'Unavailable For Legal Reasons',
-	494: 'Request Header Too Large',
-	495: 'SSL Certificate Error',
-	496: 'SSL Certificate Required',
-	497: 'HTTP Request Sent to HTTPS Port',
-	498: 'Invalid Token (Esri)',
-	499: 'Client Closed Request',
-	500: 'Internal Server Error',
-	501: 'Not Implemented',
-	502: 'Bad Gateway',
-	503: 'Service Unavailable',
-	504: 'Gateway Timeout',
-	505: 'HTTP Version Not Supported',
-	506: 'Variant Also Negotiates',
-	507: 'Insufficient Storage',
-	508: 'Loop Detected',
-	509: 'Bandwidth Limit Exceeded',
-	510: 'Not Extended',
-	511: 'Network Authentication Required',
-	520: 'Unknown Error',
-	521: 'Web Server Is Down',
-	522: 'Connection Timed Out',
-	523: 'Origin Is Unreachable',
-	524: 'A Timeout Occurred',
-	525: 'SSL Handshake Failed',
-	526: 'Invalid SSL Certificate',
-	527: 'Railgun Listener to Origin Error',
-	530: 'Origin DNS Error',
-	598: 'Network Read Timeout Error'
-}

package/src/MockBroker.js

@@ -60,6 +60,7 @@ export class MockBroker {
 
 	get file() { return this.currentMock.file }
 	get delay() { return this.currentMock.delay }
+	get proxied() { return !this.currentMock.file }
 	get status() { return parseFilename(this.file).status }
 	get temp500IsSelected() { return this.#isTemp500(this.file) }
 
@@ -85,6 +86,13 @@ export class MockBroker {
 	updateFile(filename) { this.currentMock.file = filename }
 	updateDelay(delayed) { this.currentMock.delay = Number(delayed) * config.delay }
 
+	updateProxied(proxied) {
+		if (proxied)
+			this.updateFile('')
+		else
+			this.selectDefaultFile()
+	}
+
 	setByMatchingComment(comment) {
 		for (const file of this.mocks)
 			if (includesComment(file, comment)) {

package/src/MockDispatcher.js

@@ -12,7 +12,7 @@ import { sendInternalServerError, sendNotFound, sendBadRequest } from './utils/h
 export async function dispatchMock(req, response) {
 	try {
 		const broker = mockBrokerCollection.getBrokerForUrl(req.method, req.url)
-		if (!broker) {
+		if (!broker || broker.proxied) {
 			if (config.proxyFallback)
 				await proxy(req, response)
 			else

package/src/Mockaton.test.js

@@ -174,7 +174,7 @@ for (const [file, body] of staticFiles)
 const server = Mockaton({
 	mocksDir: tmpDir,
 	staticDir: staticTmpDir,
-	delay: 40,
+	delay: 80,
 	onReady: () => {},
 	cookies: {
 		userA: 'CookieA',

package/src/ProxyRelay.js

@@ -1,4 +1,6 @@
 import { join } from 'node:path'
+import { existsSync } from 'node:fs'
+import { randomUUID } from 'node:crypto'
 import { write } from './utils/fs.js'
 import { config } from './config.js'
 import { extFor } from './utils/mime.js'
@@ -23,7 +25,9 @@ export async function proxy(req, response) {
 
 	if (config.collectProxied) {
 		const ext = extFor(proxyResponse.headers.get('content-type'))
-		const filename = makeMockFilename(req.url, req.method, proxyResponse.status, ext)
+		let filename = makeMockFilename(req.url, req.method, proxyResponse.status, ext)
+		if (existsSync(join(config.mocksDir, filename))) // TESTME
+			filename = makeMockFilename(req.url + `(${randomUUID()})`, req.method, proxyResponse.status, ext)
 		write(join(config.mocksDir, filename), body)
 	}
 }

package/src/StaticDispatcher.js

@@ -1,10 +1,10 @@
-import { join, resolve } from 'node:path'
+import { join } from 'node:path'
 import fs, { readFileSync, realpathSync } from 'node:fs'
 
 import { config } from './config.js'
 import { mimeFor } from './utils/mime.js'
 import { isDirectory, isFile } from './utils/fs.js'
-import { sendNotFound, sendInternalServerError } from './utils/http-response.js'
+import { sendInternalServerError } from './utils/http-response.js'
 
 
 export function isStatic(req) {
@@ -16,34 +16,27 @@ export function isStatic(req) {
 
 export async function dispatchStatic(req, response) {
 	const file = resolvedAllowedPath(req.url)
-	if (!file)
-		sendNotFound(response)
-	else if (req.headers.range)
+	if (req.headers.range)
 		await sendPartialContent(response, req.headers.range, file)
-	else
-		sendFile(response, file)
-}
-
-function resolvedAllowedPath(url) {
-	let candidate = resolve(join(config.staticDir, url))
-	if (isDirectory(candidate))
-		candidate = join(candidate, 'index.html')
-	if (!isFile(candidate))
-		return false
-	candidate = realpathSync(candidate)
-	if (candidate.startsWith(config.staticDir))
-		return candidate
-}
-
-function sendFile(response, file) {
-	if (!isFile(file))
-		sendNotFound(response)
 	else {
 		response.setHeader('Content-Type', mimeFor(file))
 		response.end(readFileSync(file, 'utf8'))
 	}
 }
 
+function resolvedAllowedPath(url) {
+	try {
+		let candidate = realpathSync(join(config.staticDir, url))
+		if (!candidate.startsWith(config.staticDir))
+			return false
+		if (isDirectory(candidate))
+			candidate = join(candidate, 'index.html')
+		if (isFile(candidate))
+			return candidate
+	}
+	catch {}
+}
+
 async function sendPartialContent(response, range, file) {
 	const { size } = await fs.promises.lstat(file)
 	let [start, end] = range.replace(/bytes=/, '').split('-').map(n => parseInt(n, 10))

package/src/mockBrokersCollection.js

@@ -104,9 +104,16 @@ export function extractAllComments() {
 }
 
 export function setMocksMatchingComment(comment) {
-	forEachBroker(broker => broker.setByMatchingComment(comment))
+	forEachBroker(broker =>
+		broker.setByMatchingComment(comment))
 }
 
+export function ensureAllRoutesHaveSelectedMock() {
+	forEachBroker(broker => {
+		if (broker.proxied)
+			broker.selectDefaultFile()
+	})
+}
 
 function forEachBroker(fn) {
 	for (const brokers of Object.values(collection))

package/src/utils/fs.js

@@ -14,6 +14,11 @@ export const listFilesRecursively = dir => {
 }
 
 export const write = (path, body) => {
-	mkdirSync(dirname(path), { recursive: true })
-	writeFileSync(path, body)
+	try {
+		mkdirSync(dirname(path), { recursive: true })
+		writeFileSync(path, body)
+	}
+	catch (err) {
+		console.error('Write access denied', err)
+	}
 }