meld/tests/utils/mermaid-ascii/cli-integration-example.ts

Meld: A template language for LLM prompts

/**
 * CLI Integration Example
 * 
 * This file demonstrates how to integrate the mermaid-ascii wrapper with CLI commands.
 * This is an example only and not meant to be used directly.
 */

// Example CLI command handler for debug-context
function handleDebugContextCommand(file: string, options: { output: string }) {
  // Mock imports and services (in a real CLI command, you would use actual services)
  // import { StateVisualizationService } from '../debug/StateVisualizationService/StateVisualizationService';
  // import { StateHistoryService } from '../debug/StateHistoryService/StateHistoryService';
  // import { StateTrackingService } from '../debug/StateTrackingService/StateTrackingService';
  
  console.log(`Processing file: ${file}`);
  console.log(`Output format: ${options.output}`);
  
  // In a real command, you would:
  // 1. Process the file to get the state
  // const state = await processFile(file);
  // const rootStateId = state.getRootStateId();
  
  // 2. Configure and use the visualization service
  // const historyService = new StateHistoryService();
  // const trackingService = new StateTrackingService();
  // const visualizationService = new StateVisualizationService(historyService, trackingService);
  
  // 3. Generate the visualization in the requested format
  // const config = {
  //   format: options.output === 'ascii' ? 'ascii' : 'mermaid',
  //   includeMetadata: true,
  //   ascii: {
  //     width: process.stdout.columns || 80,
  //     color: process.stdout.isTTY,
  //     includeHeader: true
  //   }
  // };
  
  // const output = visualizationService.visualizeContextHierarchy(rootStateId, config);
  
  // 4. Output the result
  // console.log(output);
  
  // For demonstration, we'll use a simple example
  if (options.output === 'ascii') {
    console.log(`
=== Context Hierarchy: root-123 ===
    +---------------+     
    |   pipeline.ts |     
    +---------------+     
            |            
            |            
            v            
    +---------------+    
    | transform.ts  |    
    +---------------+    
            |            
           / \           
          /   \          
         /     \         
        v       v        
+-------------+ +-------------+
| variant1.ts | | variant2.ts |
+-------------+ +-------------+
===============================
`);
  } else {
    console.log(`
graph TD;
    state_1["pipeline.ts"] style="box,#4CAF50";
    state_2["transform.ts"] style="box,#2196F3";
    state_3["variant1.ts"] style="diamond,#9C27B0";
    state_4["variant2.ts"] style="diamond,#9C27B0";
    
    state_1 -->|parent-child| state_2;
    state_2 -->|parent-child| state_3;
    state_2 -->|parent-child| state_4;
`);
  }
}

// Example CLI command handler for debug-resolution
function handleDebugResolutionCommand(variableName: string, file: string, options: { output: string }) {
  console.log(`Tracking variable: ${variableName} in file: ${file}`);
  console.log(`Output format: ${options.output}`);
  
  // In a real command, similar to above, you would:
  // 1. Process the file
  // 2. Configure services
  // 3. Generate visualization
  // 4. Output result
  
  if (options.output === 'ascii') {
    console.log(`
=== Resolution Path Timeline: ${variableName} ===
┌─────────────┐         ┌─────────────┐         ┌─────────────┐
│ pipeline.ts │         │transform.ts │         │ variant1.ts │
└──────┬──────┘         └──────┬──────┘         └──────┬──────┘
       │                        │                       │      
       │ resolve $var           │                       │      
       │───────────────────────>│                       │      
       │                        │                       │      
       │                        │ not found             │      
       │<───────────────────────│                       │      
       │                        │                       │      
       │ resolve $var           │                       │      
       │───────────────────────────────────────────────>│      
       │                        │                       │      
       │                        │                       │      
       │                        │                       │ $var = 42
       │<───────────────────────────────────────────────│      
======================================
`);
  } else {
    console.log(`
sequenceDiagram
  participant pipeline.ts
  participant transform.ts
  participant variant1.ts
  
  pipeline.ts->>transform.ts: resolve ${variableName}
  transform.ts-->>pipeline.ts: not found
  pipeline.ts->>variant1.ts: resolve ${variableName}
  variant1.ts-->>pipeline.ts: ${variableName} = 42
`);
  }
}

// Example CLI command registration
/*
function registerDebugCommands(program) {
  program
    .command('debug-context <file>')
    .description('Visualize context hierarchy for a file')
    .option('--output <format>', 'Output format (ascii or mermaid)', 'ascii')
    .action(handleDebugContextCommand);
  
  program
    .command('debug-resolution <variable> <file>')
    .description('Track variable resolution for a file')
    .option('--output <format>', 'Output format (ascii or mermaid)', 'ascii')
    .action(handleDebugResolutionCommand);
}
*/

// Example usage
console.log('Example CLI Command: debug-context pipeline.ts --output ascii');
handleDebugContextCommand('pipeline.ts', { output: 'ascii' });

console.log('\nExample CLI Command: debug-resolution $stateId pipeline.ts --output ascii');
handleDebugResolutionCommand('$stateId', 'pipeline.ts', { output: 'ascii' });