@helloleo/plugins 0.1.7 → 0.1.8

package/dist/index.js

@@ -12977,7 +12977,7 @@ export async function signOutNetSuite(): Promise<void> {
 `;
 }
 function signInButtonTsx() {
-  return `import { signInWithNetSuite } from '../lib/netsuite';
+  return `import { signInWithNetSuite } from '../../lib/netsuite';
 
 export function SignInWithNetSuite() {
   return (
@@ -12991,6 +12991,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 +13105,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 +13136,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 +13162,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.8",
   "description": "OpenCode plugins for HelloLeo",
   "license": "UNLICENSED",
   "type": "module",

package/src/tools/scaffold.ts

@@ -457,7 +457,7 @@ export async function signOutNetSuite(): Promise<void> {
 }
 
 function signInButtonTsx() {
-	return `import { signInWithNetSuite } from '../lib/netsuite';
+	return `import { signInWithNetSuite } from '../../lib/netsuite';
 
 export function SignInWithNetSuite() {
   return (
@@ -472,6 +472,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 +620,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 +664,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 +698,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",