lopata 0.0.1

package/runtime/error-page/app.tsx

@@ -0,0 +1,394 @@
+import { render } from "preact";
+import { useState } from "preact/hooks";
+
+interface StackFrame {
+  file: string;
+  line: number;
+  column: number;
+  function: string;
+  source?: string[];
+  sourceLine?: number;
+}
+
+interface TraceSpan {
+  spanId: string;
+  traceId: string;
+  parentSpanId: string | null;
+  name: string;
+  status: string;
+  startTime: number;
+  endTime: number | null;
+  durationMs: number | null;
+}
+
+interface ErrorPageData {
+  error: {
+    name: string;
+    message: string;
+    stack: string;
+    frames: StackFrame[];
+  };
+  request: {
+    method: string;
+    url: string;
+    headers: Record<string, string>;
+  };
+  env: Record<string, string>;
+  bindings: { name: string; type: string }[];
+  runtime: {
+    bunVersion: string;
+    platform: string;
+    arch: string;
+    workerName?: string;
+    configName?: string;
+  };
+  trace?: {
+    traceId: string;
+    spanId: string | null;
+    spans: TraceSpan[];
+  };
+}
+
+declare global {
+  interface Window {
+    __BUNFLARE_ERROR__: ErrorPageData;
+  }
+}
+
+function Section({ title, open, children }: { title: string; open?: boolean; children: preact.ComponentChildren }) {
+  return (
+    <details open={open} class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+      <summary class="px-5 py-3 cursor-pointer select-none text-sm font-semibold text-ink hover:bg-gray-50 transition-colors">
+        {title}
+      </summary>
+      <div class="border-t border-gray-100">
+        {children}
+      </div>
+    </details>
+  );
+}
+
+const LIBRARY_PATH_RE = /\/node_modules\//;
+
+function isLibraryFrame(frame: StackFrame): boolean {
+  return LIBRARY_PATH_RE.test(frame.file);
+}
+
+const HL_RE = /(\/\/.*$|\/\*.*?\*\/)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)|(\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b)|(\b(?:const|let|var|function|return|if|else|for|while|do|class|new|import|export|from|default|async|await|throw|try|catch|finally|switch|case|break|continue|typeof|instanceof|in|of|yield|static|extends|super|void|delete|enum|interface|type|as|declare|readonly)\b)|(\b(?:true|false|null|undefined|this|NaN|Infinity)\b)/g;
+
+function highlightLine(line: string) {
+  const parts: preact.ComponentChildren[] = [];
+  let last = 0;
+  for (const m of line.matchAll(HL_RE)) {
+    if (m.index! > last) parts.push(line.slice(last, m.index));
+    const t = m[0];
+    const c = m[1] ? "#6b7280" : m[2] ? "#16a34a" : m[3] ? "#d97706" : m[4] ? "#7c3aed" : m[5] ? "#2563eb" : undefined;
+    parts.push(c ? <span style={{ color: c }}>{t}</span> : t);
+    last = m.index! + t.length;
+  }
+  if (last < line.length) parts.push(line.slice(last));
+  return parts.length > 0 ? parts : line;
+}
+
+function FrameList({ frames }: { frames: StackFrame[] }) {
+  return (
+    <div class="divide-y divide-gray-100">
+      {frames.map((frame, i) => (
+        <CodeBlock key={i} frame={frame} defaultOpen={!isLibraryFrame(frame)} />
+      ))}
+    </div>
+  );
+}
+
+function CodeBlock({ frame, defaultOpen }: { frame: StackFrame; defaultOpen: boolean }) {
+  if (!frame.source || frame.source.length === 0) return null;
+  const startLine = frame.line - (frame.sourceLine ?? 0);
+
+  return (
+    <details open={defaultOpen}>
+      <summary class="px-4 py-2 bg-gray-50 text-xs font-medium text-ink-muted cursor-pointer select-none hover:bg-gray-100 transition-colors" style="font-family: 'JetBrains Mono', monospace;">
+        {frame.file}:{frame.line}:{frame.column}
+        {frame.function && <span class="ml-2 text-gray-400">in {frame.function}</span>}
+      </summary>
+      <div class="overflow-x-auto scrollbar-thin">
+        <pre class="text-xs leading-5 m-0" style="font-family: 'JetBrains Mono', monospace;">
+          {frame.source.map((line, i) => {
+            const lineNum = startLine + i;
+            const isError = i === frame.sourceLine;
+            return (
+              <div
+                key={i}
+                class={isError ? "bg-red-50 border-l-4 border-error-red" : "border-l-4 border-transparent hover:bg-gray-50"}
+              >
+                <span class={`inline-block w-12 text-right pr-3 select-none ${isError ? "text-error-red font-bold" : "text-gray-400"}`}>
+                  {lineNum}
+                </span>
+                <span class={`text-ink${isError ? " font-medium" : ""}`}>{highlightLine(line)}</span>
+              </div>
+            );
+          })}
+        </pre>
+      </div>
+    </details>
+  );
+}
+
+function KeyValueTable({ data, mask }: { data: Record<string, string>; mask?: boolean }) {
+  const entries = Object.entries(data);
+  if (entries.length === 0) {
+    return <div class="px-4 py-3 text-sm text-gray-400">No entries</div>;
+  }
+
+  return (
+    <table class="w-full text-sm">
+      <tbody>
+        {entries.map(([key, value]) => (
+          <tr key={key} class="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
+            <td class="px-4 py-2 font-medium text-ink-muted whitespace-nowrap align-top" style="font-family: 'JetBrains Mono', monospace; width: 1%;">
+              {key}
+            </td>
+            <td class="px-4 py-2 text-ink break-all" style="font-family: 'JetBrains Mono', monospace;">
+              {value}
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+const MAX_COLLAPSED_LINES = 10;
+
+function ErrorMessage({ message }: { message: string }) {
+  const [expanded, setExpanded] = useState(false);
+  const nlIndex = message.indexOf("\n");
+
+  if (nlIndex === -1) {
+    return <h1 class="text-lg font-bold text-ink m-0 leading-snug break-words">{message}</h1>;
+  }
+
+  const firstLine = message.slice(0, nlIndex);
+  const rest = message.slice(nlIndex + 1);
+  const restLines = rest.split("\n");
+  const needsCollapse = restLines.length > MAX_COLLAPSED_LINES;
+
+  return (
+    <>
+      <h1 class="text-lg font-bold text-ink m-0 leading-snug break-words">{firstLine}</h1>
+      <div class="relative mt-2">
+        <pre
+          class="text-xs text-ink-muted m-0 whitespace-pre-wrap break-words leading-5 overflow-hidden transition-all"
+          style={{
+            fontFamily: "'JetBrains Mono', monospace",
+            maxHeight: !expanded && needsCollapse ? `${MAX_COLLAPSED_LINES * 1.25}rem` : "none",
+          }}
+        >
+          {rest}
+        </pre>
+        {needsCollapse && !expanded && (
+          <div
+            class="absolute bottom-0 left-0 right-0 h-16 flex items-end justify-center pb-2 cursor-pointer"
+            style="background: linear-gradient(to bottom, transparent, white);"
+            onClick={() => setExpanded(true)}
+          >
+            <span class="text-xs font-medium text-gray-400 hover:text-ink transition-colors">
+              Show all ({restLines.length} lines)
+            </span>
+          </div>
+        )}
+        {needsCollapse && expanded && (
+          <button
+            class="mt-1 text-xs font-medium text-gray-400 hover:text-ink transition-colors"
+            onClick={() => setExpanded(false)}
+          >
+            Collapse
+          </button>
+        )}
+      </div>
+    </>
+  );
+}
+
+function fmtDuration(ms: number): string {
+  if (ms < 1) return "<1ms";
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function SimpleTraceWaterfall({ trace }: { trace: NonNullable<ErrorPageData["trace"]> }) {
+  const { spans, spanId: errorSpanId } = trace;
+  if (spans.length === 0) return null;
+
+  const traceStart = Math.min(...spans.map(s => s.startTime));
+  const traceEnd = Math.max(...spans.map(s => s.endTime ?? Date.now()));
+  const traceDuration = traceEnd - traceStart || 1;
+
+  // Build tree and flatten
+  const childMap = new Map<string | null, TraceSpan[]>();
+  for (const s of spans) {
+    const key = s.parentSpanId;
+    if (!childMap.has(key)) childMap.set(key, []);
+    childMap.get(key)!.push(s);
+  }
+
+  function flatten(parentId: string | null, depth: number): Array<{ span: TraceSpan; depth: number }> {
+    const children = childMap.get(parentId) ?? [];
+    const result: Array<{ span: TraceSpan; depth: number }> = [];
+    for (const child of children) {
+      result.push({ span: child, depth });
+      result.push(...flatten(child.spanId, depth + 1));
+    }
+    return result;
+  }
+
+  const flatSpans = flatten(null, 0);
+
+  return (
+    <div class="px-4 py-3">
+      <div class="flex items-center justify-between mb-2">
+        <span class="text-xs text-gray-400" style="font-family: 'JetBrains Mono', monospace;">0ms</span>
+        <span class="text-xs text-gray-400" style="font-family: 'JetBrains Mono', monospace;">{fmtDuration(traceDuration)}</span>
+      </div>
+      <div class="space-y-0.5">
+        {flatSpans.map(({ span, depth }) => {
+          const offset = ((span.startTime - traceStart) / traceDuration) * 100;
+          const width = (((span.endTime ?? Date.now()) - span.startTime) / traceDuration) * 100;
+          const isError = errorSpanId === span.spanId;
+
+          return (
+            <div
+              key={span.spanId}
+              class={`flex items-center py-1 px-1 rounded-md ${isError ? "bg-red-50 ring-1 ring-red-300" : ""}`}
+            >
+              <div
+                class="w-[180px] flex-shrink-0 truncate text-xs text-ink"
+                style={{ paddingLeft: `${depth * 14}px`, fontFamily: "'JetBrains Mono', monospace" }}
+              >
+                {span.name}
+              </div>
+              <div class="flex-1 h-5 relative bg-gray-50 rounded">
+                <div
+                  class={`absolute top-0.5 bottom-0.5 rounded ${
+                    span.status === "error" ? "bg-red-400" :
+                    span.status === "ok" ? "bg-emerald-400" :
+                    "bg-gray-300"
+                  }`}
+                  style={{ left: `${offset}%`, width: `${Math.max(width, 0.5)}%` }}
+                />
+                <span
+                  class="absolute top-0.5 text-[10px] text-gray-500 whitespace-nowrap"
+                  style={{ left: `${offset + width + 1}%`, fontFamily: "'JetBrains Mono', monospace" }}
+                >
+                  {span.durationMs != null ? fmtDuration(span.durationMs) : "..."}
+                </span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  const data = window.__BUNFLARE_ERROR__;
+
+  if (!data) {
+    return <div class="p-8 text-gray-400">No error data available.</div>;
+  }
+
+  const { error, request, env, bindings, runtime } = data;
+
+  return (
+    <div class="min-h-full p-6 max-w-5xl mx-auto flex flex-col gap-4">
+      {/* Error header */}
+      <div class="bg-white rounded-lg border border-gray-200 overflow-hidden border-l-4 border-l-error-red">
+        <div class="px-5 py-4">
+          <div class="flex items-center gap-2.5 mb-1.5">
+            <span class="w-6 h-6 rounded-md bg-red-50 flex items-center justify-center text-error-red text-xs font-bold">!</span>
+            <span class="text-xs font-semibold uppercase tracking-wider text-error-red">{error.name}</span>
+          </div>
+          <ErrorMessage message={error.message} />
+        </div>
+      </div>
+
+      {/* Source Code */}
+      {error.frames.length > 0 && (
+        <Section title="Source Code" open>
+          <FrameList frames={error.frames} />
+        </Section>
+      )}
+
+      {/* Stack Trace */}
+      <Section title="Stack Trace">
+        <div class="px-4 py-3 overflow-x-auto scrollbar-thin">
+          <pre class="text-xs text-ink-muted leading-5 m-0 whitespace-pre-wrap break-words" style="font-family: 'JetBrains Mono', monospace;">
+            {error.stack}
+          </pre>
+        </div>
+      </Section>
+
+      {/* Trace */}
+      {data.trace && data.trace.spans.length > 0 && (
+        <Section title="Trace" open>
+          <SimpleTraceWaterfall trace={data.trace} />
+        </Section>
+      )}
+
+      {/* Request */}
+      <Section title="Request" open>
+        <div class="px-4 py-2.5 border-b border-gray-100">
+          <span class="inline-block px-2 py-0.5 rounded-md bg-gray-100 text-xs font-bold mr-2">{request.method}</span>
+          <span class="text-sm break-all" style="font-family: 'JetBrains Mono', monospace;">{request.url}</span>
+        </div>
+        <KeyValueTable data={request.headers} />
+      </Section>
+
+      {/* Environment */}
+      <Section title="Environment">
+        <KeyValueTable data={env} />
+      </Section>
+
+      {/* Bindings */}
+      <Section title="Bindings">
+        {bindings.length === 0 ? (
+          <div class="px-4 py-3 text-sm text-gray-400">No bindings configured</div>
+        ) : (
+          <table class="w-full text-sm">
+            <tbody>
+              {bindings.map((b) => (
+                <tr key={b.name} class="border-b border-gray-100 last:border-0 hover:bg-gray-50/50 transition-colors">
+                  <td class="px-4 py-2 font-medium text-ink-muted whitespace-nowrap" style="font-family: 'JetBrains Mono', monospace;">
+                    {b.name}
+                  </td>
+                  <td class="px-4 py-2">
+                    <span class="inline-block px-2 py-0.5 rounded-md bg-gray-100 text-xs font-medium text-gray-600">{b.type}</span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </Section>
+
+      {/* Runtime */}
+      <Section title="Runtime">
+        <KeyValueTable
+          data={{
+            "Bun": runtime.bunVersion,
+            "Platform": runtime.platform,
+            "Arch": runtime.arch,
+            ...(runtime.workerName ? { "Worker": runtime.workerName } : {}),
+            ...(runtime.configName ? { "Config": runtime.configName } : {}),
+          }}
+        />
+      </Section>
+
+      <div class="text-center text-xs text-gray-400 py-4">
+        Bunflare Dev Server
+      </div>
+    </div>
+  );
+}
+
+render(<App />, document.getElementById("app")!);

package/runtime/error-page/build.ts

@@ -0,0 +1,269 @@
+import { join } from "node:path";
+import type { WranglerConfig } from "../config";
+import { getTraceStore } from "../tracing/store";
+import { getActiveContext } from "../tracing/context";
+import { type StackFrame, parseStackFrames, enrichFrameWithSourceAsync } from "../tracing/frames";
+
+interface ErrorPageData {
+  error: {
+    name: string;
+    message: string;
+    stack: string;
+    frames: StackFrame[];
+  };
+  request: {
+    method: string;
+    url: string;
+    headers: Record<string, string>;
+  };
+  env: Record<string, string>;
+  bindings: { name: string; type: string }[];
+  runtime: {
+    bunVersion: string;
+    platform: string;
+    arch: string;
+    workerName?: string;
+    configName?: string;
+  };
+  trace?: {
+    traceId: string;
+    spanId: string | null;
+    spans: Array<{
+      spanId: string;
+      traceId: string;
+      parentSpanId: string | null;
+      name: string;
+      status: string;
+      startTime: number;
+      endTime: number | null;
+      durationMs: number | null;
+    }>;
+  };
+}
+
+// ─── Pre-built error page HTML ────────────────────────────────────────────
+
+let errorPageHtml: string | null = null;
+let errorPageAssets: Map<string, { content: Uint8Array; contentType: string }> | null = null;
+
+async function buildErrorPage(): Promise<void> {
+  const tailwindPlugin = (await import("bun-plugin-tailwind")).default;
+  const htmlEntry = join(import.meta.dir, "index.html");
+
+  const result = await Bun.build({
+    entrypoints: [htmlEntry],
+    plugins: [tailwindPlugin],
+  });
+
+  if (!result.success) {
+    console.error("[bunflare] Error page build failed:", result.logs);
+    throw new Error("Error page build failed");
+  }
+
+  const assets = new Map<string, { content: Uint8Array; contentType: string }>();
+  let html = "";
+
+  for (const output of result.outputs) {
+    const name = output.path.split("/").pop()!;
+    const content = new Uint8Array(await output.arrayBuffer());
+
+    if (output.kind === "entry-point" && name.endsWith(".html")) {
+      html = new TextDecoder().decode(content);
+    } else {
+      const contentType = name.endsWith(".css")
+        ? "text/css"
+        : name.endsWith(".js")
+          ? "application/javascript"
+          : "application/octet-stream";
+      assets.set(name, { content, contentType });
+    }
+  }
+
+  // Inline assets directly into the HTML to make it self-contained
+  for (const [name, asset] of assets) {
+    const assetText = new TextDecoder().decode(asset.content);
+    if (name.endsWith(".css")) {
+      html = html.replace(
+        new RegExp(`<link[^>]*href="\\./${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}"[^>]*/?>`),
+        `<style>${assetText}</style>`,
+      );
+    } else if (name.endsWith(".js")) {
+      html = html.replace(
+        new RegExp(`<script[^>]*src="\\./${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}"[^>]*>[^<]*</script>`),
+        `<script type="module">${assetText}</script>`,
+      );
+    }
+  }
+
+  errorPageHtml = html;
+  errorPageAssets = assets;
+}
+
+await buildErrorPage();
+
+// ─── Env masking ──────────────────────────────────────────────────────────
+
+const SENSITIVE_KEYS = /SECRET|KEY|TOKEN|PASSWORD|API|PRIVATE/i;
+
+function maskValue(value: string): string {
+  const show = 3;
+  if (value.length <= show * 2 + 3) return "***";
+  return value.slice(0, show) + "***" + value.slice(-show);
+}
+
+function maskEnv(env: Record<string, unknown>): Record<string, string> {
+  const masked: Record<string, string> = {};
+  for (const [key, value] of Object.entries(env)) {
+    if (typeof value === "object") continue; // skip bindings
+    const strVal = String(value);
+    masked[key] = SENSITIVE_KEYS.test(key) ? maskValue(strVal) : strVal;
+  }
+  return masked;
+}
+
+// ─── Binding extraction ──────────────────────────────────────────────────
+
+function extractBindings(config: WranglerConfig): { name: string; type: string }[] {
+  const bindings: { name: string; type: string }[] = [];
+  for (const kv of config.kv_namespaces ?? []) bindings.push({ name: kv.binding, type: "KV" });
+  for (const r2 of config.r2_buckets ?? []) bindings.push({ name: r2.binding, type: "R2" });
+  for (const d of config.durable_objects?.bindings ?? []) bindings.push({ name: d.name, type: "Durable Object" });
+  for (const wf of config.workflows ?? []) bindings.push({ name: wf.binding, type: "Workflow" });
+  for (const d1 of config.d1_databases ?? []) bindings.push({ name: d1.binding, type: "D1" });
+  for (const p of config.queues?.producers ?? []) bindings.push({ name: p.binding, type: "Queue" });
+  for (const svc of config.services ?? []) bindings.push({ name: svc.binding, type: "Service" });
+  if (config.images) bindings.push({ name: config.images.binding, type: "Images" });
+  if (config.assets?.binding) bindings.push({ name: config.assets.binding, type: "Assets" });
+  return bindings;
+}
+
+// ─── Public API ──────────────────────────────────────────────────────────
+
+export async function renderErrorPage(
+  error: unknown,
+  request: Request,
+  env: Record<string, unknown>,
+  config: WranglerConfig,
+  workerName?: string,
+): Promise<Response> {
+  if (!errorPageHtml) {
+    return new Response("Internal Server Error", { status: 500 });
+  }
+
+  const err = error instanceof Error ? error : new Error(String(error));
+  const frames = parseStackFrames(err.stack ?? "")
+    // Drop native/node internal frames — they have no readable source and waste enrichment slots
+    .filter(f => !f.file.startsWith("native:") && !f.file.startsWith("node:"));
+
+  // Enrich frames with source code (limit to 20 for performance)
+  const framesToEnrich = frames.slice(0, 20);
+  await Promise.all(framesToEnrich.map(enrichFrameWithSourceAsync));
+
+  // Strip cwd prefix from paths for display
+  const cwdPrefix = process.cwd() + "/";
+  const displayFrames = framesToEnrich.filter(f => f.source).map(f => ({
+    ...f,
+    file: f.file.startsWith(cwdPrefix) ? f.file.slice(cwdPrefix.length) : f.file,
+  }));
+
+  const headers: Record<string, string> = {};
+  request.headers.forEach((value, key) => {
+    headers[key] = value;
+  });
+
+  const data: ErrorPageData = {
+    error: {
+      name: err.name,
+      message: err.message,
+      stack: err.stack ?? String(error),
+      frames: displayFrames,
+    },
+    request: {
+      method: request.method,
+      url: request.url,
+      headers,
+    },
+    env: maskEnv(env),
+    bindings: extractBindings(config),
+    runtime: {
+      bunVersion: Bun.version,
+      platform: process.platform,
+      arch: process.arch,
+      workerName,
+      configName: config.name,
+    },
+  };
+
+  // Attach trace data if available
+  try {
+    const ctx = getActiveContext();
+    if (ctx?.traceId) {
+      const traceDetail = getTraceStore().getTrace(ctx.traceId);
+      if (traceDetail.spans.length > 0) {
+        data.trace = {
+          traceId: ctx.traceId,
+          spanId: ctx.spanId ?? null,
+          spans: traceDetail.spans.map(s => ({
+            spanId: s.spanId,
+            traceId: s.traceId,
+            parentSpanId: s.parentSpanId,
+            name: s.name,
+            status: s.status,
+            startTime: s.startTime,
+            endTime: s.endTime,
+            durationMs: s.durationMs,
+          })),
+        };
+      }
+    }
+  } catch {
+    // Don't break error page if trace fetch fails
+  }
+
+  // Persist error to tracing store
+  try {
+    const ctx = getActiveContext();
+    getTraceStore().insertError({
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+      errorName: data.error.name,
+      errorMessage: data.error.message,
+      requestMethod: data.request.method,
+      requestUrl: data.request.url,
+      workerName: data.runtime.workerName ?? null,
+      traceId: ctx?.traceId ?? null,
+      spanId: ctx?.spanId ?? null,
+      source: "fetch",
+      data: JSON.stringify(data),
+    });
+  } catch {
+    // Don't let persistence failure break the error response
+  }
+
+  const wantsHtml = (request.headers.get("Accept") ?? "").includes("text/html");
+
+  if (wantsHtml && errorPageHtml) {
+    const script = `<script>window.__BUNFLARE_ERROR__ = ${JSON.stringify(data).replace(/</g, "\\u003c")};</script>`;
+    const html = errorPageHtml.replace("</head>", `${script}\n</head>`);
+
+    return new Response(html, {
+      status: 500,
+      headers: { "Content-Type": "text/html; charset=utf-8" },
+    });
+  }
+
+  // Text-only error response for non-HTML clients (curl, fetch, APIs, etc.)
+  let text = `${data.error.name}: ${data.error.message}\n`;
+  if (displayFrames.length > 0) {
+    text += "\nStack:\n";
+    for (const f of displayFrames) {
+      text += `  at ${f.function} (${f.file}:${f.line}:${f.column})\n`;
+    }
+  }
+  text += `\n${data.request.method} ${data.request.url}\n`;
+
+  return new Response(text, {
+    status: 500,
+    headers: { "Content-Type": "text/plain; charset=utf-8" },
+  });
+}

package/runtime/error-page/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Error — Bunflare</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./style.css" />
+</head>
+<body class="h-full bg-surface text-ink" style="font-family: 'Poppins', sans-serif;">
+  <div id="app" class="h-full"></div>
+  <script type="module" src="./app.tsx"></script>
+</body>
+</html>