@helloleo/plugins 0.1.6 → 0.1.8

package/dist/index.js

@@ -12662,7 +12662,36 @@ function postcssConfig() {
 }
 function indexCss(primaryColor, fontFamily, borderRadius) {
   const fontValue = `'${fontFamily}', ui-sans-serif, system-ui, sans-serif`;
-  return `@tailwind base;
+  return `/*
+ * HelloLeo Design System -- READ BEFORE STYLING.
+ *
+ * The CSS variables below are the single source of truth for the project's
+ * design tokens. They power the no-code Design panel in the HelloLeo webapp:
+ * the user edits colors / fonts / radius / shadows visually, and the panel
+ * writes back to THIS file. Keeping the conventions intact is what unlocks
+ * that round-trip.
+ *
+ * Conventions (do not break):
+ *   - All colors stored as raw HSL triplets (no hsl() wrapper, no #hex).
+ *     Tailwind classes wrap them via hsl(var(--token)). Never inline #hex
+ *     in components -- always use design tokens (bg-primary, text-foreground,
+ *     border-border, etc.).
+ *   - --primary / --secondary / --accent / --destructive / --success /
+ *     --warning each have a paired -foreground for text on that surface.
+ *   - --radius drives lg/md/sm via calc() in tailwind.config.js. Edit here,
+ *     not in component classes.
+ *   - --font-sans for body, --font-heading for headings. Both load from the
+ *     Google Fonts <link> in index.html.
+ *   - .dark variants mirror :root one-for-one. When adding a token, add it
+ *     to BOTH blocks or dark mode breaks.
+ *
+ * UI primitives (Button, Card, Input, Modal, Table, Badge, Alert, Spinner)
+ * MUST live in src/components/ui/ and consume these tokens via Tailwind
+ * classes -- never hardcoded colors. One responsibility per file, <50 lines
+ * per component.
+ */
+
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -12739,6 +12768,134 @@ export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }`;
 }
+function proxyTs() {
+  return `/*
+ * HelloLeo Integration Proxy -- runtime helper for connected integrations.
+ *
+ * All third-party APIs (Odoo, Airtable, HubSpot, Stripe, Notion, Gladia,
+ * Microsoft 365, Klaviyo, Supabase, DimoMaint, etc.) are reachable through
+ * this single proxy. The proxy handles auth and CORS using credentials the
+ * user already configured in Project Settings -- you NEVER pass an API key
+ * from frontend code, and you NEVER call third-party hosts directly.
+ *
+ * Two modes:
+ *   A) Frontend-only project -> import callIntegration() from this file.
+ *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
+ *      Use Cloud whenever the project needs backend logic, automations,
+ *      webhooks, scheduled jobs, or AI agents. Keep secrets server-side.
+ *
+ * Integration slugs:
+ *   Use the exact slug from the Enabled MCP list with the "pipedream-"
+ *   prefix removed. e.g. "pipedream-gorgias_oauth" -> "gorgias_oauth".
+ *   Native integrations (odoo, airtable) keep their plain name.
+ *
+ * Response shape (always wrapped):
+ *   { success: boolean, status: number, data: <provider payload> }
+ *
+ *   Unwrap "data" by provider:
+ *     odoo            -> data.result
+ *     airtable        -> data.records
+ *     notion          -> data.results
+ *     microsoft 365   -> data.value
+ *     klaviyo         -> data.data
+ *     supabase / dimomaint -> data
+ *
+ * Pagination: put query params directly in the endpoint string,
+ *   e.g. endpoint: '/api/tickets?cursor=xyz&per_page=100'.
+ *   Read pagination metadata from the response to build the next call.
+ *   Never .filter() large lists in the frontend -- paginate server-side.
+ *
+ * Secrets for non-integration APIs (e.g. raw OpenAI): store them in
+ * HelloLeo Cloud -> Settings -> Cloud -> Secrets, and read via env.SECRET_NAME
+ * from a Worker. Never embed secrets in frontend code.
+ */
+
+const PROJECT_UUID = import.meta.env.VITE_PROJECT_UUID ?? '';
+export const INTEGRATION_PROXY_URL =
+  \`https://api.app.helloleo.dev/api/integration-proxy/\${PROJECT_UUID}\`;
+
+export interface ProxyRequest {
+  integration: string;
+  endpoint: string;
+  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+  body?: unknown;
+  headers?: Record<string, string>;
+}
+
+export interface ProxyResponse<T = unknown> {
+  success: boolean;
+  status: number;
+  data: T;
+}
+
+export async function callIntegration<T = unknown>(
+  req: ProxyRequest,
+): Promise<ProxyResponse<T>> {
+  const res = await fetch(INTEGRATION_PROXY_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ method: 'POST', ...req }),
+  });
+  return res.json();
+}
+
+/* Example -- Odoo search_read:
+ *
+ *   const r = await callIntegration({
+ *     integration: 'odoo',
+ *     endpoint: '/jsonrpc',
+ *     body: {
+ *       model: 'product.template',
+ *       method: 'search_read',
+ *       args: [[['type', '=', 'consu']]],
+ *       kwargs: { fields: ['name', 'list_price'], limit: 50 },
+ *     },
+ *   });
+ *   const products = r.data?.result ?? [];
+ */
+`;
+}
+function hexToHslTriplet(hex3) {
+  let h = hex3.trim().replace(/^#/, "");
+  if (h.length === 3) {
+    h = h.split("").map((c) => c + c).join("");
+  }
+  if (!/^[0-9a-fA-F]{6}$/.test(h))
+    return "";
+  const r = Number.parseInt(h.slice(0, 2), 16) / 255;
+  const g = Number.parseInt(h.slice(2, 4), 16) / 255;
+  const b = Number.parseInt(h.slice(4, 6), 16) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  let s = 0;
+  let hue = 0;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        hue = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        hue = (b - r) / d + 2;
+        break;
+      default:
+        hue = (r - g) / d + 4;
+    }
+    hue *= 60;
+  }
+  return `${Math.round(hue)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+function normalizePrimaryColor(value) {
+  const trimmed = value.trim();
+  if (/^(#|[0-9a-fA-F]{3}$|[0-9a-fA-F]{6}$)/.test(trimmed)) {
+    const hsl = hexToHslTriplet(trimmed);
+    if (hsl)
+      return hsl;
+  }
+  return trimmed;
+}
 function mainTsx() {
   return `import React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -12751,21 +12908,219 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
   </React.StrictMode>,
 )`;
 }
+function netsuiteTs() {
+  return `/*
+ * NetSuite OAuth client helper.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+
+export const WORKER_URL = import.meta.env.VITE_WORKER_URL ?? '';
+
+export function signInWithNetSuite(returnTo: string = window.location.pathname) {
+  if (!WORKER_URL) {
+    throw new Error(
+      'VITE_WORKER_URL is not set. HelloLeo Cloud must be provisioned before sign-in works.',
+    );
+  }
+  const url = new URL(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/start\`);
+  url.searchParams.set('return_to', returnTo);
+  window.location.assign(url.toString());
+}
+
+export interface NetSuiteSession {
+  authenticated: boolean;
+  account_id?: string;
+  user_id?: string;
+  email?: string;
+}
+
+export async function getNetSuiteSession(): Promise<NetSuiteSession> {
+  if (!WORKER_URL) return { authenticated: false };
+  const res = await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/api/me\`, {
+    credentials: 'include',
+  });
+  if (!res.ok) return { authenticated: false };
+  const data = await res.json();
+  return { authenticated: Boolean(data?.account_id), ...data };
+}
+
+export async function signOutNetSuite(): Promise<void> {
+  if (!WORKER_URL) return;
+  await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/logout\`, {
+    method: 'POST',
+    credentials: 'include',
+  });
+  window.location.reload();
+}
+`;
+}
+function signInButtonTsx() {
+  return `import { signInWithNetSuite } from '../../lib/netsuite';
+
+export function SignInWithNetSuite() {
+  return (
+    <button
+      onClick={() => signInWithNetSuite()}
+      className="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      Sign in with NetSuite
+    </button>
+  );
+}
+`;
+}
+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: {
     name: tool.schema.string().optional().describe("Project name for package.json (default: leo-project)"),
-    primaryColor: tool.schema.string().optional().describe('HSL values for primary color, e.g. "221.2 83.2% 53.3%" (default: blue)'),
+    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)')
+    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), " + "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;
     const name = args.name ?? "leo-project";
-    const primary = args.primaryColor ?? "221.2 83.2% 53.3%";
+    const primary = normalizePrimaryColor(args.primaryColor ?? "221.2 83.2% 53.3%");
     const font = args.fontFamily ?? "Inter";
     const radius = args.borderRadius ?? "0.5rem";
+    const integrations = (args.integrations ?? []).map((s) => s.toLowerCase());
+    const hasNetsuite = integrations.includes("netsuite");
     await mkdir(path2.join(dir, "src", "lib"), { recursive: true });
+    if (hasNetsuite) {
+      await mkdir(path2.join(dir, "src", "components", "auth"), {
+        recursive: true
+      });
+    }
     const files = [
       ["package.json", packageJson(name)],
       ["index.html", indexHtml(font)],
@@ -12774,22 +13129,42 @@ var scaffold = tool({
       ["postcss.config.js", postcssConfig()],
       [path2.join("src", "index.css"), indexCss(primary, font, radius)],
       [path2.join("src", "lib", "utils.ts"), utilsTs()],
+      [path2.join("src", "lib", "proxy.ts"), proxyTs()],
       [path2.join("src", "main.tsx"), mainTsx()]
     ];
+    if (hasNetsuite) {
+      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) {
       await Bun.write(path2.join(dir, filePath), content);
       created.push(filePath);
     }
-    return [
+    const out = [
       `Scaffolded ${created.length} files:`,
       ...created.map((f) => `  - ${f}`),
       "",
       "Next: create src/App.tsx with your application code.",
-      "The design system is ready -- use design tokens (bg-primary, text-foreground, etc.)",
-      "and create UI components in src/components/ui/.",
-      "Make sure to update package.json with all packages you need after scaffolding."
-    ].join(`
+      "Design system reference: read the header comment in src/index.css",
+      "  before adding tokens or styling primitives.",
+      "Integration calls: use callIntegration() from src/lib/proxy.ts.",
+      "  Header comment in that file documents slugs, response unwrapping,",
+      "  pagination, and frontend-only vs HelloLeo Cloud routing.",
+      "Update package.json with any extra packages you need after scaffolding."
+    ];
+    if (hasNetsuite) {
+      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.6",
+  "version": "0.1.8",
   "description": "OpenCode plugins for HelloLeo",
   "license": "UNLICENSED",
   "type": "module",

package/src/tools/scaffold.ts

@@ -134,7 +134,36 @@ function indexCss(
 	borderRadius: string,
 ) {
 	const fontValue = `'${fontFamily}', ui-sans-serif, system-ui, sans-serif`;
-	return `@tailwind base;
+	return `/*
+ * HelloLeo Design System -- READ BEFORE STYLING.
+ *
+ * The CSS variables below are the single source of truth for the project's
+ * design tokens. They power the no-code Design panel in the HelloLeo webapp:
+ * the user edits colors / fonts / radius / shadows visually, and the panel
+ * writes back to THIS file. Keeping the conventions intact is what unlocks
+ * that round-trip.
+ *
+ * Conventions (do not break):
+ *   - All colors stored as raw HSL triplets (no hsl() wrapper, no #hex).
+ *     Tailwind classes wrap them via hsl(var(--token)). Never inline #hex
+ *     in components -- always use design tokens (bg-primary, text-foreground,
+ *     border-border, etc.).
+ *   - --primary / --secondary / --accent / --destructive / --success /
+ *     --warning each have a paired -foreground for text on that surface.
+ *   - --radius drives lg/md/sm via calc() in tailwind.config.js. Edit here,
+ *     not in component classes.
+ *   - --font-sans for body, --font-heading for headings. Both load from the
+ *     Google Fonts <link> in index.html.
+ *   - .dark variants mirror :root one-for-one. When adding a token, add it
+ *     to BOTH blocks or dark mode breaks.
+ *
+ * UI primitives (Button, Card, Input, Modal, Table, Badge, Alert, Spinner)
+ * MUST live in src/components/ui/ and consume these tokens via Tailwind
+ * classes -- never hardcoded colors. One responsibility per file, <50 lines
+ * per component.
+ */
+
+@tailwind base;
 @tailwind components;
 @tailwind utilities;
 
@@ -213,6 +242,138 @@ export function cn(...inputs: ClassValue[]) {
 }`;
 }
 
+function proxyTs() {
+	return `/*
+ * HelloLeo Integration Proxy -- runtime helper for connected integrations.
+ *
+ * All third-party APIs (Odoo, Airtable, HubSpot, Stripe, Notion, Gladia,
+ * Microsoft 365, Klaviyo, Supabase, DimoMaint, etc.) are reachable through
+ * this single proxy. The proxy handles auth and CORS using credentials the
+ * user already configured in Project Settings -- you NEVER pass an API key
+ * from frontend code, and you NEVER call third-party hosts directly.
+ *
+ * Two modes:
+ *   A) Frontend-only project -> import callIntegration() from this file.
+ *   B) HelloLeo Cloud project -> route via Worker fetch(env.INTEGRATION_PROXY).
+ *      Use Cloud whenever the project needs backend logic, automations,
+ *      webhooks, scheduled jobs, or AI agents. Keep secrets server-side.
+ *
+ * Integration slugs:
+ *   Use the exact slug from the Enabled MCP list with the "pipedream-"
+ *   prefix removed. e.g. "pipedream-gorgias_oauth" -> "gorgias_oauth".
+ *   Native integrations (odoo, airtable) keep their plain name.
+ *
+ * Response shape (always wrapped):
+ *   { success: boolean, status: number, data: <provider payload> }
+ *
+ *   Unwrap "data" by provider:
+ *     odoo            -> data.result
+ *     airtable        -> data.records
+ *     notion          -> data.results
+ *     microsoft 365   -> data.value
+ *     klaviyo         -> data.data
+ *     supabase / dimomaint -> data
+ *
+ * Pagination: put query params directly in the endpoint string,
+ *   e.g. endpoint: '/api/tickets?cursor=xyz&per_page=100'.
+ *   Read pagination metadata from the response to build the next call.
+ *   Never .filter() large lists in the frontend -- paginate server-side.
+ *
+ * Secrets for non-integration APIs (e.g. raw OpenAI): store them in
+ * HelloLeo Cloud -> Settings -> Cloud -> Secrets, and read via env.SECRET_NAME
+ * from a Worker. Never embed secrets in frontend code.
+ */
+
+const PROJECT_UUID = import.meta.env.VITE_PROJECT_UUID ?? '';
+export const INTEGRATION_PROXY_URL =
+  \`https://api.app.helloleo.dev/api/integration-proxy/\${PROJECT_UUID}\`;
+
+export interface ProxyRequest {
+  integration: string;
+  endpoint: string;
+  method?: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+  body?: unknown;
+  headers?: Record<string, string>;
+}
+
+export interface ProxyResponse<T = unknown> {
+  success: boolean;
+  status: number;
+  data: T;
+}
+
+export async function callIntegration<T = unknown>(
+  req: ProxyRequest,
+): Promise<ProxyResponse<T>> {
+  const res = await fetch(INTEGRATION_PROXY_URL, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ method: 'POST', ...req }),
+  });
+  return res.json();
+}
+
+/* Example -- Odoo search_read:
+ *
+ *   const r = await callIntegration({
+ *     integration: 'odoo',
+ *     endpoint: '/jsonrpc',
+ *     body: {
+ *       model: 'product.template',
+ *       method: 'search_read',
+ *       args: [[['type', '=', 'consu']]],
+ *       kwargs: { fields: ['name', 'list_price'], limit: 50 },
+ *     },
+ *   });
+ *   const products = r.data?.result ?? [];
+ */
+`;
+}
+
+function hexToHslTriplet(hex: string): string {
+	let h = hex.trim().replace(/^#/, "");
+	if (h.length === 3) {
+		h = h
+			.split("")
+			.map((c) => c + c)
+			.join("");
+	}
+	if (!/^[0-9a-fA-F]{6}$/.test(h)) return "";
+	const r = Number.parseInt(h.slice(0, 2), 16) / 255;
+	const g = Number.parseInt(h.slice(2, 4), 16) / 255;
+	const b = Number.parseInt(h.slice(4, 6), 16) / 255;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const l = (max + min) / 2;
+	let s = 0;
+	let hue = 0;
+	if (max !== min) {
+		const d = max - min;
+		s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+		switch (max) {
+			case r:
+				hue = (g - b) / d + (g < b ? 6 : 0);
+				break;
+			case g:
+				hue = (b - r) / d + 2;
+				break;
+			default:
+				hue = (r - g) / d + 4;
+		}
+		hue *= 60;
+	}
+	return `${Math.round(hue)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
+}
+
+function normalizePrimaryColor(value: string): string {
+	const trimmed = value.trim();
+	if (/^(#|[0-9a-fA-F]{3}$|[0-9a-fA-F]{6}$)/.test(trimmed)) {
+		const hsl = hexToHslTriplet(trimmed);
+		if (hsl) return hsl;
+	}
+	return trimmed;
+}
+
 function mainTsx() {
 	return `import React from 'react'
 import ReactDOM from 'react-dom/client'
@@ -226,6 +387,201 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 )`;
 }
 
+function netsuiteTs() {
+	return `/*
+ * NetSuite OAuth client helper.
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * 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.
+ */
+
+export const WORKER_URL = import.meta.env.VITE_WORKER_URL ?? '';
+
+export function signInWithNetSuite(returnTo: string = window.location.pathname) {
+  if (!WORKER_URL) {
+    throw new Error(
+      'VITE_WORKER_URL is not set. HelloLeo Cloud must be provisioned before sign-in works.',
+    );
+  }
+  const url = new URL(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/start\`);
+  url.searchParams.set('return_to', returnTo);
+  window.location.assign(url.toString());
+}
+
+export interface NetSuiteSession {
+  authenticated: boolean;
+  account_id?: string;
+  user_id?: string;
+  email?: string;
+}
+
+export async function getNetSuiteSession(): Promise<NetSuiteSession> {
+  if (!WORKER_URL) return { authenticated: false };
+  const res = await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/api/me\`, {
+    credentials: 'include',
+  });
+  if (!res.ok) return { authenticated: false };
+  const data = await res.json();
+  return { authenticated: Boolean(data?.account_id), ...data };
+}
+
+export async function signOutNetSuite(): Promise<void> {
+  if (!WORKER_URL) return;
+  await fetch(\`\${WORKER_URL.replace(/\\/$/, '')}/auth/netsuite/logout\`, {
+    method: 'POST',
+    credentials: 'include',
+  });
+  window.location.reload();
+}
+`;
+}
+
+function signInButtonTsx() {
+	return `import { signInWithNetSuite } from '../../lib/netsuite';
+
+export function SignInWithNetSuite() {
+  return (
+    <button
+      onClick={() => signInWithNetSuite()}
+      className="inline-flex items-center justify-center gap-2 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      Sign in with NetSuite
+    </button>
+  );
+}
+`;
+}
+
+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. " +
@@ -242,7 +598,9 @@ export const scaffold = tool({
 			.string()
 			.optional()
 			.describe(
-				'HSL values for primary color, e.g. "221.2 83.2% 53.3%" (default: blue)',
+				"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()
@@ -256,15 +614,36 @@ export const scaffold = tool({
 			.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), " +
+					"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;
 		const name = args.name ?? "leo-project";
-		const primary = args.primaryColor ?? "221.2 83.2% 53.3%";
+		const primary = normalizePrimaryColor(
+			args.primaryColor ?? "221.2 83.2% 53.3%",
+		);
 		const font = args.fontFamily ?? "Inter";
 		const radius = args.borderRadius ?? "0.5rem";
+		const integrations = (args.integrations ?? []).map((s) => s.toLowerCase());
+		const hasNetsuite = integrations.includes("netsuite");
 
 		await mkdir(path.join(dir, "src", "lib"), { recursive: true });
+		if (hasNetsuite) {
+			await mkdir(path.join(dir, "src", "components", "auth"), {
+				recursive: true,
+			});
+		}
 
 		const files: [string, string][] = [
 			["package.json", packageJson(name)],
@@ -274,24 +653,74 @@ export const scaffold = tool({
 			["postcss.config.js", postcssConfig()],
 			[path.join("src", "index.css"), indexCss(primary, font, radius)],
 			[path.join("src", "lib", "utils.ts"), utilsTs()],
+			[path.join("src", "lib", "proxy.ts"), proxyTs()],
 			[path.join("src", "main.tsx"), mainTsx()],
 		];
 
+		if (hasNetsuite) {
+			files.push(
+				[path.join("src", "lib", "netsuite.ts"), netsuiteTs()],
+				[
+					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()],
+			);
+		}
+
 		const created: string[] = [];
 		for (const [filePath, content] of files) {
 			await Bun.write(path.join(dir, filePath), content);
 			created.push(filePath);
 		}
 
-		return [
+		const out: string[] = [
 			`Scaffolded ${created.length} files:`,
 			...created.map((f) => `  - ${f}`),
 			"",
 			"Next: create src/App.tsx with your application code.",
-			"The design system is ready -- use design tokens (bg-primary, text-foreground, etc.)",
-			"and create UI components in src/components/ui/.",
-			"Make sure to update package.json with all packages you need after scaffolding.",
-		].join("\n");
+			"Design system reference: read the header comment in src/index.css",
+			"  before adding tokens or styling primitives.",
+			"Integration calls: use callIntegration() from src/lib/proxy.ts.",
+			"  Header comment in that file documents slugs, response unwrapping,",
+			"  pagination, and frontend-only vs HelloLeo Cloud routing.",
+			"Update package.json with any extra packages you need after scaffolding.",
+		];
+
+		if (hasNetsuite) {
+			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("\n");
 	},
 });