@agent-native/core 0.5.0-dev.b51eaae → 0.6.1

package/dist/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/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/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/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/default/app/lib/utils.ts

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

package/dist/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>
+  );
+}

package/dist/templates/default/app/routes/_index.tsx

@@ -0,0 +1,62 @@
+import { useTheme } from "next-themes";
+
+export function meta() {
+  return [{ title: "{{APP_TITLE}}" }];
+}
+
+export function HydrateFallback() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground" />
+    </div>
+  );
+}
+
+export default function IndexPage() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen px-6">
+      <div className="max-w-md w-full space-y-8 text-center">
+        <div className="space-y-3">
+          <h1 className="text-2xl font-semibold tracking-tight text-foreground">
+            Your app is running
+          </h1>
+          <p className="text-[14px] text-muted-foreground leading-relaxed">
+            Start building by editing{" "}
+            <code className="text-[13px] bg-muted px-1.5 py-0.5 rounded font-mono">
+              app/routes/_index.tsx
+            </code>
+          </p>
+        </div>
+
+        <div className="h-px bg-border" />
+
+        <div className="grid grid-cols-2 gap-3 text-left">
+          <a
+            href="https://agent-native.com/docs"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group rounded-lg border border-border/50 px-4 py-3 hover:bg-accent/50 transition-colors"
+          >
+            <p className="text-[13px] font-medium text-foreground">
+              Documentation
+            </p>
+            <p className="text-[12px] text-muted-foreground mt-0.5">
+              Learn the framework
+            </p>
+          </a>
+          <button
+            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+            className="rounded-lg border border-border/50 px-4 py-3 hover:bg-accent/50 transition-colors text-left"
+          >
+            <p className="text-[13px] font-medium text-foreground">Theme</p>
+            <p className="text-[12px] text-muted-foreground mt-0.5">
+              Toggle dark / light
+            </p>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/default/app/routes.ts

@@ -0,0 +1,4 @@
+import { type RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default flatRoutes() satisfies RouteConfig;

package/dist/templates/default/app/vite-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "react-dom/server.browser" {
+  export * from "react-dom/server";
+  export { default } from "react-dom/server";
+}

package/dist/templates/default/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/global.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

package/dist/templates/default/data/sync-config.json

@@ -0,0 +1 @@
+{ "patterns": ["data/**/*.json"] }

package/dist/templates/default/learnings.defaults.md

@@ -0,0 +1,5 @@
+# Learnings
+
+<!-- This file is your app's memory. The AI reads it at the start of every conversation and updates it when it learns something new. -->
+<!-- Your personal learnings.md is gitignored so preferences and private info stay local. -->
+<!-- This defaults file is what new checkouts start with. -->

package/dist/templates/default/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "{{APP_NAME}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "agent-native dev",
+    "build": "agent-native build",
+    "start": "agent-native start",
+    "typecheck": "agent-native typecheck",
+    "action": "agent-native action",
+    "script": "agent-native script"
+  },
+  "dependencies": {
+    "@agent-native/core": "^0.6.0",
+    "@assistant-ui/react": "^0.12.19",
+    "@assistant-ui/react-markdown": "^0.12.6",
+    "@tabler/icons-react": "^3.40.0",
+    "h3": "^2.0.1-rc.20",
+    "isbot": "^5"
+  },
+  "devDependencies": {
+    "@react-router/dev": "^7.13.1",
+    "@react-router/fs-routes": "^7.13.1",
+    "@tanstack/react-query": "^5.84.2",
+    "@types/node": "^24.2.1",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.539.0",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router": "^7.13.1",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss": "^3.4.17",
+    "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.20.3",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.2"
+  }
+}

package/dist/templates/default/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/dist/templates/default/public/icon-180.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
+  <rect width="180" height="180" rx="36" fill="#111111"/>
+  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="99">⚡</text>
+</svg>

package/dist/templates/default/public/icon-192.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 192 192">
+  <rect width="192" height="192" rx="38" fill="#111111"/>
+  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="105">⚡</text>
+</svg>

package/dist/templates/default/public/icon-512.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="102" fill="#111111"/>
+  <text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" font-size="281">⚡</text>
+</svg>

package/dist/templates/default/public/manifest.json

@@ -0,0 +1,13 @@
+{
+  "name": "Agent Native App",
+  "short_name": "App",
+  "description": "Agent-native application",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#111111",
+  "theme_color": "#111111",
+  "icons": [
+    { "src": "/icon-192.svg", "sizes": "192x192", "type": "image/svg+xml" },
+    { "src": "/icon-512.svg", "sizes": "512x512", "type": "image/svg+xml" }
+  ]
+}

package/dist/templates/default/react-router.config.ts

@@ -0,0 +1,6 @@
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  appDirectory: "app",
+  ssr: true,
+} satisfies Config;

package/dist/templates/default/server/middleware/auth.ts

@@ -0,0 +1,15 @@
+/**
+ * Global auth middleware — runs for ALL requests (page routes, API routes,
+ * framework routes). The auth plugin configures the guard; this middleware
+ * enforces it on every request.
+ *
+ * Without this, auth only runs for /_agent-native/* routes because the
+ * framework handler's middleware registry is scoped to that catch-all.
+ * Page routes (/, /settings) and API routes (/api/*) would bypass auth.
+ */
+import { defineEventHandler } from "h3";
+import { runAuthGuard } from "@agent-native/core/server";
+
+export default defineEventHandler(async (event) => {
+  return runAuthGuard(event);
+});

package/dist/templates/default/server/routes/[...page].get.ts

@@ -0,0 +1,5 @@
+import { createH3SSRHandler } from "@agent-native/core/server/ssr-handler";
+
+export default createH3SSRHandler(
+  () => import("virtual:react-router/server-build"),
+);

package/dist/templates/default/server/routes/api/hello.get.ts

@@ -0,0 +1,5 @@
+import { defineEventHandler } from "h3";
+
+export default defineEventHandler(() => {
+  return { message: "Hello from your @agent-native/core app!" };
+});

package/dist/templates/default/shared/api.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared API types and constants.
+ * Importable from both client (@shared/api) and server.
+ */
+
+export const API_BASE = "/api";

package/dist/templates/default/ssr-entry.ts

@@ -0,0 +1,20 @@
+/**
+ * SSR entry point for Nitro.
+ *
+ * This wraps React Router's request handler so Nitro can use it as an
+ * SSR service. The file must be a real file (not a virtual module) so
+ * Nitro can resolve it during build.
+ *
+ * Similar to how TanStack Start provides a server.ts entry for Nitro.
+ */
+import { createRequestHandler } from "react-router";
+
+const handler = createRequestHandler(
+  () => import("virtual:react-router/server-build"),
+);
+
+export default {
+  async fetch(request: Request) {
+    return handler(request);
+  },
+};

package/dist/templates/default/tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from "tailwindcss";
+import preset from "@agent-native/core/tailwind";
+
+export default {
+  presets: [preset],
+  content: ["./app/**/*.{ts,tsx}"],
+} satisfies Config;

package/dist/templates/default/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@agent-native/core/tsconfig.base.json",
+  "include": [
+    "app/**/*",
+    "server/**/*",
+    "shared/**/*",
+    "vite.config.ts",
+    "react-router.config.ts",
+    ".react-router/types/**/*"
+  ]
+}

package/dist/templates/default/vite.config.ts

@@ -0,0 +1,6 @@
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "@agent-native/core/vite";
+
+export default defineConfig({
+  plugins: [reactRouter()],
+});