@crownpeak/dqm-react-component-dev-mcp 1.2.0

package/data/probe/examples/chat/auth.js

@@ -0,0 +1,76 @@
+import 'dotenv/config';
+
+/**
+ * Basic authentication middleware
+ * Checks for valid username and password in the Authorization header
+ * Can be enabled/disabled via environment variables
+ */
+export function authMiddleware(req, res, next) {
+	// Check if authentication is enabled
+	const AUTH_ENABLED = process.env.AUTH_ENABLED === '1';
+
+	// If authentication is not enabled, skip authentication check
+	if (!AUTH_ENABLED) {
+		return next(req, res);
+	}
+
+	// Get configured username and password from environment variables
+	const AUTH_USERNAME = process.env.AUTH_USERNAME || 'admin';
+	const AUTH_PASSWORD = process.env.AUTH_PASSWORD || 'password';
+
+	// Check if request has Authorization header
+	const authHeader = req.headers.authorization;
+
+	if (!authHeader) {
+		// No Authorization header, return 401 Unauthorized
+		res.writeHead(401, {
+			'Content-Type': 'text/plain',
+			'WWW-Authenticate': 'Basic realm="Probe Code Search"'
+		});
+		res.end('Authentication required');
+		return;
+	}
+
+	// Parse Authorization header
+	try {
+		// Basic auth format: "Basic base64(username:password)"
+		const authParts = authHeader.split(' ');
+		if (authParts.length !== 2 || authParts[0] !== 'Basic') {
+			throw new Error('Invalid Authorization header format');
+		}
+
+		// Decode base64 credentials
+		const credentials = Buffer.from(authParts[1], 'base64').toString('utf-8');
+		const [username, password] = credentials.split(':');
+
+		// Check if credentials match
+		if (username === AUTH_USERNAME && password === AUTH_PASSWORD) {
+			// Authentication successful, proceed to next middleware
+			return next(req, res);
+		} else {
+			// Invalid credentials, return 401 Unauthorized
+			res.writeHead(401, {
+				'Content-Type': 'text/plain',
+				'WWW-Authenticate': 'Basic realm="Probe Code Search"'
+			});
+			res.end('Invalid credentials');
+			return;
+		}
+	} catch (error) {
+		// Error parsing Authorization header, return 400 Bad Request
+		res.writeHead(400, { 'Content-Type': 'text/plain' });
+		res.end('Invalid Authorization header');
+		return;
+	}
+}
+
+/**
+ * Apply authentication middleware to a request handler
+ * @param {Function} handler - The request handler function
+ * @returns {Function} - A new handler function with authentication
+ */
+export function withAuth(handler) {
+	return (req, res) => {
+		authMiddleware(req, res, () => handler(req, res));
+	};
+}

package/data/probe/examples/chat/bin/probe-chat.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+/**
+ * @probelabs/probe-chat CLI
+ * Command-line interface for Probe code search chat
+ *
+ * This is a thin wrapper around the main functionality in index.js
+ */
+
+import { main } from '../index.js';
+
+// Execute the main function
+main();

package/data/probe/examples/chat/build.js

@@ -0,0 +1,104 @@
+#!/usr/bin/env node
+
+import { build } from 'esbuild';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { existsSync, rmSync, mkdirSync, cpSync } from 'fs';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+async function buildApp() {
+  console.log(`🏗️  Building probe-chat (${isProduction ? 'production' : 'development'})...`);
+  
+  // Clean dist directory
+  const distDir = join(__dirname, 'dist');
+  if (existsSync(distDir)) {
+    rmSync(distDir, { recursive: true });
+  }
+  mkdirSync(distDir, { recursive: true });
+
+  try {
+    // Bundle the main CLI application
+    await build({
+      entryPoints: [join(__dirname, 'index.js')],
+      bundle: true,
+      platform: 'node',
+      target: 'node18',
+      format: 'esm',
+      outfile: join(distDir, 'index.js'),
+      external: [
+        // Keep these as external since they have complex ESM/CJS interop issues
+        '@opentelemetry/*',
+        '@ai-sdk/*', 
+        'tiktoken',
+        // Keep probe as external since it downloads binaries at runtime
+        '@probelabs/probe',
+        // These have dynamic require issues when bundled
+        'dotenv',
+        'inquirer',
+        'ora',
+        'chalk',
+        'commander',
+        'zod',
+        'ai',
+        'glob'
+      ],
+      minify: isProduction,
+      sourcemap: !isProduction,
+      keepNames: true,
+      define: {
+        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
+      },
+      // Handle ESM imports properly
+      mainFields: ['module', 'main'],
+      conditions: ['import', 'module', 'default'],
+      logLevel: 'info',
+      // Preserve shebang from source file
+      preserveSymlinks: true
+    });
+
+    // Copy essential static files
+    const staticFiles = [
+      'package.json',
+      'index.html',
+      'logo.png'
+    ];
+
+    for (const file of staticFiles) {
+      const src = join(__dirname, file);
+      const dest = join(distDir, file);
+      if (existsSync(src)) {
+        cpSync(src, dest);
+        console.log(`📄 Copied ${file}`);
+      }
+    }
+
+    // Copy directories that might be needed at runtime
+    const staticDirs = [
+      'bin',
+      'storage', 
+      'implement'
+    ];
+
+    for (const dir of staticDirs) {
+      const src = join(__dirname, dir);
+      const dest = join(distDir, dir);
+      if (existsSync(src)) {
+        cpSync(src, dest, { recursive: true });
+        console.log(`📁 Copied ${dir}/`);
+      }
+    }
+
+    console.log('✅ Build completed successfully!');
+    console.log(`📦 Output: ${distDir}`);
+    
+  } catch (error) {
+    console.error('❌ Build failed:', error);
+    process.exit(1);
+  }
+}
+
+buildApp();

package/data/probe/examples/chat/cancelRequest.js

@@ -0,0 +1,84 @@
+// Map to store active requests by session ID
+const activeRequests = new Map();
+
+/**
+ * Register a request as active
+ * @param {string} sessionId - The session ID
+ * @param {Object} requestData - Data about the request (can include abort functions, etc.)
+ */
+export function registerRequest(sessionId, requestData) {
+	if (!sessionId) {
+		console.warn('Attempted to register request without session ID');
+		return;
+	}
+
+	console.log(`Registering request for session: ${sessionId}`);
+	activeRequests.set(sessionId, requestData);
+}
+
+/**
+ * Cancel a request by session ID
+ * @param {string} sessionId - The session ID
+ * @returns {boolean} - Whether the cancellation was successful
+ */
+export function cancelRequest(sessionId) {
+	if (!sessionId) {
+		console.warn('Attempted to cancel request without session ID');
+		return false;
+	}
+
+	const requestData = activeRequests.get(sessionId);
+	if (!requestData) {
+		console.warn(`No active request found for session: ${sessionId}`);
+		return false;
+	}
+
+	console.log(`Cancelling request for session: ${sessionId}`);
+
+	// Call the abort function if it exists
+	if (typeof requestData.abort === 'function') {
+		try {
+			requestData.abort();
+			console.log(`Successfully aborted request for session: ${sessionId}`);
+		} catch (error) {
+			console.error(`Error aborting request for session ${sessionId}:`, error);
+		}
+	}
+
+	// Remove the request from the active requests map
+	activeRequests.delete(sessionId);
+	return true;
+}
+
+/**
+ * Check if a request is active
+ * @param {string} sessionId - The session ID
+ * @returns {boolean} - Whether the request is active
+ */
+export function isRequestActive(sessionId) {
+	return activeRequests.has(sessionId);
+}
+
+/**
+ * Get all active requests
+ * @returns {Map} - Map of all active requests
+ */
+export function getActiveRequests() {
+	return activeRequests;
+}
+
+/**
+ * Clear a request from the active requests map
+ * @param {string} sessionId - The session ID
+ */
+export function clearRequest(sessionId) {
+	if (!sessionId) {
+		console.warn('Attempted to clear request without session ID');
+		return;
+	}
+
+	if (activeRequests.has(sessionId)) {
+		console.log(`Clearing request for session: ${sessionId}`);
+		activeRequests.delete(sessionId);
+	}
+}

package/data/probe/examples/chat/demo-agentic-image-flow.js

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+
+/**
+ * Demo showing how the agentic loop would work with automatic image loading
+ */
+
+import { writeFileSync, unlinkSync } from 'fs';
+
+console.log('🎬 Agentic Loop Image Loading Demo');
+console.log('=====================================\n');
+
+// Create a test image
+const testImage = './architecture-diagram.png';
+const simplePng = Buffer.from([
+  0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,
+  0x00, 0x00, 0x00, 0x0D, 0x49, 0x48, 0x44, 0x52,
+  0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01,
+  0x08, 0x06, 0x00, 0x00, 0x00, 0x1F, 0x15, 0xC4,
+  0x89, 0x00, 0x00, 0x00, 0x0D, 0x49, 0x44, 0x41,
+  0x54, 0x78, 0x9C, 0x62, 0x00, 0x02, 0x00, 0x00,
+  0x05, 0x00, 0x01, 0x0D, 0x0A, 0x2D, 0xB4, 0x00,
+  0x00, 0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE,
+  0x42, 0x60, 0x82
+]);
+writeFileSync(testImage, simplePng);
+
+console.log('📝 Simulating an agentic conversation...\n');
+
+// Simulate an agentic conversation flow
+console.log('👤 USER: "Please analyze the system architecture and identify potential issues."');
+console.log();
+
+console.log('🤖 ITERATION 1:');
+console.log('   Assistant: "I need to examine the codebase to understand the architecture."');
+console.log('   🔍 Tool Call: <search><query>architecture system design</query></search>');
+console.log('   📊 Tool Result: "Found architecture documentation in ./docs/architecture.md"');
+console.log('   🖼️  Image Detection: No images mentioned yet');
+console.log();
+
+console.log('🤖 ITERATION 2:');
+console.log('   Assistant: "Let me look for architecture diagrams to better understand the system."');
+console.log('   🔍 Tool Call: <listFiles><directory>./docs</directory><pattern>*.png</pattern></listFiles>');
+console.log(`   📊 Tool Result: "Found diagram: ${testImage}"`);
+console.log('   🖼️  Image Detection: DETECTED ./architecture-diagram.png → Auto-loading...');
+console.log('   ✅ Image loaded and cached (67 bytes)');
+console.log();
+
+console.log('🤖 ITERATION 3:');
+console.log('   Assistant: "I can see the architecture diagram shows the microservices layout."');
+console.log('   📝 Response: Uses the automatically loaded image to provide analysis');
+console.log('   🖼️  Image Context: ./architecture-diagram.png now available in AI context');
+console.log('   💭 AI can now "see" the diagram and analyze it visually');
+console.log();
+
+console.log('🤖 ITERATION 4:');
+console.log('   Assistant: "Based on the architecture diagram, I can identify several potential issues..."');
+console.log('   🔍 Tool Call: <attempt_completion><result>Analysis complete with visual insights</result></attempt_completion>');
+console.log('   ✅ Task completed with image-enhanced understanding');
+console.log();
+
+console.log('🎯 Key Benefits:');
+console.log('   ✨ Agent automatically loads images when mentioned');
+console.log('   🔄 Images persist across iterations within the same conversation');
+console.log('   🧠 AI gains visual context without explicit user action');
+console.log('   🔒 Security validation prevents unauthorized file access');
+console.log('   ⚡ Caching prevents reloading the same images');
+console.log();
+
+console.log('📋 What the Agent Can Now Do:');
+console.log('   • "Let me check the screenshot.png file" → Auto-loads image');
+console.log('   • "Looking at diagram.jpg shows..." → Image becomes available');
+console.log('   • "The chart in ./charts/metrics.png indicates..." → Visual analysis possible');
+console.log('   • Tool results mentioning images → Automatically processed');
+console.log();
+
+console.log('🏗️  How It Works Behind the Scenes:');
+console.log('   1. 📝 Agent generates text mentioning image files');
+console.log('   2. 🔍 Pattern detection finds image file references');
+console.log('   3. 🛡️  Security validation checks file access permissions');
+console.log('   4. 📁 File system reads and base64-encodes images');
+console.log('   5. 💾 Images cached to avoid reloading');
+console.log('   6. 🖼️  Next AI call includes images in multimodal format');
+console.log('   7. 🧠 AI can now visually analyze the content');
+
+// Cleanup
+unlinkSync(testImage);
+console.log('\n🧹 Demo cleanup completed');
+console.log('\n✨ The probe agent can now think about images and automatically load them!');

package/data/probe/examples/chat/demo-local-images.js

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+
+/**
+ * Demo script showing local image file support in probe agent
+ *
+ * NOTE: This is a standalone demo file. The MIME types and regex patterns below
+ * are duplicated from @probelabs/probe/agent/imageConfig for self-containment.
+ * When modifying image support, update both the shared config and this file.
+ */
+
+import { writeFileSync, unlinkSync, readFileSync, existsSync } from 'fs';
+import { resolve, isAbsolute } from 'path';
+
+// Standalone image extraction function for demo
+// MIME types duplicated from @probelabs/probe/agent/imageConfig (keep in sync!)
+async function extractImageUrls(message, debug = false) {
+  const imageUrlPattern = /(?:data:image\/[a-zA-Z]*;base64,[A-Za-z0-9+/=]+|https?:\/\/(?:(?:private-user-images\.githubusercontent\.com|github\.com\/user-attachments\/assets)\/[^\s"'<>]+|[^\s"'<>]+\.(?:png|jpg|jpeg|webp|bmp|svg)(?:\?[^\s"'<>]*)?)|(?:\.?\.?\/)?[^\s"'<>]*\.(?:png|jpg|jpeg|webp|bmp|svg))/gi;
+
+  const urls = [];
+  const foundPatterns = [];
+  let match;
+
+  while ((match = imageUrlPattern.exec(message)) !== null) {
+    foundPatterns.push(match[0]);
+  }
+
+  // Process each found pattern
+  for (const pattern of foundPatterns) {
+    if (pattern.startsWith('http') || pattern.startsWith('data:image/')) {
+      urls.push(pattern);
+    } else {
+      // Local file path - convert to base64
+      try {
+        const absolutePath = isAbsolute(pattern) ? pattern : resolve(process.cwd(), pattern);
+        
+        if (!existsSync(absolutePath)) continue;
+
+        const extension = absolutePath.toLowerCase().split('.').pop();
+        // MIME types from @probelabs/probe/agent/imageConfig (keep in sync!)
+        const mimeTypes = {
+          'png': 'image/png', 'jpg': 'image/jpeg', 'jpeg': 'image/jpeg',
+          'webp': 'image/webp', 'bmp': 'image/bmp', 'svg': 'image/svg+xml'
+        };
+        
+        const mimeType = mimeTypes[extension];
+        if (!mimeType) continue;
+
+        const fileBuffer = readFileSync(absolutePath);
+        const base64Data = fileBuffer.toString('base64');
+        const dataUrl = `data:${mimeType};base64,${base64Data}`;
+        urls.push(dataUrl);
+      } catch (error) {
+        // Skip failed files
+      }
+    }
+  }
+
+  // Clean message
+  let cleanedMessage = message;
+  foundPatterns.forEach(pattern => {
+    cleanedMessage = cleanedMessage.replace(pattern, '').trim();
+  });
+  cleanedMessage = cleanedMessage.replace(/\s+/g, ' ').trim();
+
+  return { urls, cleanedMessage };
+}
+
+async function demo() {
+  console.log('🖼️  Probe Agent - Local Image Support Demo\n');
+
+  // Create a simple test image
+  const testImage = './demo-image.png';
+  const simplePng = Buffer.from([
+    0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A,
+    0x00, 0x00, 0x00, 0x0D, 0x49, 0x48, 0x44, 0x52,
+    0x00, 0x00, 0x00, 0x01, 0x00, 0x00, 0x00, 0x01,
+    0x08, 0x06, 0x00, 0x00, 0x00, 0x1F, 0x15, 0xC4,
+    0x89, 0x00, 0x00, 0x00, 0x0D, 0x49, 0x44, 0x41,
+    0x54, 0x78, 0x9C, 0x62, 0x00, 0x02, 0x00, 0x00,
+    0x05, 0x00, 0x01, 0x0D, 0x0A, 0x2D, 0xB4, 0x00,
+    0x00, 0x00, 0x00, 0x49, 0x45, 0x4E, 0x44, 0xAE,
+    0x42, 0x60, 0x82
+  ]);
+  writeFileSync(testImage, simplePng);
+
+  console.log('📝 Example user message:');
+  const userMessage = `
+    Can you analyze this architecture diagram: ${testImage} 
+    and compare it with this online example: https://example.com/architecture.png
+  `.trim();
+  
+  console.log(`"${userMessage}"\n`);
+
+  console.log('🔍 Processing with extractImageUrls...\n');
+  
+  try {
+    const result = await extractImageUrls(userMessage, false);
+    
+    console.log('📊 Results:');
+    console.log(`✅ Found ${result.urls.length} images`);
+    console.log(`📝 Cleaned message: "${result.cleanedMessage}"`);
+    console.log('\n🖼️  Image details:');
+    
+    result.urls.forEach((url, index) => {
+      if (url.startsWith('data:image/')) {
+        console.log(`  ${index + 1}. Local file converted to base64 (${url.length} chars)`);
+        console.log(`     Preview: ${url.substring(0, 50)}...`);
+      } else {
+        console.log(`  ${index + 1}. URL: ${url}`);
+      }
+    });
+
+    console.log('\n✨ The probe agent can now seamlessly handle:');
+    console.log('  • Local image files (./image.png)');
+    console.log('  • Remote URLs (https://example.com/image.jpg)');
+    console.log('  • Base64 data URLs (data:image/...)');
+    console.log('  • Mixed content in the same message');
+    
+  } catch (error) {
+    console.error('❌ Error:', error.message);
+  } finally {
+    // Cleanup
+    unlinkSync(testImage);
+    console.log('\n🧹 Demo cleanup completed');
+  }
+}
+
+demo().catch(console.error);

package/data/probe/examples/chat/fileSpanExporter.js

@@ -0,0 +1,181 @@
+import { createWriteStream } from 'fs';
+import { ExportResultCode } from '@opentelemetry/core';
+
+/**
+ * File exporter for OpenTelemetry spans
+ * Exports spans to a file in JSON Lines format (one JSON object per line)
+ * Following the OTLP JSON format specification
+ */
+export class FileSpanExporter {
+  constructor(filePath = './traces.jsonl') {
+    this.filePath = filePath;
+    this.stream = createWriteStream(filePath, { flags: 'a' });
+    this.stream.on('error', (error) => {
+      console.error(`[FileSpanExporter] Stream error: ${error.message}`);
+    });
+  }
+
+  /**
+   * Export spans to file
+   * @param {ReadableSpan[]} spans - Array of spans to export
+   * @param {function} resultCallback - Callback to call with the export result
+   */
+  export(spans, resultCallback) {
+    if (!spans || spans.length === 0) {
+      resultCallback({ code: ExportResultCode.SUCCESS });
+      return;
+    }
+
+    try {
+      const timestamp = Date.now();
+      
+      spans.forEach((span, index) => {
+        // Debug: Log first span's properties to understand structure
+        if (index === 0 && process.env.DEBUG_CHAT === '1') {
+          console.log('[FileSpanExporter] First span properties:');
+          const keys = Object.getOwnPropertyNames(span);
+          keys.forEach(key => {
+            if (key.toLowerCase().includes('parent') || key === '_spanContext' || key === 'parentContext') {
+              console.log(`  ${key}:`, span[key]);
+            }
+          });
+        }
+        
+        // Extract parent span ID - check various possible properties
+        let parentSpanId = undefined;
+        
+        // Check if there's a parent span context in the span
+        if (span.parentSpanContext) {
+          parentSpanId = span.parentSpanContext.spanId;
+        } else if (span._parentSpanContext) {
+          parentSpanId = span._parentSpanContext.spanId;
+        } else if (span.parent) {
+          parentSpanId = span.parent.spanId;
+        } else if (span._parent) {
+          parentSpanId = span._parent.spanId;
+        } else if (span._parentId) {
+          parentSpanId = span._parentId;
+        } else if (span.parentSpanId) {
+          parentSpanId = span.parentSpanId;
+        }
+        
+        // Convert span to OTLP JSON format
+        const spanData = {
+          traceId: span.spanContext().traceId,
+          spanId: span.spanContext().spanId,
+          parentSpanId: parentSpanId,
+          name: span.name,
+          kind: span.kind,
+          startTimeUnixNano: span.startTime[0] * 1_000_000_000 + span.startTime[1],
+          endTimeUnixNano: span.endTime[0] * 1_000_000_000 + span.endTime[1],
+          attributes: this.convertAttributes(span.attributes),
+          status: span.status,
+          events: span.events?.map(event => ({
+            timeUnixNano: event.time[0] * 1_000_000_000 + event.time[1],
+            name: event.name,
+            attributes: this.convertAttributes(event.attributes),
+          })) || [],
+          links: span.links?.map(link => ({
+            traceId: link.context.traceId,
+            spanId: link.context.spanId,
+            attributes: this.convertAttributes(link.attributes),
+          })) || [],
+          resource: {
+            attributes: this.convertAttributes(span.resource?.attributes || {}),
+          },
+          instrumentationLibrary: {
+            name: span.instrumentationLibrary?.name || 'unknown',
+            version: span.instrumentationLibrary?.version || 'unknown',
+          },
+          timestamp,
+        };
+
+        // Write as JSON Lines format (one JSON object per line)
+        this.stream.write(JSON.stringify(spanData) + '\n');
+      });
+
+      resultCallback({ code: ExportResultCode.SUCCESS });
+    } catch (error) {
+      console.error(`[FileSpanExporter] Export error: ${error.message}`);
+      resultCallback({ 
+        code: ExportResultCode.FAILED, 
+        error: error 
+      });
+    }
+  }
+
+  /**
+   * Convert OpenTelemetry attributes to plain object
+   * @param {Object} attributes - OpenTelemetry attributes
+   * @returns {Object} Plain object with string values
+   */
+  convertAttributes(attributes) {
+    if (!attributes) return {};
+    
+    const result = {};
+    for (const [key, value] of Object.entries(attributes)) {
+      // Convert all values to strings for JSON compatibility
+      if (typeof value === 'object' && value !== null) {
+        result[key] = JSON.stringify(value);
+      } else {
+        result[key] = String(value);
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Shutdown the exporter
+   * @returns {Promise<void>}
+   */
+  async shutdown() {
+    return new Promise((resolve) => {
+      if (this.stream) {
+        this.stream.end(() => {
+          console.log(`[FileSpanExporter] File stream closed: ${this.filePath}`);
+          resolve();
+        });
+      } else {
+        resolve();
+      }
+    });
+  }
+
+  /**
+   * Force flush any pending spans
+   * @returns {Promise<void>}
+   */
+  async forceFlush() {
+    return new Promise((resolve, reject) => {
+      if (this.stream) {
+        // CRITICAL FIX: Force the stream to flush all buffered data
+        // Use both drain event and explicit cork/uncork to ensure data is written
+        const flushTimeout = setTimeout(() => {
+          console.warn('[FileSpanExporter] Flush timeout after 5 seconds');
+          resolve();
+        }, 5000);
+        
+        // Uncork the stream to force buffered writes
+        if (this.stream.writableCorked) {
+          this.stream.uncork();
+        }
+        
+        // If there's buffered data, wait for drain event
+        if (this.stream.writableNeedDrain) {
+          this.stream.once('drain', () => {
+            clearTimeout(flushTimeout);
+            resolve();
+          });
+        } else {
+          // No buffered data, but still give it a moment to ensure writes complete
+          setImmediate(() => {
+            clearTimeout(flushTimeout);
+            resolve();
+          });
+        }
+      } else {
+        resolve();
+      }
+    });
+  }
+}