@agent-native/core 0.4.5 → 0.6.1

package/dist/templates/templates/default/.env.example

@@ -0,0 +1,5 @@
+# Server port (production)
+PORT=3000
+
+# Custom health check message
+PING_MESSAGE=pong

package/dist/templates/templates/default/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "all"
+}

package/dist/templates/templates/default/AGENTS.md

@@ -0,0 +1,110 @@
+# {{APP_NAME}} — Agent Guide
+
+This app follows the agent-native core philosophy: the agent and UI are equal partners. Everything the UI can do, the agent can do via actions. The agent always knows what you're looking at via application state. See the root AGENTS.md for full framework documentation.
+
+This is an **@agent-native/core** application -- the AI agent and UI share state through a SQL database, with polling for real-time sync.
+
+### Core Principles
+
+1. **Shared SQL database** -- All app state lives in SQL (SQLite locally, cloud DB via `DATABASE_URL` in production). Core stores: `application_state`, `settings`, `oauth_tokens`, `sessions`, `resources`.
+2. **All AI through agent chat** -- No inline LLM calls. UI delegates to the AI via `sendToAgentChat()` / `agentChat.submit()`.
+3. **Actions for agent operations** -- `pnpm action <name>` dispatches to callable action files in `actions/`.
+4. **Polling for real-time sync** -- Database writes trigger version counter increments that the UI polls to stay in sync.
+5. **Agent can update code** -- The agent can modify this app's source code directly.
+
+### Authentication
+
+Auth is automatic and environment-driven:
+
+- **Dev mode**: Auth is bypassed. `getSession()` returns `{ email: "local@localhost" }`.
+- **Production** (`ACCESS_TOKEN` set): Auth middleware auto-mounts.
+
+Use `getSession(event)` server-side and `useSession()` client-side.
+
+## Resources
+
+Resources are SQL-backed persistent files for notes, learnings, and context.
+
+**At the start of every conversation, read these resources (both personal and shared scopes):**
+
+1. **`AGENTS.md`** -- user-specific context. Read both `--scope personal` and `--scope shared`.
+2. **`LEARNINGS.md`** -- user preferences, corrections, and patterns. Read both scopes.
+
+**Update `LEARNINGS.md` when you learn something important.**
+
+| Action            | Args                                                        | Purpose                 |
+| ----------------- | ----------------------------------------------------------- | ----------------------- |
+| `resource-read`   | `--path <path> [--scope personal\|shared]`                  | Read a resource         |
+| `resource-write`  | `--path <path> --content <text> [--scope personal\|shared]` | Write/update a resource |
+| `resource-list`   | `[--prefix <path>] [--scope personal\|shared\|all]`         | List resources          |
+| `resource-delete` | `--path <path> [--scope personal\|shared]`                  | Delete a resource       |
+
+## Application State
+
+Ephemeral UI state is stored in the SQL `application_state` table, accessed via `readAppState(key)` and `writeAppState(key, value)` from `@agent-native/core/application-state`.
+
+| State Key    | Purpose                                   | Direction                  |
+| ------------ | ----------------------------------------- | -------------------------- |
+| `navigation` | Current view                              | UI -> Agent (read-only)    |
+| `navigate`   | Navigate command (one-shot, auto-deleted) | Agent -> UI (auto-deleted) |
+
+The `navigation` key is written by the UI whenever the route changes. The `navigate` key is a one-shot command: the agent writes it, the UI reads and executes the navigation, then deletes it.
+
+## Agent Operations
+
+**Always know what the user is currently viewing before you edit anything.** The user's view can change mid-conversation. Stale IDs lead to editing the wrong record.
+
+### If you are the built-in agent-chat agent
+
+A `<current-screen>` block is auto-injected into every user message with the current view, IDs, and selected item. You can trust it for the first action of a turn without calling `view-screen`. If the user says "this" or "now do X" after several tool calls, the user may have navigated — call `view-screen` again for a fresh snapshot.
+
+### If you are an external CLI agent (Claude Code, Codex, Cursor, etc.)
+
+You do NOT get auto-injected screen state. **Call `pnpm action view-screen` at the start of every task and before any edit** so you're acting on the IDs the user currently sees, not what was open earlier. Do not rely on cached context from previous turns.
+
+### Actions
+
+| Action        | Args                                                                           | Purpose                                                                                 |
+| ------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------- |
+| `view-screen` |                                                                                | See current UI state                                                                    |
+| `navigate`    | `--view <name>` or `--path <url>`                                              | Navigate the UI                                                                         |
+| `hello`       | `[--name <name>]`                                                              | Example script                                                                          |
+| `db-schema`   |                                                                                | Show all tables, columns, types                                                         |
+| `db-query`    | `--sql "SELECT ..."`                                                           | Run a SELECT query                                                                      |
+| `db-exec`     | `--sql "INSERT ..."`                                                           | Run INSERT/UPDATE/DELETE (use for short/multi-column writes)                            |
+| `db-patch`    | `--table <t> --column <c> --where "<clause>" --find "<old>" --replace "<new>"` | Surgical search/replace on a large text column — sends a diff instead of the full value |
+
+**Pick the right SQL tool:**
+
+- Use `db-exec UPDATE` for short columns, multi-column writes, or computed updates.
+- Use `db-patch` when you only need to tweak a small slice of a **large** text/JSON column (documents, slide HTML, dashboard/form JSON). It saves tokens by sending `{find, replace}` instead of re-transmitting the whole column. Targets exactly one row per call — narrow `--where` by primary key. Supports `--edits '[{find,replace},...]'` for batch edits and `--all` for replace-every-occurrence.
+- If a template-specific action exists (e.g. `edit-document`, `update-slide`), prefer it — those also push live updates to any open collaborative editor.
+
+## Skills
+
+Skills in `.agents/skills/` provide detailed guidance for each architectural rule. Read them before making changes.
+
+| Skill                 | When to read                                                   |
+| --------------------- | -------------------------------------------------------------- |
+| `storing-data`        | Before storing or reading any app state                        |
+| `delegate-to-agent`   | Before adding LLM calls or AI delegation                       |
+| `actions`             | Before creating or modifying actions                           |
+| `real-time-sync`      | Before wiring up real-time UI sync                             |
+| `self-modifying-code` | Before editing source, components, or styles                   |
+| `capture-learnings`   | Before recording user preferences or corrections               |
+| `frontend-design`     | Before building or restyling any UI component, page, or layout |
+| `agent-engines`       | Before switching LLM providers or registering a custom engine  |
+
+## When Adding Features
+
+As you build out this app, follow this checklist for each new feature:
+
+1. **Add navigation state entries** -- create or extend `app/hooks/use-navigation-state.ts` to track new routes
+2. **Enhance view-screen** -- make the view-screen script return relevant context for the new view
+3. **Create domain actions** -- add scripts for CRUD operations on new data models
+4. **Create domain skills** -- add `.agents/skills/<feature>/SKILL.md` documenting the data model, storage patterns, and agent operations
+5. **Update this AGENTS.md** -- add the new actions, state keys, and common tasks
+
+---
+
+For code editing and development guidance, read `DEVELOPING.md`.

package/dist/templates/templates/default/DEVELOPING.md

@@ -0,0 +1,117 @@
+# {{APP_NAME}} — Development Guide
+
+This guide is for development-mode agents editing this app's source code. For app operations and tools, see AGENTS.md.
+
+## Framework Basics
+
+**Client-side-first rendering:** This app uses React Router v7 framework mode with `ssr: true`, but all app content renders **client-side only**. The server renders only the HTML shell (meta tags, styles, scripts) plus a loading spinner. This is enforced by the `ClientOnly` wrapper in `root.tsx` — never remove it. Browser APIs (`window`, `localStorage`, `new Date()`) are safe to use anywhere in app code because components never run on the server.
+
+**Do NOT fetch data server-side** in route loaders. The standard pattern is: server renders a spinner, client hydrates, React Query hooks fetch from `/api/*`.
+
+## Adding a Page
+
+Create a file in `app/routes/`. The filename determines the URL path:
+
+```
+app/routes/_index.tsx              → /
+app/routes/settings.tsx            → /settings
+app/routes/inbox.tsx               → /inbox
+app/routes/inbox.$threadId.tsx     → /inbox/:threadId
+app/routes/$id.tsx                 → /:id (dynamic param)
+```
+
+Each route file exports a default component and optional `meta()`:
+
+```tsx
+import MyPage from "@/pages/MyPage";
+
+export function meta() {
+  return [{ title: "My Page" }];
+}
+
+export default function MyPageRoute() {
+  return <MyPage />;
+}
+```
+
+## Adding an API Route
+
+Create a file in `server/routes/api/`. The filename determines the URL path and HTTP method:
+
+```
+server/routes/api/items/index.get.ts    → GET  /api/items
+server/routes/api/items/[id].get.ts     → GET  /api/items/:id
+server/routes/api/items/[id].patch.ts   → PATCH /api/items/:id
+```
+
+Each file exports a default `defineEventHandler`.
+
+## Server Plugins
+
+Startup logic (auth, SSE, etc.) lives in `server/plugins/`. Use `defineNitroPlugin` from core:
+
+```ts
+import { defineNitroPlugin } from "@agent-native/core";
+
+export default defineNitroPlugin(async (nitroApp) => {
+  // Runs once at server startup
+});
+```
+
+## Key Imports
+
+| Import                                       | Purpose                                                                    |
+| -------------------------------------------- | -------------------------------------------------------------------------- |
+| `defineNitroPlugin`                          | Define a server plugin (re-exported from Nitro)                            |
+| `createDefaultSSEHandler`                    | Create SSE endpoint for DB change events (server)                          |
+| `readAppState`, `writeAppState`              | Read/write application state (from `@agent-native/core/application-state`) |
+| `readSetting`, `writeSetting`                | Read/write settings (from `@agent-native/core/settings`)                   |
+| `readResource`, `writeResource`              | Read/write resources (from `@agent-native/core/resources`)                 |
+| `defineEventHandler`, `readBody`, `getQuery` | H3 route handler utilities (re-exported)                                   |
+| `sendToAgentChat`                            | Send messages to agent from UI (client-side)                               |
+| `agentChat`                                  | Send messages to agent from scripts (server-side)                          |
+
+## Adding a Script
+
+Create `actions/my-script.ts` exporting `default async function(args: string[])`.
+Run with: `pnpm action my-script --arg value`
+
+## Sending to Agent Chat
+
+**From UI:**
+
+```ts
+import { sendToAgentChat } from "@agent-native/core";
+sendToAgentChat({
+  message: "Generate something",
+  context: "...",
+  submit: true,
+});
+```
+
+**From scripts:**
+
+```ts
+import { agentChat } from "@agent-native/core";
+agentChat.submit("Generate something");
+```
+
+## Database
+
+By default, data is stored in SQLite at `data/app.db`. For production/cloud deployment, set `DATABASE_URL` to point to a remote database (Turso, Neon, Supabase, D1).
+
+| Variable              | Required         | Description                                                |
+| --------------------- | ---------------- | ---------------------------------------------------------- |
+| `DATABASE_URL`        | No (has default) | Database connection string (default: `file:./data/app.db`) |
+| `DATABASE_AUTH_TOKEN` | For remote DBs   | Auth token for Turso or other remote databases             |
+
+## Tech Stack
+
+- **Framework:** @agent-native/core + React Router v7 (framework mode)
+- **Frontend:** React 18, Vite, TailwindCSS, shadcn/ui
+- **Routing:** File-based via `flatRoutes()` — SSR shell + client rendering
+- **Backend:** Nitro (via @agent-native/core) — file-based API routing, server plugins, deploy-anywhere presets
+- **State:** SQL-backed (SSE for real-time updates)
+- **Build:** `pnpm build` (React Router build — client + SSR + Nitro server)
+- **Dev:** `pnpm dev` (Vite dev server with both React Router + Nitro plugins)
+- **Start:** `node .output/server/index.mjs` (production)

package/dist/templates/templates/default/_gitignore

@@ -0,0 +1,37 @@
+# React Router generated types
+.react-router/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Environment
+.env
+.env.*
+!.env.example
+
+# Data
+data/uploads/
+data/settings.json
+data/.sessions.json
+
+# Learnings (personal preferences and memory — use learnings.defaults.md for tracked defaults)
+learnings.md

package/dist/templates/templates/default/actions/hello.ts

@@ -0,0 +1,20 @@
+/**
+ * Example script — callable via `pnpm action hello`
+ *
+ * Scripts export a default async function that receives CLI args.
+ */
+
+import { parseArgs } from "@agent-native/core";
+import { agentChat } from "@agent-native/core";
+
+export default async function hello(args: string[]) {
+  const parsed = parseArgs(args);
+  const name = parsed.name ?? "world";
+
+  console.log(`Hello, ${name}!`);
+
+  // Example: send a message to agent chat (works in Electron context)
+  if (parsed["send-chat"] === "true") {
+    agentChat.submit(`Hello from the script system! Name: ${name}`);
+  }
+}

package/dist/templates/templates/default/actions/navigate.ts

@@ -0,0 +1,53 @@
+/**
+ * Navigate the UI to a view.
+ *
+ * Writes a navigate command to application state which the UI reads and auto-deletes.
+ *
+ * Usage:
+ *   pnpm action navigate --view=home
+ *   pnpm action navigate --path=/some/route
+ *
+ * Options:
+ *   --view   View name to navigate to
+ *   --path   URL path to navigate to
+ */
+
+import { parseArgs } from "@agent-native/core";
+import { writeAppState } from "@agent-native/core/application-state";
+import type { ScriptTool } from "@agent-native/core";
+
+export const tool: ScriptTool = {
+  description:
+    "Navigate the UI to a specific view or path. Writes a navigate command to application state which the UI reads and auto-deletes.",
+  parameters: {
+    type: "object",
+    properties: {
+      view: { type: "string", description: "View name to navigate to" },
+      path: { type: "string", description: "URL path to navigate to" },
+    },
+  },
+};
+
+export async function run(args: Record<string, string>): Promise<string> {
+  if (!args.view && !args.path) {
+    return "Error: At least --view or --path is required.";
+  }
+  const nav: Record<string, string> = {};
+  if (args.view) nav.view = args.view;
+  if (args.path) nav.path = args.path;
+  await writeAppState("navigate", nav);
+  return `Navigating to ${args.view || args.path}`;
+}
+
+export default async function main(): Promise<void> {
+  const args = parseArgs(process.argv.slice(2)) as Record<string, string>;
+  if (!args.view && !args.path) {
+    console.error(
+      "Error: At least --view or --path is required. Usage: pnpm action navigate --view=home",
+    );
+    process.exit(1);
+  }
+  const result = await run(args);
+  console.error(result);
+  console.log(JSON.stringify({ result }));
+}

package/dist/templates/templates/default/actions/run.ts

@@ -0,0 +1,2 @@
+import { runScript } from "@agent-native/core/scripts";
+runScript();

package/dist/templates/templates/default/actions/view-screen.ts

@@ -0,0 +1,39 @@
+/**
+ * See what the user is currently looking at on screen.
+ *
+ * Reads and returns the current navigation state from application state.
+ *
+ * Usage:
+ *   pnpm action view-screen
+ */
+
+import { parseArgs } from "@agent-native/core";
+import { readAppState } from "@agent-native/core/application-state";
+import type { ScriptTool } from "@agent-native/core";
+
+export const tool: ScriptTool = {
+  description:
+    "See what the user is currently looking at on screen. Returns the current navigation state. Note: basic screen context is auto-included with each message — use this tool only when you need a detailed or refreshed snapshot.",
+  parameters: {
+    type: "object",
+    properties: {},
+  },
+};
+
+export async function run(_args: Record<string, string>): Promise<string> {
+  const navigation = await readAppState("navigation");
+
+  const screen: Record<string, unknown> = {};
+  if (navigation) screen.navigation = navigation;
+
+  if (Object.keys(screen).length === 0) {
+    return "No application state found. Is the app running?";
+  }
+  return JSON.stringify(screen, null, 2);
+}
+
+export default async function main(): Promise<void> {
+  const args = parseArgs(process.argv.slice(2)) as Record<string, string>;
+  const result = await run(args);
+  console.log(result);
+}

package/dist/templates/templates/default/app/entry.client.tsx

@@ -0,0 +1,4 @@
+import { hydrateRoot } from "react-dom/client";
+import { HydratedRouter } from "react-router/dom";
+
+hydrateRoot(document, <HydratedRouter />);

package/dist/templates/templates/default/app/entry.server.tsx

@@ -0,0 +1,56 @@
+import type { AppLoadContext, EntryContext } from "react-router";
+import { ServerRouter } from "react-router";
+import ReactDOMServer from "react-dom/server.browser";
+const { renderToReadableStream } = ReactDOMServer;
+import { isbot } from "isbot";
+import { wrapWithAnalytics } from "@agent-native/core/server";
+
+export const streamTimeout = 5_000;
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext,
+) {
+  if (request.method.toUpperCase() === "HEAD") {
+    return new Response(null, {
+      status: responseStatusCode,
+      headers: responseHeaders,
+    });
+  }
+
+  const userAgent = request.headers.get("user-agent");
+  const waitForAll = (userAgent && isbot(userAgent)) || routerContext.isSpaMode;
+
+  const abortController = new AbortController();
+  const timeoutId = setTimeout(() => abortController.abort(), streamTimeout);
+
+  try {
+    const body = await renderToReadableStream(
+      <ServerRouter context={routerContext} url={request.url} />,
+      {
+        signal: abortController.signal,
+        onError(error: unknown) {
+          if (!abortController.signal.aborted) {
+            responseStatusCode = 500;
+            console.error(error);
+          }
+        },
+      },
+    );
+
+    if (waitForAll) {
+      await body.allReady;
+    }
+
+    responseHeaders.set("Content-Type", "text/html");
+    return new Response(wrapWithAnalytics(body), {
+      headers: responseHeaders,
+      status: responseStatusCode,
+    });
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}

package/dist/templates/templates/default/app/global.css

@@ -0,0 +1,95 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 220 10% 10%;
+    --card: 0 0% 100%;
+    --card-foreground: 220 10% 10%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 220 10% 10%;
+    --primary: 220 10% 15%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 220 10% 95%;
+    --secondary-foreground: 220 10% 15%;
+    --muted: 220 10% 95%;
+    --muted-foreground: 220 5% 45%;
+    --accent: 220 10% 95%;
+    --accent-foreground: 220 10% 15%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 220 10% 90%;
+    --input: 220 10% 90%;
+    --ring: 220 10% 40%;
+    --radius: 0.5rem;
+    --sidebar-background: 220 10% 97%;
+    --sidebar-foreground: 220 5% 45%;
+    --sidebar-primary: 220 10% 15%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 220 10% 95%;
+    --sidebar-accent-foreground: 220 10% 15%;
+    --sidebar-border: 220 10% 90%;
+    --sidebar-ring: 220 10% 40%;
+  }
+
+  .dark {
+    --background: 220 6% 6%;
+    --foreground: 0 0% 90%;
+    --card: 220 5% 6%;
+    --card-foreground: 0 0% 90%;
+    --popover: 220 5% 6%;
+    --popover-foreground: 0 0% 90%;
+    --primary: 0 0% 75%;
+    --primary-foreground: 220 6% 6%;
+    --secondary: 220 4% 12%;
+    --secondary-foreground: 0 0% 90%;
+    --muted: 220 4% 10%;
+    --muted-foreground: 220 4% 60%;
+    --accent: 220 4% 13%;
+    --accent-foreground: 0 0% 90%;
+    --destructive: 0 63% 51%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 220 4% 14%;
+    --input: 220 4% 14%;
+    --ring: 0 0% 60%;
+    --radius: 0.5rem;
+    --sidebar-background: 220 6% 4%;
+    --sidebar-foreground: 220 4% 60%;
+    --sidebar-primary: 0 0% 75%;
+    --sidebar-primary-foreground: 220 6% 6%;
+    --sidebar-accent: 220 4% 10%;
+    --sidebar-accent-foreground: 0 0% 90%;
+    --sidebar-border: 220 4% 10%;
+    --sidebar-ring: 0 0% 60%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: "Inter", sans-serif;
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.4);
+}

package/dist/templates/templates/default/app/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "@agent-native/core";

package/dist/templates/templates/default/app/root.tsx

@@ -0,0 +1,107 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+} from "react-router";
+import { useState } from "react";
+import {
+  QueryClient,
+  QueryClientProvider,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { ThemeProvider } from "next-themes";
+import { useDbSync } from "@agent-native/core";
+import { ClientOnly, DefaultSpinner } from "@agent-native/core/client";
+import { Toaster } from "sonner";
+import "./global.css";
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="manifest" href="/manifest.json" />
+        <meta name="theme-color" content="#111111" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content="black-translucent"
+        />
+        <meta name="apple-mobile-web-app-title" content="App" />
+        <link rel="apple-touch-icon" href="/icon-180.svg" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+function DbSyncSetup() {
+  const qc = useQueryClient();
+  useDbSync({ queryClient: qc, queryKeys: ["files", "data"] });
+  return null;
+}
+
+export default function Root() {
+  const [queryClient] = useState(() => new QueryClient());
+  return (
+    <ClientOnly fallback={<DefaultSpinner />}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <QueryClientProvider client={queryClient}>
+          <DbSyncSetup />
+          <Outlet />
+          <Toaster />
+        </QueryClientProvider>
+      </ThemeProvider>
+    </ClientOnly>
+  );
+}
+
+export function ErrorBoundary({ error }: { error: unknown }) {
+  let message = "Oops!";
+  let details = "An unexpected error occurred.";
+  let stack: string | undefined;
+
+  if (isRouteErrorResponse(error)) {
+    message = error.status === 404 ? "404" : "Error";
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
+  } else if (
+    typeof process !== "undefined" &&
+    process.env.NODE_ENV !== "production" &&
+    error instanceof Error
+  ) {
+    details = error.message;
+    stack = error.stack;
+  }
+
+  return (
+    <main className="flex items-center justify-center min-h-screen p-4">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-2">{message}</h1>
+        <p className="text-muted-foreground">{details}</p>
+        {stack && (
+          <pre className="mt-4 text-left text-xs overflow-auto max-w-lg mx-auto p-4 bg-muted rounded">
+            <code>{stack}</code>
+          </pre>
+        )}
+      </div>
+    </main>
+  );
+}