From d399e38934e897e0511f7b3c2c5dc883df839750 Mon Sep 17 00:00:00 2001
From: Rhys Sullivan <39114868+RhysSullivan@users.noreply.github.com>
Date: Sun, 28 Jun 2026 11:54:54 -0700
Subject: [PATCH] console: bring the emulators.dev catalog in line with the
brand
Restyle the apex catalog (apps/console) to the registry-grade minimal
system: Geist and Geist Mono, a grayscale ramp, hairline cards, mono
metadata (wordmark, eyebrows, host lines), and destructive red as the
only hue. Drop the green/blue/amber accent palette, the green brand dot,
and the green monogram badges; keep real provider brand marks. Dark
palette, since the icon service serves white monochrome marks.
Inline the static service catalog into the served HTML (worker sets
window.__EMULATE_SERVICES__) so the console renders the grid on first
paint with no client fetch and no loading state. Regenerate
console-html.ts from the rebuilt SPA.
---
apps/console/index.html | 6 +
apps/console/src/App.tsx | 2 +-
apps/console/src/api.ts | 12 +-
apps/console/src/styles.css | 149 ++++++++++--------
apps/console/src/types.ts | 7 +
apps/console/src/views/Home.tsx | 15 +-
.../@emulators/cloudflare/src/console-html.ts | 3 +-
packages/@emulators/cloudflare/src/worker.ts | 16 +-
8 files changed, 137 insertions(+), 73 deletions(-)
diff --git a/apps/console/index.html b/apps/console/index.html
index 50ac94cb..6d20cd88 100644
--- a/apps/console/index.html
+++ b/apps/console/index.html
@@ -4,6 +4,12 @@
Emulate
+
+
+
diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx
index 8e26a09a..4fd566fc 100644
--- a/apps/console/src/App.tsx
+++ b/apps/console/src/App.tsx
@@ -42,7 +42,7 @@ export default function App() {
Stateful integration emulators for real developer APIs. Pick a service, create an isolated instance, copy a
@@ -36,7 +40,10 @@ export default function Home() {
{error &&
Could not load the service catalog ({error}).
}
- {!services && !error &&
Loading services...
}
+
+ {services && services.length > 0 && (
+
All emulators · {services.length}
+ )}
{(services ?? []).map((s) => (
diff --git a/packages/@emulators/cloudflare/src/console-html.ts b/packages/@emulators/cloudflare/src/console-html.ts
index 39bbe9cf..be3a6464 100644
--- a/packages/@emulators/cloudflare/src/console-html.ts
+++ b/packages/@emulators/cloudflare/src/console-html.ts
@@ -1,4 +1,3 @@
// AUTO-GENERATED from apps/console (pnpm --filter @emulators/console build).
// Do not edit by hand; regenerate with `node scripts/gen-console.mjs`.
-export const consoleHtml =
- '\n\n \n \n \n Emulate\n \n \n \n \n \n \n\n';
+export const consoleHtml = "\n\n \n \n \n Emulate\n \n \n \n \n \n \n \n \n \n\n";
diff --git a/packages/@emulators/cloudflare/src/worker.ts b/packages/@emulators/cloudflare/src/worker.ts
index 839ea6fc..8e177e7c 100644
--- a/packages/@emulators/cloudflare/src/worker.ts
+++ b/packages/@emulators/cloudflare/src/worker.ts
@@ -14,6 +14,19 @@ function serviceCatalogEntries() {
}));
}
+// The catalog is a static registry, so inline it into the served SPA HTML: the
+// console renders the grid on first paint, with no client fetch and no loading
+// state. JSON `<` is escaped so a description can never break out of the script.
+async function serveCatalogConsole(ctx: { origin: string; protocol: string; hostSuffix: string }): Promise {
+ const json = (await servicesCatalog(serviceCatalogEntries(), ctx).text()).replace(/
',
+ ``,
+ ),
+ );
+}
+
interface EmulatorNamespace {
idFromName(name: string): unknown;
get(id: unknown): { fetch(request: Request): Promise };
@@ -183,7 +196,8 @@ export default {
// Apex root or bare `/` → the catalog. Browser → SPA; agent → a
// server-rendered list of emulators (readable without running JS).
if (!service || !instance) {
- if (isBrowserNavigation(request)) return html(consoleHtml);
+ if (isBrowserNavigation(request))
+ return serveCatalogConsole({ origin: apexOrigin, protocol: url.protocol, hostSuffix: suffix });
if (wantsJson(request)) {
return servicesCatalog(serviceCatalogEntries(), {
origin: apexOrigin,