@helloleo/plugins 0.1.14 → 0.1.15

package/src/tools/setup-netsuite.ts

@@ -6,10 +6,13 @@ import { writeBaseScaffold } from "./scaffold.ts";
 
 /**
  * One-shot bootstrap for a NetSuite project. Writes the base HelloLeo
- * scaffold (via writeBaseScaffold) plus the NetSuite OAuth wiring
- * (AuthGate, LoginPage, sign-in button, netsuite client, auth-gated
- * App.tsx). All NetSuite-specific templates live in this file -- one
- * place to read or change anything NetSuite-related.
+ * scaffold (via writeBaseScaffold) plus ADDITIVE NetSuite OAuth wiring:
+ * the netsuite OAuth client, a NetSuite auth context (auth.tsx), and the
+ * AuthLayout / LoginPage / SignInWithNetSuite components. It never
+ * overwrites a scaffold file -- the one manual step is wrapping the root
+ * route's <Outlet /> with <AuthLayout> (the tool's output shows the
+ * snippet). All NetSuite-specific templates live in this file -- one place
+ * to read or change anything NetSuite-related.
  *
  * Use INSTEAD of `scaffold` when the project needs NetSuite. The tool
  * name carries the intent so the LLM can't accidentally ship a project
@@ -209,34 +212,120 @@ export function LoginPage() {
 `;
 }
 
-function netsuiteAuthGateTsx(): string {
-	return `import { useEffect, useState } from 'react';
+function authTsx(): string {
+	return `import * as React from 'react';
+import {
+  getNetSuiteSession,
+  signInWithNetSuite,
+  signOutNetSuite,
+  type NetSuiteSession,
+} from './netsuite';
+
+/**
+ * NetSuite auth context. Holds the current session (resolved from the Worker's
+ * /api/me via getNetSuiteSession) and exposes sign-in / sign-out. The only
+ * authoritative auth check is /api/me -- never trust sessionStorage directly.
+ */
+export interface NetSuiteAuthContextValue {
+  pending: boolean;
+  isAuthenticated: boolean;
+  session: NetSuiteSession | null;
+  signIn: () => void;
+  signOut: () => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+const NetSuiteAuthContext =
+  React.createContext<NetSuiteAuthContextValue | null>(null);
+
+export function NetSuiteAuthProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [session, setSession] = React.useState<NetSuiteSession | null>(null);
+  const [pending, setPending] = React.useState(true);
+
+  const refresh = React.useCallback(async () => {
+    setPending(true);
+    try {
+      setSession(await getNetSuiteSession());
+    } finally {
+      setPending(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const value: NetSuiteAuthContextValue = {
+    pending,
+    isAuthenticated: Boolean(session?.authenticated),
+    session,
+    signIn: () => signInWithNetSuite(),
+    signOut: signOutNetSuite,
+    refresh,
+  };
+
+  return (
+    <NetSuiteAuthContext.Provider value={value}>
+      {children}
+    </NetSuiteAuthContext.Provider>
+  );
+}
+
+export function useNetSuiteAuth(): NetSuiteAuthContextValue {
+  const ctx = React.useContext(NetSuiteAuthContext);
+  if (!ctx) {
+    throw new Error('useNetSuiteAuth must be used within <NetSuiteAuthProvider>');
+  }
+  return ctx;
+}
+`;
+}
+
+function authLayoutTsx(): string {
+	return `import type { ReactNode } from 'react';
+import { NetSuiteAuthProvider, useNetSuiteAuth } from '../../lib/auth';
 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:
+ * NetSuite auth layout. This is the ONLY wiring you need to add by hand --
+ * wrap the root route's <Outlet /> with it:
  *
- *   import { AuthGate } from './components/auth/AuthGate';
- *   export default function App() {
+ *   // src/routes/__root.tsx
+ *   import { AuthLayout } from '../components/auth/AuthLayout';
+ *   ...
+ *   function RootComponent() {
  *     return (
- *       <AuthGate>
- *         <Dashboard />   // your authenticated content
- *       </AuthGate>
+ *       <>
+ *         <AuthLayout>
+ *           <Outlet />
+ *         </AuthLayout>
+ *         { ...devtools... }
+ *       </>
  *     );
  *   }
+ *
+ * It provides NetSuite auth context to the whole tree and gates rendering:
+ * while the session resolves it shows a spinner, unauthenticated users see
+ * <LoginPage />, authenticated users see your routes. Use useNetSuiteAuth()
+ * anywhere below it to read the session or sign out. NEVER swap this for a
+ * password gate -- real OAuth is the only supported login.
  */
-export function AuthGate({ children }: { children: React.ReactNode }) {
-  const [session, setSession] = useState<NetSuiteSession | null>(null);
+export function AuthLayout({ children }: { children: ReactNode }) {
+  return (
+    <NetSuiteAuthProvider>
+      <Gate>{children}</Gate>
+    </NetSuiteAuthProvider>
+  );
+}
 
-  useEffect(() => { getNetSuiteSession().then(setSession); }, []);
+function Gate({ children }: { children: ReactNode }) {
+  const { pending, isAuthenticated } = useNetSuiteAuth();
 
-  if (session === null) {
+  if (pending) {
     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" />
@@ -244,46 +333,26 @@ export function AuthGate({ children }: { children: React.ReactNode }) {
     );
   }
 
-  if (!session.authenticated) return <LoginPage />;
+  if (!isAuthenticated) return <LoginPage />;
 
   return <>{children}</>;
 }
 `;
 }
 
-function netsuiteAppTsx(): string {
-	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 setupNetsuite = tool({
 	description:
-		"Bootstrap a NetSuite-backed React + Vite + Tailwind project in one call. " +
-		"Writes the full HelloLeo base scaffold AND the NetSuite OAuth wiring " +
-		"(src/lib/netsuite.ts, src/components/auth/{SignInWithNetSuite,LoginPage,AuthGate}.tsx, " +
-		"src/App.tsx wrapped in <AuthGate>). " +
+		"Bootstrap a NetSuite-backed React + Vite + Tailwind v4 + TanStack Router " +
+		"project in one call. Writes the full HelloLeo base scaffold PLUS the " +
+		"NetSuite OAuth wiring, all ADDITIVE -- it never overwrites a scaffold " +
+		"file. Adds src/lib/netsuite.ts (OAuth client), src/lib/auth.tsx " +
+		"(NetSuiteAuthProvider + useNetSuiteAuth), and " +
+		"src/components/auth/{AuthLayout,LoginPage,SignInWithNetSuite}.tsx. " +
 		"Use this INSTEAD of `scaffold` for any project that needs NetSuite. " +
-		"Uses default theme (Inter font, blue primary, 0.5rem radius) -- edit " +
-		"src/index.css afterwards to customise. Real OAuth is wired from day " +
-		"one -- never replace the gate with a password placeholder.",
+		"After it runs there is exactly ONE manual step: wrap the root route's " +
+		"<Outlet /> with <AuthLayout> in src/routes/__root.tsx (the tool's output " +
+		"shows the snippet). Real OAuth is wired from day one -- never replace " +
+		"<AuthLayout> with a password placeholder.",
 	args: {},
 	async execute(_args, context) {
 		const dir = context.directory;
@@ -293,55 +362,67 @@ export const setupNetsuite = tool({
 			recursive: true,
 		});
 
+		// All additive -- nothing the base scaffold wrote is touched.
 		const nsFiles: [string, string][] = [
 			[path.join("src", "lib", "netsuite.ts"), netsuiteTs()],
+			[path.join("src", "lib", "auth.tsx"), authTsx()],
 			[
-				path.join("src", "components", "auth", "SignInWithNetSuite.tsx"),
-				signInButtonTsx(),
+				path.join("src", "components", "auth", "AuthLayout.tsx"),
+				authLayoutTsx(),
 			],
 			[
 				path.join("src", "components", "auth", "LoginPage.tsx"),
 				netsuiteLoginPageTsx(),
 			],
 			[
-				path.join("src", "components", "auth", "AuthGate.tsx"),
-				netsuiteAuthGateTsx(),
+				path.join("src", "components", "auth", "SignInWithNetSuite.tsx"),
+				signInButtonTsx(),
 			],
-			[path.join("src", "App.tsx"), netsuiteAppTsx()],
 		];
 
-		const nsCreated: string[] = [];
 		for (const [filePath, content] of nsFiles) {
 			await Bun.write(path.join(dir, filePath), content);
-			nsCreated.push(filePath);
 		}
 
-		const all = [...base, ...nsCreated];
+		const all = [...base, ...nsFiles.map(([f]) => f)];
 		return [
-			`Scaffolded ${all.length} files (base + NetSuite OAuth):`,
-			...all.map((f) => `  - ${f}`),
+			`Generated ${all.length} files (base scaffold + NetSuite OAuth, all additive -- nothing overwritten).`,
+			"",
+			"All you need to do is wrap the root layout with the auth layout.",
+			"In src/routes/__root.tsx, import AuthLayout and wrap <Outlet />:",
+			"",
+			"    import { AuthLayout } from '../components/auth/AuthLayout'",
+			"",
+			"    function RootComponent() {",
+			"      return (",
+			"        <>",
+			"          <AuthLayout>",
+			"            <Outlet />",
+			"          </AuthLayout>",
+			"          {/* keep the existing <TanStackDevtools ... /> here */}",
+			"        </>",
+			"      )",
+			"    }",
+			"",
+			"That single wrap gates every route: <LoginPage /> until the user signs",
+			"in with NetSuite, your routes after. Read the session anywhere below it",
+			"with useNetSuiteAuth() from src/lib/auth.tsx. NEVER swap <AuthLayout>",
+			"for a password gate -- real OAuth is the only supported login.",
 			"",
-			"Next: build your dashboard INSIDE <AuthGate> in src/App.tsx.",
-			"Design system reference: read the header comment in src/index.css",
-			"  before adding tokens or styling primitives.",
+			"NetSuite OAuth files written:",
+			"  - src/lib/netsuite.ts          OAuth client (signIn / session / workerFetch)",
+			"  - src/lib/auth.tsx             NetSuiteAuthProvider + useNetSuiteAuth",
+			"  - src/components/auth/AuthLayout.tsx        provider + gate (wrap root with this)",
+			"  - src/components/auth/LoginPage.tsx         unauthenticated view",
+			"  - src/components/auth/SignInWithNetSuite.tsx sign-in button",
 			"",
-			"NetSuite auth -- already wired:",
-			"  - App.tsx wraps everything in <AuthGate>. NEVER remove the gate",
-			"    or build a password placeholder -- real OAuth is the only 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:",
+			"Worker (deploy via cloudflare-backend MCP) must serve:",
 			"      GET  /auth/netsuite/start     -- redirect to NetSuite OAuth",
 			"      GET  /auth/netsuite/callback  -- code -> token exchange",
-			"      GET  /api/me                   -- current session",
+			"      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 so the frontend knows where to",
-			"    send users. The HelloLeo Cloud provisioner seeds this.",
+			"    Reads env.NETSUITE_ACCOUNT_ID / _CLIENT_ID / _CLIENT_SECRET.",
+			"    VITE_WORKER_URL must be set (HelloLeo Cloud provisioner seeds it).",
 		].join("\n");
 	},
 });