stackblitz · captjreacher · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025 · Sep 28, 2025
diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,5 @@ dist-ssr
 *.vars
 .wrangler
 _worker.bundle
+
+.dev.vars
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,7 +1,9 @@
 import { RemixBrowser } from '@remix-run/react';
 import { startTransition } from 'react';
 import { hydrateRoot } from 'react-dom/client';
+import "@unocss/reset/tailwind.css";
+import "virtual:uno.css";
 
 startTransition(() => {
   hydrateRoot(document.getElementById('root')!, <RemixBrowser />);
-});
+});
diff --git a/app/entry.server.tsx b/app/entry.server.tsx
@@ -1,66 +1,34 @@
 import type { AppLoadContext, EntryContext } from '@remix-run/cloudflare';
 import { RemixServer } from '@remix-run/react';
 import { isbot } from 'isbot';
-import { renderToReadableStream } from 'react-dom/server';
-import { renderHeadToString } from 'remix-island';
-import { Head } from './root';
-import { themeStore } from '~/lib/stores/theme';
-
+import ReactDOMServer from 'react-dom/server';
+import * as ReactDOMServerBrowser from 'react-dom/server.browser';
 export default async function handleRequest(
   request: Request,
   responseStatusCode: number,
   responseHeaders: Headers,
   remixContext: EntryContext,
   _loadContext: AppLoadContext,
 ) {
-  const readable = await renderToReadableStream(<RemixServer context={remixContext} url={request.url} />, {
-    signal: request.signal,
-    onError(error: unknown) {
-      console.error(error);
-      responseStatusCode = 500;
-    },
-  });
-
-  const body = new ReadableStream({
-    start(controller) {
-      const head = renderHeadToString({ request, remixContext, Head });
-
-      controller.enqueue(
-        new Uint8Array(
-          new TextEncoder().encode(
-            `<!DOCTYPE html><html lang="en" data-theme="${themeStore.value}"><head>${head}</head><body><div id="root" class="w-full h-full">`,
-          ),
-        ),
-      );
-
-      const reader = readable.getReader();
-
-      function read() {
-        reader
-          .read()
-          .then(({ done, value }) => {
-            if (done) {
-              controller.enqueue(new Uint8Array(new TextEncoder().encode(`</div></body></html>`)));
-              controller.close();
-
-              return;
-            }
-
-            controller.enqueue(value);
-            read();
-          })
-          .catch((error) => {
-            controller.error(error);
-            readable.cancel();
-          });
-      }
-      read();
+  const serverExports = ReactDOMServer as typeof import('react-dom/server');
+  const browserServerExports =
+    ReactDOMServerBrowser as typeof import('react-dom/server.browser');
+
+  const renderToReadableStream =
+    typeof serverExports.renderToReadableStream === 'function'
+      ? serverExports.renderToReadableStream
+      : browserServerExports.renderToReadableStream;
+
+  const readable = await renderToReadableStream(
+    <RemixServer context={remixContext} url={request.url} />,
+    {
+      signal: request.signal,
+      onError(error: unknown) {
+        console.error(error);
+        responseStatusCode = 500;
+      },
     },
-
-    cancel() {
-      readable.cancel();
-    },
-  });
+  );
 
   if (isbot(request.headers.get('user-agent') || '')) {
     await readable.allReady;
@@ -71,7 +39,7 @@ export default async function handleRequest(
   responseHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
   responseHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
 
-  return new Response(body, {
+  return new Response(readable, {
     headers: responseHeaders,
     status: responseStatusCode,
   });

diff --git a/app/lib/.server/llm/stream-text.ts b/app/lib/.server/llm/stream-text.ts
@@ -12,7 +12,7 @@ interface ToolResult<Name extends string, Args, Result> {
 }
 
 interface Message {
-  role: 'user' | 'assistant';
+  role: 'system' | 'user' | 'assistant';
   content: string;
   toolInvocations?: ToolResult<string, unknown, unknown>[];
 }

diff --git a/app/lib/runtime/action-runner.ts b/app/lib/runtime/action-runner.ts
@@ -1,6 +1,6 @@
 import { WebContainer } from '@webcontainer/api';
 import { map, type MapStore } from 'nanostores';
-import * as nodePath from 'node:path';
+import * as nodePath from 'path';
 import type { BoltAction } from '~/types/actions';
 import { createScopedLogger } from '~/utils/logger';
 import { unreachable } from '~/utils/unreachable';
@@ -184,3 +184,4 @@ export class ActionRunner {
     this.actions.setKey(id, { ...actions[id], ...newState });
   }
 }
+
diff --git a/app/lib/stores/files.ts b/app/lib/stores/files.ts
@@ -1,8 +1,8 @@
 import type { PathWatcherEvent, WebContainer } from '@webcontainer/api';
 import { getEncoding } from 'istextorbinary';
 import { map, type MapStore } from 'nanostores';
-import { Buffer } from 'node:buffer';
-import * as nodePath from 'node:path';
+import { Buffer } from 'buffer';
+import * as nodePath from 'path';
 import { bufferWatchEvents } from '~/utils/buffer';
 import { WORK_DIR } from '~/utils/constants';
 import { computeFileModifications } from '~/utils/diff';
@@ -218,3 +218,4 @@ function convertToBuffer(view: Uint8Array): Buffer {
 
   return buffer as Buffer;
 }
+
diff --git a/app/remix-server-build.d.tsx b/app/remix-server-build.d.tsx
@@ -0,0 +1,6 @@
+declare module "../build/server/index.js" {
+  // Good enough for editor; Remix will provide the real thing at runtime
+  // You can refine this to ServerBuild if you want stricter types.
+  const build: any;
+  export = build;
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,83 +1,79 @@
-import { useStore } from '@nanostores/react';
-import type { LinksFunction } from '@remix-run/cloudflare';
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
-import tailwindReset from '@unocss/reset/tailwind-compat.css?url';
-import { themeStore } from './lib/stores/theme';
-import { stripIndents } from './utils/stripIndent';
-import { createHead } from 'remix-island';
-import { useEffect } from 'react';
+// app/root.tsx
+import type { LinksFunction } from "@remix-run/cloudflare";
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+  useRouteError,
+} from "@remix-run/react";
+import type { ReactNode } from "react";
 
-import reactToastifyStyles from 'react-toastify/dist/ReactToastify.css?url';
-import globalStyles from './styles/index.scss?url';
-import xtermStyles from '@xterm/xterm/css/xterm.css?url';
+// Side-effect CSS imports (keep these; no ?url)
+import "@unocss/reset/tailwind.css";
+import "virtual:uno.css";
 
-import 'virtual:uno.css';
+import { DEFAULT_THEME, kTheme } from "~/lib/stores/theme";
+
+const themeInitScript = `(() => {
+  try {
+    const storedTheme = localStorage.getItem(${JSON.stringify(kTheme)});
+    if (storedTheme) {
+      document.documentElement.setAttribute('data-theme', storedTheme);
+    }
+  } catch {}
+})();`;
 
 export const links: LinksFunction = () => [
-  {
-    rel: 'icon',
-    href: '/favicon.svg',
-    type: 'image/svg+xml',
-  },
-  { rel: 'stylesheet', href: reactToastifyStyles },
-  { rel: 'stylesheet', href: tailwindReset },
-  { rel: 'stylesheet', href: globalStyles },
-  { rel: 'stylesheet', href: xtermStyles },
-  {
-    rel: 'preconnect',
-    href: 'https://fonts.googleapis.com',
-  },
-  {
-    rel: 'preconnect',
-    href: 'https://fonts.gstatic.com',
-    crossOrigin: 'anonymous',
-  },
-  {
-    rel: 'stylesheet',
-    href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap',
-  },
+  { rel: "icon", href: "/favicon.svg", type: "image/svg+xml" },
 ];
 
-const inlineThemeCode = stripIndents`
-  setTutorialKitTheme();
+// 👇 This is what entry.server.tsx expects to exist
+export default function App() {
+  return (
+    <Layout>
+      <Outlet />
+    </Layout>
+  );
+}
 
-  function setTutorialKitTheme() {
-    let theme = localStorage.getItem('bolt_theme');
+export function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" data-theme={DEFAULT_THEME}>
+      <head>
+        <Meta />
+        <Links />
+        <script dangerouslySetInnerHTML={{ __html: themeInitScript }} />
+      </head>
+      <body className="min-h-dvh bg-neutral-950 text-white antialiased">
+        <div id="root" className="h-full w-full">
+          {children}
+        </div>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
 
-    if (!theme) {
-      theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
+export function ErrorBoundary() {
+  const error = useRouteError();
+  let message = "Something went wrong";
 
-    document.querySelector('html')?.setAttribute('data-theme', theme);
+  if (isRouteErrorResponse(error)) {
+    message = `${error.status} ${error.statusText}`;
+  } else if (error instanceof Error) {
+    message = error.message;
   }
-`;
-
-export const Head = createHead(() => (
-  <>
-    <meta charSet="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <Meta />
-    <Links />
-    <script dangerouslySetInnerHTML={{ __html: inlineThemeCode }} />
-  </>
-));
-
-export function Layout({ children }: { children: React.ReactNode }) {
-  const theme = useStore(themeStore);
-
-  useEffect(() => {
-    document.querySelector('html')?.setAttribute('data-theme', theme);
-  }, [theme]);
 
   return (
-    <>
-      {children}
-      <ScrollRestoration />
-      <Scripts />
-    </>
+    <Layout>
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center">
+        <h1 className="text-2xl font-semibold">Application error</h1>
+        <p className="max-w-lg text-balance text-neutral-300">{message}</p>
+      </div>
+    </Layout>
   );
 }
-
-export default function App() {
-  return <Outlet />;
-}
diff --git a/app/routes/api.chat.ts b/app/routes/api.chat.ts
@@ -1,59 +1,7 @@
-import { type ActionFunctionArgs } from '@remix-run/cloudflare';
-import { MAX_RESPONSE_SEGMENTS, MAX_TOKENS } from '~/lib/.server/llm/constants';
-import { CONTINUE_PROMPT } from '~/lib/.server/llm/prompts';
-import { streamText, type Messages, type StreamingOptions } from '~/lib/.server/llm/stream-text';
-import SwitchableStream from '~/lib/.server/llm/switchable-stream';
+export { action } from "./app.chat";
 
-export async function action(args: ActionFunctionArgs) {
-  return chatAction(args);
-}
-
-async function chatAction({ context, request }: ActionFunctionArgs) {
-  const { messages } = await request.json<{ messages: Messages }>();
-
-  const stream = new SwitchableStream();
-
-  try {
-    const options: StreamingOptions = {
-      toolChoice: 'none',
-      onFinish: async ({ text: content, finishReason }) => {
-        if (finishReason !== 'length') {
-          return stream.close();
-        }
-
-        if (stream.switches >= MAX_RESPONSE_SEGMENTS) {
-          throw Error('Cannot continue message: Maximum segments reached');
-        }
-
-        const switchesLeft = MAX_RESPONSE_SEGMENTS - stream.switches;
-
-        console.log(`Reached max token limit (${MAX_TOKENS}): Continuing message (${switchesLeft} switches left)`);
-
-        messages.push({ role: 'assistant', content });
-        messages.push({ role: 'user', content: CONTINUE_PROMPT });
-
-        const result = await streamText(messages, context.cloudflare.env, options);
-
-        return stream.switchSource(result.toAIStream());
-      },
-    };
-
-    const result = await streamText(messages, context.cloudflare.env, options);
-
-    stream.switchSource(result.toAIStream());
-
-    return new Response(stream.readable, {
-      status: 200,
-      headers: {
-        contentType: 'text/plain; charset=utf-8',
-      },
-    });
-  } catch (error) {
-    console.log(error);
-
-    throw new Response(null, {
-      status: 500,
-      statusText: 'Internal Server Error',
-    });
-  }
-}
+export const loader = () =>
+  new Response("Method Not Allowed", {
+    status: 405,
+    headers: { Allow: "POST" },
+  });