mockaton 10.6.6 → 10.6.7

package/package.json

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

package/src/Api.js

@@ -107,7 +107,7 @@ async function selectCookie(req, response) {
 	if (error)
 		sendUnprocessableContent(response, error?.message || error)
 	else
-		sendOK(response)
+		sendJSON(response, cookie.list())
 }
 
 async function selectMock(req, response) {

package/src/ApiCommander.js

@@ -4,25 +4,16 @@ import { API, DF, LONG_POLL_SERVER_TIMEOUT } from './ApiConstants.js'
 /** Client for controlling Mockaton via its HTTP API */
 export class Commander {
 	#addr = ''
-	#then = a => a
-	#catch = e => { throw e }
 
 	constructor(addr) {
 		this.#addr = addr
 	}
 
-	setupPatchCallbacks(_then = undefined, _catch = undefined) {
-		if (_then) this.#then = _then
-		if (_catch) this.#catch = _catch
-	}
-
 	#patch = (api, body) => {
 		return fetch(this.#addr + api, {
 			method: 'PATCH',
 			body: JSON.stringify(body)
 		})
-			.then(this.#then)
-			.catch(this.#catch)
 	}
 
 	/** @returns {JsonPromise<State>} */

package/src/Dashboard.css

@@ -325,7 +325,7 @@ main {
 	}
 
 	.leftSide {
-		/* the width is set in js (it’s resizable) */
+		width: 50%; /* resizable in js */
 		padding: 16px;
 		border-right: 1px solid var(--colorSecondaryActionBorder);
 		user-select: none;

package/src/Dashboard.js

@@ -1,7 +1,7 @@
-import { createElement as r, createSvgElement as s, className, restoreFocus, deferred, Defer, Fragment, useRef } from './DashboardDom.js'
+import { createElement as r, createSvgElement as s, className, restoreFocus, Defer, Fragment, useRef } from './DashboardDom.js'
 import { AUTO_500_COMMENT, HEADER_FOR_502 } from './ApiConstants.js'
-import { parseFilename, extractComments } from './Filename.js'
-import { store, dittoSplitPaths } from './DashboardStore.js'
+import { store, dittoSplitPaths, BrokerRowModel } from './DashboardStore.js'
+import { parseFilename } from './Filename.js'
 
 
 const CSS = {
@@ -55,11 +55,10 @@ const FocusGroup = {
 	PreviewLink: 3
 }
 
+store.onError = onError
 store.render = render
 store.renderRow = renderRow
-store.setupPatchCallbacks(parseError, onError)
-store.fetchState().catch(onError)
-
+store.fetchState()
 initRealTimeUpdates()
 initKeyboardNavigation()
 
@@ -136,13 +135,12 @@ function GlobalDelayField() {
 }
 
 function BulkSelector() {
+	// TODO For a11y, this should be a `menu` instead of this `select`
 	const { comments } = store
-	// UX wise this should be a menu instead of this `select`.
-	// But this way is easier to implement, with a few hacks.
 	const firstOption = t`Pick Comment…`
 	function onChange() {
 		const value = this.value
-		this.value = firstOption // Hack 
+		this.value = firstOption // Hack
 		store.bulkSelectByComment(value)
 	}
 	const disabled = !comments.length
@@ -281,57 +279,44 @@ function MockList() {
 			r('tr', null,
 				r('th', { colspan: 2 + Number(store.canProxy) }),
 				r('th', null, method)),
-			rowsFor(method).map(Row)))
-
-	return rowsFor('*').map(Row)
-}
+			store.brokersAsRowsByMethod(method).map(Row)))
 
-function rowsFor(targetMethod) {
-	const sorted = store.brokersByMethodAsArray(targetMethod)
-	const urlMasksDittoed = dittoSplitPaths(sorted.map(r => r.urlMask))
-	return sorted.map((r, i) => ({
-		...r,
-		urlMaskDittoed: urlMasksDittoed[i]
-	}))
+	return store.brokersAsRowsByMethod('*').map(Row)
 }
 
-function Row({ method, urlMask, urlMaskDittoed, broker }, i) {
-	const key = Row.key(method, urlMask)
-	Row.ditto.set(key, urlMaskDittoed)
-	const { proxied, delayed, file } = broker.currentMock
+/**
+ * @param {BrokerRowModel} row
+ * @param {number} i
+ */
+function Row(row, i) {
+	const { method, urlMask } = row
 	return (
-		r('tr', { key },
+		r('tr', { key: Row.key(method, urlMask) },
 			store.canProxy && r('td', null,
-				ProxyToggler(method, urlMask, proxied)),
+				ProxyToggler(method, urlMask, row.proxied)),
 
 			r('td', null,
-				DelayRouteToggler(method, urlMask, delayed)),
+				DelayRouteToggler(method, urlMask, row.delayed)),
 
 			r('td', null,
-				InternalServerErrorToggler(method, urlMask, parseFilename(file).status === 500)),
+				InternalServerErrorToggler(method, urlMask, !row.proxied && row.selectedFileIs500)),
 
 			!store.groupByMethod && r('td', className(CSS.Method),
 				method),
 
 			r('td', null,
-				PreviewLink(method, urlMask, urlMaskDittoed, i === 0)),
+				PreviewLink(method, urlMask, row.urlMaskDittoed, i === 0)),
 
 			r('td', null,
-				MockSelector(broker))))
+				MockSelector(row))))
 }
 Row.key = (method, urlMask) => method + '::' + urlMask
-Row.ditto = new Map()
 
 function renderRow(method, urlMask) {
 	restoreFocus(() => {
 		unChooseOld()
-		const key = Row.key(method, urlMask)
-		trFor(key).replaceWith(Row({
-			method,
-			urlMask,
-			urlMaskDittoed: Row.ditto.get(key),
-			broker: store.brokerFor(method, urlMask)
-		}))
+		trFor(Row.key(method, urlMask))
+			.replaceWith(Row(store.brokerAsRow(method, urlMask)))
 		previewMock(method, urlMask)
 	})
 
@@ -365,91 +350,21 @@ function PreviewLink(method, urlMask, urlMaskDittoed, autofocus) {
 }
 
 
-/** @param {ClientMockBroker} broker */
-function MockSelector(broker) {
-	let selected = broker.currentMock.file
-	const selectedStatus = parseFilename(selected).status
-
-	const files = baseOptionsFor(broker.mocks, selectedStatus === 500)
-	if (store.canProxy && broker.currentMock.proxied) {
-		selected = t`Proxied`
-		files.push([selected, selected])
-	}
-
+/** @param {BrokerRowModel} row */
+function MockSelector(row) {
 	return (
 		r('select', {
 			onChange() { store.selectFile(this.value) },
 			autocomplete: 'off',
 			'aria-label': t`Mock Selector`,
-			disabled: files.length <= 1,
+			disabled: row.opts.length < 2,
 			...className(
 				CSS.MockSelector,
-				selected !== files[0][0] && CSS.nonDefault,
-				selectedStatus >= 400 && selectedStatus < 500 && CSS.status4xx)
-		}, files.map(([file, name]) => (
-			r('option', {
-				value: file,
-				selected: file === selected
-			}, name)))))
-}
-function baseOptionsFor(mocks, selectedIs500) {
-	return mocks
-		.filter(f => selectedIs500 || !f.includes(AUTO_500_COMMENT))
-		.map(f => [f, nameFor(f)])
-
-	function nameFor(file) {
-		const { status, ext } = parseFilename(file)
-		const comments = extractComments(file)
-		const isAutogen500 = comments.includes(AUTO_500_COMMENT)
-		return [
-			isAutogen500 ? '' : status,
-			ext === 'empty' || ext === 'unknown' ? '' : ext,
-			isAutogen500 ? t`Auto500` : comments.join(' ')
-		].filter(Boolean).join(' ')
-	}
+				row.selectedIdx > 0 && CSS.nonDefault,
+				row.selectedFileIs4xx && CSS.status4xx)
+		}, row.opts.map(([value, label, selected]) => 
+			r('option', { value, selected }, label))))
 }
-baseOptionsFor.test = function () {
-	(function ignoresAutoGen500WhenUnselected() {
-		const files = baseOptionsFor([
-			`api/user${AUTO_500_COMMENT}.GET.500.empty`
-		], false)
-		console.assert(files.length === 0)
-	}());
-
-	(function keepsNonAutoGen500WhenUnselected() {
-		const files = baseOptionsFor([
-			`api/user.GET.500.txt`
-		], false)
-		console.assert(files.length === 1)
-		console.assert(files[0][1] === t`500 txt`)
-	}());
-
-	(function renamesAutoGenFileToAuto500() {
-		const files = baseOptionsFor([
-			`api/user${AUTO_500_COMMENT}.GET.500.empty`
-		], true)
-		console.assert(files.length === 1)
-		console.assert(files[0][1] === t`Auto500`)
-	}());
-
-	(function filenameHasExtensionExceptWhenEmptyOrUnknown() {
-		const files = baseOptionsFor([
-			`api/user0.GET.200.empty`,
-			`api/user1.GET.200.unknown`,
-			`api/user2.GET.200.json`,
-			`api/user3(another json).GET.200.json`,
-		], true)
-		console.assert(deepEqual(files.map(([, n]) => n), [
-			// Think about, in cases like this, the only option the user
-			// has for discerning empty and unknown is on the Previewer Title
-			'200',
-			'200',
-			'200 json',
-			'200 json (another json)',
-		]))
-	}())
-}
-deferred(baseOptionsFor.test)
 
 
 function DelayRouteToggler(method, urlMask, checked) {
@@ -498,6 +413,7 @@ function StaticFilesList() {
 	const { staticBrokers, canProxy, groupByMethod } = store
 	if (!Object.keys(staticBrokers).length)
 		return null
+
 	const dp = dittoSplitPaths(Object.keys(staticBrokers)).map(([ditto, tail]) => ditto
 		? [r('span', className(CSS.dittoDir), ditto), tail]
 		: tail)
@@ -670,6 +586,7 @@ function PayloadViewerTitleWhenProxied({ mime, status, statusText, gatewayIsBad
 			' ' + mime))
 }
 
+// TODO indeterminate when there's store.delayJitter
 const SPINNER_DELAY = 80
 function PayloadViewerProgressBar() {
 	return (
@@ -696,8 +613,7 @@ async function previewMock(method, urlMask) {
 		if (proxied || file)
 			await updatePayloadViewer(proxied, file, response)
 	}
-	catch (err) {
-		onError(err)
+	catch {
 		payloadViewerCodeRef.current.replaceChildren()
 	}
 }
@@ -717,7 +633,7 @@ async function updatePayloadViewer(proxied, file, response) {
 				file,
 				statusText: response.statusText
 			}))
-	
+
 	if (mime.startsWith('image/'))  // Naively assumes GET.200
 		payloadViewerCodeRef.current.replaceChildren(
 			r('img', { src: URL.createObjectURL(await response.blob()) }))
@@ -725,7 +641,7 @@ async function updatePayloadViewer(proxied, file, response) {
 		const body = await response.text() || t`/* Empty Response Body */`
 		if (mime === 'application/json')
 			payloadViewerCodeRef.current.replaceChildren(r('span', className(CSS.json), SyntaxJSON(body)))
-		else if (isXML(mime)) 
+		else if (isXML(mime))
 			payloadViewerCodeRef.current.replaceChildren(SyntaxXML(body))
 		else
 			payloadViewerCodeRef.current.textContent = body
@@ -738,24 +654,25 @@ function isXML(mime) {
 }
 
 
-/** # Error */
-
-async function parseError(response) {
-	if (response.ok)
-		return response
-	if (response.status === 422)
-		throw await response.text()
-	throw response.statusText
-}
+async function onError(_error) {
+	let error = _error
 
-function onError(error) {
-	if (error?.name === 'AbortError')
-		return
-	if (error?.message === 'Failed to fetch')
-		showErrorToast(t`Looks like the Mockaton server is not running`)
-	else
-		showErrorToast(error || t`Unexpected Error`)
-	console.error(error)
+	if (_error instanceof Response) {
+		if (_error.status === 422)
+			error = await _error.text()
+		else if (_error.statusText)
+			error = _error.statusText
+	}
+	else {
+		if (error?.name === 'AbortError')
+			return
+		if (error?.message === 'Failed to fetch')
+			error = t`Looks like the Mockaton server is not running` // TODO clear Error if comes back in ui-sync
+		else
+			error = error || t`Unexpected Error`
+	}
+	showErrorToast(error)
+	console.error(_error)
 }
 
 function showErrorToast(msg) {
@@ -801,17 +718,17 @@ function initRealTimeUpdates() {
 	let oldSyncVersion = -1
 	let controller = new AbortController()
 
-	poll()
+	longPoll()
 	document.addEventListener('visibilitychange', () => {
 		if (document.hidden) {
 			controller.abort('_hidden_tab_')
 			controller = new AbortController()
 		}
 		else
-			poll()
+			longPoll()
 	})
 
-	async function poll() {
+	async function longPoll() {
 		try {
 			const response = await store.getSyncVersion(oldSyncVersion, controller.signal)
 			if (response.ok) {
@@ -820,16 +737,16 @@ function initRealTimeUpdates() {
 				if (oldSyncVersion !== syncVersion) { // because it could be < or >
 					oldSyncVersion = syncVersion
 					if (!skipUpdate)
-						store.fetchState().catch(onError)
+						store.fetchState()
 				}
-				poll()
+				longPoll()
 			}
 			else
 				throw response.status
 		}
 		catch (error) {
 			if (error !== '_hidden_tab_')
-				setTimeout(poll, 3000)
+				setTimeout(longPoll, 3000)
 		}
 	}
 }
@@ -969,8 +886,3 @@ function SyntaxXML(xml) {
 SyntaxXML.regex = /(<\/?|\/?>|\?>)|(?<=<\??\/?)([A-Za-z_:][\w:.-]*)|([A-Za-z_:][\w:.-]*)(?==)|("(?:[^"\\]|\\.)*")/g
 // Capture groups order:  [tagPunc, tagName, attrName, attrVal]
 
-
-function deepEqual(a, b) {
-	return JSON.stringify(a) === JSON.stringify(b)
-}
-

package/src/DashboardDom.js

@@ -1,7 +1,5 @@
 export function className(...args) {
-	return {
-		className: args.filter(Boolean).join(' ')
-	}
+	return { className: args.filter(Boolean).join(' ') }
 }
 
 export function createElement(tag, props, ...children) {

package/src/DashboardStore.js

@@ -1,15 +1,14 @@
 import { deferred } from './DashboardDom.js'
 import { Commander } from './ApiCommander.js'
-import { parseFilename } from './Filename.js'
+import { parseFilename, extractComments } from './Filename.js'
+import { AUTO_500_COMMENT } from './ApiConstants.js'
 
 
+const t = translation => translation[0]
 const mockaton = new Commander(location.origin)
 
 export const store = {
-	setupPatchCallbacks(_then, _catch) {
-		mockaton.setupPatchCallbacks(_then, _catch)
-	},
-
+	onError(err) {},
 	render() {},
 	renderRow(method, urlMask) {},
 
@@ -31,20 +30,18 @@ export const store = {
 
 	getSyncVersion: mockaton.getSyncVersion,
 
-	fetchState() {
-		return mockaton.getState().then(response => {
-			if (!response.ok)
-				throw response.status
-
-			response.json().then(state => {
-				Object.assign(store, state)
-				store.render()
-			})
-		})
+	async fetchState() {
+		try {
+			const response = await mockaton.getState()
+			if (!response.ok) throw response
+			Object.assign(store, await response.json())
+			store.render()
+		}
+		catch (error) { store.onError(error) }
 	},
 
 
-	leftSideWidth: window.innerWidth / 2,
+	leftSideWidth: undefined,
 
 	groupByMethod: initPreference('groupByMethod'),
 	toggleGroupByMethod() {
@@ -54,7 +51,6 @@ export const store = {
 	},
 
 
-
 	chosenLink: {
 		method: '',
 		urlMask: ''
@@ -67,37 +63,60 @@ export const store = {
 		store.chosenLink = { method, urlMask }
 	},
 
-	reset() {
-		store.setChosenLink('', '')
-		mockaton.reset()
-			.then(store.fetchState)
+	async reset() {
+		try {
+			const response = await mockaton.reset()
+			if (!response.ok) throw response
+			store.setChosenLink('', '')
+			await store.fetchState()
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	bulkSelectByComment(value) {
-		mockaton.bulkSelectByComment(value)
-			.then(store.fetchState)
+	async bulkSelectByComment(value) {
+		try {
+			const response = await mockaton.bulkSelectByComment(value)
+			if (!response.ok) throw response
+			await store.fetchState()
+		}
+		catch (error) { store.onError(error) }
 	},
 
-
-	setGlobalDelay(value) {
-		store.delay = value
-		mockaton.setGlobalDelay(value)
+	async setGlobalDelay(value) {
+		try {
+			const response = await mockaton.setGlobalDelay(value)
+			if (!response.ok) throw response
+			store.delay = value
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	selectCookie(name) {
-		store.cookies = store.cookies.map(([n]) => [n, n === name])
-		mockaton.selectCookie(name)
+	async selectCookie(name) {
+		try {
+			const response = await mockaton.selectCookie(name)
+			if (!response.ok) throw response
+			store.cookies = await response.json()
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	setProxyFallback(value) {
-		store.proxyFallback = value
-		mockaton.setProxyFallback(value)
-			.then(store.render)
+	async setProxyFallback(value) {
+		try {
+			const response = await mockaton.setProxyFallback(value)
+			if (!response.ok) throw response
+			store.proxyFallback = value
+			store.render()
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	setCollectProxied(checked) {
-		store.collectProxied = checked
-		mockaton.setCollectProxied(checked)
+	async setCollectProxied(checked) {
+		try {
+			const response = await mockaton.setCollectProxied(checked)
+			if (!response.ok) throw response
+			store.collectProxied = checked
+		}
+		catch (error) { store.onError(error) }
 	},
 
 
@@ -105,62 +124,103 @@ export const store = {
 		return store.brokersByMethod[method]?.[urlMask]
 	},
 
-	brokersByMethodAsArray(targetMethod = '*') {
+	_dittoCache: new Map(),
+
+	dittoedUrlFor(method, urlMask) {
+		return store._dittoCache.get(method + '::' + urlMask)
+	},
+
+	brokersAsRowsByMethod(method) {
+		const rows = store._brokersAsArray(method)
+		const urlMasksDittoed = dittoSplitPaths(rows.map(r => r.urlMask))
+		for (let i = 0; i < rows.length; i++) {
+			const r = rows[i]
+			r.setUrlMaskDittoed(urlMasksDittoed[i])
+			store._dittoCache.set(r.method + '::' + r.urlMask, r.urlMaskDittoed)
+		}
+		return rows
+	},
+
+	_brokersAsArray(byMethod = '*') {
 		const rows = []
 		for (const [method, brokers] of Object.entries(store.brokersByMethod))
-			if (targetMethod === '*' || targetMethod === method)
-				for (const [urlMask, broker] of Object.entries(brokers))
-					rows.push({ method, urlMask, broker })
+			if (byMethod === '*' || byMethod === method)
+				for (const broker of Object.values(brokers))
+					rows.push(new BrokerRowModel(broker, store.canProxy))
 		return rows.sort((a, b) => a.urlMask.localeCompare(b.urlMask))
 	},
 
+	brokerAsRow(method, urlMask) {
+		const row = new BrokerRowModel(store.brokerFor(method, urlMask), store.canProxy)
+		row.setUrlMaskDittoed(store.dittoedUrlFor(method, urlMask))
+		return row
+	},
+
 	previewLink(method, urlMask) {
 		store.setChosenLink(method, urlMask)
 		store.renderRow(method, urlMask)
 	},
 
-	selectFile(file) {
-		mockaton.select(file).then(async response => {
+	async selectFile(file) {
+		try {
+			const response = await mockaton.select(file)
+			if (!response.ok) throw response
 			const { method, urlMask } = parseFilename(file)
 			store.brokerFor(method, urlMask).currentMock = await response.json()
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
-		})
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	toggle500(method, urlMask) {
-		mockaton.toggle500(method, urlMask).then(async response => {
+	async toggle500(method, urlMask) {
+		try {
+			const response = await mockaton.toggle500(method, urlMask)
+			if (!response.ok) throw response
 			store.brokerFor(method, urlMask).currentMock = await response.json()
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
-		})
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	setProxied(method, urlMask, checked) {
-		mockaton.setRouteIsProxied(method, urlMask, checked).then(() => {
+	async setProxied(method, urlMask, checked) {
+		try {
+			const response = await mockaton.setRouteIsProxied(method, urlMask, checked)
+			if (!response.ok) throw response
 			store.brokerFor(method, urlMask).currentMock.proxied = checked
 			store.setChosenLink(method, urlMask)
 			store.renderRow(method, urlMask)
-		})
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	setDelayed(method, urlMask, checked) {
-		mockaton.setRouteIsDelayed(method, urlMask, checked).then(() => {
+	async setDelayed(method, urlMask, checked) {
+		try {
+			const response = await mockaton.setRouteIsDelayed(method, urlMask, checked)
+			if (!response.ok) throw response
 			store.brokerFor(method, urlMask).currentMock.delayed = checked
-		})
+		}
+		catch (error) { store.onError(error) }
 	},
 
 
-	staticBrokerFor(route) { return store.staticBrokers[route] },
-
-	setDelayedStatic(route, checked) {
-		store.staticBrokerFor(route).delayed = checked
-		mockaton.setStaticRouteIsDelayed(route, checked)
+	async setDelayedStatic(route, checked) {
+		try {
+			const response = await mockaton.setStaticRouteIsDelayed(route, checked)
+			if (!response.ok) throw response
+			store.staticBrokers[route].delayed = checked
+		}
+		catch (error) { store.onError(error) }
 	},
 
-	setStaticRouteStatus(route, status) {
-		store.staticBrokerFor(route).status = status
-		mockaton.setStaticRouteStatus(route, status)
+	async setStaticRouteStatus(route, status) {
+		try {
+			const response = await mockaton.setStaticRouteStatus(route, status)
+			if (!response.ok) throw response
+			store.staticBrokers[route].status = status
+		}
+		catch (error) { store.onError(error) }
 	}
 }
 
@@ -251,6 +311,156 @@ dittoSplitPaths.test = function () {
 }
 deferred(dittoSplitPaths.test)
 
+
+
+export class BrokerRowModel {
+	opts = /** @type {[key:string, label:string, selected:boolean][]} */ []
+	method = ''
+	urlMask = ''
+	urlMaskDittoed = ['', '']
+	#broker = /** @type {ClientMockBroker} */ {}
+	#canProxy = false
+
+	/**
+	 * @param {ClientMockBroker} broker
+	 * @param {boolean} canProxy
+	 */
+	constructor(broker, canProxy) {
+		this.#broker = broker
+		this.#canProxy = canProxy
+		const { method, urlMask } = parseFilename(broker.currentMock.file)
+		this.method = method
+		this.urlMask = urlMask
+		this.opts = this.#makeOptions()
+	}
+	
+	setUrlMaskDittoed(urlMaskDittoed) {
+		this.urlMaskDittoed = urlMaskDittoed
+	}
+
+	get delayed() {
+		return this.#broker.currentMock.delayed
+	}
+	get proxied() {
+		return this.#canProxy && this.#broker.currentMock.proxied
+	}
+	get selectedIdx() {
+		return this.opts.findIndex(([, , selected]) => selected)
+	}
+	get selectedFile() {
+		return this.#broker.currentMock.file
+	}
+	get selectedFileIs4xx() {
+		const { status } = parseFilename(this.selectedFile)
+		return status >= 400 && status < 500
+	}
+	get selectedFileIs500() {
+		const { status } = parseFilename(this.selectedFile)
+		return status === 500
+	}
+
+	#makeOptions() {
+		const proxied = this.proxied
+		const selectedIs500 = this.selectedFileIs500
+
+		const opts = this.#broker.mocks
+			.filter(f => selectedIs500 || !f.includes(AUTO_500_COMMENT))
+			.map(f => [
+				f,
+				this.#optionLabelFor(f),
+				!proxied && f === this.selectedFile
+			])
+
+		if (proxied)
+			opts.push([
+				'__PROXIED__',
+				t`Proxied`,
+				true
+			])
+
+		return opts
+	}
+
+	#optionLabelFor(file) {
+		const { status, ext } = parseFilename(file)
+		const comments = extractComments(file)
+		const isAutogen500 = comments.includes(AUTO_500_COMMENT)
+		return [
+			isAutogen500 ? '' : status,
+			ext === 'empty' || ext === 'unknown' ? '' : ext,
+			isAutogen500 ? t`Auto500` : comments.join(' ')
+		].filter(Boolean).join(' ')
+	}
+}
+
+const TestBrokerRowModelOptions = {
+	'ignores autogen500 when unselected'() {
+		const broker = {
+			currentMock: { file: 'api/other' },
+			mocks: [`api/user${AUTO_500_COMMENT}.GET.500.empty`]
+		}
+		const row = new BrokerRowModel(broker, false)
+		console.assert(row.opts.length === 0)
+	},
+
+	'keeps non-autogen500 when unselected'() {
+		const broker = {
+			currentMock: { file: 'api/other' },
+			mocks: [`api/user.GET.500.txt`]
+		}
+		const row = new BrokerRowModel(broker, false)
+		console.assert(row.opts.length === 1)
+		console.assert(row.opts[0][1] === t`500 txt`)
+	},
+
+	'renames autogen file to Auto500'() {
+		const broker = {
+			currentMock: { file: `api/user${AUTO_500_COMMENT}.GET.500.empty` },
+			mocks: [`api/user${AUTO_500_COMMENT}.GET.500.empty`]
+		}
+		const row = new BrokerRowModel(broker, false)
+		console.assert(row.opts.length === 1)
+		console.assert(row.opts[0][1] === t`Auto500`)
+	},
+
+	'filename has extension except when empty or unknown'() {
+		const broker = {
+			currentMock: { file: `api/other` },
+			mocks: [
+				`api/user0.GET.200.empty`,
+				`api/user1.GET.200.unknown`,
+				`api/user2.GET.200.json`,
+				`api/user3(another json).GET.200.json`,
+			]
+		}
+		const row = new BrokerRowModel(broker, false)
+		// Think about, in cases like this, the only option the user has
+		// for discerning empty and unknown is on the Previewer Title
+		console.assert(deepEqual(row.opts.map(([, n]) => n), [
+			'200',
+			'200',
+			'200 json',
+			'200 json (another json)',
+		]))
+	},
+
+	'appends "Proxied" label iff current is proxied'() {
+		const broker = {
+			currentMock: {
+				file: 'api/foo',
+				proxied: true
+			},
+			mocks: [`api/foo.GET.200.json`]
+		}
+		const row = new BrokerRowModel(broker, true)
+		console.assert(deepEqual(row.opts.map(([, n, selected]) => [n, selected]), [
+			['200 json', false],
+			[t`Proxied`, true]
+		]))
+	}
+}
+deferred(() => Object.values(TestBrokerRowModelOptions).forEach(t => t()))
+
 function deepEqual(a, b) {
 	return JSON.stringify(a) === JSON.stringify(b)
 }