Add example admin page at /_fake/admin that shows thing resources

lib/admin/Table.tsx

@@ -0,0 +1,213 @@
+import React from "react"
+import { timeAgo } from "./time-ago"
+
+declare global {
+  var timezone: string
+}
+
+const pluralize = (resource: string) => {
+  if (resource.endsWith("s")) return resource
+  return resource.endsWith("y") ? `${resource.slice(0, -1)}ies` : `${resource}s`
+}
+
+const removeResourcePrefixes = (resource: string) => {
+  if (resource.startsWith("creator_")) return resource.slice(8)
+  if (resource.startsWith("owner_")) return resource.slice(6)
+  if (resource.startsWith("personal_")) return resource.slice(9)
+  return resource
+}
+
+const DOWNLOADABLE_COLUMNS = [
+  "input_circuit_json",
+  "output_pcb_circuit_json",
+  "output_ses",
+  "input_dsn",
+]
+
+const Cell = ({
+  columnKey,
+  cellValue,
+  timezone,
+}: {
+  columnKey: string
+  cellValue: any
+  timezone: string
+}) => {
+  if (typeof cellValue === "boolean") return <>{String(cellValue)}</>
+  if (cellValue === null || cellValue === undefined) return <></>
+  if (React.isValidElement(cellValue)) return cellValue
+
+  // Handle arrays of IDs (e.g., account_ids)
+  if (columnKey.endsWith("_ids") && Array.isArray(cellValue)) {
+    const resource = pluralize(columnKey.slice(0, -4)) // e.g., "account_ids" -> "accounts"
+    return (
+      <div className="flex flex-col space-y-1">
+        {cellValue.map((id: string, index: number) => (
+          <a
+            key={index}
+            href={`/admin/${removeResourcePrefixes(resource)}/get?${removeResourcePrefixes(columnKey.slice(0, -1))}=${id}`}
+            className="text-blue-500 hover:underline"
+          >
+            {id?.split("-")?.[0]}...
+          </a>
+        ))}
+      </div>
+    )
+  }
+
+  // Handle single IDs
+  if (columnKey.endsWith("_id") && typeof cellValue === "string") {
+    const resource = pluralize(columnKey.slice(0, -3)) // e.g., "account_id" -> "accounts"
+    return (
+      <a
+        href={`/admin/${removeResourcePrefixes(pluralize(resource))}/get?${removeResourcePrefixes(columnKey)}=${cellValue}`}
+      >
+        {cellValue?.split("-")?.[0]}
+      </a>
+    )
+  }
+
+  if (columnKey === "autorouting_cache_key") {
+    return (
+      <div className="flex flex-col space-y-1">
+        {cellValue}
+        <a
+          href={`/admin/autorouting_jobs/list?autorouting_cache_key=${cellValue}`}
+        >
+          (used by)
+        </a>
+        <a
+          href={`/admin/autorouting_jobs/list?autorouting_cache_key=${cellValue}&completed_using_cache=false`}
+        >
+          (created by)
+        </a>
+      </div>
+    )
+  }
+  if (columnKey.endsWith("_at")) {
+    return <span className="tabular-nums">{timeAgo(cellValue, timezone)}</span>
+  }
+  if (DOWNLOADABLE_COLUMNS.includes(columnKey)) {
+    let b64: string
+    let filename: string
+    let contentType: string
+    if (typeof cellValue === "object") {
+      const jsonStr = JSON.stringify(cellValue, null, 2)
+      b64 = Buffer.from(jsonStr).toString("base64")
+      filename = `${columnKey.replace("_json", "")}.json`
+      contentType = "application/json"
+    } else if (typeof cellValue === "string") {
+      b64 = Buffer.from(cellValue).toString("base64")
+      filename = `${columnKey.split("_").slice(0, -1).join("_")}.${columnKey.split("_").pop()}`
+      contentType = "application/octet-stream"
+    } else {
+      throw new Error(`Unknown cell value type: ${typeof cellValue}`)
+    }
+    return (
+      <div
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+        dangerouslySetInnerHTML={{
+          __html: `<button
+          class="bg-transparent hover:bg-transparent font-normal text-blue-500 hover:text-blue-700 py-1 px-2 rounded"
+        onclick="(function(){
+          const a = document.createElement('a');
+          const content = atob('${b64}');
+          const blob = new Blob([content], {type: '${contentType}'});
+          a.href = window.URL.createObjectURL(blob);
+          a.download = '${filename}';
+          a.click();
+          window.URL.revokeObjectURL(a.href);
+        })();return false;"
+      >
+        Download
+      </button>`,
+        }}
+      />
+    )
+  }
+  if (typeof cellValue === "object") {
+    // Return expandable <pre> with <details> tag
+    return (
+      <details>
+        <summary>{JSON.stringify(cellValue).slice(0, 40)}</summary>
+        <pre>{JSON.stringify(cellValue, null, 2)}</pre>
+      </details>
+    )
+  }
+  return <>{String(cellValue)}</>
+}
+
+export const Table = ({
+  rows,
+  obj,
+  timezone,
+}: {
+  rows?: Record<string, any>[]
+  obj?: Record<string, any>
+  timezone?: string
+}) => {
+  if (!timezone) {
+    timezone = globalThis.timezone ?? "UTC"
+  }
+  if (obj) {
+    const entries = Object.entries(obj)
+    return (
+      <table className="border border-gray-300 text-xs border-collapse p-1 tabular-nums">
+        <thead>
+          <tr>
+            <th className="p-1 border border-gray-300">Key</th>
+            <th className="p-1 border border-gray-300">Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map(([key, value], index) => (
+            <tr key={index}>
+              <td className="border border-gray-300 p-1">{key}</td>
+              <td className="border border-gray-300 p-1">
+                <Cell columnKey={key} cellValue={value} timezone={timezone!} />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    )
+  }
+
+  if (!rows || rows.length === 0)
+    return (
+      <div className="border border-gray-300 p-1 py-4 mx-4 bg-gray-50 text-gray-500 text-center">
+        Empty Table
+      </div>
+    )
+
+  const keys = Object.keys(rows[0]!)
+
+  return (
+    <table className="border border-gray-300 text-xs border-collapse p-1">
+      <thead>
+        <tr>
+          {keys.map((key) => (
+            <th key={key} className="p-1 border border-gray-300">
+              {key}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, rowIndex) => (
+          <tr key={rowIndex}>
+            {keys.map((key) => (
+              <td key={key} className="border border-gray-300 p-1">
+                <Cell
+                  columnKey={key}
+                  cellValue={row[key]}
+                  timezone={timezone!}
+                />
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

lib/admin/time-ago.ts

@@ -0,0 +1,29 @@
+export function timeAgo(date: Date, timezone: string = "UTC"): string {
+  const now = new Date()
+  const formatter = new Intl.DateTimeFormat("en-US", {
+    timeZone: timezone,
+    hour: "numeric",
+    minute: "numeric",
+    hour12: true,
+  })
+
+  const formattedTime = formatter.format(date)
+  const seconds = Math.floor((now.getTime() - date.getTime()) / 1000)
+
+  if (seconds < 60) {
+    return `${seconds}s ago (${formattedTime})`
+  }
+
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) {
+    return `${minutes}m ago (${formattedTime})`
+  }
+
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) {
+    return `${hours}h ago (${formattedTime})`
+  }
+
+  const days = Math.floor(hours / 24)
+  return `${days}d ago (${formattedTime})`
+}

lib/middleware/with-ctx-react.tsx

@@ -0,0 +1,99 @@
+import { renderToString } from "react-dom/server"
+import type { Middleware } from "winterspec"
+import React from "react"
+import type { ReactNode } from "react"
+import { timeAgo } from "lib/admin/time-ago"
+
+export const withCtxReact: 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"
+    return new Response(
+      renderToString(
+        <html lang="en">
+          <script src="https://cdn.tailwindcss.com" />
+          <style
+            type="text/tailwindcss"
+            // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+            dangerouslySetInnerHTML={{
+              __html: `
+.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
+}
+`,
+            }}
+          />
+          <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>
+                  {pathComponents.map((component, index) => {
+                    return (
+                      <span key={index}>
+                        <span className="px-0.5 text-gray-500">/</span>
+                        <a
+                          href={`/${pathComponents.slice(0, index + 1).join("/")}`}
+                        >
+                          {component}
+                        </a>
+                      </span>
+                    )
+                  })}
+                </div>
+                <div className="mr-2 flex items-center">
+                  <div className="text-xs text-gray-500 mr-1">
+                    {timeAgo(new Date(), timezone)}
+                  </div>
+                  <div
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation>
+                    dangerouslySetInnerHTML={{
+                      __html: `
+                  <select
+                    id="timezone-select"
+                    class="text-xs"
+                    value="${timezone}"
+                    onchange="document.cookie = 'timezone=' + this.value + ';path=/'; location.reload();"
+                  >
+                    <option ${timezone === "UTC" ? "selected" : ""} value="UTC">UTC</option>
+                    <option ${timezone === "America/Los_Angeles" ? "selected" : ""} value="America/Los_Angeles">Pacific</option>
+                    <option ${timezone === "Asia/Kolkata" ? "selected" : ""} value="Asia/Kolkata">IST</option>
+                  </select>
+                  `,
+                    }}
+                  />
+                </div>
+              </div>
+              <div className="flex flex-col text-xs p-1">{component}</div>
+            </div>
+          </body>
+        </html>,
+      ),
+      {
+        headers: {
+          "Content-Type": "text/html",
+        },
+      },
+    )
+  }
+
+  return await next(req, ctx)
+}

lib/middleware/with-db.ts

@@ -2,14 +2,22 @@ import type { DbClient } from "lib/db/db-client"
 import { createDatabase } from "lib/db/db-client"
 import type { Middleware } from "winterspec/middleware"
 
+// Create a singleton instance of the database
+let dbInstance: DbClient | null = null
+
 export const withDb: Middleware<
   {},
   {
     db: DbClient
   }
 > = async (req, ctx, next) => {
+  // Only set db if not already provided by another middleware
   if (!ctx.db) {
-    ctx.db = createDatabase()
+    if (!dbInstance) {
+      dbInstance = createDatabase()
+    }
+    ctx.db = dbInstance
   }
+
   return next(req, ctx)
 }

lib/middleware/with-winter-spec.ts

@@ -1,10 +1,11 @@
 import { createWithWinterSpec } from "winterspec"
 import { withDb } from "./with-db"
+import { withCtxReact } from "./with-ctx-react"
 
 export const withRouteSpec = createWithWinterSpec({
   apiName: "tscircuit Debug API",
   productionServerUrl: "https://debug-api.tscircuit.com",
   beforeAuthMiddleware: [],
   authMiddleware: {},
-  afterAuthMiddleware: [withDb],
+  afterAuthMiddleware: [withDb, withCtxReact],
 })