tscircuit · dhvll · May 11, 2025 · May 11, 2025 · May 11, 2025 · seveibar
diff --git a/bun.lockb b/bun.lockb
diff --git a/lib/middleware/with-db.ts b/lib/middleware/with-db.ts
@@ -1,6 +1,6 @@
 import type { DbClient } from "lib/db/db-client"
 import { createDatabase } from "lib/db/db-client"
-import type { Middleware } from "winterspec"
+import type { Middleware } from "winterspec/middleware"
 
 export const withDb: Middleware<
   {},

diff --git a/lib/middleware/with-react.tsx b/lib/middleware/with-react.tsx
@@ -0,0 +1,96 @@
+import React from "react"
+import { renderToString } from "react-dom/server"
+import type { Middleware } from "winterspec/middleware"
+import type { ReactNode } from "react"
+import { Fragment } from "react"
+
+const tailwindStyle = `
+.btn {
+  @apply text-white visited:text-white m-1 bg-blue-500 hover:bg-blue-700 font-bold py-2 px-4 rounded;
+}
+a {
+  @apply underline text-blue-600 hover:text-blue-800 visited:text-purple-800 m-1;
+}
+h2 {
+  @apply text-xl font-bold my-2;
+}
+input, select {
+  @apply border border-gray-300 rounded p-1 ml-0.5;
+}
+form {
+  @apply inline-flex flex-col gap-2 border border-gray-300 rounded p-2 m-2 text-xs;
+}
+button {
+  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
+}
+`
+
+const renderBreadcrumbs = (pathComponents: string[]) =>
+  pathComponents.map((component, index) => (
+    <Fragment key={index}>
+      <span className="px-0.5 text-gray-500">/</span>
+      <a href={`/${pathComponents.slice(0, index + 1).join("/")}`}>
+        {component}
+      </a>
+    </Fragment>
+  ))
+
+const renderTimezoneDropdown = (timezone: string) => (
+  <select
+    id="timezone-select"
+    className="text-xs"
+    onChange={(e) => {
+      document.cookie = `timezone=${e.currentTarget.value};path=/`
+      location.reload()
+    }}
+    defaultValue={timezone}
+  >
+    <option value="UTC">UTC</option>
+    <option value="America/Los_Angeles">Pacific</option>
+    <option value="Asia/Kolkata">IST</option>
+  </select>
+)
+
+export const withReact: Middleware<
+  {},
+  { react: (component: ReactNode) => Response }
+> = async (req, ctx, next) => {
+  ctx.react = (component: ReactNode) => {
+    const pathComponents = new URL(req.url).pathname.split("/").filter(Boolean)
+    const timezone = req.headers.get("X-Timezone") || "UTC"
+
+    const html = renderToString(
+      <html lang="en">
+        <head>
+          <script src="https://cdn.tailwindcss.com" />
+          <style type="text/tailwindcss">{tailwindStyle}</style>
+        </head>
+        <body>
+          <div>
+            <div className="border-b border-gray-300 py-1 flex justify-between items-center">
+              <div>
+                <span className="px-1 pr-2">admin panel</span>
+                {renderBreadcrumbs(pathComponents)}
+              </div>
+              <div className="mr-2 flex items-center">
+                <div className="text-xs text-gray-500 mr-1">
+                  {new Date().toLocaleString()}
+                </div>
+                {renderTimezoneDropdown(timezone)}
+              </div>
+            </div>
+            <div className="flex flex-col text-xs p-1">{component}</div>
+          </div>
+        </body>
+      </html>
+    )
+
+    return new Response(html, {
+      headers: {
+        "Content-Type": "text/html",
+      },
+    })
+  }
+
+  return await next(req, ctx)
+}
diff --git a/lib/middleware/with-winter-spec.ts b/lib/middleware/with-winter-spec.ts
@@ -1,10 +1,12 @@
 import { createWithWinterSpec } from "winterspec"
+import type { Middleware } from "winterspec/middleware"
 import { withDb } from "./with-db"
+import { withReact } from "./with-react"
 
 export const withRouteSpec = createWithWinterSpec({
   apiName: "tscircuit Debug API",
   productionServerUrl: "https://debug-api.tscircuit.com",
-  beforeAuthMiddleware: [],
+  beforeAuthMiddleware: [withReact],
   authMiddleware: {},
   afterAuthMiddleware: [withDb],
 })
diff --git a/package.json b/package.json
@@ -5,14 +5,18 @@
   "devDependencies": {
     "@biomejs/biome": "^1.8.3",
     "@types/bun": "latest",
-    "@types/react": "18.3.4",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^19.1.3",
     "next": "^14.2.5",
     "redaxios": "^0.5.1"
   },
   "peerDependencies": {
     "typescript": "^5.0.0"
   },
   "dependencies": {
+    "openapi3-ts": "^4.4.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "winterspec": "^0.0.86",
     "zod": "^3.23.8",
     "zustand": "^4.5.5",

diff --git a/routes/_fake/admin.tsx b/routes/_fake/admin.tsx
@@ -0,0 +1,75 @@
+import React from "react"
+import { withRouteSpec } from "lib/middleware/with-winter-spec"
+import { z } from "zod"
+
+const AdminPage = ({ things }: { things: any[] }) => {
+  return (
+    <div>
+      <h2>Things Management</h2>
+      <div className="flex flex-col gap-4">
+        <form
+          action="/things/create"
+          method="POST"
+          className="border p-4 rounded"
+        >
+          <h3 className="font-bold mb-2">Create New Thing</h3>
+          <div className="flex flex-col gap-2">
+            <input
+              type="text"
+              name="name"
+              placeholder="Name"
+              required
+              className="border p-2 rounded"
+            />
+            <input
+              type="text"
+              name="description"
+              placeholder="Description"
+              required
+              className="border p-2 rounded"
+            />
+            <button type="submit" className="btn">
+              Create Thing
+            </button>
+          </div>
+        </form>
+
+        <div className="border p-4 rounded">
+          <h3 className="font-bold mb-2">Existing Things</h3>
+          <div className="grid gap-2">
+            {things.map((thing) => (
+              <div
+                key={thing.thing_id}
+                className="border p-2 rounded flex justify-between items-center"
+              >
+                <div>
+                  <div className="font-bold">{thing.name}</div>
+                  <div className="text-gray-600">{thing.description}</div>
+                </div>
+                <div className="text-xs text-gray-500">
+                  ID: {thing.thing_id}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default withRouteSpec({
+  methods: ["GET"],
+  jsonResponse: z.object({
+    things: z.array(
+      z.object({
+        thing_id: z.string(),
+        name: z.string(),
+        description: z.string(),
+      })
+    ),
+  }),
+})(async (req, ctx) => {
+  const things = ctx.db.things
+  return ctx.react(<AdminPage things={things} />)
+})