promptlineapp 1.3.11

package/bin/cli.js

@@ -0,0 +1,1911 @@
+#!/usr/bin/env node
+
+/**
+ * create-promptline-app CLI
+ *
+ * Usage:
+ *   npx create-promptline-app my-app
+ *   npx create-promptline-app my-app --preset saas
+ */
+
+const fs = require('fs');
+const path = require('path');
+const readline = require('readline');
+
+// ANSI colors
+const colors = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+  white: '\x1b[37m',
+};
+
+const c = colors;
+
+// Utility functions
+function success(message) {
+  console.log(`${c.green}✓${c.reset} ${message}`);
+}
+
+function error(message) {
+  console.log(`${c.red}✗${c.reset} ${message}`);
+}
+
+function printLogo() {
+  console.log(`
+${c.cyan}╔═══════════════════════════════════════════════════════════╗
+║                                                               ║
+║   ${c.bold}create-promptline-app${c.reset}${c.cyan}                                     ║
+║   Build AI-powered applications with PromptLine               ║
+║                                                               ║
+╚═══════════════════════════════════════════════════════════════╝${c.reset}
+`);
+}
+
+function slugify(text) {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[-\s]+/g, '-');
+}
+
+// ===========================================
+// Input Validation & Sanitization Functions
+// ===========================================
+
+/**
+ * Escape special YAML characters to prevent injection
+ * @param {string} str - The string to escape
+ * @returns {string} - YAML-safe escaped string
+ */
+function escapeYaml(str) {
+  if (typeof str !== 'string') return str;
+
+  // YAML bare words that would be interpreted as special types
+  const yamlKeywords = ['true', 'false', 'yes', 'no', 'on', 'off', 'null', '~', 'y', 'n'];
+  if (yamlKeywords.includes(str.toLowerCase())) {
+    return `"${str}"`;
+  }
+
+  // Numbers that might be parsed as floats/ints
+  if (/^[+-]?(\d+\.?\d*|\.\d+)([eE][+-]?\d+)?$/.test(str) && str !== '') {
+    return `"${str}"`;
+  }
+
+  // If string contains special YAML characters, wrap in quotes and escape internal quotes
+  const needsQuoting = /[:\{\}\[\],&*#?|\-<>=!%@`\n\r\t]/.test(str) ||
+                       str.startsWith(' ') ||
+                       str.endsWith(' ') ||
+                       str.includes('"') ||
+                       str.includes("'");
+
+  if (needsQuoting) {
+    // Escape backslashes and double quotes, then wrap in double quotes
+    return '"' + str.replace(/\\/g, '\\\\').replace(/"/g, '\\"').replace(/\n/g, '\\n').replace(/\r/g, '\\r').replace(/\t/g, '\\t') + '"';
+  }
+  return str;
+}
+
+/**
+ * Escape characters for JavaScript template literals
+ * Prevents code injection when embedding user input in JS templates
+ * @param {string} str - The string to escape
+ * @returns {string} - JS template literal safe string
+ */
+function escapeJsTemplate(str) {
+  if (typeof str !== 'string') return str;
+  return str
+    .replace(/\\/g, '\\\\')   // Escape backslashes first
+    .replace(/`/g, '\\`')     // Escape backticks
+    .replace(/\$/g, '\\$');   // Escape $ to prevent ${} interpolation
+}
+
+/**
+ * Validate email format (RFC 5322 simplified)
+ * @param {string} email - Email to validate
+ * @returns {{valid: boolean, error?: string}}
+ */
+function validateEmail(email) {
+  if (!email || email.length === 0) {
+    return { valid: false, error: 'Email cannot be empty' };
+  }
+  if (email.length > 254) {
+    return { valid: false, error: 'Email is too long (max 254 characters)' };
+  }
+  // RFC 5322 simplified regex
+  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+  if (!emailRegex.test(email)) {
+    return { valid: false, error: 'Invalid email format' };
+  }
+  return { valid: true };
+}
+
+/**
+ * Validate hex color format
+ * @param {string} color - Color to validate (with or without #)
+ * @returns {{valid: boolean, error?: string, normalized?: string}}
+ */
+function validateHexColor(color) {
+  if (!color || color.length === 0) {
+    return { valid: false, error: 'Color cannot be empty' };
+  }
+  // Remove # if present
+  const hex = color.startsWith('#') ? color.slice(1) : color;
+  // Check for valid hex format (3 or 6 characters)
+  if (!/^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(hex)) {
+    return { valid: false, error: 'Invalid hex color format. Use #RGB or #RRGGBB (e.g., #6366f1)' };
+  }
+  // Normalize to 6-character format with #
+  const normalized = hex.length === 3
+    ? '#' + hex.split('').map(c => c + c).join('')
+    : '#' + hex;
+  return { valid: true, normalized: normalized.toLowerCase() };
+}
+
+/**
+ * Validate and sanitize display name / description
+ * @param {string} str - String to validate
+ * @param {string} fieldName - Field name for error messages
+ * @param {number} maxLength - Maximum allowed length
+ * @returns {{valid: boolean, error?: string, sanitized?: string}}
+ */
+function validateString(str, fieldName, maxLength = 200) {
+  if (!str || str.trim().length === 0) {
+    return { valid: false, error: `${fieldName} cannot be empty` };
+  }
+  if (str.length > maxLength) {
+    return { valid: false, error: `${fieldName} is too long (max ${maxLength} characters)` };
+  }
+  // Remove control characters except newlines/tabs in descriptions
+  const sanitized = str.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '').trim();
+  if (sanitized.length === 0) {
+    return { valid: false, error: `${fieldName} contains only invalid characters` };
+  }
+  return { valid: true, sanitized };
+}
+
+function validatePackageName(slug) {
+  // Security: prevent path traversal and invalid names
+  if (!slug || slug.length === 0) {
+    return { valid: false, error: 'Package name cannot be empty' };
+  }
+
+  // Comprehensive path traversal prevention
+  // Check for various path traversal patterns
+  const dangerousPatterns = [
+    '..', // Parent directory
+    '/', // Unix path separator
+    '\\', // Windows path separator
+    '%2e', // URL encoded .
+    '%2f', // URL encoded /
+    '%5c', // URL encoded \
+    '\x00', // Null byte
+    '~', // Home directory shortcut
+  ];
+
+  const lowerSlug = slug.toLowerCase();
+  for (const pattern of dangerousPatterns) {
+    if (lowerSlug.includes(pattern.toLowerCase())) {
+      return { valid: false, error: 'Package name contains invalid characters' };
+    }
+  }
+
+  // Must start with alphanumeric
+  if (!/^[a-z0-9]/.test(slug)) {
+    return { valid: false, error: 'Package name must start with a letter or number' };
+  }
+
+  // Must end with alphanumeric
+  if (!/[a-z0-9]$/.test(slug)) {
+    return { valid: false, error: 'Package name must end with a letter or number' };
+  }
+
+  // Only allow alphanumeric, hyphens, and underscores
+  if (!/^[a-z0-9][a-z0-9_-]*[a-z0-9]$|^[a-z0-9]$/.test(slug)) {
+    return { valid: false, error: 'Package name can only contain letters, numbers, hyphens, and underscores' };
+  }
+
+  if (slug.length > 100) {
+    return { valid: false, error: 'Package name is too long (max 100 characters)' };
+  }
+
+  // Reserved names (system directories and common conflicts)
+  const reserved = [
+    'node_modules', 'package', 'src', 'dist', 'build', 'test', 'tests',
+    'lib', 'bin', 'tmp', 'temp', 'cache', 'logs', 'config', 'public',
+    'private', 'assets', 'static', 'vendor', 'packages', 'modules',
+    'con', 'prn', 'aux', 'nul', // Windows reserved names
+    'com1', 'com2', 'com3', 'com4', 'lpt1', 'lpt2', 'lpt3', 'lpt4'
+  ];
+  if (reserved.includes(slug)) {
+    return { valid: false, error: `'${slug}' is a reserved name` };
+  }
+
+  return { valid: true };
+}
+
+// Interactive prompts using readline
+function createPrompt() {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  let closed = false;
+
+  // Handle Ctrl+C gracefully
+  rl.on('close', () => {
+    if (!closed) {
+      closed = true;
+      console.log('\n\nAborted.');
+      process.exit(0);
+    }
+  });
+
+  // Also handle SIGINT
+  process.on('SIGINT', () => {
+    if (!closed) {
+      closed = true;
+      rl.close();
+    }
+  });
+
+  return {
+    question: (query, defaultValue) => {
+      return new Promise((resolve, reject) => {
+        if (closed) {
+          reject(new Error('Prompt closed'));
+          return;
+        }
+
+        const prompt = defaultValue
+          ? `${c.cyan}?${c.reset} ${query} ${c.dim}[${defaultValue}]${c.reset}: `
+          : `${c.cyan}?${c.reset} ${query}: `;
+
+        rl.question(prompt, (answer) => {
+          resolve(answer.trim() || defaultValue || '');
+        });
+      });
+    },
+    select: (query, choices, defaultIndex = 0) => {
+      return new Promise((resolve, reject) => {
+        if (closed) {
+          reject(new Error('Prompt closed'));
+          return;
+        }
+
+        console.log(`\n${c.cyan}?${c.reset} ${query}`);
+        choices.forEach((choice, i) => {
+          const marker = i === defaultIndex ? `${c.green}❯${c.reset}` : ' ';
+          console.log(`  ${marker} ${i + 1}. ${c.bold}${choice.name}${c.reset} - ${c.yellow}${choice.description}${c.reset}`);
+        });
+
+        rl.question(`\n  Enter choice [1-${choices.length}] ${c.dim}(default: ${defaultIndex + 1})${c.reset}: `, (answer) => {
+          const idx = answer.trim() ? parseInt(answer) - 1 : defaultIndex;
+          if (idx >= 0 && idx < choices.length) {
+            resolve(choices[idx].value);
+          } else {
+            resolve(choices[defaultIndex].value);
+          }
+        });
+      });
+    },
+    close: () => {
+      closed = true;
+      rl.close();
+    },
+  };
+}
+
+// Template content generators
+const templates = {
+  // promptline.yaml template
+  config: (config) => `# PromptLine Package Configuration
+# Created with: npx create-promptline-app ${escapeYaml(config.slug)}
+# Docs: https://docs.promptlineops.com/packages
+
+name: ${escapeYaml(config.displayName)}
+version: "1.0.0"
+description: ${escapeYaml(config.description)}
+
+# AI Sources - Connect your prompts and agents
+# Configure these in PromptLine Creator Studio after upload
+ai_sources:
+  main:
+    type: prompt
+    source_id: null  # Set in Creator Studio
+    role: main
+    description: "Main AI prompt for this application"
+
+# Data Collections - Your app's data models
+collections:
+  submissions:
+    display_name: "Submissions"
+    description: "Form submissions and user data"
+    fields:
+      - name: name
+        type: string
+        label: "Name"
+        required: true
+      - name: email
+        type: email
+        label: "Email"
+        required: true
+      - name: message
+        type: text
+        label: "Message"
+        required: false
+      - name: created_at
+        type: date
+        label: "Created"
+        auto: true
+    settings:
+      public_read: false
+      public_write: true
+
+# Instance Variables - Configurable per deployment
+variables:
+  app_name:
+    type: string
+    label: "Application Name"
+    required: true
+    default: ${escapeYaml(config.displayName)}
+
+  primary_color:
+    type: color
+    label: "Brand Color"
+    default: ${escapeYaml(config.primaryColor)}
+
+  contact_email:
+    type: email
+    label: "Contact Email"
+    required: true
+    default: ${escapeYaml(config.contactEmail)}
+
+# Branding defaults
+branding:
+  colors:
+    primary: "{{variables.primary_color}}"
+    secondary: "#10b981"
+  typography:
+    font: "Inter"
+
+# Automated actions
+actions:
+  notify_on_submit:
+    type: email
+    trigger:
+      event: on_data_create
+      collection: submissions
+    config:
+      to: "{{variables.contact_email}}"
+      subject: "New submission - {{variables.app_name}}"
+      body: |
+        New submission received:
+        Name: {{data.name}}
+        Email: {{data.email}}
+        Message: {{data.message}}
+`,
+
+  // Public index page
+  publicIndex: (config) => `/**
+ * ${escapeJsTemplate(config.displayName)} - Landing Page
+ *
+ * Public page accessible without authentication.
+ * Edit this file to customize your landing page.
+ */
+import React, { useState } from 'react'
+import { usePromptLine } from '@promptline/sdk'
+
+export default function LandingPage() {
+  const { config, submitForm, isLoading } = usePromptLine()
+
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: ''
+  })
+  const [submitted, setSubmitted] = useState(false)
+  const [error, setError] = useState(null)
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError(null)
+
+    try {
+      await submitForm('submissions', formData)
+      setSubmitted(true)
+      setFormData({ name: '', email: '', message: '' })
+    } catch (err) {
+      setError(err.message || 'Something went wrong')
+    }
+  }
+
+  const handleChange = (e) => {
+    setFormData(prev => ({
+      ...prev,
+      [e.target.name]: e.target.value
+    }))
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
+      {/* Header */}
+      <header className="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-10">
+        <div className="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
+          <h1
+            className="text-2xl font-bold"
+            style={{ color: config.primary_color }}
+          >
+            {config.app_name}
+          </h1>
+          <nav className="flex gap-6">
+            <a href="#features" className="text-gray-600 hover:text-gray-900">Features</a>
+            <a href="#contact" className="text-gray-600 hover:text-gray-900">Contact</a>
+          </nav>
+        </div>
+      </header>
+
+      {/* Hero Section */}
+      <section className="max-w-5xl mx-auto px-4 py-20 text-center">
+        <h2 className="text-5xl font-bold text-gray-900 mb-6">
+          Welcome to {config.app_name}
+        </h2>
+        <p className="text-xl text-gray-600 max-w-2xl mx-auto mb-8">
+          ${escapeJsTemplate(config.description) || 'Your AI-powered application built with PromptLine.'}
+        </p>
+        <a
+          href="#contact"
+          className="inline-block px-8 py-3 text-white font-medium rounded-lg transition-transform hover:scale-105"
+          style={{ backgroundColor: config.primary_color }}
+        >
+          Get Started
+        </a>
+      </section>
+
+      {/* Features Section */}
+      <section id="features" className="max-w-5xl mx-auto px-4 py-16">
+        <h3 className="text-3xl font-bold text-center text-gray-900 mb-12">Features</h3>
+        <div className="grid md:grid-cols-3 gap-8">
+          {[
+            { title: 'AI-Powered', desc: 'Leverage cutting-edge AI for intelligent responses' },
+            { title: 'Easy to Use', desc: 'Simple interface designed for everyone' },
+            { title: 'Customizable', desc: 'Adapt to your specific needs and branding' }
+          ].map((feature, i) => (
+            <div key={i} className="bg-white p-6 rounded-xl shadow-sm border">
+              <div
+                className="w-12 h-12 rounded-lg mb-4 flex items-center justify-center text-white text-xl font-bold"
+                style={{ backgroundColor: config.primary_color }}
+              >
+                {i + 1}
+              </div>
+              <h4 className="text-lg font-semibold text-gray-900 mb-2">{feature.title}</h4>
+              <p className="text-gray-600">{feature.desc}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* Contact Form */}
+      <section id="contact" className="max-w-lg mx-auto px-4 py-16">
+        <div className="bg-white rounded-2xl shadow-lg p-8">
+          <h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
+            Get in Touch
+          </h3>
+
+          {submitted ? (
+            <div className="text-center py-8">
+              <div
+                className="w-16 h-16 rounded-full mx-auto mb-4 flex items-center justify-center"
+                style={{ backgroundColor: config.primary_color + '20' }}
+              >
+                <svg className="w-8 h-8" style={{ color: config.primary_color }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <h4 className="text-xl font-medium text-gray-900 mb-2">Thank you!</h4>
+              <p className="text-gray-600 mb-4">We'll get back to you soon.</p>
+              <button
+                onClick={() => setSubmitted(false)}
+                className="text-sm underline"
+                style={{ color: config.primary_color }}
+              >
+                Send another message
+              </button>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {error && (
+                <div className="p-4 bg-red-50 text-red-700 rounded-lg text-sm">
+                  {error}
+                </div>
+              )}
+
+              <div>
+                <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
+                  Name *
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  required
+                  value={formData.name}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-offset-0 focus:border-transparent"
+                  style={{ '--tw-ring-color': config.primary_color }}
+                  placeholder="Your name"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
+                  Email *
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  name="email"
+                  required
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-offset-0 focus:border-transparent"
+                  placeholder="you@example.com"
+                />
+              </div>
+
+              <div>
+                <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">
+                  Message
+                </label>
+                <textarea
+                  id="message"
+                  name="message"
+                  rows={4}
+                  value={formData.message}
+                  onChange={handleChange}
+                  className="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-offset-0 focus:border-transparent resize-none"
+                  placeholder="How can we help?"
+                />
+              </div>
+
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full py-3 px-4 text-white font-medium rounded-lg transition-all disabled:opacity-50 hover:opacity-90"
+                style={{ backgroundColor: config.primary_color }}
+              >
+                {isLoading ? 'Sending...' : 'Send Message'}
+              </button>
+            </form>
+          )}
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t bg-gray-50">
+        <div className="max-w-5xl mx-auto px-4 py-8 text-center text-sm text-gray-500">
+          © {new Date().getFullYear()} {config.app_name}. Powered by PromptLine.
+        </div>
+      </footer>
+    </div>
+  )
+}
+`,
+
+  // Private dashboard page
+  privateDashboard: (config) => `/**
+ * ${escapeJsTemplate(config.displayName)} - Dashboard
+ *
+ * Private page requiring authentication.
+ * Users must be logged in to access this page.
+ */
+import React, { useEffect, useState } from 'react'
+import { usePromptLine, Link } from '@promptline/sdk'
+
+export default function DashboardPage() {
+  const { config, fetchCollection, user, logout } = usePromptLine()
+  const [submissions, setSubmissions] = useState([])
+  const [stats, setStats] = useState({ total: 0, today: 0, week: 0 })
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = async () => {
+    try {
+      const data = await fetchCollection('submissions', {
+        orderBy: 'created_at',
+        order: 'desc',
+        limit: 10
+      })
+      setSubmissions(data.items)
+
+      // Calculate stats
+      const now = new Date()
+      const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+      const weekAgo = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000)
+
+      setStats({
+        total: data.total,
+        today: data.items.filter(s => new Date(s.created_at) >= today).length,
+        week: data.items.filter(s => new Date(s.created_at) >= weekAgo).length
+      })
+    } catch (err) {
+      console.error('Failed to load data:', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      {/* Header */}
+      <header className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
+          <div className="flex items-center gap-8">
+            <h1 className="text-xl font-bold" style={{ color: config.primary_color }}>
+              {config.app_name}
+            </h1>
+            <nav className="flex gap-4">
+              <Link to="/dashboard" className="font-medium px-3 py-2 rounded-lg" style={{ backgroundColor: config.primary_color + '10', color: config.primary_color }}>
+                Dashboard
+              </Link>
+              <Link to="/settings" className="text-gray-600 hover:text-gray-900 px-3 py-2">
+                Settings
+              </Link>
+            </nav>
+          </div>
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-gray-600">{user?.email}</span>
+            <button onClick={logout} className="text-sm text-gray-500 hover:text-gray-700">
+              Logout
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="max-w-7xl mx-auto px-4 py-8">
+        <h2 className="text-2xl font-bold text-gray-900 mb-6">Dashboard</h2>
+
+        {/* Stats Cards */}
+        <div className="grid md:grid-cols-3 gap-6 mb-8">
+          <div className="bg-white rounded-xl p-6 shadow-sm">
+            <p className="text-sm text-gray-500 uppercase tracking-wide">Total Submissions</p>
+            <p className="text-3xl font-bold mt-2" style={{ color: config.primary_color }}>
+              {loading ? '...' : stats.total}
+            </p>
+          </div>
+          <div className="bg-white rounded-xl p-6 shadow-sm">
+            <p className="text-sm text-gray-500 uppercase tracking-wide">Today</p>
+            <p className="text-3xl font-bold mt-2 text-green-600">
+              {loading ? '...' : stats.today}
+            </p>
+          </div>
+          <div className="bg-white rounded-xl p-6 shadow-sm">
+            <p className="text-sm text-gray-500 uppercase tracking-wide">This Week</p>
+            <p className="text-3xl font-bold mt-2 text-blue-600">
+              {loading ? '...' : stats.week}
+            </p>
+          </div>
+        </div>
+
+        {/* Recent Submissions */}
+        <div className="bg-white rounded-xl shadow-sm overflow-hidden">
+          <div className="px-6 py-4 border-b">
+            <h3 className="font-semibold text-gray-900">Recent Submissions</h3>
+          </div>
+
+          {loading ? (
+            <div className="p-8 text-center text-gray-500">Loading...</div>
+          ) : submissions.length === 0 ? (
+            <div className="p-8 text-center text-gray-500">
+              <p>No submissions yet</p>
+              <p className="text-sm mt-1">New submissions will appear here</p>
+            </div>
+          ) : (
+            <table className="w-full">
+              <thead className="bg-gray-50">
+                <tr>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Name</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Message</th>
+                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {submissions.map((sub) => (
+                  <tr key={sub.id} className="hover:bg-gray-50">
+                    <td className="px-6 py-4 text-sm font-medium text-gray-900">{sub.name}</td>
+                    <td className="px-6 py-4 text-sm text-gray-600">{sub.email}</td>
+                    <td className="px-6 py-4 text-sm text-gray-600 max-w-xs truncate">{sub.message || '-'}</td>
+                    <td className="px-6 py-4 text-sm text-gray-500">
+                      {new Date(sub.created_at).toLocaleDateString()}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </main>
+    </div>
+  )
+}
+`,
+
+  // Blank template - minimal
+  blankIndex: (config) => `/**
+ * ${escapeJsTemplate(config.displayName)}
+ *
+ * Your PromptLine app starts here.
+ * Edit this file to build your application.
+ */
+import React from 'react'
+import { usePromptLine } from '@promptline/sdk'
+
+export default function HomePage() {
+  const { config, callAI, isLoading } = usePromptLine()
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100">
+      <div className="text-center">
+        <h1
+          className="text-5xl font-bold mb-4"
+          style={{ color: config.primary_color }}
+        >
+          {config.app_name}
+        </h1>
+        <p className="text-xl text-gray-600 mb-8">
+          Your PromptLine app is ready!
+        </p>
+        <div className="space-x-4">
+          <a
+            href="https://docs.promptlineops.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-block px-6 py-2 border-2 rounded-lg font-medium transition-colors hover:bg-gray-50"
+            style={{ borderColor: config.primary_color, color: config.primary_color }}
+          >
+            Read the Docs
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}
+`,
+
+  // Backend API template
+  backendApi: (config) => `"""
+${escapeJsTemplate(config.displayName)} - Custom API Endpoints
+
+Add your custom FastAPI routes here.
+These will be available at /api/custom/<endpoint>
+
+Documentation: https://docs.promptlineops.com/packages/backend
+"""
+
+from fastapi import APIRouter, Depends, HTTPException
+from pydantic import BaseModel
+from typing import Optional
+from promptline import (
+    get_instance_config,
+    get_collection,
+    call_ai_source,
+    get_current_user,
+    require_auth
+)
+
+router = APIRouter()
+
+
+class AnalyzeRequest(BaseModel):
+    text: str
+    options: Optional[dict] = None
+
+
+@router.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    config = await get_instance_config()
+    return {
+        "status": "healthy",
+        "app": config.get("app_name", "Unknown")
+    }
+
+
+@router.post("/analyze")
+async def analyze_text(request: AnalyzeRequest):
+    """
+    Analyze text using the connected AI source.
+
+    This is a public endpoint - no authentication required.
+    """
+    if not request.text.strip():
+        raise HTTPException(status_code=400, detail="Text is required")
+
+    try:
+        result = await call_ai_source("main", {
+            "text": request.text,
+            "options": request.options or {}
+        })
+        return {"success": True, "result": result}
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@router.get("/stats", dependencies=[Depends(require_auth)])
+async def get_stats():
+    """
+    Get submission statistics.
+
+    Requires authentication.
+    """
+    collection = await get_collection("submissions")
+    items = await collection.find({})
+
+    return {
+        "total": len(items),
+        "latest": items[0] if items else None
+    }
+
+
+@router.get("/me", dependencies=[Depends(require_auth)])
+async def get_current_user_info():
+    """Get current authenticated user info"""
+    user = await get_current_user()
+    return {
+        "id": user.id,
+        "email": user.email,
+        "name": user.name
+    }
+`,
+
+  // Settings page
+  privateSettings: (config) => `/**
+ * ${escapeJsTemplate(config.displayName)} - Settings
+ *
+ * User settings and preferences.
+ */
+import React from 'react'
+import { usePromptLine, Link } from '@promptline/sdk'
+
+export default function SettingsPage() {
+  const { config, user } = usePromptLine()
+
+  return (
+    <div className="min-h-screen bg-gray-100">
+      <header className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 py-4 flex items-center gap-8">
+          <h1 className="text-xl font-bold" style={{ color: config.primary_color }}>
+            {config.app_name}
+          </h1>
+          <nav className="flex gap-4">
+            <Link to="/dashboard" className="text-gray-600 hover:text-gray-900 px-3 py-2">
+              Dashboard
+            </Link>
+            <Link to="/settings" className="font-medium px-3 py-2 rounded-lg" style={{ backgroundColor: config.primary_color + '10', color: config.primary_color }}>
+              Settings
+            </Link>
+          </nav>
+        </div>
+      </header>
+
+      <main className="max-w-3xl mx-auto px-4 py-8">
+        <h2 className="text-2xl font-bold text-gray-900 mb-6">Settings</h2>
+
+        <div className="bg-white rounded-xl shadow-sm divide-y">
+          <div className="p-6">
+            <h3 className="font-medium text-gray-900 mb-4">Profile</h3>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm text-gray-500 mb-1">Email</label>
+                <p className="text-gray-900">{user?.email}</p>
+              </div>
+              <div>
+                <label className="block text-sm text-gray-500 mb-1">Name</label>
+                <p className="text-gray-900">{user?.name || 'Not set'}</p>
+              </div>
+            </div>
+          </div>
+
+          <div className="p-6">
+            <h3 className="font-medium text-gray-900 mb-4">Preferences</h3>
+            <p className="text-sm text-gray-500">
+              Additional settings coming soon.
+            </p>
+          </div>
+        </div>
+      </main>
+    </div>
+  )
+}
+`,
+
+  // README
+  readme: (config) => `# ${config.displayName}
+
+${config.description}
+
+## Getting Started
+
+This is a PromptLine package created with \`create-promptline-app\`.
+
+### Project Structure
+
+\`\`\`
+${config.slug}/
+├── public/           # Public pages (no auth required)
+│   └── index.tsx     # Landing page
+├── private/          # Protected pages (auth required)
+│   ├── dashboard.tsx # Main dashboard
+│   └── settings.tsx  # User settings
+├── backend/          # Custom API endpoints
+│   └── api.py        # FastAPI routes
+├── assets/           # Static files
+├── promptline.yaml   # Package configuration
+└── README.md
+\`\`\`
+
+### Development
+
+1. Edit your pages in \`public/\` and \`private/\`
+2. Add custom API endpoints in \`backend/api.py\`
+3. Configure AI sources in \`promptline.yaml\`
+
+### Deployment
+
+1. Create a ZIP of this directory
+2. Upload to [PromptLine Creator Studio](https://app.promptlineops.com/apps/creator)
+3. Connect your AI sources
+4. Configure instance variables
+5. Publish!
+
+### SDK Usage
+
+\`\`\`tsx
+import { usePromptLine } from '@promptline/sdk'
+
+function MyComponent() {
+  const {
+    config,           // Instance variables (app_name, primary_color, etc.)
+    submitForm,       // Submit data to a collection
+    fetchCollection,  // Fetch collection data
+    callAI,           // Call connected AI source
+    user,             // Current user (private pages only)
+    isLoading
+  } = usePromptLine()
+
+  // Example: Call AI
+  const result = await callAI('main', { text: 'Hello!' })
+
+  // Example: Submit form
+  await submitForm('submissions', { name: 'John', email: 'john@example.com' })
+}
+\`\`\`
+
+## Documentation
+
+- [PromptLine Docs](https://docs.promptlineops.com)
+- [Package Development](https://docs.promptlineops.com/packages)
+- [SDK Reference](https://docs.promptlineops.com/sdk)
+
+---
+
+Created with [create-promptline-app](https://npmjs.com/package/create-promptline-app)
+`,
+
+  // .gitignore
+  gitignore: () => `# Dependencies
+node_modules/
+
+# Dev server
+.promptline-dev/
+
+# Build
+dist/
+build/
+.next/
+
+# Environment
+.env
+.env.local
+.env.*
+
+# IDE
+.idea/
+.vscode/
+*.swp
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log
+
+# Package archives
+*.zip
+*.tar.gz
+`,
+
+  // package.json for local dev
+  packageJson: (config) => JSON.stringify({
+    "name": config.slug,
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+      "dev": "vite",
+      "build": "vite build",
+      "preview": "vite preview"
+    },
+    "dependencies": {
+      "react": "^18.2.0",
+      "react-dom": "^18.2.0",
+      "react-router-dom": "^6.20.0"
+    },
+    "devDependencies": {
+      "vite": "^5.0.0",
+      "@vitejs/plugin-react": "^4.2.0"
+    }
+  }, null, 2),
+
+  // vite.config.js
+  viteConfig: () => `import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@promptline/sdk': path.resolve(__dirname, 'dev/sdk-mock.jsx')
+    }
+  },
+  server: {
+    port: 5173,
+    host: 'localhost',
+    open: true,
+    strictPort: false,
+    proxy: {
+      // Proxy API calls to avoid CORS issues in development
+      '/api/promptline-local': {
+        target: 'https://app.local.promptlineops.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\\/api\\/promptline-local/, '/api/v1/live'),
+        secure: true
+      },
+      '/api/promptline': {
+        target: 'https://app.promptlineops.com',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\\/api\\/promptline/, '/api/v1/live'),
+        secure: true
+      }
+    }
+  }
+})
+`,
+
+  // SDK mock for local development with real API support
+  sdkMock: (config) => {
+    const mockConfig = {
+      app_name: config.displayName,
+      primary_color: config.primaryColor,
+      contact_email: config.contactEmail
+    };
+    return `/**
+ * PromptLine SDK Mock for Local Development
+ * Supports real API calls when configured via /_dev page
+ */
+import React, { createContext, useContext, useState } from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+
+const mockConfig = ${JSON.stringify(mockConfig, null, 2)}
+
+const mockUser = {
+  id: 'dev-user-123',
+  email: 'dev@example.com',
+  name: 'Dev User'
+}
+
+// Get PromptLine API config from localStorage
+function getAPIConfig() {
+  try {
+    return JSON.parse(localStorage.getItem('promptline_dev_config') || 'null')
+  } catch { return null }
+}
+
+// Call PromptLine API (sync mode)
+async function callPromptLineAPI(config, input) {
+  const { endpoint, apiKey } = config
+
+  // Add ?mode=sync for synchronous response
+  const url = endpoint.includes('?') ? endpoint + '&mode=sync' : endpoint + '?mode=sync'
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      ...(apiKey ? { 'X-API-Key': apiKey } : {})
+    },
+    body: JSON.stringify({
+      input: typeof input === 'string' ? { text: input } : input,
+      variables: {}
+    })
+  })
+  const data = await res.json()
+  if (!res.ok || data.error) throw new Error(data.detail || data.error?.message || data.error || res.statusText)
+  // Sync mode returns data.data.output or data.data.response
+  const output = data.data?.output || data.data?.response || data.output || data.response
+  return { response: typeof output === 'string' ? output : JSON.stringify(output) }
+}
+
+const PromptLineContext = createContext(null)
+
+export function PromptLineProvider({ children }) {
+  const [isLoading, setIsLoading] = useState(false)
+
+  const value = {
+    config: mockConfig,
+    user: mockUser,
+    isLoading,
+    submitForm: async (collection, data) => {
+      console.log('[PromptLine SDK] submitForm:', collection, data)
+      alert('Form submitted to "' + collection + '"\\n\\nData: ' + JSON.stringify(data, null, 2))
+      return { success: true, id: 'mock-' + Date.now() }
+    },
+    fetchCollection: async (collection, query) => {
+      console.log('[PromptLine SDK] fetchCollection:', collection, query)
+      return { items: [], total: 0 }
+    },
+    callAI: async (sourceId, input) => {
+      console.log('[PromptLine SDK] callAI:', sourceId, input)
+      const config = getAPIConfig()
+
+      if (config && config.endpoint) {
+        console.log('[PromptLine SDK] Using PromptLine API:', config.endpoint)
+        try {
+          return await callPromptLineAPI(config, input)
+        } catch (err) {
+          console.error('[PromptLine SDK] API Error:', err)
+          return { response: '[API Error] ' + err.message, error: true }
+        }
+      }
+
+      console.log('[PromptLine SDK] No config found, using mock. Configure at /_dev')
+      return { response: '[Mock] Configure your PromptLine endpoint at /_dev' }
+    }
+  }
+
+  return (
+    <PromptLineContext.Provider value={value}>
+      {children}
+    </PromptLineContext.Provider>
+  )
+}
+
+export function usePromptLine() {
+  const context = useContext(PromptLineContext)
+  if (!context) {
+    return {
+      config: mockConfig,
+      user: mockUser,
+      isLoading: false,
+      submitForm: async (c, d) => { console.log('[PromptLine SDK] submitForm:', c, d); return { success: true } },
+      fetchCollection: async (c, q) => { console.log('[PromptLine SDK] fetchCollection:', c, q); return { items: [], total: 0 } },
+      callAI: async (s, i) => { console.log('[PromptLine SDK] callAI:', s, i); return { response: '[Mock] Configure at /_dev' } }
+    }
+  }
+  return context
+}
+
+export const Link = ({ to, children, ...props }) => (
+  <RouterLink to={to} {...props}>{children}</RouterLink>
+)
+
+export default { usePromptLine, PromptLineProvider, Link }
+`},
+
+  // Dev admin page for configuring PromptLine endpoint
+  devAdmin: () => `/**
+ * PromptLine Dev Admin - Endpoint Configuration
+ *
+ * This page is ONLY for local development.
+ * Configure your PromptLine endpoint here to test with real API.
+ *
+ * NEVER commit API keys to git!
+ */
+import React, { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+
+export default function DevAdminPage() {
+  const [endpoint, setEndpoint] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [saved, setSaved] = useState(false)
+  const [testInput, setTestInput] = useState('Hello! What is 2+2?')
+  const [testResult, setTestResult] = useState('')
+  const [testing, setTesting] = useState(false)
+  const [status, setStatus] = useState('') // 'connected' | 'error' | 'testing' | ''
+  const [logs, setLogs] = useState([])
+
+  const addLog = (type, message, details = null) => {
+    const timestamp = new Date().toLocaleTimeString()
+    setLogs(prev => [...prev.slice(-50), { timestamp, type, message, details }])
+  }
+
+  useEffect(() => {
+    const config = JSON.parse(localStorage.getItem('promptline_dev_config') || 'null')
+    if (config) {
+      setEndpoint(config.endpoint || '')
+      setApiKey(config.apiKey || '')
+      setSaved(true)
+    }
+  }, [])
+
+  const saveConfig = () => {
+    if (!endpoint) return
+    const config = { endpoint, apiKey }
+    localStorage.setItem('promptline_dev_config', JSON.stringify(config))
+    setSaved(true)
+    addLog('info', 'Configuration saved')
+  }
+
+  const clearConfig = () => {
+    localStorage.removeItem('promptline_dev_config')
+    setEndpoint('')
+    setApiKey('')
+    setSaved(false)
+    setStatus('')
+    addLog('info', 'Configuration cleared')
+  }
+
+  // Convert PromptLine URLs to use local proxy (avoids CORS in development)
+  const toProxyUrl = (url) => {
+    // Match app.local.promptlineops.com (local dev environment)
+    const localMatch = url.match(/https?:\\/\\/app\\.local\\.promptlineops\\.com\\/api\\/v1\\/live\\/([^?]+)/)
+    if (localMatch) {
+      return '/api/promptline-local/' + localMatch[1]
+    }
+    // Match app.promptlineops.com (production environment)
+    const prodMatch = url.match(/https?:\\/\\/app\\.promptlineops\\.com\\/api\\/v1\\/live\\/([^?]+)/)
+    if (prodMatch) {
+      return '/api/promptline/' + prodMatch[1]
+    }
+    return url // Non-PromptLine URLs pass through unchanged
+  }
+
+  const testConnection = async () => {
+    if (!endpoint) return
+    setStatus('testing')
+    const proxyUrl = toProxyUrl(endpoint)
+    const url = proxyUrl.includes('?') ? proxyUrl + '&mode=sync' : proxyUrl + '?mode=sync'
+    addLog('info', 'Testing connection...', { endpoint: url, original: endpoint })
+
+    const startTime = Date.now()
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(apiKey ? { 'X-API-Key': apiKey } : {})
+        },
+        body: JSON.stringify({ input: { text: 'test' }, variables: {} })
+      })
+      const duration = Date.now() - startTime
+
+      if (res.ok) {
+        setStatus('connected')
+        addLog('success', 'Connected (' + duration + 'ms)', { status: res.status })
+      } else {
+        const data = await res.json().catch(() => ({}))
+        setStatus('error')
+        addLog('error', res.status + ' ' + res.statusText + ' (' + duration + 'ms)', data)
+      }
+    } catch (err) {
+      const duration = Date.now() - startTime
+      setStatus('error')
+      addLog('error', 'Network error (' + duration + 'ms)', {
+        message: err.message,
+        hint: err.message.includes('Failed to fetch') ? 'CORS issue - server needs Access-Control-Allow-Origin header' : null
+      })
+    }
+  }
+
+  const testAI = async () => {
+    if (!endpoint) return
+    setTesting(true)
+    setTestResult('')
+    const proxyUrl = toProxyUrl(endpoint)
+    const url = proxyUrl.includes('?') ? proxyUrl + '&mode=sync' : proxyUrl + '?mode=sync'
+    addLog('request', 'POST ' + url, { input: testInput })
+
+    const startTime = Date.now()
+    try {
+      const res = await fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          ...(apiKey ? { 'X-API-Key': apiKey } : {})
+        },
+        body: JSON.stringify({ input: { text: testInput }, variables: {} })
+      })
+      const data = await res.json()
+      const duration = Date.now() - startTime
+
+      if (!res.ok || data.error) {
+        const errMsg = data.detail || data.error?.message || data.error || res.statusText
+        setTestResult('Error: ' + errMsg)
+        addLog('error', res.status + ' (' + duration + 'ms)', data)
+      } else {
+        // Sync mode returns data.data.output or data.data.response
+        const output = data.data?.output || data.data?.response || data.output || data.response || JSON.stringify(data, null, 2)
+        const outputStr = typeof output === 'string' ? output : JSON.stringify(output, null, 2)
+        setTestResult(outputStr)
+        addLog('success', '200 OK (' + duration + 'ms)', { output: outputStr.substring(0, 200) })
+      }
+    } catch (err) {
+      setTestResult('Error: ' + err.message)
+      addLog('error', 'Network error', { message: err.message })
+    }
+    setTesting(false)
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-8">
+      <div className="max-w-2xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-yellow-400">/_dev</h1>
+            <p className="text-gray-400 mt-1">PromptLine Endpoint (Local Only)</p>
+          </div>
+          <Link to="/" className="px-4 py-2 bg-gray-700 rounded hover:bg-gray-600">
+            Back to App
+          </Link>
+        </div>
+
+        <div className="bg-yellow-900/30 border border-yellow-600 rounded-lg p-4 mb-8">
+          <p className="text-yellow-300 text-sm">
+            Development Only - API keys stored in localStorage. Never commit to git.
+          </p>
+        </div>
+
+        {/* Configuration */}
+        <div className="bg-gray-800 rounded-lg p-6 mb-8">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold">Configuration</h2>
+            {saved && (
+              <span className="px-2 py-1 bg-green-600/30 text-green-400 text-xs rounded">Saved</span>
+            )}
+          </div>
+
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm text-gray-400 mb-1">Endpoint URL</label>
+              <input
+                value={endpoint}
+                onChange={(e) => { setEndpoint(e.target.value); setSaved(false) }}
+                className="w-full bg-gray-700 p-3 rounded text-white font-mono text-sm"
+                placeholder="https://app.promptlineops.com/api/v1/live/..."
+              />
+              <p className="text-xs text-gray-500 mt-1">Copy the Live API URL from Creator Studio</p>
+            </div>
+
+            <div>
+              <label className="block text-sm text-gray-400 mb-1">API Key</label>
+              <input
+                type="password"
+                value={apiKey}
+                onChange={(e) => { setApiKey(e.target.value); setSaved(false) }}
+                className="w-full bg-gray-700 p-3 rounded text-white font-mono text-sm"
+                placeholder="Your API key..."
+              />
+              <p className="text-xs text-gray-500 mt-1">Get your API key from /api-keys</p>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={saveConfig}
+                disabled={!endpoint}
+                className="px-6 py-2 bg-indigo-600 rounded font-medium hover:bg-indigo-500 disabled:opacity-50"
+              >
+                Save
+              </button>
+              <button
+                onClick={testConnection}
+                disabled={!endpoint || status === 'testing'}
+                className="px-6 py-2 bg-gray-600 rounded font-medium hover:bg-gray-500 disabled:opacity-50 flex items-center gap-2"
+              >
+                {status === 'testing' ? 'Testing...' : 'Test Connection'}
+                {status === 'connected' && <span className="text-green-400">●</span>}
+                {status === 'error' && <span className="text-red-400">●</span>}
+              </button>
+              {saved && (
+                <button
+                  onClick={clearConfig}
+                  className="px-4 py-2 bg-red-600/30 text-red-400 rounded hover:bg-red-600/50"
+                >
+                  Clear
+                </button>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Test AI */}
+        {saved && (
+          <div className="bg-gray-800 rounded-lg p-6 mb-8">
+            <h2 className="text-xl font-semibold mb-4">Test AI</h2>
+            <textarea
+              value={testInput}
+              onChange={(e) => setTestInput(e.target.value)}
+              className="w-full bg-gray-700 p-3 rounded mb-4 text-white"
+              rows={3}
+              placeholder="Enter test input..."
+            />
+            <button
+              onClick={testAI}
+              disabled={testing}
+              className="px-6 py-2 bg-green-600 rounded font-medium hover:bg-green-500 disabled:opacity-50"
+            >
+              {testing ? 'Sending...' : 'Send Request'}
+            </button>
+            {testResult && (
+              <div className="mt-4 p-4 bg-gray-700 rounded">
+                <p className="text-sm text-gray-400 mb-2">Response:</p>
+                <pre className="whitespace-pre-wrap text-green-300">{testResult}</pre>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Logs */}
+        <div className="bg-gray-800 rounded-lg p-6">
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-xl font-semibold">Logs</h2>
+            <button onClick={() => setLogs([])} className="px-3 py-1 bg-gray-700 rounded text-sm hover:bg-gray-600">
+              Clear
+            </button>
+          </div>
+          <div className="bg-gray-900 rounded p-4 h-48 overflow-y-auto font-mono text-sm">
+            {logs.length === 0 ? (
+              <p className="text-gray-500">No logs yet</p>
+            ) : (
+              logs.map((log, i) => (
+                <div key={i} className="mb-2 border-b border-gray-800 pb-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-gray-500">{log.timestamp}</span>
+                    <span className={
+                      log.type === 'success' ? 'text-green-400' :
+                      log.type === 'error' ? 'text-red-400' :
+                      log.type === 'request' ? 'text-blue-400' :
+                      'text-yellow-400'
+                    }>[{log.type.toUpperCase()}]</span>
+                    <span className="text-gray-200">{log.message}</span>
+                  </div>
+                  {log.details && (
+                    <pre className="text-xs text-gray-400 mt-1 ml-4 overflow-x-auto">
+                      {JSON.stringify(log.details, null, 2)}
+                    </pre>
+                  )}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+
+        {/* Usage */}
+        <div className="mt-8 p-6 bg-gray-800 rounded-lg">
+          <h2 className="text-xl font-semibold mb-4">Usage in Your Code</h2>
+          <pre className="bg-gray-900 p-4 rounded text-sm overflow-x-auto">
+{$BACKTICK}const { callAI } = usePromptLine()
+
+const result = await callAI('main', { text: 'Hello!' })
+console.log(result.response)$BACKTICK}
+          </pre>
+        </div>
+      </div>
+    </div>
+  )
+}
+`.replace(/\$BACKTICK/g, '`'),
+
+  // index.html for Vite
+  indexHtml: (config) => `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${escapeJsTemplate(config.displayName)}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/dev/main.jsx"></script>
+  </body>
+</html>
+`,
+
+  // main.jsx entry point
+  mainJsx: (config, pages) => {
+    const imports = [];
+    const routes = [];
+
+    pages.public.forEach(name => {
+      const componentName = 'Public' + name.charAt(0).toUpperCase() + name.slice(1).replace(/-./g, x => x[1].toUpperCase());
+      imports.push("import " + componentName + " from '../public/" + name + ".tsx'");
+      const routePath = name === 'index' ? '/' : '/' + name;
+      routes.push("  { path: '" + routePath + "', element: <" + componentName + " /> }");
+    });
+
+    pages.private.forEach(name => {
+      const componentName = 'Private' + name.charAt(0).toUpperCase() + name.slice(1).replace(/-./g, x => x[1].toUpperCase());
+      imports.push("import " + componentName + " from '../private/" + name + ".tsx'");
+      routes.push("  { path: '/" + name + "', element: <" + componentName + " /> }");
+    });
+
+    // Add dev admin route
+    imports.push("import DevAdmin from './dev-admin.jsx'");
+    routes.push("  { path: '/_dev', element: <DevAdmin /> }");
+
+    return `/**
+ * Development Entry Point
+ * Auto-generated by create-promptline-app
+ */
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import { PromptLineProvider } from './sdk-mock.jsx'
+
+${imports.join('\n')}
+
+const router = createBrowserRouter([
+${routes.join(',\n')}
+])
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <PromptLineProvider>
+      <RouterProvider router={router} />
+    </PromptLineProvider>
+  </React.StrictMode>
+)
+`},
+};
+
+// Create package function
+async function createPackage(name, options = {}) {
+  printLogo();
+
+  // Handle absolute paths vs relative names
+  let targetDir, slug;
+  if (path.isAbsolute(name)) {
+    // Absolute path provided
+    targetDir = name;
+    slug = slugify(path.basename(name));
+  } else {
+    // Relative name provided
+    slug = slugify(name);
+    targetDir = path.join(process.cwd(), slug);
+  }
+
+  // Validate package name (security + UX)
+  const validation = validatePackageName(slug);
+  if (!validation.valid) {
+    error(validation.error);
+    process.exit(1);
+  }
+
+  if (fs.existsSync(targetDir)) {
+    error(`Directory '${slug}' already exists`);
+    process.exit(1);
+  }
+
+  console.log(`${c.bold}Creating new PromptLine app: ${c.cyan}${name}${c.reset}\n`);
+
+  // Configuration
+  let config = {
+    name,
+    slug,
+    displayName: name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' '),
+    description: 'My PromptLine application',
+    primaryColor: '#6366f1',
+    contactEmail: 'contact@example.com',
+    preset: options.preset || 'contact',
+  };
+
+  // Interactive mode
+  if (!options.yes) {
+    const prompt = createPrompt();
+
+    try {
+      // Display name with validation
+      let displayNameValid = false;
+      while (!displayNameValid) {
+        const input = await prompt.question('Display name', config.displayName);
+        const validation = validateString(input, 'Display name', 100);
+        if (validation.valid) {
+          config.displayName = validation.sanitized;
+          displayNameValid = true;
+        } else {
+          error(validation.error);
+        }
+      }
+
+      // Description with validation
+      let descriptionValid = false;
+      while (!descriptionValid) {
+        const input = await prompt.question('Description', config.description);
+        const validation = validateString(input, 'Description', 500);
+        if (validation.valid) {
+          config.description = validation.sanitized;
+          descriptionValid = true;
+        } else {
+          error(validation.error);
+        }
+      }
+
+      // Primary color with validation
+      let colorValid = false;
+      while (!colorValid) {
+        const input = await prompt.question('Primary color (hex)', config.primaryColor);
+        const validation = validateHexColor(input);
+        if (validation.valid) {
+          config.primaryColor = validation.normalized;
+          colorValid = true;
+        } else {
+          error(validation.error);
+        }
+      }
+
+      // Contact email with validation
+      let emailValid = false;
+      while (!emailValid) {
+        const input = await prompt.question('Contact email', config.contactEmail);
+        const validation = validateEmail(input);
+        if (validation.valid) {
+          config.contactEmail = input.trim();
+          emailValid = true;
+        } else {
+          error(validation.error);
+        }
+      }
+
+      if (!options.preset) {
+        const presets = [
+          { name: 'Contact Form', description: 'Landing + form + dashboard', value: 'contact' },
+          { name: 'SaaS', description: 'Full app with auth & billing', value: 'saas' },
+          { name: 'API', description: 'Backend-focused, minimal UI', value: 'api' },
+          { name: 'Blank', description: 'Empty template', value: 'blank' },
+        ];
+        config.preset = await prompt.select('Select a template:', presets);
+      }
+
+      prompt.close();
+    } catch (err) {
+      prompt.close();
+      throw err;
+    }
+  }
+
+  console.log(`\n${c.bold}Creating package structure...${c.reset}\n`);
+
+  try {
+    // Create directories
+    fs.mkdirSync(targetDir, { recursive: true });
+    fs.mkdirSync(path.join(targetDir, 'public'));
+    fs.mkdirSync(path.join(targetDir, 'private'));
+    fs.mkdirSync(path.join(targetDir, 'backend'));
+    fs.mkdirSync(path.join(targetDir, 'assets'));
+
+    success(`Created ${path.basename(targetDir)}/`);
+    success('Created public/');
+    success('Created private/');
+    success('Created backend/');
+    success('Created assets/');
+
+    // Create files based on preset
+    if (config.preset === 'blank') {
+      fs.writeFileSync(path.join(targetDir, 'public', 'index.tsx'), templates.blankIndex(config));
+      success('Created public/index.tsx');
+    } else {
+      // Contact, SaaS, API all start with similar base
+      fs.writeFileSync(path.join(targetDir, 'public', 'index.tsx'), templates.publicIndex(config));
+      success('Created public/index.tsx');
+
+      if (config.preset !== 'api') {
+        fs.writeFileSync(path.join(targetDir, 'private', 'dashboard.tsx'), templates.privateDashboard(config));
+        fs.writeFileSync(path.join(targetDir, 'private', 'settings.tsx'), templates.privateSettings(config));
+        success('Created private/dashboard.tsx');
+        success('Created private/settings.tsx');
+      }
+
+      fs.writeFileSync(path.join(targetDir, 'backend', 'api.py'), templates.backendApi(config));
+      success('Created backend/api.py');
+    }
+
+    // Common files
+    fs.writeFileSync(path.join(targetDir, 'promptline.yaml'), templates.config(config));
+    success('Created promptline.yaml');
+
+    fs.writeFileSync(path.join(targetDir, 'README.md'), templates.readme(config));
+    success('Created README.md');
+
+    fs.writeFileSync(path.join(targetDir, '.gitignore'), templates.gitignore());
+    success('Created .gitignore');
+
+    // Dev environment files
+    fs.mkdirSync(path.join(targetDir, 'dev'));
+    success('Created dev/');
+
+    // Collect page names for router
+    const pages = { public: ['index'], private: [] };
+    if (config.preset !== 'blank' && config.preset !== 'api') {
+      pages.private = ['dashboard', 'settings'];
+    }
+
+    fs.writeFileSync(path.join(targetDir, 'package.json'), templates.packageJson(config));
+    success('Created package.json');
+
+    fs.writeFileSync(path.join(targetDir, 'vite.config.js'), templates.viteConfig());
+    success('Created vite.config.js');
+
+    fs.writeFileSync(path.join(targetDir, 'index.html'), templates.indexHtml(config));
+    success('Created index.html');
+
+    fs.writeFileSync(path.join(targetDir, 'dev', 'sdk-mock.jsx'), templates.sdkMock(config));
+    success('Created dev/sdk-mock.jsx');
+
+    fs.writeFileSync(path.join(targetDir, 'dev', 'main.jsx'), templates.mainJsx(config, pages));
+    success('Created dev/main.jsx');
+
+    fs.writeFileSync(path.join(targetDir, 'dev', 'dev-admin.jsx'), templates.devAdmin());
+    success('Created dev/dev-admin.jsx');
+
+    // Success message
+    const dirName = path.basename(targetDir);
+    console.log(`
+${c.green}╔═══════════════════════════════════════════════════════════╗
+║                                                               ║
+║   ${c.bold}Success!${c.reset}${c.green} Created ${dirName}                               ${c.green}║
+║                                                               ║
+╚═══════════════════════════════════════════════════════════════╝${c.reset}
+
+${c.bold}Next steps:${c.reset}
+
+  ${c.cyan}cd ${targetDir}${c.reset}
+  ${c.cyan}npm install${c.reset}
+  ${c.cyan}npm run dev${c.reset}
+
+  This starts a local dev server at ${c.green}http://localhost:5173${c.reset}
+
+${c.bold}Configure AI for testing:${c.reset}
+
+  Open ${c.yellow}http://localhost:5173/_dev${c.reset} to configure real AI endpoints
+
+${c.bold}Edit your files:${c.reset}
+
+  ${c.yellow}public/${c.reset}           Public pages (no auth)
+  ${c.yellow}private/${c.reset}          Protected pages (auth required)
+  ${c.yellow}promptline.yaml${c.reset}   Package configuration
+
+${c.bold}Deploy:${c.reset}
+
+  1. Create ZIP: ${c.cyan}zip -r ${dirName}.zip ${dirName} -x "node_modules/*" -x ".git/*"${c.reset}
+  2. Upload to ${c.dim}https://app.promptlineops.com/apps/creator${c.reset}
+
+${c.bold}Documentation:${c.reset} ${c.cyan}https://docs.promptlineops.com${c.reset}
+`);
+
+  } catch (err) {
+    error(`Failed to create package: ${err.message}`);
+    // Cleanup on failure
+    if (fs.existsSync(targetDir)) {
+      fs.rmSync(targetDir, { recursive: true });
+    }
+    process.exit(1);
+  }
+}
+
+// Parse arguments
+function parseArgs() {
+  const args = process.argv.slice(2);
+  const options = {
+    name: null,
+    preset: null,
+    yes: false,
+    help: false,
+    version: false,
+  };
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg === '--help' || arg === '-h') {
+      options.help = true;
+    } else if (arg === '--version' || arg === '-v') {
+      options.version = true;
+    } else if (arg === '--yes' || arg === '-y') {
+      options.yes = true;
+    } else if (arg === '--preset' || arg === '-p') {
+      options.preset = args[++i];
+    } else if (!arg.startsWith('-') && !options.name) {
+      options.name = arg;
+    }
+  }
+
+  return options;
+}
+
+function showHelp() {
+  console.log(`
+${c.bold}create-promptline-app${c.reset} - Create PromptLine applications
+
+${c.bold}Usage:${c.reset}
+  npx create-promptline-app <app-name> [options]
+
+${c.bold}Options:${c.reset}
+  -p, --preset <preset>  Template preset (contact, saas, api, blank)
+  -y, --yes              Skip prompts, use defaults
+  -h, --help             Show this help
+  -v, --version          Show version
+
+${c.bold}Examples:${c.reset}
+  npx create-promptline-app my-app
+  npx create-promptline-app my-api --preset api
+  npx create-promptline-app my-app -y
+
+${c.bold}Presets:${c.reset}
+  contact  Landing page + contact form + dashboard (default)
+  saas     Full SaaS with auth, dashboard, billing
+  api      Backend-focused, minimal frontend
+  blank    Empty template
+
+${c.bold}Documentation:${c.reset}
+  https://docs.promptlineops.com/packages
+`);
+}
+
+// Main
+async function main() {
+  const options = parseArgs();
+
+  if (options.help) {
+    showHelp();
+    process.exit(0);
+  }
+
+  if (options.version) {
+    const pkgPath = path.join(__dirname, '..', 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+    console.log(pkg.version);
+    process.exit(0);
+  }
+
+  if (!options.name) {
+    printLogo();
+    error('Please specify a project name:');
+    console.log(`\n  ${c.cyan}npx create-promptline-app${c.reset} ${c.green}<app-name>${c.reset}\n`);
+    console.log('For example:');
+    console.log(`  ${c.cyan}npx create-promptline-app${c.reset} ${c.green}my-restaurant-app${c.reset}\n`);
+    console.log(`Run ${c.cyan}npx create-promptline-app --help${c.reset} for more options.`);
+    process.exit(1);
+  }
+
+  await createPackage(options.name, options);
+}
+
+main().catch((err) => {
+  error(err.message);
+  process.exit(1);
+});