@helloleo/plugins 0.1.7 → 0.1.9

package/dist/index.js

@@ -12910,35 +12910,58 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 }
 function netsuiteTs() {
   return `/*
- * NetSuite OAuth client helper.
+ * NetSuite OAuth client helper (bearer-token-in-fragment).
  *
- * NetSuite uses a TWO-Integration-Record setup:
- *   1. MCP record (scope: mcp)            -- used by HelloLeo at build time
- *      to introspect the schema. Configured in Project Settings, not here.
- *   2. Runtime record (scope: rest_webservices) -- used by THIS app to sign
- *      end-users in. Credentials are stored as HelloLeo Cloud secrets on the
- *      project's Worker (env.NETSUITE_ACCOUNT_ID, env.NETSUITE_CLIENT_ID,
- *      env.NETSUITE_CLIENT_SECRET). They never reach the browser.
+ * Two NetSuite Integration Records back this:
+ *   1. MCP (scope: mcp)            -- used by HelloLeo at build time.
+ *   2. Runtime (scope: rest_webservices) -- used here at sign-in time.
+ * Runtime credentials live as HelloLeo Cloud secrets on the project's Worker
+ * (env.NETSUITE_ACCOUNT_ID / _CLIENT_ID / _CLIENT_SECRET). They never reach
+ * the browser. Cookies are NOT used -- frontend \u2194 Worker are cross-site
+ * (e.g. *.helloleo.dev <-> *.workers.dev) and Chrome partitions / drops
+ * third-party cookies in the HelloLeo preview iframe.
  *
  * Flow:
  *   1. User clicks "Sign in with NetSuite".
- *   2. Browser hits the project's Worker at /auth/netsuite/start, which
- *      redirects to NetSuite's OAuth authorise endpoint with PKCE.
- *   3. NetSuite redirects back to /auth/netsuite/callback on the Worker.
- *      The Worker exchanges the code for an access + refresh token, stores
- *      them in D1 keyed by a session id, and sets a session cookie.
- *   4. The frontend calls /api/me on the Worker to read the signed-in user.
- *   5. All NetSuite REST calls flow through the Worker so tokens stay
- *      server-side.
+ *   2. Browser navigates to the Worker /auth/netsuite/start.
+ *   3. Worker redirects to NetSuite's OAuth UI with PKCE.
+ *   4. NetSuite redirects back to the Worker /auth/netsuite/callback.
+ *   5. Worker exchanges the code, mints a session id, then redirects to
+ *      <return_to>#nssid=<sid>. URL fragments stay in the browser only.
+ *   6. This module reads the fragment on load, stashes the sid in
+ *      sessionStorage, and sends it as Authorization: Bearer on every
+ *      Worker call.
  *
- * IMPORTANT: NEVER use a hardcoded password or sessionStorage flag as the
- * login gate -- the NetSuite OAuth flow above is the only acceptable
- * authentication for a NetSuite project.
+ * NEVER use a hardcoded password gate. NEVER use sessionStorage as the
+ * authoritative auth state -- the only acceptable check is /api/me on the
+ * Worker. sessionStorage here is just a cache of the bearer token.
  */
 
 export const WORKER_URL = import.meta.env.VITE_WORKER_URL ?? '';
+const TOKEN_KEY = 'nssid';
 
-export function signInWithNetSuite(returnTo: string = window.location.pathname) {
+// Capture-and-strip the #nssid=... fragment as early as possible so URLs
+// shown to the user stay clean. Runs once at module load.
+(function bootstrapTokenFromHash() {
+  if (typeof window === 'undefined') return;
+  const hash = window.location.hash.replace(/^#/, '');
+  if (!hash) return;
+  const params = new URLSearchParams(hash);
+  const sid = params.get(TOKEN_KEY);
+  if (sid) {
+    try { sessionStorage.setItem(TOKEN_KEY, sid); } catch {}
+    params.delete(TOKEN_KEY);
+    const remaining = params.toString();
+    const newHash = remaining ? '#' + remaining : '';
+    window.history.replaceState(null, '', window.location.pathname + window.location.search + newHash);
+  }
+})();
+
+export function getSessionToken(): string | null {
+  try { return sessionStorage.getItem(TOKEN_KEY); } catch { return null; }
+}
+
+export function signInWithNetSuite(returnTo: string = window.location.href) {
   if (!WORKER_URL) {
     throw new Error(
       'VITE_WORKER_URL is not set. HelloLeo Cloud must be provisioned before sign-in works.',
@@ -12958,8 +12981,10 @@ export interface NetSuiteSession {
 
 export async function getNetSuiteSession(): Promise<NetSuiteSession> {
   if (!WORKER_URL) return { authenticated: false };
+  const sid = getSessionToken();
+  if (!sid) return { authenticated: false };
   const res = await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/api/me\`, {
-    credentials: 'include',
+    headers: { Authorization: 'Bearer ' + sid },
   });
   if (!res.ok) return { authenticated: false };
   const data = await res.json();
@@ -12968,16 +12993,38 @@ export async function getNetSuiteSession(): Promise<NetSuiteSession> {
 
 export async function signOutNetSuite(): Promise<void> {
   if (!WORKER_URL) return;
-  await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/logout\`, {
-    method: 'POST',
-    credentials: 'include',
-  });
+  const sid = getSessionToken();
+  if (sid) {
+    try {
+      await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/logout\`, {
+        method: 'POST',
+        headers: { Authorization: 'Bearer ' + sid },
+      });
+    } catch {}
+  }
+  try { sessionStorage.removeItem(TOKEN_KEY); } catch {}
   window.location.reload();
 }
+
+/**
+ * Helper for ALL other Worker calls (your dashboard endpoints, etc.).
+ * Always go through this instead of bare fetch -- it injects the bearer
+ * token and routes through the Worker so NetSuite tokens stay server-side.
+ */
+export async function workerFetch(pathOrUrl: string, init: RequestInit = {}): Promise<Response> {
+  if (!WORKER_URL) throw new Error('VITE_WORKER_URL is not set');
+  const url = pathOrUrl.startsWith('http')
+    ? pathOrUrl
+    : \`\${WORKER_URL.replace(/\\/$/, '')}\${pathOrUrl.startsWith('/') ? '' : '/'}\${pathOrUrl}\`;
+  const sid = getSessionToken();
+  const headers = new Headers(init.headers ?? {});
+  if (sid) headers.set('Authorization', 'Bearer ' + sid);
+  return fetch(url, { ...init, headers });
+}
 `;
 }
 function signInButtonTsx() {
-  return `import { signInWithNetSuite } from '../lib/netsuite';
+  return `import { signInWithNetSuite } from '../../lib/netsuite';
 
 export function SignInWithNetSuite() {
   return (
@@ -12991,6 +13038,113 @@ export function SignInWithNetSuite() {
 }
 `;
 }
+function netsuiteLoginPageTsx() {
+  return `import { SignInWithNetSuite } from './SignInWithNetSuite';
+
+/**
+ * Default unauthenticated landing page. Replaces any password gate.
+ * Customise copy / imagery freely but keep <SignInWithNetSuite /> as the
+ * only call-to-action -- it points to the Worker's /auth/netsuite/start.
+ */
+export function LoginPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex">
+      <div className="hidden lg:flex lg:w-1/2 bg-primary text-primary-foreground p-12 flex-col justify-between">
+        <div className="text-xl font-semibold">NetSuite App</div>
+        <div>
+          <h1 className="text-4xl font-bold leading-tight">
+            Connect your NetSuite account
+          </h1>
+          <p className="mt-4 text-primary-foreground/80 max-w-md">
+            Sign in with your NetSuite credentials to access your data securely.
+            Tokens stay server-side on HelloLeo Cloud -- they never reach the
+            browser.
+          </p>
+        </div>
+        <div className="text-xs text-primary-foreground/60">
+          Powered by HelloLeo
+        </div>
+      </div>
+      <div className="flex-1 flex items-center justify-center px-6 py-12">
+        <div className="w-full max-w-sm space-y-6">
+          <div>
+            <h2 className="text-2xl font-semibold">Welcome</h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Use the button below to sign in. You'll be redirected to NetSuite
+              to authorise access, then back here.
+            </p>
+          </div>
+          <SignInWithNetSuite />
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}
+function netsuiteAuthGateTsx() {
+  return `import { useEffect, useState } from 'react';
+import { LoginPage } from './LoginPage';
+import { getNetSuiteSession, type NetSuiteSession } from '../../lib/netsuite';
+
+/**
+ * Mandatory auth gate for NetSuite projects. Wrap your real App content with
+ * <AuthGate>...</AuthGate>. Never render NetSuite data without this gate -- it
+ * is the ONLY supported authentication for a NetSuite project (no password
+ * gates, no sessionStorage flags, no shared credential).
+ *
+ * Pattern in src/App.tsx:
+ *
+ *   import { AuthGate } from './components/auth/AuthGate';
+ *   export default function App() {
+ *     return (
+ *       <AuthGate>
+ *         <Dashboard />   {/* your authenticated content */}
+ *       </AuthGate>
+ *     );
+ *   }
+ */
+export function AuthGate({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<NetSuiteSession | null>(null);
+
+  useEffect(() => { getNetSuiteSession().then(setSession); }, []);
+
+  if (session === null) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+      </div>
+    );
+  }
+
+  if (!session.authenticated) return <LoginPage />;
+
+  return <>{children}</>;
+}
+`;
+}
+function netsuiteAppTsx() {
+  return `import { AuthGate } from './components/auth/AuthGate';
+
+/**
+ * NetSuite project entry point. KEEP <AuthGate> as the outermost element --
+ * removing it disables real OAuth and exposes NetSuite data to anonymous
+ * users. Build your dashboard / pages inside the gate.
+ */
+export default function App() {
+  return (
+    <AuthGate>
+      <div className="min-h-screen bg-background text-foreground p-8">
+        <h1 className="text-2xl font-bold">You are signed in to NetSuite.</h1>
+        <p className="text-muted-foreground mt-2">
+          Replace this placeholder with your dashboard.
+        </p>
+      </div>
+    </AuthGate>
+  );
+}
+`;
+}
 var scaffold = tool({
   description: "Scaffold a new React + Vite + Tailwind CSS project with the HelloLeo design system. " + "Creates all mandatory boilerplate: package.json, index.html (with Google Fonts), " + "vite.config.js, tailwind.config.js, postcss.config.js, src/index.css (CSS variables " + "light+dark), src/lib/utils.ts (cn helper), and src/main.tsx. " + "Call this FIRST for any new project before writing App.tsx and components.",
   args: {
@@ -12998,7 +13152,7 @@ var scaffold = tool({
     primaryColor: tool.schema.string().optional().describe("Primary brand color. Prefer raw HSL triplet (no hsl() wrapper, no # prefix), " + 'e.g. "221.2 83.2% 53.3%". Hex like "#3b82f6" is also accepted and will ' + "be auto-converted. Default: blue."),
     fontFamily: tool.schema.string().optional().describe('Google Font family name, e.g. "Inter", "Poppins" (default: Inter)'),
     borderRadius: tool.schema.string().optional().describe('Base border radius, e.g. "0.5rem", "0.75rem" (default: 0.5rem)'),
-    integrations: tool.schema.array(tool.schema.string()).optional().describe("Connected integration slugs for this project (live MCP list). " + 'Pass ["netsuite"] when the project uses NetSuite -- the scaffold ' + "will add src/lib/netsuite.ts (OAuth client helper) and a " + "src/components/auth/SignInWithNetSuite.tsx button so OAuth is " + "wired from the start. Forbids hardcoded password gates by " + "replacing them with the real flow against the project's Worker.")
+    integrations: tool.schema.array(tool.schema.string()).optional().describe("Connected integration slugs for this project (live MCP list). " + 'Pass ["netsuite"] when the project uses NetSuite -- the scaffold ' + "will add src/lib/netsuite.ts (OAuth client helper), " + "src/components/auth/{SignInWithNetSuite,LoginPage,AuthGate}.tsx " + "and a src/App.tsx wrapped in <AuthGate>. OAuth is wired from " + "day one. Forbids hardcoded password gates -- the gate IS the " + "real flow against the project's Worker.")
   },
   async execute(args, context) {
     const dir = context.directory;
@@ -13029,7 +13183,13 @@ var scaffold = tool({
       files.push([path2.join("src", "lib", "netsuite.ts"), netsuiteTs()], [
         path2.join("src", "components", "auth", "SignInWithNetSuite.tsx"),
         signInButtonTsx()
-      ]);
+      ], [
+        path2.join("src", "components", "auth", "LoginPage.tsx"),
+        netsuiteLoginPageTsx()
+      ], [
+        path2.join("src", "components", "auth", "AuthGate.tsx"),
+        netsuiteAuthGateTsx()
+      ], [path2.join("src", "App.tsx"), netsuiteAppTsx()]);
     }
     const created = [];
     for (const [filePath, content] of files) {
@@ -13049,7 +13209,7 @@ var scaffold = tool({
       "Update package.json with any extra packages you need after scaffolding."
     ];
     if (hasNetsuite) {
-      out.push("", "NetSuite project detected:", "  - Use <SignInWithNetSuite/> from src/components/auth/ as your", "    login button. NEVER use a hardcoded password gate.", "  - signInWithNetSuite() in src/lib/netsuite.ts redirects to the", "    project's Worker at /auth/netsuite/start. The Worker must be", "    deployed via the cloudflare-backend MCP with routes:", "      GET  /auth/netsuite/start     -- redirect to NetSuite OAuth", "      GET  /auth/netsuite/callback  -- code -> token exchange", "      GET  /api/me                   -- current session", "      POST /auth/netsuite/logout    -- clear session", "    Worker reads env.NETSUITE_ACCOUNT_ID, env.NETSUITE_CLIENT_ID,", "    env.NETSUITE_CLIENT_SECRET (set by the runtime-setup wizard).", "  - VITE_WORKER_URL must be set in the project env so the frontend", "    knows where to send users. The HelloLeo Cloud provisioner", "    seeds this automatically.");
+      out.push("", "NetSuite project -- auth is already wired:", "  - App.tsx wraps everything in <AuthGate>. Build your dashboard", "    INSIDE the gate. NEVER remove the gate or build a password", "    placeholder -- real OAuth is the only allowed login.", "  - LoginPage.tsx + SignInWithNetSuite.tsx are the unauthenticated", "    view. Customise the copy / imagery, keep <SignInWithNetSuite/>", "    as the call-to-action.", "  - signInWithNetSuite() in src/lib/netsuite.ts hits the Worker at", "    /auth/netsuite/start. Deploy the Worker via cloudflare-backend", "    MCP with routes:", "      GET  /auth/netsuite/start     -- redirect to NetSuite OAuth", "      GET  /auth/netsuite/callback  -- code -> token exchange", "      GET  /api/me                   -- current session", "      POST /auth/netsuite/logout    -- clear session", "    Worker reads env.NETSUITE_ACCOUNT_ID, env.NETSUITE_CLIENT_ID,", "    env.NETSUITE_CLIENT_SECRET (set by the runtime-setup wizard).", "  - VITE_WORKER_URL must be set in the project env so the frontend", "    knows where to send users. The HelloLeo Cloud provisioner", "    seeds this automatically.");
     }
     return out.join(`
 `);

package/package.json

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

package/src/tools/scaffold.ts

@@ -389,35 +389,58 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 
 function netsuiteTs() {
 	return `/*
- * NetSuite OAuth client helper.
+ * NetSuite OAuth client helper (bearer-token-in-fragment).
  *
- * NetSuite uses a TWO-Integration-Record setup:
- *   1. MCP record (scope: mcp)            -- used by HelloLeo at build time
- *      to introspect the schema. Configured in Project Settings, not here.
- *   2. Runtime record (scope: rest_webservices) -- used by THIS app to sign
- *      end-users in. Credentials are stored as HelloLeo Cloud secrets on the
- *      project's Worker (env.NETSUITE_ACCOUNT_ID, env.NETSUITE_CLIENT_ID,
- *      env.NETSUITE_CLIENT_SECRET). They never reach the browser.
+ * Two NetSuite Integration Records back this:
+ *   1. MCP (scope: mcp)            -- used by HelloLeo at build time.
+ *   2. Runtime (scope: rest_webservices) -- used here at sign-in time.
+ * Runtime credentials live as HelloLeo Cloud secrets on the project's Worker
+ * (env.NETSUITE_ACCOUNT_ID / _CLIENT_ID / _CLIENT_SECRET). They never reach
+ * the browser. Cookies are NOT used -- frontend ↔ Worker are cross-site
+ * (e.g. *.helloleo.dev <-> *.workers.dev) and Chrome partitions / drops
+ * third-party cookies in the HelloLeo preview iframe.
  *
  * Flow:
  *   1. User clicks "Sign in with NetSuite".
- *   2. Browser hits the project's Worker at /auth/netsuite/start, which
- *      redirects to NetSuite's OAuth authorise endpoint with PKCE.
- *   3. NetSuite redirects back to /auth/netsuite/callback on the Worker.
- *      The Worker exchanges the code for an access + refresh token, stores
- *      them in D1 keyed by a session id, and sets a session cookie.
- *   4. The frontend calls /api/me on the Worker to read the signed-in user.
- *   5. All NetSuite REST calls flow through the Worker so tokens stay
- *      server-side.
+ *   2. Browser navigates to the Worker /auth/netsuite/start.
+ *   3. Worker redirects to NetSuite's OAuth UI with PKCE.
+ *   4. NetSuite redirects back to the Worker /auth/netsuite/callback.
+ *   5. Worker exchanges the code, mints a session id, then redirects to
+ *      <return_to>#nssid=<sid>. URL fragments stay in the browser only.
+ *   6. This module reads the fragment on load, stashes the sid in
+ *      sessionStorage, and sends it as Authorization: Bearer on every
+ *      Worker call.
  *
- * IMPORTANT: NEVER use a hardcoded password or sessionStorage flag as the
- * login gate -- the NetSuite OAuth flow above is the only acceptable
- * authentication for a NetSuite project.
+ * NEVER use a hardcoded password gate. NEVER use sessionStorage as the
+ * authoritative auth state -- the only acceptable check is /api/me on the
+ * Worker. sessionStorage here is just a cache of the bearer token.
  */
 
 export const WORKER_URL = import.meta.env.VITE_WORKER_URL ?? '';
+const TOKEN_KEY = 'nssid';
+
+// Capture-and-strip the #nssid=... fragment as early as possible so URLs
+// shown to the user stay clean. Runs once at module load.
+(function bootstrapTokenFromHash() {
+  if (typeof window === 'undefined') return;
+  const hash = window.location.hash.replace(/^#/, '');
+  if (!hash) return;
+  const params = new URLSearchParams(hash);
+  const sid = params.get(TOKEN_KEY);
+  if (sid) {
+    try { sessionStorage.setItem(TOKEN_KEY, sid); } catch {}
+    params.delete(TOKEN_KEY);
+    const remaining = params.toString();
+    const newHash = remaining ? '#' + remaining : '';
+    window.history.replaceState(null, '', window.location.pathname + window.location.search + newHash);
+  }
+})();
+
+export function getSessionToken(): string | null {
+  try { return sessionStorage.getItem(TOKEN_KEY); } catch { return null; }
+}
 
-export function signInWithNetSuite(returnTo: string = window.location.pathname) {
+export function signInWithNetSuite(returnTo: string = window.location.href) {
   if (!WORKER_URL) {
     throw new Error(
       'VITE_WORKER_URL is not set. HelloLeo Cloud must be provisioned before sign-in works.',
@@ -437,8 +460,10 @@ export interface NetSuiteSession {
 
 export async function getNetSuiteSession(): Promise<NetSuiteSession> {
   if (!WORKER_URL) return { authenticated: false };
+  const sid = getSessionToken();
+  if (!sid) return { authenticated: false };
   const res = await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/api/me\`, {
-    credentials: 'include',
+    headers: { Authorization: 'Bearer ' + sid },
   });
   if (!res.ok) return { authenticated: false };
   const data = await res.json();
@@ -447,17 +472,39 @@ export async function getNetSuiteSession(): Promise<NetSuiteSession> {
 
 export async function signOutNetSuite(): Promise<void> {
   if (!WORKER_URL) return;
-  await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/logout\`, {
-    method: 'POST',
-    credentials: 'include',
-  });
+  const sid = getSessionToken();
+  if (sid) {
+    try {
+      await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/logout\`, {
+        method: 'POST',
+        headers: { Authorization: 'Bearer ' + sid },
+      });
+    } catch {}
+  }
+  try { sessionStorage.removeItem(TOKEN_KEY); } catch {}
   window.location.reload();
 }
+
+/**
+ * Helper for ALL other Worker calls (your dashboard endpoints, etc.).
+ * Always go through this instead of bare fetch -- it injects the bearer
+ * token and routes through the Worker so NetSuite tokens stay server-side.
+ */
+export async function workerFetch(pathOrUrl: string, init: RequestInit = {}): Promise<Response> {
+  if (!WORKER_URL) throw new Error('VITE_WORKER_URL is not set');
+  const url = pathOrUrl.startsWith('http')
+    ? pathOrUrl
+    : \`\${WORKER_URL.replace(/\\/$/, '')}\${pathOrUrl.startsWith('/') ? '' : '/'}\${pathOrUrl}\`;
+  const sid = getSessionToken();
+  const headers = new Headers(init.headers ?? {});
+  if (sid) headers.set('Authorization', 'Bearer ' + sid);
+  return fetch(url, { ...init, headers });
+}
 `;
 }
 
 function signInButtonTsx() {
-	return `import { signInWithNetSuite } from '../lib/netsuite';
+	return `import { signInWithNetSuite } from '../../lib/netsuite';
 
 export function SignInWithNetSuite() {
   return (
@@ -472,6 +519,116 @@ export function SignInWithNetSuite() {
 `;
 }
 
+function netsuiteLoginPageTsx() {
+	return `import { SignInWithNetSuite } from './SignInWithNetSuite';
+
+/**
+ * Default unauthenticated landing page. Replaces any password gate.
+ * Customise copy / imagery freely but keep <SignInWithNetSuite /> as the
+ * only call-to-action -- it points to the Worker's /auth/netsuite/start.
+ */
+export function LoginPage() {
+  return (
+    <div className="min-h-screen bg-background text-foreground flex">
+      <div className="hidden lg:flex lg:w-1/2 bg-primary text-primary-foreground p-12 flex-col justify-between">
+        <div className="text-xl font-semibold">NetSuite App</div>
+        <div>
+          <h1 className="text-4xl font-bold leading-tight">
+            Connect your NetSuite account
+          </h1>
+          <p className="mt-4 text-primary-foreground/80 max-w-md">
+            Sign in with your NetSuite credentials to access your data securely.
+            Tokens stay server-side on HelloLeo Cloud -- they never reach the
+            browser.
+          </p>
+        </div>
+        <div className="text-xs text-primary-foreground/60">
+          Powered by HelloLeo
+        </div>
+      </div>
+      <div className="flex-1 flex items-center justify-center px-6 py-12">
+        <div className="w-full max-w-sm space-y-6">
+          <div>
+            <h2 className="text-2xl font-semibold">Welcome</h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Use the button below to sign in. You'll be redirected to NetSuite
+              to authorise access, then back here.
+            </p>
+          </div>
+          <SignInWithNetSuite />
+        </div>
+      </div>
+    </div>
+  );
+}
+`;
+}
+
+function netsuiteAuthGateTsx() {
+	return `import { useEffect, useState } from 'react';
+import { LoginPage } from './LoginPage';
+import { getNetSuiteSession, type NetSuiteSession } from '../../lib/netsuite';
+
+/**
+ * Mandatory auth gate for NetSuite projects. Wrap your real App content with
+ * <AuthGate>...</AuthGate>. Never render NetSuite data without this gate -- it
+ * is the ONLY supported authentication for a NetSuite project (no password
+ * gates, no sessionStorage flags, no shared credential).
+ *
+ * Pattern in src/App.tsx:
+ *
+ *   import { AuthGate } from './components/auth/AuthGate';
+ *   export default function App() {
+ *     return (
+ *       <AuthGate>
+ *         <Dashboard />   {/* your authenticated content */}
+ *       </AuthGate>
+ *     );
+ *   }
+ */
+export function AuthGate({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<NetSuiteSession | null>(null);
+
+  useEffect(() => { getNetSuiteSession().then(setSession); }, []);
+
+  if (session === null) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-background">
+        <div className="h-8 w-8 rounded-full border-2 border-primary border-t-transparent animate-spin" />
+      </div>
+    );
+  }
+
+  if (!session.authenticated) return <LoginPage />;
+
+  return <>{children}</>;
+}
+`;
+}
+
+function netsuiteAppTsx() {
+	return `import { AuthGate } from './components/auth/AuthGate';
+
+/**
+ * NetSuite project entry point. KEEP <AuthGate> as the outermost element --
+ * removing it disables real OAuth and exposes NetSuite data to anonymous
+ * users. Build your dashboard / pages inside the gate.
+ */
+export default function App() {
+  return (
+    <AuthGate>
+      <div className="min-h-screen bg-background text-foreground p-8">
+        <h1 className="text-2xl font-bold">You are signed in to NetSuite.</h1>
+        <p className="text-muted-foreground mt-2">
+          Replace this placeholder with your dashboard.
+        </p>
+      </div>
+    </AuthGate>
+  );
+}
+`;
+}
+
 export const scaffold = tool({
 	description:
 		"Scaffold a new React + Vite + Tailwind CSS project with the HelloLeo design system. " +
@@ -510,10 +667,11 @@ export const scaffold = tool({
 			.describe(
 				"Connected integration slugs for this project (live MCP list). " +
 					'Pass ["netsuite"] when the project uses NetSuite -- the scaffold ' +
-					"will add src/lib/netsuite.ts (OAuth client helper) and a " +
-					"src/components/auth/SignInWithNetSuite.tsx button so OAuth is " +
-					"wired from the start. Forbids hardcoded password gates by " +
-					"replacing them with the real flow against the project's Worker.",
+					"will add src/lib/netsuite.ts (OAuth client helper), " +
+					"src/components/auth/{SignInWithNetSuite,LoginPage,AuthGate}.tsx " +
+					"and a src/App.tsx wrapped in <AuthGate>. OAuth is wired from " +
+					"day one. Forbids hardcoded password gates -- the gate IS the " +
+					"real flow against the project's Worker.",
 			),
 	},
 	async execute(args, context) {
@@ -553,6 +711,15 @@ export const scaffold = tool({
 					path.join("src", "components", "auth", "SignInWithNetSuite.tsx"),
 					signInButtonTsx(),
 				],
+				[
+					path.join("src", "components", "auth", "LoginPage.tsx"),
+					netsuiteLoginPageTsx(),
+				],
+				[
+					path.join("src", "components", "auth", "AuthGate.tsx"),
+					netsuiteAuthGateTsx(),
+				],
+				[path.join("src", "App.tsx"), netsuiteAppTsx()],
 			);
 		}
 
@@ -578,12 +745,16 @@ export const scaffold = tool({
 		if (hasNetsuite) {
 			out.push(
 				"",
-				"NetSuite project detected:",
-				"  - Use <SignInWithNetSuite/> from src/components/auth/ as your",
-				"    login button. NEVER use a hardcoded password gate.",
-				"  - signInWithNetSuite() in src/lib/netsuite.ts redirects to the",
-				"    project's Worker at /auth/netsuite/start. The Worker must be",
-				"    deployed via the cloudflare-backend MCP with routes:",
+				"NetSuite project -- auth is already wired:",
+				"  - App.tsx wraps everything in <AuthGate>. Build your dashboard",
+				"    INSIDE the gate. NEVER remove the gate or build a password",
+				"    placeholder -- real OAuth is the only allowed login.",
+				"  - LoginPage.tsx + SignInWithNetSuite.tsx are the unauthenticated",
+				"    view. Customise the copy / imagery, keep <SignInWithNetSuite/>",
+				"    as the call-to-action.",
+				"  - signInWithNetSuite() in src/lib/netsuite.ts hits the Worker at",
+				"    /auth/netsuite/start. Deploy the Worker via cloudflare-backend",
+				"    MCP with routes:",
 				"      GET  /auth/netsuite/start     -- redirect to NetSuite OAuth",
 				"      GET  /auth/netsuite/callback  -- code -> token exchange",
 				"      GET  /api/me                   -- current session",