Every line. No hidden temple.

1import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
2import {
3  Outlet,
4  Link,
5  createRootRouteWithContext,
6  useRouter,
7  HeadContent,
8  Scripts,
9} from "@tanstack/react-router";
10import { useEffect, type ReactNode } from "react";
11 
12import appCss from "../styles.css?url";
13import { reportLovableError } from "../lib/lovable-error-reporting";
14 
15function NotFoundComponent() {
16  return (
17    <div className="flex min-h-screen items-center justify-center bg-background px-4">
18      <div className="max-w-md text-center">
19        <h1 className="text-7xl font-bold text-foreground">404</h1>
20        <h2 className="mt-4 text-xl font-semibold text-foreground">Page not found</h2>
21        <p className="mt-2 text-sm text-muted-foreground">
22          The page you're looking for doesn't exist or has been moved.
23        </p>
24        <div className="mt-6">
25          <Link
26            to="/"
27            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
28          >
29            Go home
30          </Link>
31        </div>
32      </div>
33    </div>
34  );
35}
36 
37function ErrorComponent({ error, reset }: { error: Error; reset: () => void }) {
38  console.error(error);
39  const router = useRouter();
40  useEffect(() => {
41    reportLovableError(error, { boundary: "tanstack_root_error_component" });
42  }, [error]);
43 
44  return (
45    <div className="flex min-h-screen items-center justify-center bg-background px-4">
46      <div className="max-w-md text-center">
47        <h1 className="text-xl font-semibold tracking-tight text-foreground">
48          This page didn't load
49        </h1>
50        <p className="mt-2 text-sm text-muted-foreground">
51          Something went wrong on our end. You can try refreshing or head back home.
52        </p>
53        <div className="mt-6 flex flex-wrap justify-center gap-2">
54          <button
55            onClick={() => {
56              router.invalidate();
57              reset();
58            }}
59            className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
60          >
61            Try again
62          </button>
63          <a
64            href="/"
65            className="inline-flex items-center justify-center rounded-md border border-input bg-background px-4 py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent"
66          >
67            Go home
68          </a>
69        </div>
70      </div>
71    </div>
72  );
73}
74 
75export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
76  head: () => ({
77    meta: [
78      { charSet: "utf-8" },
79      { name: "viewport", content: "width=device-width, initial-scale=1" },
80      { title: "HYPNOS — The Dreaming Agent" },
81      { name: "description", content: "An autonomous AI agent that dreams every block, ships its own upgrades, and keeps a receipt for every decision — live, in public, forever." },
82      { name: "author", content: "Hypnos Protocol" },
83      { property: "og:title", content: "HYPNOS — The Dreaming Agent" },
84      { property: "og:description", content: "An autonomous AI agent that dreams every block, ships its own upgrades, and keeps a receipt for every decision — live, in public, forever." },
85      { property: "og:type", content: "website" },
86      { name: "twitter:card", content: "summary" },
87      { name: "twitter:site", content: "@HypnosAgent" },
88      { name: "twitter:title", content: "HYPNOS — The Dreaming Agent" },
89      { name: "twitter:description", content: "An autonomous AI agent that dreams every block, ships its own upgrades, and keeps a receipt for every decision — live, in public, forever." },
90      { property: "og:image", content: "https://storage.googleapis.com/gpt-engineer-file-uploads/vzVSV7KgG4UvKfq1JB2NS99uMuy1/social-images/social-1780429272038-hypnos-banner.webp" },
91      { name: "twitter:image", content: "https://storage.googleapis.com/gpt-engineer-file-uploads/vzVSV7KgG4UvKfq1JB2NS99uMuy1/social-images/social-1780429272038-hypnos-banner.webp" },
92    ],
93    links: [
94      {
95        rel: "stylesheet",
96        href: appCss,
97      },
98      {
99        rel: "icon",
100        type: "image/png",
101        href: "/favicon.png",
102      },
103    ],
104  }),
105  shellComponent: RootShell,
106  component: RootComponent,
107  notFoundComponent: NotFoundComponent,
108  errorComponent: ErrorComponent,
109});
110 
111function RootShell({ children }: { children: ReactNode }) {
112  return (
113    <html lang="en">
114      <head>
115        <HeadContent />
116      </head>
117      <body>
118        {children}
119        <Scripts />
120      </body>
121    </html>
122  );
123}
124 
125function RootComponent() {
126  const { queryClient } = Route.useRouteContext();
127 
128  return (
129    <QueryClientProvider client={queryClient}>
130      {/* Required: nested routes render here. Removing <Outlet /> breaks all child routes. */}
131      <Outlet />
132    </QueryClientProvider>
133  );
134}
135