imposters 0.1.0

package/src/ui/admin/partials.ts

@@ -0,0 +1,83 @@
+import { html } from "../html"
+import type { SafeHtml } from "../html"
+
+export interface AdminImposterData {
+  readonly id: string
+  readonly name: string
+  readonly port: number
+  readonly status: string
+  readonly protocol: string
+  readonly stubCount: number
+}
+
+const statusBadge = (status: string): SafeHtml => {
+  if (status === "running") {
+    return html`<span class="px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-700">running</span>`
+  }
+  if (status === "stopped") {
+    return html`<span class="px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-600">stopped</span>`
+  }
+  return html`<span class="px-2 py-0.5 rounded text-xs font-semibold bg-yellow-100 text-yellow-700">${status}</span>`
+}
+
+export const imposterRowPartial = (imp: AdminImposterData): SafeHtml => {
+  const isRunning = imp.status === "running"
+  return html`<tr id="row-${imp.id}" class="border-t hover:bg-gray-50">
+    <td class="py-3 px-4 font-medium">${imp.name}</td>
+    <td class="py-3 px-4 font-mono text-sm">${String(imp.port)}</td>
+    <td class="py-3 px-4">${statusBadge(imp.status)}</td>
+    <td class="py-3 px-4 text-sm text-gray-600">${imp.protocol}</td>
+    <td class="py-3 px-4 text-sm">${String(imp.stubCount)}</td>
+    <td class="py-3 px-4">
+      <div class="flex gap-2 items-center">
+        ${
+    isRunning
+      ? html`<button hx-post="/_ui/imposters/${imp.id}/stop" hx-target="#row-${imp.id}" hx-swap="outerHTML" class="text-orange-600 hover:text-orange-800 text-sm font-medium">Stop</button>`
+      : html`<button hx-post="/_ui/imposters/${imp.id}/start" hx-target="#row-${imp.id}" hx-swap="outerHTML" class="text-green-600 hover:text-green-800 text-sm font-medium">Start</button>`
+  }
+        <button hx-delete="/_ui/imposters/${imp.id}" hx-target="#imposter-list" hx-swap="innerHTML" hx-confirm="Delete this imposter?" class="text-red-500 hover:text-red-700 text-sm">Delete</button>
+        ${
+    isRunning
+      ? html`<a href="http://localhost:${
+        String(imp.port)
+      }/_admin" target="_blank" class="text-indigo-600 hover:text-indigo-800 text-sm">Open UI</a>`
+      : html``
+  }
+      </div>
+    </td>
+  </tr>`
+}
+
+export const imposterListPartial = (imposters: ReadonlyArray<AdminImposterData>): SafeHtml => {
+  if (imposters.length === 0) {
+    return html`<tr><td colspan="6" class="text-center py-8 text-gray-400">No imposters. Create one above.</td></tr>`
+  }
+  return imposters.reduce(
+    (acc, imp) => html`${acc}${imposterRowPartial(imp)}`,
+    html``
+  )
+}
+
+export const createFormPartial = (error?: string): SafeHtml =>
+  html`<div class="bg-white rounded-lg shadow p-4 mb-6">
+    <h2 class="text-lg font-semibold mb-3">Create Imposter</h2>
+    ${error ? html`<div class="bg-red-50 border border-red-200 text-red-700 rounded p-3 mb-3">${error}</div>` : html``}
+    <form hx-post="/_ui/imposters" hx-target="#imposter-list" hx-swap="innerHTML" class="flex flex-wrap gap-3 items-end">
+      <div>
+        <label class="block text-xs text-gray-500 mb-1">Name (optional)</label>
+        <input name="name" type="text" class="border rounded p-2 text-sm w-40" placeholder="My Service" />
+      </div>
+      <div>
+        <label class="block text-xs text-gray-500 mb-1">Port (optional)</label>
+        <input name="port" type="number" class="border rounded p-2 text-sm w-24" placeholder="auto" />
+      </div>
+      <div class="flex items-center gap-2">
+        <input name="autoStart" type="checkbox" checked class="rounded" id="auto-start" />
+        <label for="auto-start" class="text-sm text-gray-700">Auto-start</label>
+      </div>
+      <button type="submit" class="bg-gray-800 text-white px-4 py-2 rounded hover:bg-gray-700 text-sm">Create</button>
+    </form>
+  </div>`
+
+export const adminErrorPartial = (message: string): SafeHtml =>
+  html`<div class="bg-red-50 border border-red-200 text-red-700 rounded p-3 mb-3">${message}</div>`

package/src/ui/html.ts

@@ -0,0 +1,37 @@
+/** Escapes &, <, >, ", ' → HTML entities */
+export const escapeHtml = (s: string): string =>
+  s
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll("\"", "&quot;")
+    .replaceAll("'", "&#39;")
+
+/** Marker class for pre-escaped HTML */
+export class SafeHtml {
+  constructor(readonly value: string) {}
+}
+
+/** Wrap a raw HTML string to skip auto-escaping */
+export const raw = (s: string): SafeHtml => new SafeHtml(s)
+
+/** Tagged template: auto-escapes interpolations, passes SafeHtml through */
+export const html = (strings: TemplateStringsArray, ...values: Array<unknown>): SafeHtml => {
+  let result = ""
+  for (let i = 0; i < strings.length; i++) {
+    result += strings[i]
+    if (i < values.length) {
+      const v = values[i]
+      if (v instanceof SafeHtml) {
+        result += v.value
+      } else if (v == null) {
+        result += ""
+      } else if (typeof v === "string") {
+        result += escapeHtml(v)
+      } else {
+        result += escapeHtml(String(v))
+      }
+    }
+  }
+  return new SafeHtml(result)
+}

package/src/ui/layout.ts

@@ -0,0 +1,44 @@
+import { html, raw, type SafeHtml } from "./html"
+
+export interface LayoutOpts {
+  readonly title: string
+  readonly imposterName: string
+  readonly port: number
+  readonly activeTab: "dashboard" | "stubs" | "requests"
+}
+
+const navTab = (label: string, href: string, active: boolean): SafeHtml =>
+  active
+    ? html`<a href="${href}" class="px-4 py-2 bg-white text-indigo-700 rounded-t font-semibold border-b-2 border-indigo-600">${label}</a>`
+    : html`<a href="${href}" class="px-4 py-2 text-gray-300 hover:text-white hover:bg-indigo-500 rounded-t">${label}</a>`
+
+export const layout = (opts: LayoutOpts, content: SafeHtml): SafeHtml =>
+  html`<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${opts.title}</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+  <nav class="bg-indigo-700 text-white shadow-md">
+    <div class="max-w-5xl mx-auto px-4 py-3 flex items-center justify-between">
+      <div>
+        <span class="text-indigo-200 text-sm font-medium mr-2">Imposters</span>
+        <span class="text-lg font-bold">${opts.imposterName}</span>
+        <span class="ml-2 text-indigo-200 text-sm">port ${String(opts.port)}</span>
+      </div>
+      <div class="flex gap-1">
+        ${navTab("Dashboard", "/_admin", opts.activeTab === "dashboard")}
+        ${navTab("Stubs", "/_admin/stubs", opts.activeTab === "stubs")}
+        ${navTab("Requests", "/_admin/requests", opts.activeTab === "requests")}
+      </div>
+    </div>
+  </nav>
+  <main class="max-w-5xl mx-auto px-4 py-6">
+    ${raw(content.value)}
+  </main>
+</body>
+</html>`

package/src/ui/pages/dashboard.ts

@@ -0,0 +1,64 @@
+import type { ImposterConfig } from "../../domain/imposter"
+import type { RequestLogEntry } from "../../schemas/RequestLogSchema"
+import { html, raw } from "../html"
+import { layout } from "../layout"
+import { requestTablePartial } from "../partials"
+
+export interface DashboardData {
+  readonly config: ImposterConfig
+  readonly stubCount: number
+  readonly requestCount: number
+  readonly recentRequests: ReadonlyArray<RequestLogEntry>
+}
+
+const statCard = (label: string, value: string, color: string) =>
+  html`<div class="bg-white rounded-lg shadow p-4">
+    <div class="text-sm text-gray-500">${label}</div>
+    <div class="text-2xl font-bold ${color}">${value}</div>
+  </div>`
+
+export const dashboardPage = (data: DashboardData) => {
+  const statusColor = data.config.status === "running" ? "text-green-600" : "text-gray-500"
+
+  const content = html`
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+      ${statCard("Status", data.config.status, statusColor)}
+      ${statCard("Port", String(data.config.port), "text-gray-800")}
+      ${statCard("Stubs", String(data.stubCount), "text-indigo-600")}
+      ${statCard("Requests", String(data.requestCount), "text-indigo-600")}
+    </div>
+
+    <div class="bg-white rounded-lg shadow">
+      <h2 class="text-lg font-semibold px-4 pt-4 pb-2">
+        <a href="/_admin/requests" class="hover:text-indigo-600">Recent Requests &rarr;</a>
+      </h2>
+      ${
+    data.recentRequests.length === 0
+      ? html`<p class="px-4 pb-4 text-gray-400">No requests yet.</p>`
+      : html`<table class="w-full text-left">
+            <thead>
+              <tr class="text-xs text-gray-500 uppercase border-b">
+                <th class="py-2 px-3">Time</th>
+                <th class="py-2 px-3">Method</th>
+                <th class="py-2 px-3">Path</th>
+                <th class="py-2 px-3">Status</th>
+                <th class="py-2 px-3">Stub</th>
+                <th class="py-2 px-3">Duration</th>
+                <th class="py-2 px-3"></th>
+              </tr>
+            </thead>
+            <tbody>${raw(requestTablePartial(data.recentRequests).value)}</tbody>
+          </table>`
+  }
+    </div>`
+
+  return layout(
+    {
+      title: `${data.config.name} — Dashboard`,
+      imposterName: data.config.name,
+      port: data.config.port,
+      activeTab: "dashboard"
+    },
+    content
+  )
+}

package/src/ui/pages/request-detail.ts

@@ -0,0 +1,142 @@
+import type { ImposterConfig } from "../../domain/imposter"
+import type { RequestLogEntry } from "../../schemas/RequestLogSchema"
+import type { Stub } from "../../schemas/StubSchema"
+import { html, raw } from "../html"
+import type { SafeHtml } from "../html"
+import { layout } from "../layout"
+import { methodBadge, statusBadge, stubCardPartial } from "../partials"
+
+export interface RequestDetailData {
+  readonly config: ImposterConfig
+  readonly entry: RequestLogEntry
+  readonly matchedStub: Stub | null
+}
+
+const formatTimestamp = (ts: unknown): string => {
+  try {
+    const d = typeof (ts as { epochMillis: bigint }).epochMillis === "bigint"
+      ? new Date(Number((ts as { epochMillis: bigint }).epochMillis))
+      : new Date(String(ts))
+    return d.toISOString()
+  } catch {
+    return String(ts)
+  }
+}
+
+const formatBody = (body: unknown): string => {
+  if (body === undefined || body === null) return "(empty)"
+  if (typeof body === "string") {
+    try {
+      return JSON.stringify(JSON.parse(body), null, 2)
+    } catch {
+      return body
+    }
+  }
+  return JSON.stringify(body, null, 2)
+}
+
+const headersTable = (headers: Record<string, string>): SafeHtml => {
+  const entries = Object.entries(headers)
+  if (entries.length === 0) return html`<p class="text-gray-400 text-sm italic">No headers</p>`
+  const rows = entries.map(([k, v]) =>
+    html`<tr class="border-t"><td class="py-1 px-2 text-xs font-mono font-semibold text-gray-600">${k}</td><td class="py-1 px-2 text-xs font-mono">${v}</td></tr>`
+  )
+  return html`<table class="w-full"><tbody>${rows.reduce((a, r) => html`${a}${r}`, html``)}</tbody></table>`
+}
+
+const queryTable = (query: Record<string, string>): SafeHtml => {
+  const entries = Object.entries(query)
+  if (entries.length === 0) return html`<p class="text-gray-400 text-sm italic">No query parameters</p>`
+  const rows = entries.map(([k, v]) =>
+    html`<tr class="border-t"><td class="py-1 px-2 text-xs font-mono font-semibold text-gray-600">${k}</td><td class="py-1 px-2 text-xs font-mono">${v}</td></tr>`
+  )
+  return html`<table class="w-full"><tbody>${rows.reduce((a, r) => html`${a}${r}`, html``)}</tbody></table>`
+}
+
+export const requestDetailPage = (data: RequestDetailData): SafeHtml => {
+  const { entry, matchedStub } = data
+  const timestamp = formatTimestamp(entry.timestamp)
+  const reqBody = formatBody(entry.request.body)
+  const respBody = formatBody(entry.response.body)
+  const respHeaders = entry.response.headers ?? {}
+
+  const content = html`
+    <div class="mb-4">
+      <a href="/_admin/requests" class="text-indigo-600 hover:underline text-sm">&larr; Back to Requests</a>
+      <span class="text-gray-400 mx-2">/</span>
+      <span class="text-sm text-gray-500">Request ${entry.id}</span>
+    </div>
+
+    <div class="bg-white rounded-lg shadow p-4 mb-6">
+      <div class="flex items-center gap-3 mb-3">
+        ${methodBadge(entry.request.method)}
+        <span class="font-mono text-lg">${entry.request.path}</span>
+        ${statusBadge(entry.response.status)}
+        <span class="text-sm text-gray-500">${String(entry.duration)}ms</span>
+      </div>
+      <div class="text-sm text-gray-500">
+        <span>Timestamp: ${timestamp}</span>
+        ${
+    entry.response.matchedStubId
+      ? html`<span class="ml-4">Matched Stub: <span class="font-mono text-indigo-600">${entry.response.matchedStubId}</span></span>`
+      : html`<span class="ml-4 text-orange-500">No matching stub</span>`
+  }
+      </div>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+      <div>
+        <h3 class="text-lg font-semibold mb-3">Request</h3>
+        <div class="bg-white rounded-lg shadow p-4 space-y-3">
+          <div>
+            <h4 class="text-sm font-medium text-gray-700 mb-1">Headers</h4>
+            ${headersTable(entry.request.headers as Record<string, string>)}
+          </div>
+          <div>
+            <h4 class="text-sm font-medium text-gray-700 mb-1">Query Parameters</h4>
+            ${queryTable(entry.request.query as Record<string, string>)}
+          </div>
+          <div>
+            <h4 class="text-sm font-medium text-gray-700 mb-1">Body</h4>
+            <pre class="bg-gray-50 border rounded p-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap max-h-64 overflow-y-auto">${reqBody}</pre>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-lg font-semibold mb-3">Response</h3>
+        <div class="bg-white rounded-lg shadow p-4 space-y-3">
+          <div class="flex items-center gap-2">
+            ${statusBadge(entry.response.status)}
+          </div>
+          <div>
+            <h4 class="text-sm font-medium text-gray-700 mb-1">Headers</h4>
+            ${headersTable(respHeaders as Record<string, string>)}
+          </div>
+          <div>
+            <h4 class="text-sm font-medium text-gray-700 mb-1">Body</h4>
+            <pre class="bg-gray-50 border rounded p-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap max-h-64 overflow-y-auto">${respBody}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    ${
+    matchedStub !== null
+      ? html`<div>
+          <h3 class="text-lg font-semibold mb-3">Matched Stub</h3>
+          ${raw(stubCardPartial(matchedStub).value)}
+        </div>`
+      : html``
+  }`
+
+  return layout(
+    {
+      title: `${data.config.name} — Request ${entry.id}`,
+      imposterName: data.config.name,
+      port: data.config.port,
+      activeTab: "requests"
+    },
+    content
+  )
+}

package/src/ui/pages/requests.ts

@@ -0,0 +1,141 @@
+import type { ImposterConfig } from "../../domain/imposter"
+import type { RequestLogEntry } from "../../schemas/RequestLogSchema"
+import { html, raw } from "../html"
+import type { SafeHtml } from "../html"
+import { layout } from "../layout"
+import { requestTablePartial, statusBadge } from "../partials"
+
+export interface RequestsPageData {
+  readonly config: ImposterConfig
+  readonly entries: ReadonlyArray<RequestLogEntry>
+}
+
+const testRequestForm = (_port: number): SafeHtml =>
+  html`<details class="bg-white rounded-lg shadow p-4 mb-6">
+    <summary class="text-lg font-semibold cursor-pointer">Send Test Request</summary>
+    <form hx-post="/_admin/requests/test" hx-target="#test-result" hx-swap="innerHTML" class="mt-3 space-y-3">
+      <div class="grid grid-cols-2 gap-3">
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Method</label>
+          <select name="method" class="w-full border rounded p-2 text-sm">
+            <option value="GET">GET</option>
+            <option value="POST">POST</option>
+            <option value="PUT">PUT</option>
+            <option value="PATCH">PATCH</option>
+            <option value="DELETE">DELETE</option>
+            <option value="HEAD">HEAD</option>
+            <option value="OPTIONS">OPTIONS</option>
+          </select>
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700 mb-1">Path</label>
+          <input name="path" type="text" value="/" class="w-full border rounded p-2 text-sm font-mono" placeholder="/api/test" />
+        </div>
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Content-Type</label>
+        <select name="contentType" class="w-full border rounded p-2 text-sm">
+          <option value="application/json">application/json</option>
+          <option value="text/plain">text/plain</option>
+          <option value="application/x-www-form-urlencoded">application/x-www-form-urlencoded</option>
+          <option value="application/xml">application/xml</option>
+        </select>
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Headers (one per line: Key: Value)</label>
+        <textarea name="headers" rows="2" class="w-full border rounded p-2 text-sm font-mono" placeholder="Authorization: Bearer token123"></textarea>
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Body</label>
+        <textarea name="body" rows="3" class="w-full border rounded p-2 text-sm font-mono" placeholder='{"key": "value"}'></textarea>
+      </div>
+      <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 text-sm">Send Request</button>
+    </form>
+    <div id="test-result" class="mt-3"></div>
+  </details>`
+
+const filterBar = (): SafeHtml =>
+  html`<div class="bg-white rounded-lg shadow p-4 mb-6">
+    <form hx-get="/_admin/requests/list" hx-target="#request-table-body" hx-swap="innerHTML" class="flex flex-wrap gap-3 items-end">
+      <div>
+        <label class="block text-xs text-gray-500 mb-1">Method</label>
+        <select name="method" class="border rounded p-1.5 text-sm">
+          <option value="">All</option>
+          <option value="GET">GET</option>
+          <option value="POST">POST</option>
+          <option value="PUT">PUT</option>
+          <option value="PATCH">PATCH</option>
+          <option value="DELETE">DELETE</option>
+        </select>
+      </div>
+      <div>
+        <label class="block text-xs text-gray-500 mb-1">Path</label>
+        <input name="path" type="text" class="border rounded p-1.5 text-sm font-mono w-40" placeholder="/api/..." />
+      </div>
+      <div>
+        <label class="block text-xs text-gray-500 mb-1">Status</label>
+        <input name="status" type="text" class="border rounded p-1.5 text-sm font-mono w-20" placeholder="200" />
+      </div>
+      <button type="submit" class="bg-indigo-600 text-white px-3 py-1.5 rounded hover:bg-indigo-700 text-sm">Filter</button>
+      <button type="button" hx-delete="/_admin/requests" hx-target="#request-table-body" hx-swap="innerHTML" hx-confirm="Clear all request logs?" class="bg-red-50 text-red-600 border border-red-200 px-3 py-1.5 rounded hover:bg-red-100 text-sm ml-auto">Clear Log</button>
+    </form>
+  </div>`
+
+export const requestsPage = (data: RequestsPageData): SafeHtml => {
+  const content = html`
+    ${testRequestForm(data.config.port)}
+    ${filterBar()}
+    <div class="bg-white rounded-lg shadow overflow-x-auto">
+      <table class="w-full text-left">
+        <thead>
+          <tr class="text-xs text-gray-500 uppercase border-b">
+            <th class="py-2 px-3">Time</th>
+            <th class="py-2 px-3">Method</th>
+            <th class="py-2 px-3">Path</th>
+            <th class="py-2 px-3">Status</th>
+            <th class="py-2 px-3">Stub</th>
+            <th class="py-2 px-3">Duration</th>
+            <th class="py-2 px-3"></th>
+          </tr>
+        </thead>
+        <tbody id="request-table-body">
+          ${raw(requestTablePartial(data.entries.slice().reverse()).value)}
+        </tbody>
+      </table>
+    </div>`
+
+  return layout(
+    {
+      title: `${data.config.name} — Requests`,
+      imposterName: data.config.name,
+      port: data.config.port,
+      activeTab: "requests"
+    },
+    content
+  )
+}
+
+export const testResultPartial = (
+  result: { status: number; headers: Record<string, string>; body: string; duration: number }
+): SafeHtml => {
+  const headerRows = Object.entries(result.headers).map(([k, v]) =>
+    html`<tr class="border-t"><td class="py-1 px-2 text-xs font-mono text-gray-600">${k}</td><td class="py-1 px-2 text-xs font-mono">${v}</td></tr>`
+  )
+  return html`<div class="bg-gray-50 rounded p-3 border">
+    <div class="flex items-center gap-3 mb-2">
+      <span class="font-semibold text-sm">Response</span>
+      ${statusBadge(result.status)}
+      <span class="text-xs text-gray-500">${String(result.duration)}ms</span>
+    </div>
+    ${
+    headerRows.length > 0
+      ? html`<table class="w-full mb-2"><thead><tr class="text-xs text-gray-500"><th class="text-left px-2">Header</th><th class="text-left px-2">Value</th></tr></thead><tbody>${
+        headerRows.reduce((a, r) => html`${a}${r}`, html``)
+      }</tbody></table>`
+      : html``
+  }
+    <pre class="bg-white border rounded p-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap max-h-64 overflow-y-auto">${
+    result.body || "(empty body)"
+  }</pre>
+  </div>`
+}

package/src/ui/pages/stubs.ts

@@ -0,0 +1,52 @@
+import type { ImposterConfig } from "../../domain/imposter"
+import type { Stub } from "../../schemas/StubSchema"
+import { html, raw } from "../html"
+import { layout } from "../layout"
+import { stubListPartial } from "../partials"
+
+export interface StubsPageData {
+  readonly config: ImposterConfig
+  readonly stubs: ReadonlyArray<Stub>
+}
+
+const addStubForm = () =>
+  html`<div class="bg-white rounded-lg shadow p-4 mb-6">
+    <h2 class="text-lg font-semibold mb-3">Add Stub</h2>
+    <form hx-post="/_admin/stubs" hx-target="#stub-list" hx-swap="innerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
+      <div class="mb-3">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Predicates (JSON array)</label>
+        <textarea name="predicates" rows="3" class="w-full border rounded p-2 font-mono text-sm" placeholder="[]">[]</textarea>
+      </div>
+      <div class="mb-3">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Responses (JSON array, at least 1)</label>
+        <textarea name="responses" rows="4" class="w-full border rounded p-2 font-mono text-sm" placeholder='[{"status": 200, "body": {}}]'></textarea>
+      </div>
+      <div class="mb-3">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Response Mode</label>
+        <select name="responseMode" class="border rounded p-2 text-sm">
+          <option value="sequential">sequential</option>
+          <option value="random">random</option>
+          <option value="repeat">repeat</option>
+        </select>
+      </div>
+      <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700 text-sm">Add Stub</button>
+    </form>
+  </div>`
+
+export const stubsPage = (data: StubsPageData) => {
+  const content = html`
+    ${addStubForm()}
+    <div id="stub-list">
+      ${raw(stubListPartial(data.stubs).value)}
+    </div>`
+
+  return layout(
+    {
+      title: `${data.config.name} — Stubs`,
+      imposterName: data.config.name,
+      port: data.config.port,
+      activeTab: "stubs"
+    },
+    content
+  )
+}