+ dangerouslySetInnerHTML={{
+ __html: `
`,
+ }}
+ />
+ )
+ }
+ if (typeof cellValue === "object") {
+ // Return expandable
with tag
+ return (
+
+ {JSON.stringify(cellValue).slice(0, 40)}
+ {JSON.stringify(cellValue, null, 2)}
+
+ )
+ }
+ return <>{String(cellValue)}
+}
+
+export const Table = ({
+ rows,
+ obj,
+ timezone,
+}: {
+ rows?: Record[]
+ obj?: Record
+ timezone?: string
+}) => {
+ if (!timezone) {
+ timezone = globalThis.timezone ?? "UTC"
+ }
+ if (obj) {
+ const entries = Object.entries(obj)
+ return (
+
+
+
+ | Key |
+ Value |
+
+
+
+ {entries.map(([key, value], index) => (
+
+ | {key} |
+
+ |
+ |
+
+ ))}
+
+
+ )
+ }
+
+ if (!rows || rows.length === 0)
+ return (
+
+ Empty Table
+
+ )
+
+ const keys = Object.keys(rows[0]!)
+
+ return (
+
+
+
+ {keys.map((key) => (
+ |
+ {key}
+ |
+ ))}
+
+
+
+ {rows.map((row, rowIndex) => (
+
+ {keys.map((key) => (
+
+ |
+ |
+ ))}
+
+ ))}
+
+
+ )
+}
diff --git a/lib/admin/time-ago.ts b/lib/admin/time-ago.ts
new file mode 100644
index 0000000..b296c36
--- /dev/null
+++ b/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})`
+}
diff --git a/lib/middleware/with-ctx-react.tsx b/lib/middleware/with-ctx-react.tsx
new file mode 100644
index 0000000..1075b5d
--- /dev/null
+++ b/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(
+
+
+