@helloleo/plugins 0.2.16 → 0.2.19

package/dist/templates/tanstack-router-2026-06-15/src/components/error-component.tsx

@@ -1,12 +1,9 @@
 import { useState } from 'react'
 import { useRouterState } from '@tanstack/react-router'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 // Rendered by the router's defaultErrorComponent for any uncaught render or
 // loader error. Per-route `errorComponent` options override it. Keep this
-// component free of app dependencies (toasts, auth, etc.) -- it must still
-// render when the rest of the app is broken.
+// component free of app dependencies (toasts, auth, ui components, etc).
 export function DefaultErrorComponent({ error }: { error: Error }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const [copied, setCopied] = useState(false)
@@ -27,21 +24,27 @@ export function DefaultErrorComponent({ error }: { error: Error }) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-lg">
-        <CardHeader>
-          <CardTitle>Something went wrong</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+    <div className="min-h-screen flex items-center justify-center bg-white p-4">
+      <div className="w-full max-w-lg rounded-xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <h2 className="text-base font-semibold text-neutral-900">
+          Something went wrong
+        </h2>
+        <div className="mt-4 space-y-4">
+          <pre className="text-sm text-red-600 whitespace-pre-wrap break-words rounded-md bg-neutral-100 p-3">
             {error.message}
           </pre>
-          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
-          <p className="text-sm text-muted-foreground">
+          <button
+            type="button"
+            onClick={copyForLeo}
+            className="inline-flex items-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50"
+          >
+            {copied ? 'Copied!' : 'Copy error'}
+          </button>
+          <p className="text-sm text-neutral-500">
             Paste the copied error to Leo and it will help you fix it.
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/dist/templates/tanstack-router-2026-06-15/src/lib/proxy.ts

@@ -7,6 +7,14 @@
  * user already configured in Project Settings -- you NEVER pass an API key
  * from frontend code, and you NEVER call third-party hosts directly.
  *
+ * EXCEPTION -- NetSuite: never route it through this proxy. This proxy
+ * refreshes tokens per PROJECT (one shared credential for every end user).
+ * NetSuite runtime calls must stay per USER: the app signs each visitor in
+ * via its own /auth/netsuite/* + /api server routes and calls NetSuite with
+ * THAT visitor's session (see setup_netsuite / src/lib/netsuite-server.ts,
+ * netsuiteFetch(bearer(request), ...)). The proxy rejects "netsuite" with a
+ * 400 -- that's intentional, not a gap to fill in.
+ *
  * Two modes:
  *   A) Frontend-only project -> import callIntegration() from this file.
  *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
@@ -44,6 +52,29 @@ export const INTEGRATION_PROXY_URL = '{{LEO_INTEGRATION_PROXY_URL}}';
 
 export const BACKEND_URL = (import.meta.env.VITE_WORKER_URL as string | undefined) ?? '';
 
+// Multi-environment integrations: the published HelloLeo Cloud Worker has
+// HELLOLEO_ENV=production injected at publish. Forwarding `?env=production`
+// makes the proxy resolve credentials from the project's PRODUCTION integration
+// connection (e.g. your production Odoo) instead of the development one, so a
+// published app talks to production while the preview keeps talking to staging.
+//
+// Reads the flag from the server runtime (Cloudflare Worker / Node) when
+// available; in the browser it's absent and we send no param — the proxy then
+// derives the environment from the request origin, so client-side calls from
+// the published app still resolve to production. Server-side calls (SSR / Cloud
+// Worker) carry no browser origin, which is exactly why the explicit param
+// matters there.
+function proxyUrl(): string {
+  // Read via globalThis only (no bare `process` reference) so this compiles in
+  // any scaffolded project regardless of whether node types are present.
+  const g = globalThis as {
+    HELLOLEO_ENV?: string;
+    process?: { env?: Record<string, string | undefined> };
+  };
+  const env = g.HELLOLEO_ENV ?? g.process?.env?.HELLOLEO_ENV;
+  return env === 'production' ? `${INTEGRATION_PROXY_URL}?env=production` : INTEGRATION_PROXY_URL;
+}
+
 export interface ProxyRequest {
   integration: string;
   endpoint: string;
@@ -61,7 +92,14 @@ export interface ProxyResponse<T = unknown> {
 export async function callIntegration<T = unknown>(
   req: ProxyRequest,
 ): Promise<ProxyResponse<T>> {
-  const res = await fetch(INTEGRATION_PROXY_URL, {
+  if (req.integration.toLowerCase() === 'netsuite') {
+    throw new Error(
+      'NetSuite is not proxied -- use the setup_netsuite auth flow (its ' +
+        '/auth/netsuite + /api routes) with the signed-in user\'s session, ' +
+        'not callIntegration().',
+    );
+  }
+  const res = await fetch(proxyUrl(), {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ method: 'POST', ...req }),

package/dist/templates/tanstack-start-2026-06-18/src/components/error-component.tsx

@@ -1,12 +1,9 @@
 import { useState } from 'react'
 import { useRouterState } from '@tanstack/react-router'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 // Rendered by the router's defaultErrorComponent for any uncaught render or
 // loader error. Per-route `errorComponent` options override it. Keep this
-// component free of app dependencies (toasts, auth, etc.) -- it must still
-// render when the rest of the app is broken.
+// component free of app dependencies (toasts, auth, ui components, etc).
 export function DefaultErrorComponent({ error }: { error: Error }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const [copied, setCopied] = useState(false)
@@ -27,21 +24,27 @@ export function DefaultErrorComponent({ error }: { error: Error }) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-lg">
-        <CardHeader>
-          <CardTitle>Something went wrong</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+    <div className="min-h-screen flex items-center justify-center bg-white p-4">
+      <div className="w-full max-w-lg rounded-xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <h2 className="text-base font-semibold text-neutral-900">
+          Something went wrong
+        </h2>
+        <div className="mt-4 space-y-4">
+          <pre className="text-sm text-red-600 whitespace-pre-wrap break-words rounded-md bg-neutral-100 p-3">
             {error.message}
           </pre>
-          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
-          <p className="text-sm text-muted-foreground">
+          <button
+            type="button"
+            onClick={copyForLeo}
+            className="inline-flex items-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50"
+          >
+            {copied ? 'Copied!' : 'Copy error'}
+          </button>
+          <p className="text-sm text-neutral-500">
             Paste the copied error to Leo and it will help you fix it.
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/dist/templates/tanstack-start-2026-06-18/src/lib/proxy.ts

@@ -7,6 +7,14 @@
  * user already configured in Project Settings -- you NEVER pass an API key
  * from frontend code, and you NEVER call third-party hosts directly.
  *
+ * EXCEPTION -- NetSuite: never route it through this proxy. This proxy
+ * refreshes tokens per PROJECT (one shared credential for every end user).
+ * NetSuite runtime calls must stay per USER: the app signs each visitor in
+ * via its own /auth/netsuite/* + /api server routes and calls NetSuite with
+ * THAT visitor's session (see setup_netsuite / src/lib/netsuite-server.ts,
+ * netsuiteFetch(bearer(request), ...)). The proxy rejects "netsuite" with a
+ * 400 -- that's intentional, not a gap to fill in.
+ *
  * Two modes:
  *   A) Frontend-only project -> import callIntegration() from this file.
  *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
@@ -41,6 +49,29 @@
 
 export const INTEGRATION_PROXY_URL = '{{LEO_INTEGRATION_PROXY_URL}}';
 
+// Multi-environment integrations: the published HelloLeo Cloud Worker has
+// HELLOLEO_ENV=production injected at publish. Forwarding `?env=production`
+// makes the proxy resolve credentials from the project's PRODUCTION integration
+// connection (e.g. your production Odoo) instead of the development one, so a
+// published app talks to production while the preview keeps talking to staging.
+//
+// Reads the flag from the server runtime (Cloudflare Worker / Node) when
+// available; in the browser it's absent and we send no param — the proxy then
+// derives the environment from the request origin, so client-side calls from
+// the published app still resolve to production. Server-side calls (SSR / Cloud
+// Worker) carry no browser origin, which is exactly why the explicit param
+// matters there.
+function proxyUrl(): string {
+  // Read via globalThis only (no bare `process` reference) so this compiles in
+  // any scaffolded project regardless of whether node types are present.
+  const g = globalThis as {
+    HELLOLEO_ENV?: string;
+    process?: { env?: Record<string, string | undefined> };
+  };
+  const env = g.HELLOLEO_ENV ?? g.process?.env?.HELLOLEO_ENV;
+  return env === 'production' ? `${INTEGRATION_PROXY_URL}?env=production` : INTEGRATION_PROXY_URL;
+}
+
 export interface ProxyRequest {
   integration: string;
   endpoint: string;
@@ -58,7 +89,13 @@ export interface ProxyResponse<T = unknown> {
 export async function callIntegration<T = unknown>(
   req: ProxyRequest,
 ): Promise<ProxyResponse<T>> {
-  const res = await fetch(INTEGRATION_PROXY_URL, {
+  if (req.integration.toLowerCase() === 'netsuite') {
+    throw new Error(
+      'NetSuite is not proxied -- call it from this app\'s own /auth/netsuite + ' +
+        '/api server routes with the signed-in user\'s session, not callIntegration().',
+    );
+  }
+  const res = await fetch(proxyUrl(), {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ method: 'POST', ...req }),

package/dist/templates/tanstack-start-2026-07-30/src/components/error-component.tsx

@@ -1,12 +1,9 @@
 import { useState } from 'react'
 import { useRouterState } from '@tanstack/react-router'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 // Rendered by the router's defaultErrorComponent for any uncaught render or
 // loader error. Per-route `errorComponent` options override it. Keep this
-// component free of app dependencies (toasts, auth, etc.) -- it must still
-// render when the rest of the app is broken.
+// component free of app dependencies (toasts, auth, ui components, etc).
 export function DefaultErrorComponent({ error }: { error: Error }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const [copied, setCopied] = useState(false)
@@ -27,21 +24,27 @@ export function DefaultErrorComponent({ error }: { error: Error }) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-lg">
-        <CardHeader>
-          <CardTitle>Something went wrong</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+    <div className="min-h-screen flex items-center justify-center bg-white p-4">
+      <div className="w-full max-w-lg rounded-xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <h2 className="text-base font-semibold text-neutral-900">
+          Something went wrong
+        </h2>
+        <div className="mt-4 space-y-4">
+          <pre className="text-sm text-red-600 whitespace-pre-wrap break-words rounded-md bg-neutral-100 p-3">
             {error.message}
           </pre>
-          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
-          <p className="text-sm text-muted-foreground">
+          <button
+            type="button"
+            onClick={copyForLeo}
+            className="inline-flex items-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50"
+          >
+            {copied ? 'Copied!' : 'Copy error'}
+          </button>
+          <p className="text-sm text-neutral-500">
             Paste the copied error to Leo and it will help you fix it.
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/dist/templates/tanstack-start-2026-07-30/src/lib/proxy.ts

@@ -41,6 +41,29 @@
 
 export const INTEGRATION_PROXY_URL = '{{LEO_INTEGRATION_PROXY_URL}}';
 
+// Multi-environment integrations: the published HelloLeo Cloud Worker has
+// HELLOLEO_ENV=production injected at publish. Forwarding `?env=production`
+// makes the proxy resolve credentials from the project's PRODUCTION integration
+// connection (e.g. your production Odoo) instead of the development one, so a
+// published app talks to production while the preview keeps talking to staging.
+//
+// Reads the flag from the server runtime (Cloudflare Worker / Node) when
+// available; in the browser it's absent and we send no param — the proxy then
+// derives the environment from the request origin, so client-side calls from
+// the published app still resolve to production. Server-side calls (SSR / Cloud
+// Worker) carry no browser origin, which is exactly why the explicit param
+// matters there.
+function proxyUrl(): string {
+  // Read via globalThis only (no bare `process` reference) so this compiles in
+  // any scaffolded project regardless of whether node types are present.
+  const g = globalThis as {
+    HELLOLEO_ENV?: string;
+    process?: { env?: Record<string, string | undefined> };
+  };
+  const env = g.HELLOLEO_ENV ?? g.process?.env?.HELLOLEO_ENV;
+  return env === 'production' ? `${INTEGRATION_PROXY_URL}?env=production` : INTEGRATION_PROXY_URL;
+}
+
 export interface ProxyRequest {
   integration: string;
   endpoint: string;
@@ -58,7 +81,13 @@ export interface ProxyResponse<T = unknown> {
 export async function callIntegration<T = unknown>(
   req: ProxyRequest,
 ): Promise<ProxyResponse<T>> {
-  const res = await fetch(INTEGRATION_PROXY_URL, {
+  if (req.integration.toLowerCase() === 'netsuite') {
+    throw new Error(
+      'NetSuite is not proxied -- call it from this app\'s own /auth/netsuite + ' +
+        '/api server routes with the signed-in user\'s session, not callIntegration().',
+    );
+  }
+  const res = await fetch(proxyUrl(), {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ method: 'POST', ...req }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helloleo/plugins",
-  "version": "0.2.16",
+  "version": "0.2.19",
   "description": "OpenCode plugins for HelloLeo",
   "license": "UNLICENSED",
   "type": "module",

package/src/templates/tanstack-router-2026-06-15/src/components/error-component.tsx

@@ -1,12 +1,9 @@
 import { useState } from 'react'
 import { useRouterState } from '@tanstack/react-router'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 // Rendered by the router's defaultErrorComponent for any uncaught render or
 // loader error. Per-route `errorComponent` options override it. Keep this
-// component free of app dependencies (toasts, auth, etc.) -- it must still
-// render when the rest of the app is broken.
+// component free of app dependencies (toasts, auth, ui components, etc).
 export function DefaultErrorComponent({ error }: { error: Error }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const [copied, setCopied] = useState(false)
@@ -27,21 +24,27 @@ export function DefaultErrorComponent({ error }: { error: Error }) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-lg">
-        <CardHeader>
-          <CardTitle>Something went wrong</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+    <div className="min-h-screen flex items-center justify-center bg-white p-4">
+      <div className="w-full max-w-lg rounded-xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <h2 className="text-base font-semibold text-neutral-900">
+          Something went wrong
+        </h2>
+        <div className="mt-4 space-y-4">
+          <pre className="text-sm text-red-600 whitespace-pre-wrap break-words rounded-md bg-neutral-100 p-3">
             {error.message}
           </pre>
-          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
-          <p className="text-sm text-muted-foreground">
+          <button
+            type="button"
+            onClick={copyForLeo}
+            className="inline-flex items-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50"
+          >
+            {copied ? 'Copied!' : 'Copy error'}
+          </button>
+          <p className="text-sm text-neutral-500">
             Paste the copied error to Leo and it will help you fix it.
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/src/templates/tanstack-router-2026-06-15/src/lib/proxy.ts

@@ -7,6 +7,14 @@
  * user already configured in Project Settings -- you NEVER pass an API key
  * from frontend code, and you NEVER call third-party hosts directly.
  *
+ * EXCEPTION -- NetSuite: never route it through this proxy. This proxy
+ * refreshes tokens per PROJECT (one shared credential for every end user).
+ * NetSuite runtime calls must stay per USER: the app signs each visitor in
+ * via its own /auth/netsuite/* + /api server routes and calls NetSuite with
+ * THAT visitor's session (see setup_netsuite / src/lib/netsuite-server.ts,
+ * netsuiteFetch(bearer(request), ...)). The proxy rejects "netsuite" with a
+ * 400 -- that's intentional, not a gap to fill in.
+ *
  * Two modes:
  *   A) Frontend-only project -> import callIntegration() from this file.
  *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
@@ -44,6 +52,29 @@ export const INTEGRATION_PROXY_URL = '{{LEO_INTEGRATION_PROXY_URL}}';
 
 export const BACKEND_URL = (import.meta.env.VITE_WORKER_URL as string | undefined) ?? '';
 
+// Multi-environment integrations: the published HelloLeo Cloud Worker has
+// HELLOLEO_ENV=production injected at publish. Forwarding `?env=production`
+// makes the proxy resolve credentials from the project's PRODUCTION integration
+// connection (e.g. your production Odoo) instead of the development one, so a
+// published app talks to production while the preview keeps talking to staging.
+//
+// Reads the flag from the server runtime (Cloudflare Worker / Node) when
+// available; in the browser it's absent and we send no param — the proxy then
+// derives the environment from the request origin, so client-side calls from
+// the published app still resolve to production. Server-side calls (SSR / Cloud
+// Worker) carry no browser origin, which is exactly why the explicit param
+// matters there.
+function proxyUrl(): string {
+  // Read via globalThis only (no bare `process` reference) so this compiles in
+  // any scaffolded project regardless of whether node types are present.
+  const g = globalThis as {
+    HELLOLEO_ENV?: string;
+    process?: { env?: Record<string, string | undefined> };
+  };
+  const env = g.HELLOLEO_ENV ?? g.process?.env?.HELLOLEO_ENV;
+  return env === 'production' ? `${INTEGRATION_PROXY_URL}?env=production` : INTEGRATION_PROXY_URL;
+}
+
 export interface ProxyRequest {
   integration: string;
   endpoint: string;
@@ -61,7 +92,14 @@ export interface ProxyResponse<T = unknown> {
 export async function callIntegration<T = unknown>(
   req: ProxyRequest,
 ): Promise<ProxyResponse<T>> {
-  const res = await fetch(INTEGRATION_PROXY_URL, {
+  if (req.integration.toLowerCase() === 'netsuite') {
+    throw new Error(
+      'NetSuite is not proxied -- use the setup_netsuite auth flow (its ' +
+        '/auth/netsuite + /api routes) with the signed-in user\'s session, ' +
+        'not callIntegration().',
+    );
+  }
+  const res = await fetch(proxyUrl(), {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ method: 'POST', ...req }),

package/src/templates/tanstack-start-2026-06-18/src/components/error-component.tsx

@@ -1,12 +1,9 @@
 import { useState } from 'react'
 import { useRouterState } from '@tanstack/react-router'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 // Rendered by the router's defaultErrorComponent for any uncaught render or
 // loader error. Per-route `errorComponent` options override it. Keep this
-// component free of app dependencies (toasts, auth, etc.) -- it must still
-// render when the rest of the app is broken.
+// component free of app dependencies (toasts, auth, ui components, etc).
 export function DefaultErrorComponent({ error }: { error: Error }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const [copied, setCopied] = useState(false)
@@ -27,21 +24,27 @@ export function DefaultErrorComponent({ error }: { error: Error }) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-lg">
-        <CardHeader>
-          <CardTitle>Something went wrong</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+    <div className="min-h-screen flex items-center justify-center bg-white p-4">
+      <div className="w-full max-w-lg rounded-xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <h2 className="text-base font-semibold text-neutral-900">
+          Something went wrong
+        </h2>
+        <div className="mt-4 space-y-4">
+          <pre className="text-sm text-red-600 whitespace-pre-wrap break-words rounded-md bg-neutral-100 p-3">
             {error.message}
           </pre>
-          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
-          <p className="text-sm text-muted-foreground">
+          <button
+            type="button"
+            onClick={copyForLeo}
+            className="inline-flex items-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50"
+          >
+            {copied ? 'Copied!' : 'Copy error'}
+          </button>
+          <p className="text-sm text-neutral-500">
             Paste the copied error to Leo and it will help you fix it.
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }

package/src/templates/tanstack-start-2026-06-18/src/lib/proxy.ts

@@ -7,6 +7,14 @@
  * user already configured in Project Settings -- you NEVER pass an API key
  * from frontend code, and you NEVER call third-party hosts directly.
  *
+ * EXCEPTION -- NetSuite: never route it through this proxy. This proxy
+ * refreshes tokens per PROJECT (one shared credential for every end user).
+ * NetSuite runtime calls must stay per USER: the app signs each visitor in
+ * via its own /auth/netsuite/* + /api server routes and calls NetSuite with
+ * THAT visitor's session (see setup_netsuite / src/lib/netsuite-server.ts,
+ * netsuiteFetch(bearer(request), ...)). The proxy rejects "netsuite" with a
+ * 400 -- that's intentional, not a gap to fill in.
+ *
  * Two modes:
  *   A) Frontend-only project -> import callIntegration() from this file.
  *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
@@ -41,6 +49,29 @@
 
 export const INTEGRATION_PROXY_URL = '{{LEO_INTEGRATION_PROXY_URL}}';
 
+// Multi-environment integrations: the published HelloLeo Cloud Worker has
+// HELLOLEO_ENV=production injected at publish. Forwarding `?env=production`
+// makes the proxy resolve credentials from the project's PRODUCTION integration
+// connection (e.g. your production Odoo) instead of the development one, so a
+// published app talks to production while the preview keeps talking to staging.
+//
+// Reads the flag from the server runtime (Cloudflare Worker / Node) when
+// available; in the browser it's absent and we send no param — the proxy then
+// derives the environment from the request origin, so client-side calls from
+// the published app still resolve to production. Server-side calls (SSR / Cloud
+// Worker) carry no browser origin, which is exactly why the explicit param
+// matters there.
+function proxyUrl(): string {
+  // Read via globalThis only (no bare `process` reference) so this compiles in
+  // any scaffolded project regardless of whether node types are present.
+  const g = globalThis as {
+    HELLOLEO_ENV?: string;
+    process?: { env?: Record<string, string | undefined> };
+  };
+  const env = g.HELLOLEO_ENV ?? g.process?.env?.HELLOLEO_ENV;
+  return env === 'production' ? `${INTEGRATION_PROXY_URL}?env=production` : INTEGRATION_PROXY_URL;
+}
+
 export interface ProxyRequest {
   integration: string;
   endpoint: string;
@@ -58,7 +89,13 @@ export interface ProxyResponse<T = unknown> {
 export async function callIntegration<T = unknown>(
   req: ProxyRequest,
 ): Promise<ProxyResponse<T>> {
-  const res = await fetch(INTEGRATION_PROXY_URL, {
+  if (req.integration.toLowerCase() === 'netsuite') {
+    throw new Error(
+      'NetSuite is not proxied -- call it from this app\'s own /auth/netsuite + ' +
+        '/api server routes with the signed-in user\'s session, not callIntegration().',
+    );
+  }
+  const res = await fetch(proxyUrl(), {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ method: 'POST', ...req }),

package/src/templates/tanstack-start-2026-07-30/src/components/error-component.tsx

@@ -1,12 +1,9 @@
 import { useState } from 'react'
 import { useRouterState } from '@tanstack/react-router'
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 // Rendered by the router's defaultErrorComponent for any uncaught render or
 // loader error. Per-route `errorComponent` options override it. Keep this
-// component free of app dependencies (toasts, auth, etc.) -- it must still
-// render when the rest of the app is broken.
+// component free of app dependencies (toasts, auth, ui components, etc).
 export function DefaultErrorComponent({ error }: { error: Error }) {
   const pathname = useRouterState({ select: (s) => s.location.pathname })
   const [copied, setCopied] = useState(false)
@@ -27,21 +24,27 @@ export function DefaultErrorComponent({ error }: { error: Error }) {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-lg">
-        <CardHeader>
-          <CardTitle>Something went wrong</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <pre className="text-sm text-destructive whitespace-pre-wrap break-words rounded-md bg-muted p-3">
+    <div className="min-h-screen flex items-center justify-center bg-white p-4">
+      <div className="w-full max-w-lg rounded-xl border border-neutral-200 bg-white p-6 shadow-sm">
+        <h2 className="text-base font-semibold text-neutral-900">
+          Something went wrong
+        </h2>
+        <div className="mt-4 space-y-4">
+          <pre className="text-sm text-red-600 whitespace-pre-wrap break-words rounded-md bg-neutral-100 p-3">
             {error.message}
           </pre>
-          <Button onClick={copyForLeo}>{copied ? 'Copied!' : 'Copy error'}</Button>
-          <p className="text-sm text-muted-foreground">
+          <button
+            type="button"
+            onClick={copyForLeo}
+            className="inline-flex items-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-neutral-50"
+          >
+            {copied ? 'Copied!' : 'Copy error'}
+          </button>
+          <p className="text-sm text-neutral-500">
             Paste the copied error to Leo and it will help you fix it.
           </p>
-        </CardContent>
-      </Card>
+        </div>
+      </div>
     </div>
   )
 }