gl-life-claude-zen 1.0.3 → 1.3.0

package/templates/test-site/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "integration-test-site",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "Integration test website for stakeholder validation of UI components",
+  "scripts": {
+    "dev": "node server.js",
+    "dev:simple": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "deploy": "npm run build && npx gh-pages -d dist"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "gh-pages": "^6.1.1",
+    "vite": "^5.0.8"
+  }
+}

package/templates/test-site/server.js

@@ -0,0 +1,125 @@
+#!/usr/bin/env node
+
+/**
+ * Test site development server with port management
+ *
+ * Features:
+ * - Uses PortManager for fixed port allocation (3000-3009 range)
+ * - Auto-cleanup of stale processes on restart
+ * - Port reuse for consistent URLs
+ * - Graceful shutdown handling
+ */
+
+import { spawn } from 'child_process';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { readFileSync, existsSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Try to load PortManager from parent project
+let PortManager;
+try {
+  // Check if running from installed package
+  const parentPackagePath = join(__dirname, '../../node_modules/.gl-life-claude/utils/port-manager.js');
+  if (existsSync(parentPackagePath)) {
+    const module = await import(parentPackagePath);
+    PortManager = module.PortManager;
+  } else {
+    // Fallback: Check workspace root
+    const workspacePackagePath = join(__dirname, '../../../utils/port-manager.js');
+    if (existsSync(workspacePackagePath)) {
+      const module = await import(workspacePackagePath);
+      PortManager = module.PortManager;
+    }
+  }
+} catch (err) {
+  console.warn('⚠️  Port manager not available, using default port 3000');
+}
+
+/**
+ * Start Vite dev server with port management
+ */
+async function startServer() {
+  let port = 3000;
+  let portManager = null;
+
+  if (PortManager) {
+    try {
+      portManager = new PortManager();
+
+      // Allocate port for test-site
+      const allocation = await portManager.allocate('test-site-dev', {
+        service: 'vite',
+        range: [3000, 3009],
+        autoCleanup: true
+      });
+
+      port = allocation.port;
+      console.log(`✓ Port ${port} allocated for test-site`);
+
+    } catch (err) {
+      console.warn(`⚠️  Port allocation failed: ${err.message}`);
+      console.warn('   Using default port 3000');
+      port = 3000;
+    }
+  }
+
+  // Start Vite server
+  console.log(`🚀 Starting Vite dev server on port ${port}...`);
+
+  const vite = spawn('npx', ['vite', '--port', port.toString(), '--host'], {
+    stdio: 'inherit',
+    shell: true,
+    cwd: __dirname
+  });
+
+  // Graceful shutdown
+  const cleanup = async () => {
+    console.log('\n🛑 Shutting down server...');
+
+    if (vite && !vite.killed) {
+      vite.kill('SIGTERM');
+
+      // Force kill after 5 seconds
+      setTimeout(() => {
+        if (!vite.killed) {
+          vite.kill('SIGKILL');
+        }
+      }, 5000);
+    }
+
+    if (portManager) {
+      try {
+        await portManager.release('test-site-dev');
+        console.log('✓ Port released');
+      } catch (err) {
+        // Ignore release errors on shutdown
+      }
+    }
+
+    process.exit(0);
+  };
+
+  process.on('SIGINT', cleanup);
+  process.on('SIGTERM', cleanup);
+
+  vite.on('error', (err) => {
+    console.error('❌ Server error:', err.message);
+    cleanup();
+  });
+
+  vite.on('exit', (code) => {
+    if (code !== 0 && code !== null) {
+      console.error(`❌ Server exited with code ${code}`);
+    }
+    cleanup();
+  });
+}
+
+// Run server
+startServer().catch(err => {
+  console.error('❌ Failed to start server:', err.message);
+  process.exit(1);
+});

package/templates/test-site/src/App.css

@@ -0,0 +1,130 @@
+.app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  min-height: 100vh;
+}
+
+.app-header {
+  margin-bottom: 3rem;
+  text-align: center;
+}
+
+.app-header h1 {
+  font-size: 3em;
+  line-height: 1.1;
+  margin-bottom: 0.5rem;
+}
+
+.app-header p {
+  font-size: 1.2em;
+  color: #888;
+}
+
+.app-main {
+  text-align: left;
+}
+
+.demo-section,
+.instructions,
+.component-list {
+  margin-bottom: 3rem;
+  padding: 2rem;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.demo-section h2,
+.instructions h2,
+.component-list h2 {
+  margin-top: 0;
+  font-size: 1.8em;
+}
+
+.demo-description {
+  color: #888;
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+.component-placeholder {
+  padding: 3rem;
+  border: 2px dashed #646cff;
+  border-radius: 8px;
+  text-align: center;
+  background: rgba(100, 108, 255, 0.05);
+}
+
+.component-placeholder p {
+  font-size: 1.2em;
+  margin-bottom: 1rem;
+  color: #888;
+}
+
+.component-placeholder code {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  display: inline-block;
+}
+
+.result-display {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  background: rgba(100, 108, 255, 0.1);
+  border-radius: 8px;
+  border-left: 4px solid #646cff;
+}
+
+.result-display h3 {
+  margin: 0 0 1rem 0;
+}
+
+.result-display pre {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 0.9em;
+}
+
+.instructions h3 {
+  margin-top: 2rem;
+  font-size: 1.3em;
+}
+
+.instructions ol {
+  line-height: 2;
+}
+
+.instructions code {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  font-family: 'Courier New', monospace;
+  font-size: 0.9em;
+}
+
+.code-example {
+  background: rgba(0, 0, 0, 0.3);
+  padding: 1.5rem;
+  border-radius: 8px;
+  overflow-x: auto;
+  font-size: 0.9em;
+  line-height: 1.6;
+  margin-top: 1rem;
+}
+
+.component-list ul {
+  line-height: 2;
+}
+
+.app-footer {
+  margin-top: 4rem;
+  padding-top: 2rem;
+  border-top: 1px solid #ccc;
+  color: #888;
+  font-size: 0.9em;
+  text-align: center;
+}

package/templates/test-site/src/App.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react'
+import './App.css'
+// Import your components from Agent/src here
+// Example: import { YourComponent } from '../../Agent/src/components/YourComponent'
+
+function App() {
+  return (
+    <div className="app">
+      <header className="app-header">
+        <h1>Integration Test Site</h1>
+        <p>Component Preview for Stakeholder Validation</p>
+      </header>
+
+      <main className="app-main">
+        <section className="demo-section">
+          <h2>Your Components Go Here</h2>
+          <p className="demo-description">
+            Import your UI components from <code>../Agent/src/components/</code> and render them below
+            for stakeholder testing and validation.
+          </p>
+
+          <div className="component-placeholder">
+            <p>👆 Replace this section with your component</p>
+            <code>{'<YourComponent prop1="value" onEvent={handleEvent} />'}</code>
+          </div>
+        </section>
+
+        <section className="instructions">
+          <h2>How to Add Your Components</h2>
+          <ol>
+            <li>Copy your component from <code>Agent/src/components/</code> to <code>test-site/src/components/</code></li>
+            <li>Import it: <code>import &#123; YourComponent &#125; from './components/YourComponent'</code></li>
+            <li>OR import directly: <code>import &#123; YourComponent &#125; from '../../Agent/src/components/YourComponent'</code></li>
+            <li>Render it in the demo section above with realistic props</li>
+            <li>Add event handlers to demonstrate interactivity</li>
+            <li>Run <code>npm run dev</code> to test locally at http://localhost:3000</li>
+            <li>Deploy with <code>npm run deploy</code> to share with stakeholders via GitHub Pages</li>
+          </ol>
+
+          <h3>Example: GitHub Auth Login Component</h3>
+          <pre className="code-example">{`// 1. Copy your login component
+cp ../Agent/src/components/GitHubLogin.jsx src/components/
+
+// 2. Import and use it
+import { GitHubLogin } from './components/GitHubLogin'
+
+function App() {
+  const handleLogin = (user) => {
+    console.log('User logged in:', user)
+  }
+
+  return (
+    <div>
+      <GitHubLogin onLogin={handleLogin} />
+    </div>
+  )
+}`}</pre>
+        </section>
+
+        <section className="component-list">
+          <h2>Quick Start</h2>
+          <ul>
+            <li>📦 Install dependencies: <code>npm install</code></li>
+            <li>🚀 Start dev server: <code>npm run dev</code></li>
+            <li>🌍 Deploy to GitHub Pages: <code>npm run deploy</code></li>
+            <li>📝 Edit <code>src/App.jsx</code> to add your components</li>
+          </ul>
+        </section>
+      </main>
+
+      <footer className="app-footer">
+        <p>Built with Vite + React for fast hot reload</p>
+      </footer>
+    </div>
+  )
+}
+
+export default App

package/templates/test-site/src/index.css

@@ -0,0 +1,39 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  margin: 0 auto;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+}

package/templates/test-site/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

package/templates/test-site/vite.config.js

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    open: true
+  },
+  base: './'
+})