@plures/praxis 1.0.3 → 1.1.0

package/src/cli/commands/canvas.ts

@@ -1,12 +1,13 @@
 /**
  * Canvas Command
- * 
+ *
  * Opens the CodeCanvas visual schema editor.
  */
 
 import * as fs from 'fs';
 import * as path from 'path';
 import * as http from 'http';
+import { spawn } from 'child_process';
 import {
   schemaToCanvas,
   canvasToYaml,
@@ -14,7 +15,7 @@ import {
   createCanvasEditor,
 } from '../../integrations/code-canvas.js';
 import { loadSchemaFromFile } from '../../core/schema/loader.js';
-import type { PraxisSchema } from '../../core/schema/types.js';
+import type { PSFSchema } from '../../../core/schema-engine/psf.js';
 
 /**
  * Canvas command options
@@ -33,22 +34,25 @@ export interface CanvasOptions {
 /**
  * Open CodeCanvas for visual editing
  */
-export async function canvas(schemaPath: string | undefined, options: CanvasOptions): Promise<void> {
+export async function canvas(
+  schemaPath: string | undefined,
+  options: CanvasOptions
+): Promise<void> {
   const port = parseInt(options.port || '3000', 10);
-  const mode = options.mode || 'edit';
-  
+  // const mode = options.mode || 'edit'; // Unused
+
   console.log('\n╔═══════════════════════════════════════════════════╗');
   console.log('║   CodeCanvas Visual Editor                        ║');
   console.log('╚═══════════════════════════════════════════════════╝\n');
-  
+
   // If export format is specified, export and exit
   if (options.export) {
     await exportCanvas(schemaPath, options);
     return;
   }
-  
+
   // Load schema if provided
-  let schema: PraxisSchema | undefined;
+  let schema: PSFSchema | undefined;
   if (schemaPath && fs.existsSync(schemaPath)) {
     try {
       const result = await loadSchemaFromFile(schemaPath);
@@ -56,26 +60,179 @@ export async function canvas(schemaPath: string | undefined, options: CanvasOpti
         console.error(`Error loading schema: ${result.errors.join(', ')}`);
         process.exit(1);
       }
-      schema = result.schema;
+      const loadedSchema = result.schema as any;
+      console.log('Loaded schema keys:', Object.keys(loadedSchema));
+      console.log('Has logic:', !!loadedSchema.logic);
+      console.log('Has events:', !!loadedSchema.events);
+
+      // Convert legacy schema to PSFSchema if needed
+      if (loadedSchema.logic && !loadedSchema.events) {
+        console.log('Converting legacy schema to PSF format...');
+        console.log(`Found ${loadedSchema.logic.length} logic groups.`);
+
+        // 1. Extract Rules and ensure IDs, tagging them with their source flow
+        const rules: any[] = [];
+        const flows: any[] = [];
+
+        loadedSchema.logic.forEach((l: any) => {
+          const flowId = l.id || 'default-flow';
+          console.log(`Processing flow: ${flowId}`);
+          flows.push({
+            id: flowId,
+            name: l.description || flowId,
+            type: 'sequence',
+            steps: [], // Populated implicitly by rules for now
+            description: l.description,
+          });
+
+          (l.rules || []).forEach((r: any) => {
+            rules.push({
+              ...r,
+              id: r.id || r.name,
+              triggers: r.on,
+              meta: { ...r.meta, flowId: flowId },
+            });
+          });
+        });
+
+        // Extract Facts and ensure IDs
+        const facts = loadedSchema.logic
+          .flatMap((l: any) => l.facts || [])
+          .map((f: any) => ({
+            ...f,
+            id: f.id || f.name,
+          }));
+
+        // 2. Infer Models from Rules
+        const inferredModels = new Map<string, any>();
+
+        // Always ensure core models exist for Azure DevOps Integration
+        inferredModels.set('Connection', {
+          id: 'Connection',
+          name: 'Connection',
+          description: 'Azure DevOps Connection',
+          properties: [
+            { name: 'id', type: 'string' },
+            { name: 'name', type: 'string' },
+            { name: 'orgUrl', type: 'string' },
+            { name: 'project', type: 'string' },
+            { name: 'token', type: 'string' },
+          ],
+        });
+
+        inferredModels.set('WorkItem', {
+          id: 'WorkItem',
+          name: 'WorkItem',
+          description: 'Azure DevOps Work Item',
+          properties: [
+            { name: 'id', type: 'number' },
+            { name: 'title', type: 'string' },
+            { name: 'state', type: 'string' },
+            { name: 'type', type: 'string' },
+            { name: 'assignedTo', type: 'string' },
+          ],
+        });
+
+        // 3. Extract Events Aggressively
+        const eventSet = new Set<string>();
+        // From explicit events list
+        loadedSchema.logic.forEach((l: any) => {
+          (l.events || []).forEach((e: any) => eventSet.add(typeof e === 'string' ? e : e.name));
+        });
+        // From rules
+        rules.forEach((r: any) => {
+          (r.on || []).forEach((e: string) => eventSet.add(e));
+          if (r.logic && r.logic.events) {
+            r.logic.events.forEach((e: string) => eventSet.add(e));
+          }
+        });
+
+        // 4. Generate Connections
+        const connections: any[] = [];
+        const factMap = new Map(facts.map((f: any) => [f.name, f.id]));
+
+        rules.forEach((r: any) => {
+          // Event -> Rule
+          (r.on || []).forEach((e: string) => {
+            connections.push({
+              id: `conn_evt_${e}_${r.id}`,
+              source: e,
+              target: r.id,
+              type: 'event',
+              label: 'triggers',
+            });
+          });
+
+          // Rule -> Fact (Heuristic)
+          if (r.do) {
+            const doStrs = Array.isArray(r.do) ? r.do : [r.do];
+            doStrs.forEach((action: string) => {
+              factMap.forEach((factId, factName) => {
+                if (typeof action === 'string' && action.includes(factName as string)) {
+                  connections.push({
+                    id: `conn_act_${r.id}_${factId}`,
+                    source: r.id,
+                    target: factId,
+                    type: 'control',
+                    label: 'updates',
+                  });
+                }
+              });
+            });
+          }
+        });
+
+        schema = {
+          $version: loadedSchema.version || '1.0.0',
+          id: loadedSchema.name || 'schema',
+          name: loadedSchema.name,
+          description: loadedSchema.description,
+          models: [...(loadedSchema.models || []), ...inferredModels.values()],
+          components: loadedSchema.components || [],
+          events: Array.from(eventSet).map((name) => ({
+            id: name,
+            tag: name,
+            name: name,
+            payload: { type: 'object', properties: {} },
+          })),
+          facts: facts,
+          rules: rules,
+          constraints: loadedSchema.logic.flatMap((l: any) => l.constraints || []),
+          flows: flows,
+          canvas: {
+            connections: connections,
+          },
+          metadata: loadedSchema.metadata,
+        } as unknown as PSFSchema;
+      } else {
+        schema = loadedSchema as unknown as PSFSchema;
+      }
       console.log(`✓ Loaded schema: ${schemaPath}`);
     } catch (error) {
       console.error(`Error loading schema: ${error}`);
       process.exit(1);
     }
   }
-  
+
   // Create canvas from schema
   const editor = createCanvasEditor({ schema, layout: 'hierarchical' });
-  
-  console.log(`\nStarting Canvas server on http://localhost:${port}`);
-  console.log(`Mode: ${mode}\n`);
-  
-  // Start a simple HTTP server for the canvas
+
+  console.log(`\nStarting Canvas API server on http://localhost:${port}`);
+
+  // Start a simple HTTP server for the canvas API
   const server = http.createServer((req, res) => {
-    if (req.url === '/') {
-      res.writeHead(200, { 'Content-Type': 'text/html' });
-      res.end(generateCanvasHtml(editor.document, mode));
-    } else if (req.url === '/api/canvas') {
+    // Enable CORS for Vite dev server
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+    if (req.method === 'OPTIONS') {
+      res.writeHead(200);
+      res.end();
+      return;
+    }
+
+    if (req.url === '/api/canvas') {
       res.writeHead(200, { 'Content-Type': 'application/json' });
       res.end(JSON.stringify(editor.document));
     } else if (req.url === '/api/mermaid') {
@@ -92,16 +249,59 @@ export async function canvas(schemaPath: string | undefined, options: CanvasOpti
       res.end('Not found');
     }
   });
-  
+
   server.listen(port, () => {
-    console.log('Canvas server running!');
-    console.log(`\n  Local:   http://localhost:${port}`);
-    console.log(`  Mermaid: http://localhost:${port}/api/mermaid`);
-    console.log(`  YAML:    http://localhost:${port}/api/yaml`);
-    console.log(`  Schema:  http://localhost:${port}/api/schema\n`);
+    console.log('Canvas API server running!');
+
+    // Start Vite to serve the UI
+    console.log('Starting UI...');
+    const vitePort = 5173;
+
+    // Use npm exec to run vite from the praxis directory context
+    const isWin = process.platform === 'win32';
+    const cmd = isWin ? 'cmd.exe' : 'npm';
+    const args = isWin
+      ? [
+          '/d',
+          '/s',
+          '/c',
+          'npm',
+          'exec',
+          '--prefix',
+          'praxis',
+          'vite',
+          'praxis/ui/canvas',
+          '--',
+          '--port',
+          vitePort.toString(),
+        ]
+      : [
+          'exec',
+          '--prefix',
+          'praxis',
+          'vite',
+          'praxis/ui/canvas',
+          '--',
+          '--port',
+          vitePort.toString(),
+        ];
+
+    const vite = spawn(cmd, args, {
+      stdio: 'inherit',
+      shell: false,
+      env: { ...process.env, API_URL: `http://localhost:${port}` },
+    });
+    console.log(`\n  UI:      http://localhost:${vitePort}`);
+    console.log(`  API:     http://localhost:${port}/api/canvas`);
     console.log('Press Ctrl+C to stop.\n');
+
+    vite.on('close', (code) => {
+      console.log(`UI process exited with code ${code}`);
+      server.close();
+      process.exit(code || 0);
+    });
   });
-  
+
   // Handle shutdown
   process.on('SIGINT', () => {
     console.log('\nShutting down Canvas server...');
@@ -119,17 +319,121 @@ async function exportCanvas(schemaPath: string | undefined, options: CanvasOptio
     console.log('Usage: praxis canvas <schema-file> --export yaml --output schema.canvas.yaml');
     process.exit(1);
   }
-  
+
   const result = await loadSchemaFromFile(schemaPath);
   if (result.errors.length > 0 || !result.schema) {
     console.error(`Error loading schema: ${result.errors.join(', ')}`);
     process.exit(1);
   }
-  const canvas = schemaToCanvas(result.schema);
-  
+  const loadedSchema = result.schema as any;
+  let schema: PSFSchema;
+
+  if (loadedSchema.logic && !loadedSchema.events) {
+    console.log('Converting legacy schema to PSF format...');
+
+    // 1. Extract Rules and ensure IDs, tagging them with their source flow
+    const rules: any[] = [];
+    const flows: any[] = [];
+
+    loadedSchema.logic.forEach((l: any) => {
+      const flowId = l.id || 'default-flow';
+      flows.push({
+        id: flowId,
+        name: l.description || flowId,
+        type: 'sequence',
+        steps: [], // Populated implicitly by rules for now
+        description: l.description,
+      });
+
+      (l.rules || []).forEach((r: any) => {
+        rules.push({
+          ...r,
+          id: r.id || r.name,
+          triggers: r.on,
+          meta: { ...r.meta, flowId: flowId },
+        });
+      });
+    });
+
+    // Extract Facts and ensure IDs
+    const facts = loadedSchema.logic
+      .flatMap((l: any) => l.facts || [])
+      .map((f: any) => ({
+        ...f,
+        id: f.id || f.name,
+      }));
+
+    // 2. Infer Models from Rules
+    const inferredModels = new Map<string, any>();
+
+    // Always ensure core models exist for Azure DevOps Integration
+    inferredModels.set('Connection', {
+      id: 'Connection',
+      name: 'Connection',
+      description: 'Azure DevOps Connection',
+      properties: [
+        { name: 'id', type: 'string' },
+        { name: 'name', type: 'string' },
+        { name: 'orgUrl', type: 'string' },
+        { name: 'project', type: 'string' },
+        { name: 'token', type: 'string' },
+      ],
+    });
+
+    inferredModels.set('WorkItem', {
+      id: 'WorkItem',
+      name: 'WorkItem',
+      description: 'Azure DevOps Work Item',
+      properties: [
+        { name: 'id', type: 'number' },
+        { name: 'title', type: 'string' },
+        { name: 'state', type: 'string' },
+        { name: 'type', type: 'string' },
+        { name: 'assignedTo', type: 'string' },
+      ],
+    });
+
+    // 3. Extract Events Aggressively
+    const eventSet = new Set<string>();
+    // From explicit events list
+    loadedSchema.logic.forEach((l: any) => {
+      (l.events || []).forEach((e: any) => eventSet.add(typeof e === 'string' ? e : e.name));
+    });
+    // From rules
+    rules.forEach((r: any) => {
+      (r.on || []).forEach((e: string) => eventSet.add(e));
+      if (r.logic && r.logic.events) {
+        r.logic.events.forEach((e: string) => eventSet.add(e));
+      }
+    });
+
+    schema = {
+      $version: loadedSchema.version || '1.0.0',
+      id: loadedSchema.name || 'schema',
+      name: loadedSchema.name,
+      description: loadedSchema.description,
+      models: [...(loadedSchema.models || []), ...inferredModels.values()],
+      components: loadedSchema.components || [],
+      events: Array.from(eventSet).map((name) => ({
+        id: name,
+        tag: name,
+        name: name,
+        payload: { type: 'object', properties: {} },
+      })),
+      facts: facts,
+      rules: rules,
+      constraints: loadedSchema.logic.flatMap((l: any) => l.constraints || []),
+      flows: flows,
+      metadata: loadedSchema.metadata,
+    } as PSFSchema;
+  } else {
+    schema = loadedSchema as unknown as PSFSchema;
+  }
+  const canvas = schemaToCanvas(schema);
+
   let output: string;
   let ext: string;
-  
+
   switch (options.export) {
     case 'yaml':
       output = canvasToYaml(canvas);
@@ -144,103 +448,10 @@ async function exportCanvas(schemaPath: string | undefined, options: CanvasOptio
       output = JSON.stringify(canvas, null, 2);
       ext = 'json';
   }
-  
-  const outputPath = options.output || `${path.basename(schemaPath, path.extname(schemaPath))}.canvas.${ext}`;
+
+  const outputPath =
+    options.output || `${path.basename(schemaPath, path.extname(schemaPath))}.canvas.${ext}`;
   fs.writeFileSync(outputPath, output);
-  
-  console.log(`✓ Exported canvas to: ${outputPath}`);
-}
 
-/**
- * Generate HTML for canvas viewer
- */
-function generateCanvasHtml(document: ReturnType<typeof createCanvasEditor>['document'], mode: string): string {
-  const mermaidDiagram = canvasToMermaid({
-    id: document.id,
-    name: document.name,
-    version: document.version,
-    nodes: document.nodes,
-    edges: document.edges,
-  });
-  
-  return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>CodeCanvas - ${document.name}</title>
-  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #1a1a2e; color: #eee; }
-    .header { background: #16213e; padding: 1rem 2rem; display: flex; justify-content: space-between; align-items: center; }
-    .header h1 { font-size: 1.25rem; color: #00d9ff; }
-    .header .mode { background: #0f3460; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.875rem; }
-    .main { padding: 2rem; display: flex; gap: 2rem; }
-    .canvas { flex: 1; background: #16213e; border-radius: 8px; padding: 1.5rem; min-height: 500px; }
-    .sidebar { width: 300px; }
-    .panel { background: #16213e; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
-    .panel h3 { font-size: 0.875rem; color: #00d9ff; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
-    .panel ul { list-style: none; }
-    .panel li { padding: 0.5rem 0; border-bottom: 1px solid #0f3460; font-size: 0.875rem; }
-    .panel li:last-child { border-bottom: none; }
-    .mermaid { background: #fff; border-radius: 8px; padding: 1rem; }
-    .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
-    .stat { background: #0f3460; padding: 0.75rem; border-radius: 4px; text-align: center; }
-    .stat-value { font-size: 1.5rem; font-weight: bold; color: #00d9ff; }
-    .stat-label { font-size: 0.75rem; color: #888; }
-  </style>
-</head>
-<body>
-  <div class="header">
-    <h1>🎨 CodeCanvas - ${document.name}</h1>
-    <span class="mode">${mode.toUpperCase()} MODE</span>
-  </div>
-  <div class="main">
-    <div class="canvas">
-      <div class="mermaid">
-${mermaidDiagram}
-      </div>
-    </div>
-    <div class="sidebar">
-      <div class="panel">
-        <h3>Statistics</h3>
-        <div class="stats">
-          <div class="stat">
-            <div class="stat-value">${document.nodes.filter(n => n.type === 'model').length}</div>
-            <div class="stat-label">Models</div>
-          </div>
-          <div class="stat">
-            <div class="stat-value">${document.nodes.filter(n => n.type === 'component').length}</div>
-            <div class="stat-label">Components</div>
-          </div>
-          <div class="stat">
-            <div class="stat-value">${document.nodes.filter(n => n.type === 'event').length}</div>
-            <div class="stat-label">Events</div>
-          </div>
-          <div class="stat">
-            <div class="stat-value">${document.nodes.filter(n => n.type === 'fact').length}</div>
-            <div class="stat-label">Facts</div>
-          </div>
-        </div>
-      </div>
-      <div class="panel">
-        <h3>Nodes</h3>
-        <ul>
-          ${document.nodes.map(n => `<li><strong>${n.type}:</strong> ${n.label}</li>`).join('\n          ')}
-        </ul>
-      </div>
-      <div class="panel">
-        <h3>Edges</h3>
-        <ul>
-          ${document.edges.length ? document.edges.map(e => `<li>${e.source} → ${e.target}</li>`).join('\n          ') : '<li>No edges</li>'}
-        </ul>
-      </div>
-    </div>
-  </div>
-  <script>
-    mermaid.initialize({ startOnLoad: true, theme: 'base' });
-  </script>
-</body>
-</html>`;
+  console.log(`✓ Exported canvas to: ${outputPath}`);
 }