create-powerapp 1.0.1 → 1.1.0

package/index.js

@@ -1,964 +1,868 @@
-#!/usr/bin/env node
-
-/**
- * create-powerapp
- * One command to scaffold any Power Apps project — Canvas App, Model-Driven App,
- * PCF Component, Power Pages, or Code App — with Git, AI context files, and
- * everything ready so you can immediately start prompting your AI assistant.
- */
-
-import { execSync, spawnSync } from "child_process";
-import fs from "fs";
-import path from "path";
-import readline from "readline";
-import { fileURLToPath } from "url";
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-// ─── Colour helpers ──────────────────────────────────────────────────────────
-const c = {
-  reset: "\x1b[0m",
-  bold: "\x1b[1m",
-  green: "\x1b[32m",
-  cyan: "\x1b[36m",
-  yellow: "\x1b[33m",
-  red: "\x1b[31m",
-  dim: "\x1b[2m",
-  magenta: "\x1b[35m",
-};
-const log = {
-  info: (m) => console.log(`${c.cyan}ℹ${c.reset}  ${m}`),
-  ok: (m) => console.log(`${c.green}✔${c.reset}  ${m}`),
-  warn: (m) => console.log(`${c.yellow}⚠${c.reset}  ${m}`),
-  error: (m) => console.log(`${c.red}✖${c.reset}  ${m}`),
-  step: (m) => console.log(`\n${c.bold}${c.magenta}▶ ${m}${c.reset}`),
-  dim: (m) => console.log(`${c.dim}   ${m}${c.reset}`),
-};
-
-// ─── readline helper ─────────────────────────────────────────────────────────
-// Single persistent readline interface — works interactively AND when piped (CI)
-const rl = readline.createInterface({
-  input: process.stdin,
-  output: process.stdout,
-  terminal: false,   // don't assume TTY — makes piped input work in CI
-});
-
-// Queue of lines already read from stdin (for piped / non-interactive mode)
-const lineQueue = [];
-const lineWaiters = [];
-rl.on("line", (line) => {
-  if (lineWaiters.length > 0) {
-    lineWaiters.shift()(line.trim());
-  } else {
-    lineQueue.push(line.trim());
-  }
-});
-
-function prompt(question) {
-  process.stdout.write(question);
-  return new Promise((resolve) => {
-    if (lineQueue.length > 0) {
-      const line = lineQueue.shift();
-      process.stdout.write(line + "\n");   // echo the pre-buffered answer
-      resolve(line);
-    } else {
-      lineWaiters.push(resolve);
-    }
-  });
-}
-
-async function choose(question, options) {
-  console.log(`\n${c.bold}${question}${c.reset}`);
-  options.forEach((o, i) => console.log(`  ${c.cyan}${i + 1}${c.reset}. ${o.label}  ${c.dim}${o.desc || ""}${c.reset}`));
-  while (true) {
-    const answer = await prompt(`\nEnter number (1–${options.length}): `);
-    const idx = parseInt(answer, 10) - 1;
-    if (idx >= 0 && idx < options.length) return options[idx];
-    log.warn("Please enter a valid number.");
-  }
-}
-
-// ─── run shell command ────────────────────────────────────────────────────────
-function run(cmd, cwd = process.cwd(), silent = false) {
-  const result = spawnSync(cmd, { shell: true, cwd, stdio: silent ? "pipe" : "inherit" });
-  if (result.status !== 0 && !silent) {
-    log.error(`Command failed: ${cmd}`);
-  }
-  return result.status === 0;
-}
-
-// ─── check a CLI tool exists ──────────────────────────────────────────────────
-function has(tool) {
-  return spawnSync(`${tool} --version`, { shell: true, stdio: "pipe" }).status === 0;
-}
-
-// ─── write file helper ────────────────────────────────────────────────────────
-function write(filePath, content) {
-  fs.mkdirSync(path.dirname(filePath), { recursive: true });
-  fs.writeFileSync(filePath, content, "utf8");
-}
-
-// ─── shared file content ──────────────────────────────────────────────────────
-
-function gitignoreContent() {
-  return `# Dependencies
-node_modules/
-.pnp
-.pnp.js
-
-# Environment variables — NEVER commit these
-.env
-.env.local
-.env.*.local
-
-# Build outputs
-dist/
-build/
-out/
-.next/
-bin/
-
-# Editor files
-.vscode/
-.idea/
-*.swp
-
-# OS files
-.DS_Store
-Thumbs.db
-
-# Logs
-*.log
-npm-debug.log*
-
-# Power Apps / PAC CLI outputs
-*.msapp
-*.zip
-/obj/
-`;
-}
-
-function envContent(projectName, appType) {
-  return `# .env — DO NOT commit this file to Git
-# Fill in the values for your project
-
-# Your Power Platform environment URL
-# Find it at: make.powerapps.com → Settings gear → Session details → Instance url
-POWER_PLATFORM_URL=https://yourorg.crm.dynamics.com
-
-# Project info
-PROJECT_NAME=${projectName}
-APP_TYPE=${appType}
-
-# Add any other secrets here (API keys, database URLs, etc.)
-# API_KEY=your-key-here
-`;
-}
-
-function readmeContent(projectName, appType, aiTool) {
-  return `# ${projectName}
-
-**Type:** ${appType}  
-**AI Assistant:** ${aiTool}
-
-## Getting started
-
-Everything is already set up. Just open your AI assistant and describe what you want to build.
-
-### Start your AI session
-
-${aiTool === "Claude Code"
-  ? "```bash\nclaude\n```\nThen type what you want to build in plain English."
-  : "Click the **Copilot Chat** icon (💬) in the VS Code sidebar and type what you want to build."}
-
-### Example first prompts
-
-> "Create the main screen for this app with a navigation menu and a welcome message."
-
-> "Add a form that lets users submit [whatever your app needs] and saves it to Dataverse."
-
-> "Explain what files are in this project and what each one does."
-
-## Project structure
-
-See the \`instructions/\` folder for the AI context files that tell your AI assistant
-how this type of Power App works.
-
-## Useful commands
-
-\`\`\`bash
-# Push changes to Power Platform
-${appType === "Canvas App" ? "pac canvas pack --msapp ./CanvasApp.msapp --sources ./canvas-src\npac solution push" : ""}
-${appType === "Model-Driven App" ? "pac solution push" : ""}
-${appType === "PCF Component" ? "npm run build\npac pcf push --publisher-prefix yourprefix" : ""}
-${appType === "Power Pages" ? "pac pages upload --path ." : ""}
-${appType === "Code App" ? "npm run build\npac code push" : ""}
-
-# Save your work
-git add .
-git commit -m "describe what you changed"
-git push
-\`\`\`
-`;
-}
-
-// ─── App-type scaffolders ─────────────────────────────────────────────────────
-
-function scaffoldCanvas(dir, projectName, aiTool) {
-  log.info("Setting up Canvas App structure...");
-
-  // AI context files
-  write(path.join(dir, "instructions", "canvas-instructions.md"), `# Canvas App Instructions
-
-## Type: Canvas App (Power Apps)
-## Project: ${projectName}
-
-- Screens and controls are defined in .fx.yaml files
-- Formulas use Power Fx — similar to Excel syntax
-- Use With(), Collect(), Patch() for data operations — never SQL
-- Navigation: Navigate(ScreenName, ScreenTransition.Fade)
-- Avoid nested galleries — use collections instead
-- PAC commands: pac canvas unpack / pac canvas pack
-- Never edit .msapp binary directly — always unpack first
-- Assets (images, icons) go in Assets/
-- Data source connections go in DataSources/
-`);
-
-  write(path.join(dir, "canvas-src", "Src", ".gitkeep"), "");
-  write(path.join(dir, "canvas-src", "Assets", ".gitkeep"), "");
-  write(path.join(dir, "canvas-src", "DataSources", ".gitkeep"), "");
-  write(path.join(dir, "canvas-src", "pkgs", ".gitkeep"), "");
-
-  write(path.join(dir, "canvas-src", "Src", "App.fx.yaml"), `# App-level settings and global variables
-# The AI will help you fill this in as you build
-`);
-
-  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
-
-Copy and paste these into your AI assistant to get started quickly.
-
-## Create your first screen
-"I'm building a Canvas App called ${projectName}. Create the Home screen with:
-- A header showing the app title and the current user's name
-- A navigation menu with buttons for the main sections of the app
-- A clean, professional layout using neutral colours"
-
-## Add a data form
-"Add a new screen with a form that lets users enter [describe your data].
-Save it to a Dataverse table called [TableName]. Include validation so required fields can't be empty."
-
-## Connect to data
-"Connect this app to a SharePoint list called [ListName] at [SharePoint URL].
-Show the items in a gallery on the Home screen, sorted by most recent first."
-`);
-
-  log.ok("Canvas App structure created");
-  log.dim("Next: run  pac canvas unpack --msapp YourApp.msapp --sources ./canvas-src  to import an existing app");
-  log.dim("Or ask your AI: 'Create the first screen for a Canvas App called " + projectName + "'");
-}
-
-function scaffoldMDA(dir, projectName, aiTool) {
-  log.info("Setting up Model-Driven App structure...");
-
-  write(path.join(dir, "instructions", "mda-instructions.md"), `# Model-Driven App Instructions
-
-## Type: Model-Driven App (Power Apps / Dataverse)
-## Project: ${projectName}
-
-- All entities map to Dataverse tables
-- Forms are defined in XML — do not hand-edit GUIDs
-- Business rules go in Dataverse, not client-side JS
-- Use PAC CLI to push/pull: pac solution push / pac solution clone
-- Plugin code goes in the Plugins/ folder, registered via Plugin Registration Tool
-- JavaScript web resources live in WebResources/ and must be registered on forms
-- SiteMaps define the app navigation structure
-`);
-
-  write(path.join(dir, "solutions", ".gitkeep"), "");
-
-  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
-
-## Clone your solution from Power Apps
-Run this command first (replace MySolution with your solution name):
-  pac solution clone --name MySolution --outputDirectory ./solutions
-
-## Then ask the AI:
-"I've cloned a Model-Driven App solution into the solutions/ folder.
-Explain the folder structure and what each file does."
-
-"Add a new form field called [FieldName] (type: text/date/lookup) to the [EntityName] main form."
-
-"Create a business rule on the [EntityName] entity that [describe the rule]."
-`);
-
-  log.ok("Model-Driven App structure created");
-  log.dim("Next: pac solution clone --name YourSolution --outputDirectory ./solutions");
-}
-
-function scaffoldPCF(dir, projectName, aiTool) {
-  log.info("Setting up PCF Code Component structure...");
-
-  write(path.join(dir, "instructions", "pcf-instructions.md"), `# PCF Code Component Instructions
-
-## Type: Power Apps Component Framework (PCF)
-## Project: ${projectName}
-
-- Entry point is always index.ts implementing ComponentFramework.StandardControl
-- Properties are declared in ControlManifest.Input.xml
-- Use context.parameters to read input properties
-- Use notifyOutputChanged() to push values back to the app
-- Styling: use CSS modules or inline styles — no Tailwind
-- Testing: use @testing-library/react + Jest
-- Build: npm run build then pac pcf push
-- Never modify .pcfproj or Solution.xml by hand
-`);
-
-  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
-
-## Initialise the PCF project (run this command first):
-pac pcf init --namespace YourCompany --name ${projectName.replace(/\s+/g, "")} --template field
-
-## Then ask the AI:
-"I've initialised a PCF component called ${projectName}. 
-Explain the files that were created and what I need to edit to build my component."
-
-"Build a PCF component that [describe what the component should do — e.g. shows a star rating control, renders a colour picker, displays a custom chart]."
-
-"Add a property to this PCF component called [PropertyName] of type [SingleLine.Text / Whole.None / etc] that [describe what it controls]."
-`);
-
-  log.ok("PCF structure created");
-  log.dim("Next: pac pcf init --namespace YourNamespace --name " + projectName.replace(/\s+/g, "") + " --template field");
-  log.dim("Then: npm install && npm start watch");
-}
-
-function scaffoldPowerPages(dir, projectName, aiTool) {
-  log.info("Setting up Power Pages structure...");
-
-  write(path.join(dir, "instructions", "powerpages-instructions.md"), `# Power Pages Instructions
-
-## Type: Power Pages (External Portal)
-## Project: ${projectName}
-
-- Pages use Liquid templating language — similar to Jinja2
-- Data access uses FetchXML or Liquid tags like {% fetchxml %}
-- CSS and JS go in web-files/ — reference them in templates
-- Authentication is managed by Power Pages — do not build custom auth
-- Table permissions control data access — configure in Power Pages studio
-- Use pac pages download / pac pages upload to sync changes
-- Never hardcode environment URLs — use Liquid {{ request.url }} helpers
-`);
-
-  write(path.join(dir, "site", "web-files", ".gitkeep"), "");
-  write(path.join(dir, "site", "web-pages", ".gitkeep"), "");
-  write(path.join(dir, "site", "web-templates", ".gitkeep"), "");
-  write(path.join(dir, "site", "content-snippets", ".gitkeep"), "");
-  write(path.join(dir, "site", "entity-forms", ".gitkeep"), "");
-  write(path.join(dir, "site", "web-roles", ".gitkeep"), "");
-
-  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
-
-## Download your site from Power Apps (run first — replace the ID):
-pac pages download --path ./site --webSiteId your-website-id
-
-## Then ask the AI:
-"I've downloaded a Power Pages site into the site/ folder.
-Explain the folder structure and what each folder contains."
-
-"Create a new page called [PageName] that [describe what the page does — e.g. shows a contact form, lists products from a Dataverse table]."
-
-"Add a navigation link called [LinkName] to the site header that goes to /[page-url]."
-`);
-
-  log.ok("Power Pages structure created");
-  log.dim("Next: pac pages download --path ./site --webSiteId <your-site-id>");
-}
-
-function scaffoldCodeApp(dir, projectName, aiTool) {
-  log.info("Setting up Code App structure...");
-
-  const safeName = projectName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
-
-  // ── package.json ──────────────────────────────────────────────────────────
-  // Uses Vite (not react-scripts/CRA which is deprecated and broken).
-  // @microsoft/power-apps is intentionally NOT listed here — it bundles
-  // a native addon (keytar) that fails to build on most machines.
-  // It is installed globally via: npm install -g @microsoft/power-apps
-  // and imported in app code once the user is ready to connect to Power Platform.
-  write(path.join(dir, "package.json"), JSON.stringify({
-    name: safeName,
-    version: "0.1.0",
-    private: true,
-    type: "module",
-    scripts: {
-      start: "vite",
-      build: "tsc && vite build",
-      preview: "vite preview",
-    },
-    dependencies: {
-      react: "^18.3.1",
-      "react-dom": "^18.3.1",
-    },
-    devDependencies: {
-      "@types/react": "^18.3.3",
-      "@types/react-dom": "^18.3.0",
-      "@vitejs/plugin-react": "^6.0.0",
-      typescript: "^5.5.3",
-      vite: "^8.0.0",
-    },
-  }, null, 2));
-
-  // ── vite.config.ts ────────────────────────────────────────────────────────
-  write(path.join(dir, "vite.config.ts"), `import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react()],
-  server: {
-    port: 3000,
-    open: true,   // automatically opens the browser on npm start
-  },
-})
-`);
-
-  // ── tsconfig.json ─────────────────────────────────────────────────────────
-  write(path.join(dir, "tsconfig.json"), JSON.stringify({
-    compilerOptions: {
-      target: "ES2020",
-      useDefineForClassFields: true,
-      lib: ["ES2020", "DOM", "DOM.Iterable"],
-      module: "ESNext",
-      skipLibCheck: true,
-      moduleResolution: "bundler",
-      allowImportingTsExtensions: true,
-      isolatedModules: true,
-      moduleDetection: "force",
-      noEmit: true,
-      jsx: "react-jsx",
-      strict: true,
-      noUnusedLocals: true,
-      noUnusedParameters: true,
-      noFallthroughCasesInSwitch: true,
-    },
-    include: ["src"],
-  }, null, 2));
-
-  // ── index.html ────────────────────────────────────────────────────────────
-  // Vite requires index.html at the project root (not inside /public)
-  write(path.join(dir, "index.html"), `<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>${projectName}</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
-`);
-
-  // ── public/favicon.svg ────────────────────────────────────────────────────
-  write(path.join(dir, "public", "favicon.svg"), `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="6" fill="#742774"/>
-  <text x="16" y="22" text-anchor="middle" font-size="18" fill="white" font-family="sans-serif">⚡</text>
-</svg>
-`);
-
-  // ── src/vite-env.d.ts ─────────────────────────────────────────────────────
-  // Required: tells TypeScript what *.module.css imports look like
-  write(path.join(dir, "src", "vite-env.d.ts"), `/// <reference types="vite/client" />
-
-// CSS Modules
-declare module '*.module.css' {
-  const classes: Record<string, string>
-  export default classes
-}
-`);
-
-  // ── src/main.tsx ──────────────────────────────────────────────────────────
-  write(path.join(dir, "src", "main.tsx"), `import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App'
-import './index.css'
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-)
-`);
-
-  // ── src/App.tsx ───────────────────────────────────────────────────────────
-  write(path.join(dir, "src", "App.tsx"), `import styles from './App.module.css'
-
-/**
- * ${projectName}
- *
- * This is your app's root component. Start here.
- *
- * To connect to Power Platform data and connectors:
- *   1. Install the CLI globally: npm install -g @microsoft/power-apps
- *   2. Run: npx power-apps init  (creates power.config.json)
- *   3. Then import in your components:
- *        import { useData } from '@microsoft/power-apps'
- *
- * Ask your AI assistant: "Build the main layout for ${projectName}"
- */
-export default function App() {
-  return (
-    <div className={styles.app}>
-      <header className={styles.header}>
-        <h1>${projectName}</h1>
-        <p>Your Power Apps Code App is running. Open your AI assistant and describe what to build.</p>
-      </header>
-      <main className={styles.main}>
-        <div className={styles.card}>
-          <h2>🚀 Ready to build</h2>
-          <p>Open Copilot Chat or Claude Code and paste a prompt from <code>prompts/starter.md</code></p>
-        </div>
-      </main>
-    </div>
-  )
-}
-`);
-
-  // ── src/App.module.css ────────────────────────────────────────────────────
-  write(path.join(dir, "src", "App.module.css"), `.app {
-  min-height: 100vh;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-  background: #f4f4f8;
-  color: #1a1a2e;
-}
-
-.header {
-  background: #742774;
-  color: white;
-  padding: 2rem;
-  text-align: center;
-}
-
-.header h1 {
-  margin: 0 0 0.5rem;
-  font-size: 2rem;
-}
-
-.header p {
-  margin: 0;
-  opacity: 0.85;
-}
-
-.main {
-  max-width: 800px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-}
-
-.card {
-  background: white;
-  border-radius: 8px;
-  padding: 1.5rem 2rem;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-}
-
-.card h2 { margin-top: 0; }
-`);
-
-  // ── src/index.css ─────────────────────────────────────────────────────────
-  write(path.join(dir, "src", "index.css"), `*, *::before, *::after { box-sizing: border-box; }
-body { margin: 0; }
-`);
-
-  // ── src/components/ placeholder ───────────────────────────────────────────
-  write(path.join(dir, "src", "components", ".gitkeep"), "");
-
-  // ── instructions ─────────────────────────────────────────────────────────
-}
-  write(path.join(dir, "instructions", "codeapp-instructions.md"), `# Code App Instructions
-
-## Type: Power Apps Code App (Code-first web app)
-## Project: ${projectName}
-
-<<<<<<< HEAD
-### Tech stack (already installed — DO NOT change)
-- Vite ^8 as the dev server and bundler (npm start = vite)
-- React 18 + TypeScript 5
-- CSS Modules for styling (*.module.css files)
-- NO react-scripts, NO Create React App, NO webpack
-
-### Connecting to Power Platform data
-The @microsoft/power-apps client library is installed globally (not in package.json)
-because it includes a native addon that must be compiled separately.
-To add Power Platform data to a component:
-  1. Run once: npm install -g @microsoft/power-apps
-  2. Run once: npx power-apps init  (creates power.config.json)
-  3. Import in components: import { useData } from '@microsoft/power-apps'
-
-### Coding rules
-- All components are React functional components with TypeScript types
-- CSS goes in *.module.css files — import as: import styles from './Component.module.css'
-- New pages/screens = new .tsx files in src/components/
-- No class components, no .then() chains (use async/await)
-- Never touch vite.config.ts or tsconfig.json unless asked
-
-### To publish to Power Platform
-  1. npm run build  (creates dist/ folder)
-  2. npx power-apps push  (uploads to your environment)
-`);
-
-  // ── prompts/starter.md ────────────────────────────────────────────────────
-  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
-
-Your app is already running. Open your AI assistant and copy one of these prompts.
-
----
-
-## Build the home screen
-"I'm building a Power Apps Code App called ${projectName} using React and TypeScript with Vite.
-Replace the placeholder home screen in src/App.tsx with a proper layout that has:
-- A navigation bar at the top with the app name and a user avatar placeholder
-- A main content area with cards showing [describe your main content]
-- A clean, professional design using the existing CSS module pattern"
-
----
-
-## Add a new page
-"Add a new page called [PageName] to this React app.
-Create src/components/[PageName].tsx with [describe what the page does].
-Add a navigation link to it in App.tsx."
-
----
-
-## Add a data table
-"Add a component called DataTable.tsx in src/components/ that displays a table of [describe your data].
-Use mock data for now — I'll connect it to real data later.
-Style it using a CSS module."
-
----
-
-## Connect to Power Platform data
-"I want to connect this app to Power Platform.
-Walk me through:
-1. Installing @microsoft/power-apps globally
-2. Running npx power-apps init
-3. Adding a useData hook to fetch records from a Dataverse table called [TableName]"
-
----
-
-## Fix a TypeScript error
-"I got this TypeScript error in [filename]: [paste error]
-Explain what it means and fix it."
-`);
-
-  // ── run npm install automatically ─────────────────────────────────────────
-  log.info("Running npm install (this takes about 30 seconds)...");
-  const installed = run("npm install", dir);
-  if (installed) {
-    log.ok("npm install completed — all dependencies ready");
-  } else {
-    log.warn("npm install had issues — try running  npm install  manually inside the project folder");
-  }
-
-  log.ok("Code App structure created — run  npm start  to launch the app");
-=======
-- Standard web app (React/TypeScript) hosted on Power Platform
-- Use @microsoft/power-apps npm package to access connectors and platform APIs
-- Authentication is handled by Microsoft Entra — do not build custom auth
-- Call Power Platform connectors directly from JavaScript via the client library
-- Publish with pac code push — no manual deployment pipeline needed
-- Follows canvas app sharing limits and DLP policies set by admins
-- Not supported in Power Apps mobile app or Power Apps for Windows
-- Use npm start for local dev; the platform manages hosting in production
-- Admin must enable Code Apps in Power Platform Admin Center before publishing
-`);
-
-  write(path.join(dir, "src", "components", ".gitkeep"), "");
-  write(path.join(dir, "public", ".gitkeep"), "");
-
-  write(path.join(dir, "src", "App.tsx"), `// ${projectName} — Code App entry point
-// Ask your AI assistant: "Set up the main App component for a Power Apps Code App called ${projectName}"
-
-export default function App() {
-  return (
-    <div>
-      <h1>${projectName}</h1>
-      <p>Ask your AI to build this app. Open the chat and describe what you want.</p>
-    </div>
-  );
-}
-`);
-
-  write(path.join(dir, "src", "index.ts"), `// Entry point — ask your AI to fill this in
-`);
-
-  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
-
-## First, initialise the Code App (run this command):
-pac code init --outputDirectory .
-
-## Install dependencies:
-npm install
-
-## Then ask the AI:
-"I'm building a Power Apps Code App called ${projectName} using React and TypeScript.
-Set up the project with a clean layout, routing between pages, and connect it to Microsoft Entra authentication using the @microsoft/power-apps package."
-
-"Add a page called [PageName] that [describe what the page does]."
-
-"Connect this app to a Power Platform connector called [ConnectorName] and show the data in a table."
-`);
-
-  write(path.join(dir, "package.json"), JSON.stringify({
-    name: projectName.toLowerCase().replace(/\s+/g, "-"),
-    version: "0.1.0",
-    private: true,
-    scripts: {
-      start: "react-scripts start",
-      build: "react-scripts build",
-    },
-    dependencies: {
-      "@microsoft/power-apps": "latest",
-      react: "^18.0.0",
-      "react-dom": "^18.0.0",
-    },
-    devDependencies: {
-      typescript: "^5.0.0",
-      "@types/react": "^18.0.0",
-      "@types/react-dom": "^18.0.0",
-    },
-  }, null, 2));
-
-  write(path.join(dir, "tsconfig.json"), JSON.stringify({
-    compilerOptions: {
-      target: "ES2020",
-      lib: ["ES2020", "DOM"],
-      jsx: "react-jsx",
-      module: "ESNext",
-      moduleResolution: "bundler",
-      strict: true,
-      esModuleInterop: true,
-      skipLibCheck: true,
-    },
-    include: ["src"],
-  }, null, 2));
-
-  log.ok("Code App structure created");
-  log.dim("Next: pac code init --outputDirectory .  then  npm install");
->>>>>>> 3a159cf4be27d864191588e82e9143d5857edcac
-}
-
-// ─── AI context file writer ───────────────────────────────────────────────────
-
-function writeAIContextFile(dir, projectName, appType, aiTool) {
-  const content = `# Project: ${projectName}
-
-## What this project does
-[Fill in a one-paragraph description of your app — what problem it solves, who uses it]
-
-## App type
-${appType} on Microsoft Power Platform
-
-## AI assistant
-${aiTool}
-
-## Coding conventions
-- Use TypeScript (not plain JavaScript) wherever possible
-- Use async/await (not .then() chains)
-- All functions should have clear names that describe what they do
-- Add a short comment above any complex logic explaining what it does
-
-## Power Platform context
-- See the instructions/ folder for ${appType}-specific rules
-- Environment URL is in the .env file (POWER_PLATFORM_URL)
-- Use PAC CLI to push/pull changes — see README.md for commands
-
-## What to do when you get an error
-Tell the AI: "I got this error: [paste error here]. What does it mean and how do I fix it?"
-`;
-
-  if (aiTool === "Claude Code") {
-    write(path.join(dir, "CLAUDE.md"), content);
-    log.ok("Created CLAUDE.md — Claude Code reads this automatically on every session");
-  } else {
-    fs.mkdirSync(path.join(dir, ".github"), { recursive: true });
-    write(path.join(dir, ".github", "copilot-instructions.md"), content);
-    log.ok("Created .github/copilot-instructions.md — Copilot reads this for context");
-  }
-}
-
-// ─── Main ─────────────────────────────────────────────────────────────────────
-
-async function main() {
-  console.log(`
-${c.bold}${c.magenta}╔═══════════════════════════════════════════╗
-║       create-powerapp  ⚡                ║
-║  Scaffold any Power App in one command   ║
-╚═══════════════════════════════════════════╝${c.reset}
-
-Welcome! Answer a few questions and your project will be ready
-to open in VS Code and start prompting your AI assistant.
-`);
-
-  // ── 1. Project name ──────────────────────────────────────────────────────
-  log.step("Project name");
-  log.dim("This becomes your folder name and app name. Use letters, numbers, hyphens.");
-  let projectName = await prompt("  Project name: ");
-  if (!projectName) projectName = "my-powerapp";
-  const safeName = projectName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
-
-  // ── 2. App type ──────────────────────────────────────────────────────────
-  log.step("Which type of Power App are you building?");
-  const appTypeChoice = await choose("App type:", [
-    { label: "Canvas App",        desc: "— Design every screen pixel-by-pixel. Best for custom-branded employee tools & mobile apps" },
-    { label: "Model-Driven App",  desc: "— Database-first. Power Apps builds the UI from your data model. Best for CRM / record management" },
-    { label: "PCF Component",     desc: "— A reusable custom control (widget) to embed inside other Power Apps" },
-    { label: "Power Pages",       desc: "— A public-facing website connected to your Dataverse data" },
-    { label: "Code App",          desc: "— A full custom web app (React/TypeScript) hosted on Power Platform" },
-  ]);
-
-  // ── 3. AI assistant ──────────────────────────────────────────────────────
-  log.step("Which AI assistant are you using?");
-  const aiChoice = await choose("AI assistant:", [
-    { label: "GitHub Copilot",  desc: "— You have a GitHub Copilot subscription or organisation license" },
-    { label: "Claude Code",     desc: "— You have an Anthropic API key or Claude Code license" },
-  ]);
-
-  // ── 4. Power Platform environment URL ────────────────────────────────────
-  log.step("Power Platform environment URL  (optional — press Enter to skip)");
-  log.dim("Find it at make.powerapps.com → Settings gear → Session details → Instance url");
-  log.dim("Example: https://yourcompany.crm.dynamics.com");
-  const envUrl = await prompt("  Environment URL: ");
-
-  // ── 5. Create folder ─────────────────────────────────────────────────────
-  log.step(`Creating project folder: ${safeName}/`);
-  const dir = path.join(process.cwd(), safeName);
-
-  if (fs.existsSync(dir)) {
-    const overwrite = await prompt(`  Folder "${safeName}" already exists. Overwrite? (y/N): `);
-    if (overwrite.toLowerCase() !== "y") {
-      log.warn("Aborted. Choose a different project name.");
-      process.exit(0);
-    }
-  }
-
-  fs.mkdirSync(dir, { recursive: true });
-  log.ok(`Folder created: ${dir}`);
-
-  // ── 6. Shared files ──────────────────────────────────────────────────────
-  log.step("Creating shared project files...");
-
-  write(path.join(dir, ".gitignore"), gitignoreContent());
-  log.ok("Created .gitignore");
-
-  write(path.join(dir, ".env"), envUrl
-    ? envContent(projectName, appTypeChoice.label).replace("https://yourorg.crm.dynamics.com", envUrl)
-    : envContent(projectName, appTypeChoice.label)
-  );
-  log.ok("Created .env");
-
-  write(path.join(dir, "README.md"), readmeContent(projectName, appTypeChoice.label, aiChoice.label));
-  log.ok("Created README.md");
-
-  // ── 7. App-type scaffold ─────────────────────────────────────────────────
-  log.step(`Scaffolding ${appTypeChoice.label} files...`);
-  switch (appTypeChoice.label) {
-    case "Canvas App":       scaffoldCanvas(dir, projectName, aiChoice.label);     break;
-    case "Model-Driven App": scaffoldMDA(dir, projectName, aiChoice.label);        break;
-    case "PCF Component":    scaffoldPCF(dir, projectName, aiChoice.label);        break;
-    case "Power Pages":      scaffoldPowerPages(dir, projectName, aiChoice.label); break;
-    case "Code App":         scaffoldCodeApp(dir, projectName, aiChoice.label);    break;
-  }
-
-  // ── 8. AI context file ───────────────────────────────────────────────────
-  log.step("Creating AI context file...");
-  writeAIContextFile(dir, projectName, appTypeChoice.label, aiChoice.label);
-
-  // ── 9. Git init ──────────────────────────────────────────────────────────
-  log.step("Initialising Git...");
-  if (has("git")) {
-    run("git init", dir, true);
-    run("git add .", dir, true);
-    run('git commit -m "Initial scaffold by create-powerapp"', dir, true);
-    log.ok("Git initialised with first commit");
-  } else {
-    log.warn("Git not found — skipping. Install Git and run  git init  inside your project.");
-  }
-
-  // ── 10. PAC CLI auth ─────────────────────────────────────────────────────
-  if (envUrl) {
-    log.step("Connecting to Power Platform environment...");
-    if (has("pac")) {
-      log.info(`Running: pac auth create --url ${envUrl}`);
-      log.dim("A browser window will open. Sign in with your Microsoft work account.");
-      run(`pac auth create --url ${envUrl}`, dir);
-    } else {
-      log.warn("PAC CLI not found. Install it with:  npm install -g pac");
-      log.warn("Then run:  pac auth create --url " + envUrl);
-    }
-  }
-
-  // ── 11. Open in VS Code ──────────────────────────────────────────────────
-  log.step("Opening in VS Code...");
-  if (has("code")) {
-    run(`code "${dir}"`, process.cwd(), true);
-    log.ok("VS Code opened with your project");
-  } else {
-    log.warn("VS Code  code  command not found.");
-    log.dim("Open VS Code manually → File → Open Folder → select:  " + dir);
-  }
-
-  // ── Done ─────────────────────────────────────────────────────────────────
-<<<<<<< HEAD
-  const isCodeApp = appTypeChoice.label === "Code App";
-=======
->>>>>>> 3a159cf4be27d864191588e82e9143d5857edcac
-  console.log(`
-${c.bold}${c.green}╔═══════════════════════════════════════════════════╗
-║  ✅  Your project is ready!                       ║
-╚═══════════════════════════════════════════════════╝${c.reset}
-
-${c.bold}Project folder:${c.reset}  ${dir}
-
-${c.bold}What to do next:${c.reset}
-
-  1. VS Code is now open (or open it manually and open the folder above)
-<<<<<<< HEAD
-${isCodeApp ? `
-  2. ${c.bold}${c.green}Start the app:${c.reset}  In the VS Code terminal, run:
-       ${c.cyan}npm start${c.reset}
-     Your browser will open automatically at http://localhost:3000
-` : `
-  2. Read the ${c.cyan}prompts/starter.md${c.reset} file for ready-made prompts to get started
-`}
-=======
-
-  2. Read the ${c.cyan}prompts/starter.md${c.reset} file for ready-made prompts to get started
-
->>>>>>> 3a159cf4be27d864191588e82e9143d5857edcac
-  3. Open your AI assistant:
-${aiChoice.label === "Claude Code"
-  ? `     • In the VS Code terminal, run:  ${c.cyan}claude${c.reset}
-     • Or click the Claude Code icon in the left sidebar`
-  : `     • Click the Copilot Chat icon (💬) in the VS Code left sidebar`}
-
-  4. Copy a prompt from ${c.cyan}prompts/starter.md${c.reset} and paste it in — or describe your app in your own words
-
-  5. When you're happy with what the AI built, save your work:
-     ${c.dim}git add . → git commit -m "describe what you built" → git push${c.reset}
-
-${c.bold}${c.yellow}Tip:${c.reset} When something goes wrong, tell the AI:
-  "I got this error: [paste error]. What does it mean and how do I fix it?"
-
-Happy building! 🚀
-`);
-  rl.close();
-}
-
-main().catch((err) => {
-  log.error("Unexpected error: " + err.message);
-  rl.close();
-  process.exit(1);
-});
+#!/usr/bin/env node
+
+/**
+ * create-powerapp
+ * One command to scaffold any Power Apps project — Canvas App, Model-Driven App,
+ * PCF Component, Power Pages, or Code App — with Git, AI context files, and
+ * everything ready so you can immediately start prompting your AI assistant.
+ */
+
+import { execSync, spawnSync } from "child_process";
+import fs from "fs";
+import path from "path";
+import readline from "readline";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ─── Colour helpers ──────────────────────────────────────────────────────────
+const c = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  green: "\x1b[32m",
+  cyan: "\x1b[36m",
+  yellow: "\x1b[33m",
+  red: "\x1b[31m",
+  dim: "\x1b[2m",
+  magenta: "\x1b[35m",
+};
+const log = {
+  info: (m) => console.log(`${c.cyan}ℹ${c.reset}  ${m}`),
+  ok: (m) => console.log(`${c.green}✔${c.reset}  ${m}`),
+  warn: (m) => console.log(`${c.yellow}⚠${c.reset}  ${m}`),
+  error: (m) => console.log(`${c.red}✖${c.reset}  ${m}`),
+  step: (m) => console.log(`\n${c.bold}${c.magenta}▶ ${m}${c.reset}`),
+  dim: (m) => console.log(`${c.dim}   ${m}${c.reset}`),
+};
+
+// ─── readline helper ─────────────────────────────────────────────────────────
+// Single persistent readline interface — works interactively AND when piped (CI)
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout,
+  terminal: false,   // don't assume TTY — makes piped input work in CI
+});
+
+// Queue of lines already read from stdin (for piped / non-interactive mode)
+const lineQueue = [];
+const lineWaiters = [];
+rl.on("line", (line) => {
+  if (lineWaiters.length > 0) {
+    lineWaiters.shift()(line.trim());
+  } else {
+    lineQueue.push(line.trim());
+  }
+});
+
+function prompt(question) {
+  process.stdout.write(question);
+  return new Promise((resolve) => {
+    if (lineQueue.length > 0) {
+      const line = lineQueue.shift();
+      process.stdout.write(line + "\n");   // echo the pre-buffered answer
+      resolve(line);
+    } else {
+      lineWaiters.push(resolve);
+    }
+  });
+}
+
+async function choose(question, options) {
+  console.log(`\n${c.bold}${question}${c.reset}`);
+  options.forEach((o, i) => console.log(`  ${c.cyan}${i + 1}${c.reset}. ${o.label}  ${c.dim}${o.desc || ""}${c.reset}`));
+  while (true) {
+    const answer = await prompt(`\nEnter number (1–${options.length}): `);
+    const idx = parseInt(answer, 10) - 1;
+    if (idx >= 0 && idx < options.length) return options[idx];
+    log.warn("Please enter a valid number.");
+  }
+}
+
+// ─── run shell command ────────────────────────────────────────────────────────
+function run(cmd, cwd = process.cwd(), silent = false) {
+  const result = spawnSync(cmd, { shell: true, cwd, stdio: silent ? "pipe" : "inherit" });
+  if (result.status !== 0 && !silent) {
+    log.error(`Command failed: ${cmd}`);
+  }
+  return result.status === 0;
+}
+
+// ─── check a CLI tool exists ──────────────────────────────────────────────────
+function has(tool) {
+  return spawnSync(`${tool} --version`, { shell: true, stdio: "pipe" }).status === 0;
+}
+
+// ─── write file helper ────────────────────────────────────────────────────────
+function write(filePath, content) {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, content, "utf8");
+}
+
+// ─── shared file content ──────────────────────────────────────────────────────
+
+function gitignoreContent() {
+  return `# Dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# Environment variables — NEVER commit these
+.env
+.env.local
+.env.*.local
+
+# Build outputs
+dist/
+build/
+out/
+.next/
+bin/
+
+# Editor files
+.vscode/
+.idea/
+*.swp
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+npm-debug.log*
+
+# Power Apps / PAC CLI outputs
+*.msapp
+*.zip
+/obj/
+`;
+}
+
+function envContent(projectName, appType) {
+  return `# .env — DO NOT commit this file to Git
+# Fill in the values for your project
+
+# Your Power Platform environment URL
+# Find it at: make.powerapps.com → Settings gear → Session details → Instance url
+POWER_PLATFORM_URL=https://yourorg.crm.dynamics.com
+
+# Project info
+PROJECT_NAME=${projectName}
+APP_TYPE=${appType}
+
+# Add any other secrets here (API keys, database URLs, etc.)
+# API_KEY=your-key-here
+`;
+}
+
+function readmeContent(projectName, appType, aiTool) {
+  return `# ${projectName}
+
+**Type:** ${appType}  
+**AI Assistant:** ${aiTool}
+
+## Getting started
+
+Everything is already set up. Just open your AI assistant and describe what you want to build.
+
+### Start your AI session
+
+${aiTool === "Claude Code"
+  ? "```bash\nclaude\n```\nThen type what you want to build in plain English."
+  : "Click the **Copilot Chat** icon (💬) in the VS Code sidebar and type what you want to build."}
+
+### Example first prompts
+
+> "Create the main screen for this app with a navigation menu and a welcome message."
+
+> "Add a form that lets users submit [whatever your app needs] and saves it to Dataverse."
+
+> "Explain what files are in this project and what each one does."
+
+## Project structure
+
+See the \`instructions/\` folder for the AI context files that tell your AI assistant
+how this type of Power App works.
+
+## Useful commands
+
+\`\`\`bash
+# Push changes to Power Platform
+${appType === "Canvas App" ? "pac canvas pack --msapp ./CanvasApp.msapp --sources ./canvas-src\npac solution push" : ""}
+${appType === "Model-Driven App" ? "pac solution push" : ""}
+${appType === "PCF Component" ? "npm run build\npac pcf push --publisher-prefix yourprefix" : ""}
+${appType === "Power Pages" ? "pac pages upload --path ." : ""}
+${appType === "Code App" ? "npm run build\npac code push" : ""}
+
+# Save your work
+git add .
+git commit -m "describe what you changed"
+git push
+\`\`\`
+`;
+}
+
+// ─── App-type scaffolders ─────────────────────────────────────────────────────
+
+function scaffoldCanvas(dir, projectName, aiTool) {
+  log.info("Setting up Canvas App structure...");
+
+  // AI context files
+  write(path.join(dir, "instructions", "canvas-instructions.md"), `# Canvas App Instructions
+
+## Type: Canvas App (Power Apps)
+## Project: ${projectName}
+
+- Screens and controls are defined in .fx.yaml files
+- Formulas use Power Fx — similar to Excel syntax
+- Use With(), Collect(), Patch() for data operations — never SQL
+- Navigation: Navigate(ScreenName, ScreenTransition.Fade)
+- Avoid nested galleries — use collections instead
+- PAC commands: pac canvas unpack / pac canvas pack
+- Never edit .msapp binary directly — always unpack first
+- Assets (images, icons) go in Assets/
+- Data source connections go in DataSources/
+`);
+
+  write(path.join(dir, "canvas-src", "Src", ".gitkeep"), "");
+  write(path.join(dir, "canvas-src", "Assets", ".gitkeep"), "");
+  write(path.join(dir, "canvas-src", "DataSources", ".gitkeep"), "");
+  write(path.join(dir, "canvas-src", "pkgs", ".gitkeep"), "");
+
+  write(path.join(dir, "canvas-src", "Src", "App.fx.yaml"), `# App-level settings and global variables
+# The AI will help you fill this in as you build
+`);
+
+  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
+
+Copy and paste these into your AI assistant to get started quickly.
+
+## Create your first screen
+"I'm building a Canvas App called ${projectName}. Create the Home screen with:
+- A header showing the app title and the current user's name
+- A navigation menu with buttons for the main sections of the app
+- A clean, professional layout using neutral colours"
+
+## Add a data form
+"Add a new screen with a form that lets users enter [describe your data].
+Save it to a Dataverse table called [TableName]. Include validation so required fields can't be empty."
+
+## Connect to data
+"Connect this app to a SharePoint list called [ListName] at [SharePoint URL].
+Show the items in a gallery on the Home screen, sorted by most recent first."
+`);
+
+  log.ok("Canvas App structure created");
+  log.dim("Next: run  pac canvas unpack --msapp YourApp.msapp --sources ./canvas-src  to import an existing app");
+  log.dim("Or ask your AI: 'Create the first screen for a Canvas App called " + projectName + "'");
+}
+
+function scaffoldMDA(dir, projectName, aiTool) {
+  log.info("Setting up Model-Driven App structure...");
+
+  write(path.join(dir, "instructions", "mda-instructions.md"), `# Model-Driven App Instructions
+
+## Type: Model-Driven App (Power Apps / Dataverse)
+## Project: ${projectName}
+
+- All entities map to Dataverse tables
+- Forms are defined in XML — do not hand-edit GUIDs
+- Business rules go in Dataverse, not client-side JS
+- Use PAC CLI to push/pull: pac solution push / pac solution clone
+- Plugin code goes in the Plugins/ folder, registered via Plugin Registration Tool
+- JavaScript web resources live in WebResources/ and must be registered on forms
+- SiteMaps define the app navigation structure
+`);
+
+  write(path.join(dir, "solutions", ".gitkeep"), "");
+
+  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
+
+## Clone your solution from Power Apps
+Run this command first (replace MySolution with your solution name):
+  pac solution clone --name MySolution --outputDirectory ./solutions
+
+## Then ask the AI:
+"I've cloned a Model-Driven App solution into the solutions/ folder.
+Explain the folder structure and what each file does."
+
+"Add a new form field called [FieldName] (type: text/date/lookup) to the [EntityName] main form."
+
+"Create a business rule on the [EntityName] entity that [describe the rule]."
+`);
+
+  log.ok("Model-Driven App structure created");
+  log.dim("Next: pac solution clone --name YourSolution --outputDirectory ./solutions");
+}
+
+function scaffoldPCF(dir, projectName, aiTool) {
+  log.info("Setting up PCF Code Component structure...");
+
+  write(path.join(dir, "instructions", "pcf-instructions.md"), `# PCF Code Component Instructions
+
+## Type: Power Apps Component Framework (PCF)
+## Project: ${projectName}
+
+- Entry point is always index.ts implementing ComponentFramework.StandardControl
+- Properties are declared in ControlManifest.Input.xml
+- Use context.parameters to read input properties
+- Use notifyOutputChanged() to push values back to the app
+- Styling: use CSS modules or inline styles — no Tailwind
+- Testing: use @testing-library/react + Jest
+- Build: npm run build then pac pcf push
+- Never modify .pcfproj or Solution.xml by hand
+`);
+
+  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
+
+## Initialise the PCF project (run this command first):
+pac pcf init --namespace YourCompany --name ${projectName.replace(/\s+/g, "")} --template field
+
+## Then ask the AI:
+"I've initialised a PCF component called ${projectName}. 
+Explain the files that were created and what I need to edit to build my component."
+
+"Build a PCF component that [describe what the component should do — e.g. shows a star rating control, renders a colour picker, displays a custom chart]."
+
+"Add a property to this PCF component called [PropertyName] of type [SingleLine.Text / Whole.None / etc] that [describe what it controls]."
+`);
+
+  log.ok("PCF structure created");
+  log.dim("Next: pac pcf init --namespace YourNamespace --name " + projectName.replace(/\s+/g, "") + " --template field");
+  log.dim("Then: npm install && npm start watch");
+}
+
+function scaffoldPowerPages(dir, projectName, aiTool) {
+  log.info("Setting up Power Pages structure...");
+
+  write(path.join(dir, "instructions", "powerpages-instructions.md"), `# Power Pages Instructions
+
+## Type: Power Pages (External Portal)
+## Project: ${projectName}
+
+- Pages use Liquid templating language — similar to Jinja2
+- Data access uses FetchXML or Liquid tags like {% fetchxml %}
+- CSS and JS go in web-files/ — reference them in templates
+- Authentication is managed by Power Pages — do not build custom auth
+- Table permissions control data access — configure in Power Pages studio
+- Use pac pages download / pac pages upload to sync changes
+- Never hardcode environment URLs — use Liquid {{ request.url }} helpers
+`);
+
+  write(path.join(dir, "site", "web-files", ".gitkeep"), "");
+  write(path.join(dir, "site", "web-pages", ".gitkeep"), "");
+  write(path.join(dir, "site", "web-templates", ".gitkeep"), "");
+  write(path.join(dir, "site", "content-snippets", ".gitkeep"), "");
+  write(path.join(dir, "site", "entity-forms", ".gitkeep"), "");
+  write(path.join(dir, "site", "web-roles", ".gitkeep"), "");
+
+  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
+
+## Download your site from Power Apps (run first — replace the ID):
+pac pages download --path ./site --webSiteId your-website-id
+
+## Then ask the AI:
+"I've downloaded a Power Pages site into the site/ folder.
+Explain the folder structure and what each folder contains."
+
+"Create a new page called [PageName] that [describe what the page does — e.g. shows a contact form, lists products from a Dataverse table]."
+
+"Add a navigation link called [LinkName] to the site header that goes to /[page-url]."
+`);
+
+  log.ok("Power Pages structure created");
+  log.dim("Next: pac pages download --path ./site --webSiteId <your-site-id>");
+}
+
+function scaffoldCodeApp(dir, projectName, aiTool) {
+  log.info("Setting up Code App structure...");
+
+  const safeName = projectName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+
+  // ── package.json ──────────────────────────────────────────────────────────
+  // Uses Vite (not react-scripts/CRA which is deprecated and broken).
+  // @microsoft/power-apps is intentionally NOT listed here — it bundles
+  // a native addon (keytar) that fails to build on most machines.
+  // It is installed globally via: npm install -g @microsoft/power-apps
+  // and imported in app code once the user is ready to connect to Power Platform.
+  write(path.join(dir, "package.json"), JSON.stringify({
+    name: safeName,
+    version: "0.1.0",
+    private: true,
+    type: "module",
+    scripts: {
+      start: "vite",
+      build: "tsc && vite build",
+      preview: "vite preview",
+    },
+    dependencies: {
+      react: "^18.3.1",
+      "react-dom": "^18.3.1",
+    },
+    devDependencies: {
+      "@types/react": "^18.3.3",
+      "@types/react-dom": "^18.3.0",
+      "@vitejs/plugin-react": "^6.0.0",
+      typescript: "^5.5.3",
+      vite: "^8.0.0",
+    },
+  }, null, 2));
+
+  // ── vite.config.ts ────────────────────────────────────────────────────────
+  write(path.join(dir, "vite.config.ts"), `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true,   // automatically opens the browser on npm start
+  },
+})
+`);
+
+  // ── tsconfig.json ─────────────────────────────────────────────────────────
+  write(path.join(dir, "tsconfig.json"), JSON.stringify({
+    compilerOptions: {
+      target: "ES2020",
+      useDefineForClassFields: true,
+      lib: ["ES2020", "DOM", "DOM.Iterable"],
+      module: "ESNext",
+      skipLibCheck: true,
+      moduleResolution: "bundler",
+      allowImportingTsExtensions: true,
+      isolatedModules: true,
+      moduleDetection: "force",
+      noEmit: true,
+      jsx: "react-jsx",
+      strict: true,
+      noUnusedLocals: true,
+      noUnusedParameters: true,
+      noFallthroughCasesInSwitch: true,
+    },
+    include: ["src"],
+  }, null, 2));
+
+  // ── index.html ────────────────────────────────────────────────────────────
+  // Vite requires index.html at the project root (not inside /public)
+  write(path.join(dir, "index.html"), `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${projectName}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+`);
+
+  // ── public/favicon.svg ────────────────────────────────────────────────────
+  write(path.join(dir, "public", "favicon.svg"), `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#742774"/>
+  <text x="16" y="22" text-anchor="middle" font-size="18" fill="white" font-family="sans-serif">⚡</text>
+</svg>
+`);
+
+  // ── src/vite-env.d.ts ─────────────────────────────────────────────────────
+  // Required: tells TypeScript what *.module.css imports look like
+  write(path.join(dir, "src", "vite-env.d.ts"), `/// <reference types="vite/client" />
+
+// CSS Modules
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+`);
+
+  // ── src/main.tsx ──────────────────────────────────────────────────────────
+  write(path.join(dir, "src", "main.tsx"), `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)
+`);
+
+  // ── src/App.tsx ───────────────────────────────────────────────────────────
+  write(path.join(dir, "src", "App.tsx"), `import styles from './App.module.css'
+
+/**
+ * ${projectName}
+ *
+ * This is your app's root component. Start here.
+ *
+ * To connect to Power Platform data and connectors:
+ *   1. Install the CLI globally: npm install -g @microsoft/power-apps
+ *   2. Run: npx power-apps init  (creates power.config.json)
+ *   3. Then import in your components:
+ *        import { useData } from '@microsoft/power-apps'
+ *
+ * Ask your AI assistant: "Build the main layout for ${projectName}"
+ */
+export default function App() {
+  return (
+    <div className={styles.app}>
+      <header className={styles.header}>
+        <h1>${projectName}</h1>
+        <p>Your Power Apps Code App is running. Open your AI assistant and describe what to build.</p>
+      </header>
+      <main className={styles.main}>
+        <div className={styles.card}>
+          <h2>🚀 Ready to build</h2>
+          <p>Open Copilot Chat or Claude Code and paste a prompt from <code>prompts/starter.md</code></p>
+        </div>
+      </main>
+    </div>
+  )
+}
+`);
+
+  // ── src/App.module.css ────────────────────────────────────────────────────
+  write(path.join(dir, "src", "App.module.css"), `.app {
+  min-height: 100vh;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: #f4f4f8;
+  color: #1a1a2e;
+}
+
+.header {
+  background: #742774;
+  color: white;
+  padding: 2rem;
+  text-align: center;
+}
+
+.header h1 {
+  margin: 0 0 0.5rem;
+  font-size: 2rem;
+}
+
+.header p {
+  margin: 0;
+  opacity: 0.85;
+}
+
+.main {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.card {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem 2rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+}
+
+.card h2 { margin-top: 0; }
+`);
+
+  // ── src/index.css ─────────────────────────────────────────────────────────
+  write(path.join(dir, "src", "index.css"), `*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; }
+`);
+
+  // ── src/components/ placeholder ───────────────────────────────────────────
+  write(path.join(dir, "src", "components", ".gitkeep"), "");
+
+  // ── instructions ─────────────────────────────────────────────────────────
+  write(path.join(dir, "instructions", "codeapp-instructions.md"), `# Code App Instructions
+
+## Type: Power Apps Code App (Code-first web app)
+## Project: ${projectName}
+
+### Tech stack (already installed — DO NOT change)
+- Vite ^8 as the dev server and bundler (npm start = vite)
+- React 18 + TypeScript 5
+- CSS Modules for styling (*.module.css files)
+- NO react-scripts, NO Create React App, NO webpack
+
+### Connecting to Power Platform data
+The @microsoft/power-apps client library is installed globally (not in package.json)
+because it includes a native addon that must be compiled separately.
+To add Power Platform data to a component:
+  1. Run once: npm install -g @microsoft/power-apps
+  2. Run once: npx power-apps init  (creates power.config.json)
+  3. Import in components: import { useData } from '@microsoft/power-apps'
+
+### Coding rules
+- All components are React functional components with TypeScript types
+- CSS goes in *.module.css files — import as: import styles from './Component.module.css'
+- New pages/screens = new .tsx files in src/components/
+- No class components, no .then() chains (use async/await)
+- Never touch vite.config.ts or tsconfig.json unless asked
+
+### To publish to Power Platform
+  1. npm run build  (creates dist/ folder)
+  2. npx power-apps push  (uploads to your environment)
+`);
+
+  // ── prompts/starter.md ────────────────────────────────────────────────────
+  write(path.join(dir, "prompts", "starter.md"), `# Starter Prompts for ${projectName}
+
+Your app is already running. Open your AI assistant and copy one of these prompts.
+
+---
+
+## Build the home screen
+"I'm building a Power Apps Code App called ${projectName} using React and TypeScript with Vite.
+Replace the placeholder home screen in src/App.tsx with a proper layout that has:
+- A navigation bar at the top with the app name and a user avatar placeholder
+- A main content area with cards showing [describe your main content]
+- A clean, professional design using the existing CSS module pattern"
+
+---
+
+## Add a new page
+"Add a new page called [PageName] to this React app.
+Create src/components/[PageName].tsx with [describe what the page does].
+Add a navigation link to it in App.tsx."
+
+---
+
+## Add a data table
+"Add a component called DataTable.tsx in src/components/ that displays a table of [describe your data].
+Use mock data for now — I'll connect it to real data later.
+Style it using a CSS module."
+
+---
+
+## Connect to Power Platform data
+"I want to connect this app to Power Platform.
+Walk me through:
+1. Installing @microsoft/power-apps globally
+2. Running npx power-apps init
+3. Adding a useData hook to fetch records from a Dataverse table called [TableName]"
+
+---
+
+## Fix a TypeScript error
+"I got this TypeScript error in [filename]: [paste error]
+Explain what it means and fix it."
+`);
+
+  // ── run npm install automatically ─────────────────────────────────────────
+  log.info("Running npm install (this takes about 30 seconds)...");
+  const installed = run("npm install", dir);
+  if (installed) {
+    log.ok("npm install completed — all dependencies ready");
+  } else {
+    log.warn("npm install had issues — try running  npm install  manually inside the project folder");
+  }
+
+  log.ok("Code App structure created — run  npm start  to launch the app");
+}
+
+// ─── AI context file writer ───────────────────────────────────────────────────
+
+function writeAIContextFile(dir, projectName, appType, aiTool) {
+  const content = `# Project: ${projectName}
+
+## What this project does
+[Fill in a one-paragraph description of your app — what problem it solves, who uses it]
+
+## App type
+${appType} on Microsoft Power Platform
+
+## AI assistant
+${aiTool}
+
+## Coding conventions
+- Use TypeScript (not plain JavaScript) wherever possible
+- Use async/await (not .then() chains)
+- All functions should have clear names that describe what they do
+- Add a short comment above any complex logic explaining what it does
+
+## Power Platform context
+- See the instructions/ folder for ${appType}-specific rules
+- Environment URL is in the .env file (POWER_PLATFORM_URL)
+- Use PAC CLI to push/pull changes — see README.md for commands
+
+## What to do when you get an error
+Tell the AI: "I got this error: [paste error here]. What does it mean and how do I fix it?"
+`;
+
+  if (aiTool === "Claude Code") {
+    write(path.join(dir, "CLAUDE.md"), content);
+    log.ok("Created CLAUDE.md — Claude Code reads this automatically on every session");
+  } else {
+    fs.mkdirSync(path.join(dir, ".github"), { recursive: true });
+    write(path.join(dir, ".github", "copilot-instructions.md"), content);
+    log.ok("Created .github/copilot-instructions.md — Copilot reads this for context");
+  }
+}
+
+// ─── Main ─────────────────────────────────────────────────────────────────────
+
+async function main() {
+  console.log(`
+${c.bold}${c.magenta}╔═══════════════════════════════════════════╗
+║       create-powerapp  ⚡                ║
+║  Scaffold any Power App in one command   ║
+╚═══════════════════════════════════════════╝${c.reset}
+
+Welcome! Answer a few questions and your project will be ready
+to open in VS Code and start prompting your AI assistant.
+`);
+
+  // ── 1. Project name ──────────────────────────────────────────────────────
+  log.step("Project name");
+  log.dim("This becomes your folder name and app name. Use letters, numbers, hyphens.");
+  let projectName = await prompt("  Project name: ");
+  if (!projectName) projectName = "my-powerapp";
+  const safeName = projectName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+
+  // ── 2. App type ──────────────────────────────────────────────────────────
+  log.step("Which type of Power App are you building?");
+  const appTypeChoice = await choose("App type:", [
+    { label: "Canvas App",        desc: "— Design every screen pixel-by-pixel. Best for custom-branded employee tools & mobile apps" },
+    { label: "Model-Driven App",  desc: "— Database-first. Power Apps builds the UI from your data model. Best for CRM / record management" },
+    { label: "PCF Component",     desc: "— A reusable custom control (widget) to embed inside other Power Apps" },
+    { label: "Power Pages",       desc: "— A public-facing website connected to your Dataverse data" },
+    { label: "Code App",          desc: "— A full custom web app (React/TypeScript) hosted on Power Platform" },
+  ]);
+
+  // ── 3. AI assistant ──────────────────────────────────────────────────────
+  log.step("Which AI assistant are you using?");
+  const aiChoice = await choose("AI assistant:", [
+    { label: "GitHub Copilot",  desc: "— You have a GitHub Copilot subscription or organisation license" },
+    { label: "Claude Code",     desc: "— You have an Anthropic API key or Claude Code license" },
+  ]);
+
+  // ── 4. Power Platform environment URL ────────────────────────────────────
+  log.step("Power Platform environment URL  (optional — press Enter to skip)");
+  log.dim("Find it at make.powerapps.com → Settings gear → Session details → Instance url");
+  log.dim("Example: https://yourcompany.crm.dynamics.com");
+  const envUrl = await prompt("  Environment URL: ");
+
+  // ── 5. Create folder ─────────────────────────────────────────────────────
+  log.step(`Creating project folder: ${safeName}/`);
+  const dir = path.join(process.cwd(), safeName);
+
+  if (fs.existsSync(dir)) {
+    const overwrite = await prompt(`  Folder "${safeName}" already exists. Overwrite? (y/N): `);
+    if (overwrite.toLowerCase() !== "y") {
+      log.warn("Aborted. Choose a different project name.");
+      process.exit(0);
+    }
+  }
+
+  fs.mkdirSync(dir, { recursive: true });
+  log.ok(`Folder created: ${dir}`);
+
+  // ── 6. Shared files ──────────────────────────────────────────────────────
+  log.step("Creating shared project files...");
+
+  write(path.join(dir, ".gitignore"), gitignoreContent());
+  log.ok("Created .gitignore");
+
+  write(path.join(dir, ".env"), envUrl
+    ? envContent(projectName, appTypeChoice.label).replace("https://yourorg.crm.dynamics.com", envUrl)
+    : envContent(projectName, appTypeChoice.label)
+  );
+  log.ok("Created .env");
+
+  write(path.join(dir, "README.md"), readmeContent(projectName, appTypeChoice.label, aiChoice.label));
+  log.ok("Created README.md");
+
+  // ── 7. App-type scaffold ─────────────────────────────────────────────────
+  log.step(`Scaffolding ${appTypeChoice.label} files...`);
+  switch (appTypeChoice.label) {
+    case "Canvas App":       scaffoldCanvas(dir, projectName, aiChoice.label);     break;
+    case "Model-Driven App": scaffoldMDA(dir, projectName, aiChoice.label);        break;
+    case "PCF Component":    scaffoldPCF(dir, projectName, aiChoice.label);        break;
+    case "Power Pages":      scaffoldPowerPages(dir, projectName, aiChoice.label); break;
+    case "Code App":         scaffoldCodeApp(dir, projectName, aiChoice.label);    break;
+  }
+
+  // ── 8. AI context file ───────────────────────────────────────────────────
+  log.step("Creating AI context file...");
+  writeAIContextFile(dir, projectName, appTypeChoice.label, aiChoice.label);
+
+  // ── 9. Git init ──────────────────────────────────────────────────────────
+  log.step("Initialising Git...");
+  if (has("git")) {
+    run("git init", dir, true);
+    run("git add .", dir, true);
+    run('git commit -m "Initial scaffold by create-powerapp"', dir, true);
+    log.ok("Git initialised with first commit");
+  } else {
+    log.warn("Git not found — skipping. Install Git and run  git init  inside your project.");
+  }
+
+  // ── 10. PAC CLI auth ─────────────────────────────────────────────────────
+  if (envUrl) {
+    log.step("Connecting to Power Platform environment...");
+    if (has("pac")) {
+      log.info(`Running: pac auth create --url ${envUrl}`);
+      log.dim("A browser window will open. Sign in with your Microsoft work account.");
+      run(`pac auth create --url ${envUrl}`, dir);
+    } else {
+      log.warn("PAC CLI not found. Install it with:  npm install -g pac");
+      log.warn("Then run:  pac auth create --url " + envUrl);
+    }
+  }
+
+  // ── 11. Open in VS Code ──────────────────────────────────────────────────
+  log.step("Opening in VS Code...");
+  if (has("code")) {
+    run(`code "${dir}"`, process.cwd(), true);
+    log.ok("VS Code opened with your project");
+  } else {
+    log.warn("VS Code  code  command not found.");
+    log.dim("Open VS Code manually → File → Open Folder → select:  " + dir);
+  }
+
+  // ── Done ─────────────────────────────────────────────────────────────────
+  const isCodeApp = appTypeChoice.label === "Code App";
+  console.log(`
+${c.bold}${c.green}╔═══════════════════════════════════════════════════╗
+║  ✅  Your project is ready!                       ║
+╚═══════════════════════════════════════════════════╝${c.reset}
+
+${c.bold}Project folder:${c.reset}  ${dir}
+
+${c.bold}What to do next:${c.reset}
+
+  1. VS Code is now open (or open it manually and open the folder above)
+${isCodeApp ? `
+  2. ${c.bold}${c.green}Start the app:${c.reset}  In the VS Code terminal, run:
+       ${c.cyan}npm start${c.reset}
+     Your browser will open automatically at http://localhost:3000
+` : `
+  2. Read the ${c.cyan}prompts/starter.md${c.reset} file for ready-made prompts to get started
+`}
+  3. Open your AI assistant:
+${aiChoice.label === "Claude Code"
+  ? `     • In the VS Code terminal, run:  ${c.cyan}claude${c.reset}
+     • Or click the Claude Code icon in the left sidebar`
+  : `     • Click the Copilot Chat icon (💬) in the VS Code left sidebar`}
+
+  4. Copy a prompt from ${c.cyan}prompts/starter.md${c.reset} and paste it in — or describe your app in your own words
+
+  5. When you're happy with what the AI built, save your work:
+     ${c.dim}git add . → git commit -m "describe what you built" → git push${c.reset}
+
+${c.bold}${c.yellow}Tip:${c.reset} When something goes wrong, tell the AI:
+  "I got this error: [paste error]. What does it mean and how do I fix it?"
+
+Happy building! 🚀
+`);
+  rl.close();
+}
+
+main().catch((err) => {
+  log.error("Unexpected error: " + err.message);
+  rl.close();
+  process.exit(1);
+});