imposters 0.1.0

package/src/services/RequestLogger.ts

@@ -0,0 +1,87 @@
+import type { Queue, Scope } from "effect"
+import { Context, Effect, HashMap, Layer, PubSub, Ref } from "effect"
+import type { RequestLogEntry } from "../schemas/RequestLogSchema"
+
+const MAX_ENTRIES = 100
+
+export interface RequestLoggerShape {
+  readonly log: (entry: RequestLogEntry) => Effect.Effect<void>
+  readonly getEntries: (
+    imposterId: string,
+    opts?: { limit?: number; method?: string; path?: string; status?: number }
+  ) => Effect.Effect<ReadonlyArray<RequestLogEntry>>
+  readonly getCount: (imposterId: string) => Effect.Effect<number>
+  readonly clear: (imposterId: string) => Effect.Effect<void>
+  readonly subscribe: Effect.Effect<Queue.Dequeue<RequestLogEntry>, never, Scope.Scope>
+  readonly getEntryById: (imposterId: string, entryId: string) => Effect.Effect<RequestLogEntry | null>
+  readonly removeImposter: (imposterId: string) => Effect.Effect<void>
+}
+
+export class RequestLogger extends Context.Tag("RequestLogger")<RequestLogger, RequestLoggerShape>() {}
+
+export const RequestLoggerLive = Layer.scoped(
+  RequestLogger,
+  Effect.gen(function*() {
+    const storeRef = yield* Ref.make(HashMap.empty<string, Array<RequestLogEntry>>())
+    const pubsub = yield* PubSub.sliding<RequestLogEntry>(256)
+
+    const log = (entry: RequestLogEntry): Effect.Effect<void> =>
+      Effect.gen(function*() {
+        yield* Ref.update(storeRef, (store) => {
+          const existing = HashMap.get(store, entry.imposterId)
+          const entries = existing._tag === "Some" ? existing.value : []
+          const updated = [...entries, entry].slice(-MAX_ENTRIES)
+          return HashMap.set(store, entry.imposterId, updated)
+        })
+        yield* PubSub.publish(pubsub, entry)
+      })
+
+    const getEntries = (
+      imposterId: string,
+      opts?: { limit?: number; method?: string; path?: string; status?: number }
+    ): Effect.Effect<ReadonlyArray<RequestLogEntry>> =>
+      Ref.get(storeRef).pipe(
+        Effect.map((store) => {
+          const existing = HashMap.get(store, imposterId)
+          let entries = existing._tag === "Some" ? existing.value : []
+          if (opts?.method !== undefined) {
+            entries = entries.filter((e) => e.request.method.toUpperCase() === opts.method!.toUpperCase())
+          }
+          if (opts?.path !== undefined) {
+            entries = entries.filter((e) => e.request.path === opts.path)
+          }
+          if (opts?.status !== undefined) {
+            entries = entries.filter((e) => e.response.status === opts.status)
+          }
+          const limit = opts?.limit ?? 50
+          return entries.slice(-limit)
+        })
+      )
+
+    const getCount = (imposterId: string): Effect.Effect<number> =>
+      Ref.get(storeRef).pipe(
+        Effect.map((store) => {
+          const existing = HashMap.get(store, imposterId)
+          return existing._tag === "Some" ? existing.value.length : 0
+        })
+      )
+
+    const clear = (imposterId: string): Effect.Effect<void> =>
+      Ref.update(storeRef, (store) => HashMap.set(store, imposterId, []))
+
+    const subscribe: Effect.Effect<Queue.Dequeue<RequestLogEntry>, never, Scope.Scope> = PubSub.subscribe(pubsub)
+
+    const getEntryById = (imposterId: string, entryId: string): Effect.Effect<RequestLogEntry | null> =>
+      Ref.get(storeRef).pipe(
+        Effect.map((store) => {
+          const existing = HashMap.get(store, imposterId)
+          if (existing._tag === "None") return null
+          return existing.value.find((e) => e.id === entryId) ?? null
+        })
+      )
+
+    const removeImposter = (imposterId: string): Effect.Effect<void> => Ref.update(storeRef, HashMap.remove(imposterId))
+
+    return { log, getEntries, getCount, clear, subscribe, getEntryById, removeImposter } satisfies RequestLoggerShape
+  })
+)

package/src/services/Uuid.ts

@@ -0,0 +1,9 @@
+import { Context, type Effect } from "effect"
+
+export class Uuid extends Context.Tag("UuidService")<
+  Uuid,
+  {
+    readonly generate: Effect.Effect<string>
+    readonly generateShort: Effect.Effect<string>
+  }
+>() {}

package/src/services/UuidLive.ts

@@ -0,0 +1,9 @@
+import * as Effect from "effect/Effect"
+import * as Layer from "effect/Layer"
+import { v4 } from "uuid"
+import { Uuid } from "./Uuid"
+
+export const UuidLive = Layer.succeed(Uuid, {
+  generate: Effect.sync(() => v4()),
+  generateShort: Effect.sync(() => v4().substring(0, 8))
+})

package/src/types/bun.d.ts

@@ -0,0 +1,6 @@
+declare const Bun: {
+  serve(options: {
+    readonly port: number
+    readonly fetch: (request: Request) => Promise<Response>
+  }): { readonly port: number; stop(closeActive: boolean): void }
+}

package/src/ui/UiRouter.ts

@@ -0,0 +1,278 @@
+import { Effect, Ref } from "effect"
+import type { ImposterConfig } from "../domain/imposter"
+import type { ImposterRepositoryShape } from "../repositories/ImposterRepository"
+import { NonEmptyString } from "../schemas/common"
+import type { Stub } from "../schemas/StubSchema"
+import type { RequestLoggerShape } from "../services/RequestLogger"
+import { dashboardPage } from "./pages/dashboard"
+import { requestDetailPage } from "./pages/request-detail"
+import { requestsPage, testResultPartial } from "./pages/requests"
+import { stubsPage } from "./pages/stubs"
+import { errorPartial, requestTablePartial, stubListPartial } from "./partials"
+
+export interface UiDeps {
+  readonly id: string
+  readonly config: ImposterConfig
+  readonly stubsRef: Ref.Ref<ReadonlyArray<Stub>>
+  readonly repo: ImposterRepositoryShape
+  readonly requestLogger: RequestLoggerShape
+  readonly runPromise: <A>(effect: Effect.Effect<A>) => Promise<A>
+}
+
+const htmlResponse = (body: string, status = 200): Response =>
+  new Response(body, {
+    status,
+    headers: { "content-type": "text/html; charset=utf-8" }
+  })
+
+const parseStubIdFromPath = (path: string): string | null => {
+  const match = path.match(/^\/stubs\/(.+)$/)
+  return match ? match[1]! : null
+}
+
+export const makeUiRouter = (deps: UiDeps) => async (request: Request): Promise<Response | null> => {
+  const url = new URL(request.url)
+  if (!url.pathname.startsWith("/_admin")) return null
+
+  const path = url.pathname.slice("/_admin".length) || "/"
+  const method = request.method.toUpperCase()
+
+  // GET / — dashboard
+  if (method === "GET" && (path === "/" || path === "")) {
+    return deps.runPromise(
+      Effect.gen(function*() {
+        const stubs = yield* Ref.get(deps.stubsRef)
+        const requestCount = yield* deps.requestLogger.getCount(deps.id)
+        const recentRequests = yield* deps.requestLogger.getEntries(deps.id, { limit: 10 })
+        return htmlResponse(
+          dashboardPage({
+            config: deps.config,
+            stubCount: stubs.length,
+            requestCount,
+            recentRequests: recentRequests.slice().reverse()
+          }).value
+        )
+      })
+    )
+  }
+
+  // GET /stubs — stubs page
+  if (method === "GET" && path === "/stubs") {
+    return deps.runPromise(
+      Effect.gen(function*() {
+        const stubs = yield* Ref.get(deps.stubsRef)
+        return htmlResponse(stubsPage({ config: deps.config, stubs }).value)
+      })
+    )
+  }
+
+  // POST /stubs — add stub
+  if (method === "POST" && path === "/stubs") {
+    try {
+      const formData = await request.formData()
+      const predicatesRaw = formData.get("predicates") as string | null
+      const responsesRaw = formData.get("responses") as string | null
+      const responseMode = (formData.get("responseMode") as string | null) || "sequential"
+
+      if (!responsesRaw) {
+        return htmlResponse(errorPartial("Responses field is required.").value, 200)
+      }
+
+      let predicates: unknown
+      let responses: unknown
+      try {
+        predicates = JSON.parse(predicatesRaw || "[]")
+        responses = JSON.parse(responsesRaw)
+      } catch {
+        return htmlResponse(errorPartial("Invalid JSON in predicates or responses.").value, 200)
+      }
+
+      if (!Array.isArray(responses) || responses.length === 0) {
+        return htmlResponse(errorPartial("Responses must be a non-empty array.").value, 200)
+      }
+
+      const stubId = NonEmptyString.make(crypto.randomUUID().slice(0, 8))
+      const stub: Stub = {
+        id: stubId,
+        predicates: predicates as Stub["predicates"],
+        responses: responses as unknown as Stub["responses"],
+        responseMode: responseMode as Stub["responseMode"]
+      }
+
+      return await deps.runPromise(
+        Effect.gen(function*() {
+          yield* deps.repo.addStub(deps.id, stub).pipe(
+            Effect.catchAll(() => Effect.void)
+          )
+          const updated = yield* deps.repo.getStubs(deps.id).pipe(
+            Effect.catchAll(() => Effect.succeed([] as ReadonlyArray<Stub>))
+          )
+          yield* Ref.set(deps.stubsRef, updated)
+          return htmlResponse(stubListPartial(updated).value)
+        })
+      )
+    } catch {
+      return htmlResponse(errorPartial("Failed to parse form data.").value, 200)
+    }
+  }
+
+  // DELETE /stubs/:id — delete stub
+  const deleteStubId = method === "DELETE" ? parseStubIdFromPath(path) : null
+  if (deleteStubId !== null) {
+    return deps.runPromise(
+      Effect.gen(function*() {
+        yield* deps.repo.removeStub(deps.id, deleteStubId).pipe(
+          Effect.catchAll(() => Effect.void)
+        )
+        const updated = yield* deps.repo.getStubs(deps.id).pipe(
+          Effect.catchAll(() => Effect.succeed([] as ReadonlyArray<Stub>))
+        )
+        yield* Ref.set(deps.stubsRef, updated)
+        return htmlResponse(stubListPartial(updated).value)
+      })
+    )
+  }
+
+  // PUT /stubs/:id — update stub
+  const putStubId = method === "PUT" ? parseStubIdFromPath(path) : null
+  if (putStubId !== null) {
+    try {
+      const formData = await request.formData()
+      const predicatesRaw = formData.get("predicates") as string | null
+      const responsesRaw = formData.get("responses") as string | null
+      const responseMode = formData.get("responseMode") as string | null
+
+      return await deps.runPromise(
+        Effect.gen(function*() {
+          yield* deps.repo.updateStub(deps.id, putStubId, (existing) => ({
+            ...existing,
+            ...(predicatesRaw ? { predicates: JSON.parse(predicatesRaw) } : {}),
+            ...(responsesRaw ? { responses: JSON.parse(responsesRaw) } : {}),
+            ...(responseMode ? { responseMode: responseMode as Stub["responseMode"] } : {})
+          })).pipe(Effect.catchAll(() => Effect.void))
+          const updated = yield* deps.repo.getStubs(deps.id).pipe(
+            Effect.catchAll(() => Effect.succeed([] as ReadonlyArray<Stub>))
+          )
+          yield* Ref.set(deps.stubsRef, updated)
+          return htmlResponse(stubListPartial(updated).value)
+        })
+      )
+    } catch {
+      return htmlResponse(errorPartial("Failed to parse form data.").value, 200)
+    }
+  }
+
+  // GET /requests — full page
+  if (method === "GET" && path === "/requests") {
+    return deps.runPromise(
+      Effect.gen(function*() {
+        const entries = yield* deps.requestLogger.getEntries(deps.id, { limit: 100 })
+        return htmlResponse(requestsPage({ config: deps.config, entries }).value)
+      })
+    )
+  }
+
+  // GET /requests/list — HTMX partial (filtered table body)
+  if (method === "GET" && path === "/requests/list") {
+    const params = url.searchParams
+    return deps.runPromise(
+      Effect.gen(function*() {
+        const opts: { limit?: number; method?: string; path?: string; status?: number } = { limit: 100 }
+        const methodFilter = params.get("method")
+        if (methodFilter) opts.method = methodFilter
+        const pathFilter = params.get("path")
+        if (pathFilter) opts.path = pathFilter
+        const statusFilter = params.get("status")
+        if (statusFilter) opts.status = Number(statusFilter)
+        const entries = yield* deps.requestLogger.getEntries(deps.id, opts)
+        return htmlResponse(requestTablePartial(entries.slice().reverse()).value)
+      })
+    )
+  }
+
+  // POST /requests/test — send test request to own port
+  if (method === "POST" && path === "/requests/test") {
+    try {
+      const formData = await request.formData()
+      const testMethod = (formData.get("method") as string) || "GET"
+      const testPath = (formData.get("path") as string) || "/"
+      const testBody = formData.get("body") as string | null
+      const testContentType = (formData.get("contentType") as string) || "application/json"
+      const testHeadersRaw = (formData.get("headers") as string) || ""
+
+      const headers: Record<string, string> = {}
+      if (testContentType && testBody) {
+        headers["content-type"] = testContentType
+      }
+      for (const line of testHeadersRaw.split("\n")) {
+        const colonIdx = line.indexOf(":")
+        if (colonIdx > 0) {
+          headers[line.slice(0, colonIdx).trim()] = line.slice(colonIdx + 1).trim()
+        }
+      }
+
+      const startTime = Date.now()
+      const testResp = await fetch(`http://localhost:${deps.config.port}${testPath}`, {
+        method: testMethod,
+        headers,
+        ...(testBody && testMethod !== "GET" && testMethod !== "HEAD" ? { body: testBody } : {})
+      })
+      const duration = Date.now() - startTime
+
+      const respBody = await testResp.text()
+      const respHeaders: Record<string, string> = {}
+      testResp.headers.forEach((val, key) => {
+        respHeaders[key] = val
+      })
+
+      return htmlResponse(
+        testResultPartial({ status: testResp.status, headers: respHeaders, body: respBody, duration }).value
+      )
+    } catch (err) {
+      return htmlResponse(
+        `<div class="bg-red-50 border border-red-200 text-red-700 rounded p-3">Request failed: ${String(err)}</div>`
+      )
+    }
+  }
+
+  // DELETE /requests — clear log
+  if (method === "DELETE" && path === "/requests") {
+    return deps.runPromise(
+      Effect.gen(function*() {
+        yield* deps.requestLogger.clear(deps.id)
+        return htmlResponse(requestTablePartial([]).value)
+      })
+    )
+  }
+
+  // GET /requests/:id — detail page
+  if (method === "GET" && path.startsWith("/requests/")) {
+    const entryId = path.slice("/requests/".length)
+    if (entryId && !entryId.includes("/")) {
+      return deps.runPromise(
+        Effect.gen(function*() {
+          const entry = yield* deps.requestLogger.getEntryById(deps.id, entryId)
+          if (entry === null) {
+            return htmlResponse("<h1>Request not found</h1>", 404)
+          }
+          // Try to find matched stub
+          let matchedStub: Stub | null = null
+          if (entry.response.matchedStubId) {
+            try {
+              const stubs = yield* deps.repo.getStubs(deps.id).pipe(
+                Effect.catchAll(() => Effect.succeed([] as ReadonlyArray<Stub>))
+              )
+              matchedStub = stubs.find((s) => s.id === entry.response.matchedStubId) ?? null
+            } catch {
+              // ignore
+            }
+          }
+          return htmlResponse(requestDetailPage({ config: deps.config, entry, matchedStub }).value)
+        })
+      )
+    }
+  }
+
+  // Fallback: 404 within /_admin
+  return htmlResponse("<h1>Not Found</h1>", 404)
+}

package/src/ui/admin/AdminLayout.ts

@@ -0,0 +1,36 @@
+import { html, raw } from "../html"
+import type { SafeHtml } from "../html"
+
+export interface AdminLayoutOpts {
+  readonly title: string
+  readonly activeTab?: "dashboard"
+}
+
+export const adminLayout = (opts: AdminLayoutOpts, 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-gray-800 text-white shadow-md">
+    <div class="max-w-6xl mx-auto px-4 py-3 flex items-center justify-between">
+      <div class="flex items-center gap-3">
+        <span class="text-lg font-bold">Imposters</span>
+        <span class="text-gray-400 text-sm">Admin</span>
+      </div>
+      <div class="flex gap-3 items-center">
+        <a href="/_ui" class="px-3 py-1.5 bg-gray-700 text-white rounded text-sm font-medium hover:bg-gray-600">Dashboard</a>
+        <a href="/docs" class="text-gray-400 hover:text-white text-sm">API Docs</a>
+      </div>
+    </div>
+  </nav>
+  <main class="max-w-6xl mx-auto px-4 py-6">
+    ${raw(content.value)}
+  </main>
+</body>
+</html>`

package/src/ui/admin/AdminUiRouter.ts

@@ -0,0 +1,170 @@
+import { adminDashboardPage } from "./pages/AdminDashboard"
+import type { AdminImposterData } from "./partials"
+import { adminErrorPartial, imposterListPartial, imposterRowPartial } from "./partials"
+
+export interface AdminUiDeps {
+  readonly apiHandler: (request: Request) => Promise<Response>
+  readonly adminPort: number
+}
+
+const htmlResponse = (body: string, status = 200): Response =>
+  new Response(body, {
+    status,
+    headers: { "content-type": "text/html; charset=utf-8" }
+  })
+
+const toAdminData = (imp: any): AdminImposterData => ({
+  id: imp.id,
+  name: imp.name ?? `imposter-${imp.id}`,
+  port: imp.port,
+  status: imp.status,
+  protocol: imp.protocol ?? "HTTP",
+  stubCount: imp.stubs?.length ?? imp.endpointCount ?? imp.stubCount ?? 0
+})
+
+const fetchImposters = async (apiHandler: (r: Request) => Promise<Response>): Promise<Array<AdminImposterData>> => {
+  const resp = await apiHandler(new Request("http://localhost/imposters?limit=50", { method: "GET" }))
+  if (!resp.ok) return []
+  const data = await resp.json()
+  const items = Array.isArray(data) ? data : (data.imposters ?? data.items ?? [])
+  return items.map(toAdminData)
+}
+
+const fetchImposter = async (
+  apiHandler: (r: Request) => Promise<Response>,
+  id: string
+): Promise<AdminImposterData | null> => {
+  const resp = await apiHandler(new Request(`http://localhost/imposters/${id}`, { method: "GET" }))
+  if (!resp.ok) return null
+  const imp = await resp.json()
+  return toAdminData(imp)
+}
+
+export const makeAdminUiRouter = (deps: AdminUiDeps) => async (request: Request): Promise<Response | null> => {
+  const url = new URL(request.url)
+  if (!url.pathname.startsWith("/_ui")) return null
+
+  const path = url.pathname.slice("/_ui".length) || "/"
+  const method = request.method.toUpperCase()
+
+  // GET / — dashboard
+  if (method === "GET" && (path === "/" || path === "")) {
+    const imposters = await fetchImposters(deps.apiHandler)
+    return htmlResponse(adminDashboardPage({ imposters }).value)
+  }
+
+  // GET /imposters — HTMX partial (imposter list)
+  if (method === "GET" && path === "/imposters") {
+    const imposters = await fetchImposters(deps.apiHandler)
+    return htmlResponse(imposterListPartial(imposters).value)
+  }
+
+  // POST /imposters — create imposter from form
+  if (method === "POST" && path === "/imposters") {
+    try {
+      const formData = await request.formData()
+      const name = formData.get("name") as string | null
+      const portStr = formData.get("port") as string | null
+      const autoStart = formData.get("autoStart") === "on"
+
+      const payload: Record<string, unknown> = {
+        protocol: "HTTP"
+      }
+      if (name && name.trim()) payload.name = name.trim()
+      if (portStr && portStr.trim()) payload.port = Number(portStr.trim())
+
+      const createResp = await deps.apiHandler(
+        new Request("http://localhost/imposters", {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify(payload)
+        })
+      )
+
+      if (!createResp.ok) {
+        const errBody = await createResp.text()
+        const imposters = await fetchImposters(deps.apiHandler)
+        return htmlResponse(
+          adminErrorPartial(`Failed to create imposter: ${errBody}`).value +
+            imposterListPartial(imposters).value
+        )
+      }
+
+      const created = await createResp.json()
+
+      // Auto-start if requested
+      if (autoStart) {
+        await deps.apiHandler(
+          new Request(`http://localhost/imposters/${created.id}`, {
+            method: "PATCH",
+            headers: { "content-type": "application/json" },
+            body: JSON.stringify({ status: "running" })
+          })
+        )
+      }
+
+      const imposters = await fetchImposters(deps.apiHandler)
+      return htmlResponse(imposterListPartial(imposters).value)
+    } catch (err) {
+      const imposters = await fetchImposters(deps.apiHandler)
+      return htmlResponse(
+        adminErrorPartial(`Error: ${String(err)}`).value +
+          imposterListPartial(imposters).value
+      )
+    }
+  }
+
+  // POST /imposters/:id/start
+  const startMatch = path.match(/^\/imposters\/([^/]+)\/start$/)
+  if (method === "POST" && startMatch) {
+    const id = startMatch[1]!
+    await deps.apiHandler(
+      new Request(`http://localhost/imposters/${id}`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ status: "running" })
+      })
+    )
+    // Small delay for the server to start
+    await new Promise((r) => setTimeout(r, 100))
+    const imp = await fetchImposter(deps.apiHandler, id)
+    if (!imp) {
+      return htmlResponse(adminErrorPartial("Imposter not found").value, 404)
+    }
+    return htmlResponse(imposterRowPartial(imp).value)
+  }
+
+  // POST /imposters/:id/stop
+  const stopMatch = path.match(/^\/imposters\/([^/]+)\/stop$/)
+  if (method === "POST" && stopMatch) {
+    const id = stopMatch[1]!
+    await deps.apiHandler(
+      new Request(`http://localhost/imposters/${id}`, {
+        method: "PATCH",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ status: "stopped" })
+      })
+    )
+    await new Promise((r) => setTimeout(r, 100))
+    const imp = await fetchImposter(deps.apiHandler, id)
+    if (!imp) {
+      return htmlResponse(adminErrorPartial("Imposter not found").value, 404)
+    }
+    return htmlResponse(imposterRowPartial(imp).value)
+  }
+
+  // DELETE /imposters/:id
+  const deleteMatch = path.match(/^\/imposters\/([^/]+)$/)
+  if (method === "DELETE" && deleteMatch) {
+    const id = deleteMatch[1]!
+    await deps.apiHandler(
+      new Request(`http://localhost/imposters/${id}?force=true`, {
+        method: "DELETE"
+      })
+    )
+    const imposters = await fetchImposters(deps.apiHandler)
+    return htmlResponse(imposterListPartial(imposters).value)
+  }
+
+  return null
+}

package/src/ui/admin/pages/AdminDashboard.ts

@@ -0,0 +1,54 @@
+import { html, raw } from "../../html"
+import type { SafeHtml } from "../../html"
+import { adminLayout } from "../AdminLayout"
+import type { AdminImposterData } from "../partials"
+import { createFormPartial, imposterListPartial } from "../partials"
+
+export interface AdminDashboardData {
+  readonly imposters: ReadonlyArray<AdminImposterData>
+}
+
+const summaryBar = (data: AdminDashboardData): SafeHtml => {
+  const total = data.imposters.length
+  const running = data.imposters.filter((i) => i.status === "running").length
+  const stopped = total - running
+  return html`<div class="grid grid-cols-3 gap-4 mb-6">
+    <div class="bg-white rounded-lg shadow p-4">
+      <div class="text-sm text-gray-500">Total Imposters</div>
+      <div class="text-2xl font-bold text-gray-800">${String(total)}</div>
+    </div>
+    <div class="bg-white rounded-lg shadow p-4">
+      <div class="text-sm text-gray-500">Running</div>
+      <div class="text-2xl font-bold text-green-600">${String(running)}</div>
+    </div>
+    <div class="bg-white rounded-lg shadow p-4">
+      <div class="text-sm text-gray-500">Stopped</div>
+      <div class="text-2xl font-bold text-gray-500">${String(stopped)}</div>
+    </div>
+  </div>`
+}
+
+export const adminDashboardPage = (data: AdminDashboardData): SafeHtml => {
+  const content = html`
+    ${summaryBar(data)}
+    ${createFormPartial()}
+    <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-3 px-4">Name</th>
+            <th class="py-3 px-4">Port</th>
+            <th class="py-3 px-4">Status</th>
+            <th class="py-3 px-4">Protocol</th>
+            <th class="py-3 px-4">Stubs</th>
+            <th class="py-3 px-4">Actions</th>
+          </tr>
+        </thead>
+        <tbody id="imposter-list">
+          ${raw(imposterListPartial(data.imposters).value)}
+        </tbody>
+      </table>
+    </div>`
+
+  return adminLayout({ title: "Imposters — Admin Dashboard" }, content)
+}