claude-code-templates 1.24.0 → 1.24.2

package/components/sandbox/cloudflare/monitor.ts

@@ -0,0 +1,388 @@
+#!/usr/bin/env node
+/**
+ * Cloudflare Sandbox Real-time Monitor
+ * Provides real-time monitoring and debugging of Cloudflare sandbox operations
+ */
+
+import fetch from 'node-fetch';
+import Anthropic from '@anthropic-ai/sdk';
+
+interface MonitoringMetrics {
+  executionTime: number;
+  codeGenerationTime: number;
+  sandboxExecutionTime: number;
+  memoryUsage?: number;
+  success: boolean;
+  errorDetails?: string;
+}
+
+interface SandboxState {
+  status: 'idle' | 'generating' | 'executing' | 'completed' | 'failed';
+  currentStep: string;
+  progress: number;
+}
+
+// ANSI color codes
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  red: '\x1b[31m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+  cyan: '\x1b[36m',
+};
+
+function logWithTimestamp(message: string, level: 'INFO' | 'SUCCESS' | 'ERROR' | 'WARNING' = 'INFO') {
+  const timestamp = new Date().toLocaleTimeString();
+  const icon = {
+    INFO: `${colors.blue}ℹ${colors.reset}`,
+    SUCCESS: `${colors.green}✓${colors.reset}`,
+    ERROR: `${colors.red}✗${colors.reset}`,
+    WARNING: `${colors.yellow}⚠${colors.reset}`,
+  }[level];
+
+  const colorCode = {
+    INFO: colors.blue,
+    SUCCESS: colors.green,
+    ERROR: colors.red,
+    WARNING: colors.yellow,
+  }[level];
+
+  console.log(`${colors.dim}[${timestamp}]${colors.reset} ${icon} ${colorCode}${message}${colors.reset}`);
+}
+
+function printSeparator(char: string = '=', length: number = 60) {
+  console.log(colors.dim + char.repeat(length) + colors.reset);
+}
+
+async function monitorWorkerHealth(workerUrl: string): Promise<boolean> {
+  logWithTimestamp('🔍 Checking Cloudflare Worker health...');
+
+  try {
+    const response = await fetch(workerUrl, {
+      method: 'GET',
+      signal: AbortSignal.timeout(5000), // 5 second timeout
+    });
+
+    if (response.ok || response.status === 405) {
+      logWithTimestamp('✅ Worker is responding', 'SUCCESS');
+      logWithTimestamp(`   Status: ${response.status} ${response.statusText}`);
+      return true;
+    } else {
+      logWithTimestamp(`⚠️  Worker returned: ${response.status} ${response.statusText}`, 'WARNING');
+      return false;
+    }
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    logWithTimestamp(`❌ Worker health check failed: ${errorMsg}`, 'ERROR');
+    return false;
+  }
+}
+
+async function monitorCodeGeneration(
+  anthropic: Anthropic,
+  prompt: string
+): Promise<{ code: string; duration: number }> {
+  logWithTimestamp('🤖 Starting code generation with Claude...');
+
+  const startTime = Date.now();
+
+  try {
+    const response = await anthropic.messages.create({
+      model: 'claude-sonnet-4-5',
+      max_tokens: 4096,
+      messages: [
+        {
+          role: 'user',
+          content: `Generate Python code to answer: "${prompt}"
+
+Requirements:
+- Use only Python standard library
+- Print the result using print()
+- Keep code simple and safe
+- Include proper error handling
+
+Return ONLY the code, no explanations.`,
+        },
+      ],
+    });
+
+    const duration = Date.now() - startTime;
+
+    const code = response.content[0]?.type === 'text' ? response.content[0].text : '';
+
+    if (!code) {
+      throw new Error('No code generated');
+    }
+
+    logWithTimestamp(`✅ Code generated in ${duration}ms`, 'SUCCESS');
+    logWithTimestamp(`   Model: ${response.model}`);
+    logWithTimestamp(`   Tokens used: ${response.usage.input_tokens} in, ${response.usage.output_tokens} out`);
+    logWithTimestamp(`   Code length: ${code.length} characters`);
+
+    if (code.length < 500) {
+      console.log('');
+      logWithTimestamp('📝 Generated Code Preview:');
+      printSeparator('-', 60);
+      console.log(colors.cyan + code + colors.reset);
+      printSeparator('-', 60);
+      console.log('');
+    }
+
+    return { code, duration };
+  } catch (error) {
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    logWithTimestamp(`❌ Code generation failed: ${errorMsg}`, 'ERROR');
+    throw error;
+  }
+}
+
+async function monitorSandboxExecution(
+  workerUrl: string,
+  question: string
+): Promise<{ result: any; duration: number }> {
+  logWithTimestamp('⚙️  Executing in Cloudflare Sandbox...');
+
+  const startTime = Date.now();
+
+  try {
+    const response = await fetch(`${workerUrl}/execute`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ question }),
+      signal: AbortSignal.timeout(60000), // 60 second timeout
+    });
+
+    const duration = Date.now() - startTime;
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Sandbox returned ${response.status}: ${errorText}`);
+    }
+
+    const result = await response.json();
+
+    logWithTimestamp(`✅ Sandbox execution completed in ${duration}ms`, 'SUCCESS');
+    logWithTimestamp(`   Exit code: ${result.success ? '0 (success)' : '1 (failed)'}`);
+    logWithTimestamp(`   Output length: ${result.output?.length || 0} characters`);
+
+    if (result.error) {
+      logWithTimestamp(`   Error output: ${result.error.length} characters`, 'WARNING');
+    }
+
+    return { result, duration };
+  } catch (error) {
+    const duration = Date.now() - startTime;
+    const errorMsg = error instanceof Error ? error.message : String(error);
+    logWithTimestamp(`❌ Sandbox execution failed after ${duration}ms: ${errorMsg}`, 'ERROR');
+    throw error;
+  }
+}
+
+function displayMetrics(metrics: MonitoringMetrics) {
+  console.log('');
+  printSeparator();
+  console.log(`${colors.bright}📊 PERFORMANCE METRICS${colors.reset}`);
+  printSeparator();
+  console.log('');
+
+  console.log(`${colors.cyan}Total Execution Time:${colors.reset} ${metrics.executionTime}ms`);
+  console.log(`${colors.cyan}  ├─ Code Generation:${colors.reset} ${metrics.codeGenerationTime}ms`);
+  console.log(`${colors.cyan}  └─ Sandbox Execution:${colors.reset} ${metrics.sandboxExecutionTime}ms`);
+
+  if (metrics.memoryUsage) {
+    console.log(`${colors.cyan}Memory Usage:${colors.reset} ${metrics.memoryUsage}MB`);
+  }
+
+  console.log('');
+  console.log(
+    `${colors.cyan}Status:${colors.reset} ${metrics.success ? `${colors.green}Success ✓${colors.reset}` : `${colors.red}Failed ✗${colors.reset}`}`
+  );
+
+  if (metrics.errorDetails) {
+    console.log(`${colors.red}Error Details:${colors.reset} ${metrics.errorDetails}`);
+  }
+
+  printSeparator();
+}
+
+function displaySystemInfo() {
+  console.log('');
+  printSeparator();
+  console.log(`${colors.bright}🖥️  SYSTEM INFORMATION${colors.reset}`);
+  printSeparator();
+  console.log('');
+
+  console.log(`${colors.cyan}Node.js Version:${colors.reset} ${process.version}`);
+  console.log(`${colors.cyan}Platform:${colors.reset} ${process.platform}`);
+  console.log(`${colors.cyan}Architecture:${colors.reset} ${process.arch}`);
+  console.log(
+    `${colors.cyan}Memory Usage:${colors.reset} ${Math.round(process.memoryUsage().heapUsed / 1024 / 1024)}MB / ${Math.round(process.memoryUsage().heapTotal / 1024 / 1024)}MB`
+  );
+
+  printSeparator();
+  console.log('');
+}
+
+async function enhancedSandboxMonitoring(
+  prompt: string,
+  anthropicApiKey: string,
+  workerUrl: string = 'http://localhost:8787'
+): Promise<boolean> {
+  logWithTimestamp('🚀 Starting enhanced Cloudflare sandbox monitoring');
+  printSeparator();
+
+  displaySystemInfo();
+
+  const metrics: MonitoringMetrics = {
+    executionTime: 0,
+    codeGenerationTime: 0,
+    sandboxExecutionTime: 0,
+    success: false,
+  };
+
+  const startTime = Date.now();
+
+  try {
+    // Step 1: Check worker health
+    const workerHealthy = await monitorWorkerHealth(workerUrl);
+    if (!workerHealthy) {
+      logWithTimestamp('⚠️  Worker is not healthy, attempting to continue...', 'WARNING');
+    }
+
+    console.log('');
+
+    // Step 2: Generate code with monitoring
+    const anthropic = new Anthropic({ apiKey: anthropicApiKey });
+    const { code, duration: codeGenDuration } = await monitorCodeGeneration(anthropic, prompt);
+    metrics.codeGenerationTime = codeGenDuration;
+
+    console.log('');
+
+    // Step 3: Execute in sandbox with monitoring
+    const { result, duration: execDuration } = await monitorSandboxExecution(workerUrl, prompt);
+    metrics.sandboxExecutionTime = execDuration;
+
+    console.log('');
+
+    // Display results
+    printSeparator();
+    console.log(`${colors.bright}🎯 EXECUTION RESULTS${colors.reset}`);
+    printSeparator();
+    console.log('');
+
+    console.log(`${colors.cyan}Question:${colors.reset} ${result.question}`);
+    console.log('');
+
+    console.log(`${colors.cyan}Generated Code:${colors.reset}`);
+    printSeparator('-', 60);
+    console.log(colors.green + result.code + colors.reset);
+    printSeparator('-', 60);
+    console.log('');
+
+    if (result.output) {
+      console.log(`${colors.cyan}Output:${colors.reset}`);
+      console.log(colors.bright + result.output + colors.reset);
+      console.log('');
+    }
+
+    if (result.error) {
+      console.log(`${colors.red}Error Output:${colors.reset}`);
+      console.log(result.error);
+      console.log('');
+    }
+
+    metrics.executionTime = Date.now() - startTime;
+    metrics.success = result.success;
+    metrics.memoryUsage = Math.round(process.memoryUsage().heapUsed / 1024 / 1024);
+
+    displayMetrics(metrics);
+
+    logWithTimestamp('✅ Monitoring session completed successfully', 'SUCCESS');
+    return true;
+  } catch (error) {
+    metrics.executionTime = Date.now() - startTime;
+    metrics.success = false;
+    metrics.errorDetails = error instanceof Error ? error.message : String(error);
+    metrics.memoryUsage = Math.round(process.memoryUsage().heapUsed / 1024 / 1024);
+
+    console.log('');
+    displayMetrics(metrics);
+
+    logWithTimestamp(`❌ Monitoring session failed: ${metrics.errorDetails}`, 'ERROR');
+    return false;
+  }
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length < 1) {
+    console.log('Cloudflare Sandbox Monitor');
+    console.log('');
+    console.log('Usage:');
+    console.log('  node monitor.ts <prompt> [anthropic_api_key] [worker_url]');
+    console.log('');
+    console.log('Examples:');
+    console.log('  node monitor.ts "Calculate factorial of 5"');
+    console.log('  node monitor.ts "Fibonacci 10" YOUR_API_KEY');
+    console.log('  node monitor.ts "Sum array" YOUR_KEY https://your-worker.workers.dev');
+    console.log('');
+    console.log('Environment Variables:');
+    console.log('  ANTHROPIC_API_KEY - Anthropic API key');
+    console.log('  CLOUDFLARE_WORKER_URL - Worker endpoint (default: http://localhost:8787)');
+    console.log('');
+    console.log('This tool provides enhanced monitoring and debugging for Cloudflare sandbox operations.');
+    process.exit(1);
+  }
+
+  const prompt = args[0];
+  const anthropicApiKey = args[1] || process.env.ANTHROPIC_API_KEY || '';
+  const workerUrl = args[2] || process.env.CLOUDFLARE_WORKER_URL || 'http://localhost:8787';
+
+  if (!anthropicApiKey) {
+    logWithTimestamp('❌ Anthropic API key is required', 'ERROR');
+    console.log('Provide via command line argument or ANTHROPIC_API_KEY environment variable');
+    process.exit(1);
+  }
+
+  console.log('');
+  printSeparator('=', 70);
+  console.log(`${colors.bright}${colors.cyan}     🎬 CLOUDFLARE SANDBOX MONITOR${colors.reset}`);
+  printSeparator('=', 70);
+  console.log('');
+
+  const success = await enhancedSandboxMonitoring(prompt, anthropicApiKey, workerUrl);
+
+  console.log('');
+
+  if (success) {
+    logWithTimestamp('🎉 Monitoring completed successfully', 'SUCCESS');
+    process.exit(0);
+  } else {
+    logWithTimestamp('💔 Monitoring failed', 'ERROR');
+    console.log('');
+    console.log('Troubleshooting:');
+    console.log('1. Ensure worker is deployed: npx wrangler deploy');
+    console.log('2. Check API key is set: npx wrangler secret put ANTHROPIC_API_KEY');
+    console.log('3. Verify worker URL is correct');
+    console.log('4. Check worker logs: npx wrangler tail');
+    console.log('5. Test locally: npm run dev');
+    process.exit(1);
+  }
+}
+
+// Run if executed directly
+if (require.main === module) {
+  main().catch((error) => {
+    console.error('Fatal error:', error);
+    process.exit(1);
+  });
+}
+
+export { monitorWorkerHealth, monitorCodeGeneration, monitorSandboxExecution };

package/components/sandbox/cloudflare/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "cloudflare-claude-sandbox",
+  "version": "1.0.0",
+  "description": "Cloudflare Workers sandbox for executing Claude Code with AI-powered code generation",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "dev": "wrangler dev",
+    "deploy": "wrangler deploy",
+    "tail": "wrangler tail",
+    "launch": "tsx launcher.ts",
+    "monitor": "tsx monitor.ts",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "type-check": "tsc --noEmit",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.20.0",
+    "@cloudflare/sandbox": "^0.1.0",
+    "node-fetch": "^3.3.2"
+  },
+  "devDependencies": {
+    "@cloudflare/vitest-pool-workers": "^0.1.0",
+    "@cloudflare/workers-types": "^4.20240129.0",
+    "@types/node": "^20.11.0",
+    "prettier": "^3.2.4",
+    "tsx": "^4.7.0",
+    "typescript": "^5.3.3",
+    "vitest": "^1.2.0",
+    "wrangler": "^3.78.12"
+  },
+  "engines": {
+    "node": ">=16.17.0"
+  },
+  "keywords": [
+    "cloudflare",
+    "workers",
+    "sandbox",
+    "claude",
+    "anthropic",
+    "ai",
+    "code-execution",
+    "durable-objects",
+    "edge-computing"
+  ],
+  "author": "Claude Code Templates",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/anthropics/claude-code-templates"
+  }
+}

package/components/sandbox/cloudflare/src/index.ts

@@ -0,0 +1,240 @@
+import { getSandbox, type Sandbox } from '@cloudflare/sandbox';
+import Anthropic from '@anthropic-ai/sdk';
+
+export { Sandbox } from '@cloudflare/sandbox';
+
+interface Env {
+  Sandbox: DurableObjectNamespace<Sandbox>;
+  ANTHROPIC_API_KEY: string;
+}
+
+interface ExecuteRequest {
+  question: string;
+  maxTokens?: number;
+  timeout?: number;
+  language?: 'python' | 'javascript';
+}
+
+interface ExecuteResponse {
+  success: boolean;
+  question: string;
+  code: string;
+  output: string;
+  error: string;
+  sandboxId?: string;
+  executionTime?: number;
+}
+
+/**
+ * Main Worker handler
+ * Receives code execution requests and orchestrates Claude AI + Cloudflare Sandbox
+ */
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    const url = new URL(request.url);
+
+    // CORS headers for browser access
+    const corsHeaders = {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type',
+    };
+
+    // Handle OPTIONS request for CORS
+    if (request.method === 'OPTIONS') {
+      return new Response(null, { headers: corsHeaders });
+    }
+
+    // Root endpoint - return usage instructions
+    if (request.method === 'GET' && url.pathname === '/') {
+      return new Response(
+        JSON.stringify({
+          name: 'Cloudflare Claude Code Sandbox',
+          version: '1.0.0',
+          endpoints: {
+            execute: 'POST /execute - Execute code via Claude AI',
+            health: 'GET /health - Check worker health',
+          },
+          usage: {
+            example: {
+              method: 'POST',
+              url: '/execute',
+              body: {
+                question: 'What is the 10th Fibonacci number?',
+              },
+            },
+          },
+        }),
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            ...corsHeaders,
+          },
+        }
+      );
+    }
+
+    // Health check endpoint
+    if (request.method === 'GET' && url.pathname === '/health') {
+      return new Response(
+        JSON.stringify({
+          status: 'healthy',
+          timestamp: new Date().toISOString(),
+          worker: 'cloudflare-claude-sandbox',
+        }),
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            ...corsHeaders,
+          },
+        }
+      );
+    }
+
+    // Execute endpoint
+    if (request.method === 'POST' && url.pathname === '/execute') {
+      const startTime = Date.now();
+
+      try {
+        // Parse request body
+        const body = (await request.json()) as ExecuteRequest;
+
+        if (!body.question) {
+          return Response.json(
+            { error: 'Question is required' },
+            { status: 400, headers: corsHeaders }
+          );
+        }
+
+        // Validate API key
+        if (!env.ANTHROPIC_API_KEY) {
+          return Response.json(
+            {
+              error: 'ANTHROPIC_API_KEY not configured',
+              message: 'Set the API key using: npx wrangler secret put ANTHROPIC_API_KEY',
+            },
+            { status: 500, headers: corsHeaders }
+          );
+        }
+
+        // Initialize Anthropic client
+        const anthropic = new Anthropic({
+          apiKey: env.ANTHROPIC_API_KEY,
+        });
+
+        // Generate code using Claude
+        console.log('Generating code with Claude for:', body.question.substring(0, 100));
+
+        const language = body.language || 'python';
+        const codePrompt =
+          language === 'python'
+            ? `Generate Python code to answer: "${body.question}"
+
+Requirements:
+- Use only Python standard library
+- Print the result using print()
+- Keep code simple and safe
+- Include proper error handling
+- Use descriptive variable names
+
+Return ONLY the code, no explanations or markdown formatting.`
+            : `Generate JavaScript code to answer: "${body.question}"
+
+Requirements:
+- Use only Node.js standard library
+- Print the result using console.log()
+- Keep code simple and safe
+- Include proper error handling
+- Use descriptive variable names
+
+Return ONLY the code, no explanations or markdown formatting.`;
+
+        const codeGeneration = await anthropic.messages.create({
+          model: 'claude-sonnet-4-5',
+          max_tokens: body.maxTokens || 2048,
+          messages: [
+            {
+              role: 'user',
+              content: codePrompt,
+            },
+          ],
+        });
+
+        const generatedCode =
+          codeGeneration.content[0]?.type === 'text' ? codeGeneration.content[0].text : '';
+
+        if (!generatedCode) {
+          return Response.json(
+            { error: 'Failed to generate code from Claude' },
+            { status: 500, headers: corsHeaders }
+          );
+        }
+
+        // Clean up code (remove markdown formatting if present)
+        const cleanCode = generatedCode
+          .replace(/```(?:python|javascript|js)?\n?/g, '')
+          .replace(/```\n?$/g, '')
+          .trim();
+
+        console.log('Code generated, executing in sandbox...');
+
+        // Execute the code in a sandbox
+        // Use a unique ID per request to avoid conflicts
+        const sandboxId = `user-${Date.now()}-${Math.random().toString(36).substring(7)}`;
+        const sandbox = getSandbox(env.Sandbox, sandboxId);
+
+        // Determine execution command based on language
+        const fileName = language === 'python' ? '/tmp/code.py' : '/tmp/code.js';
+        const execCommand =
+          language === 'python' ? 'python /tmp/code.py' : 'node /tmp/code.js';
+
+        // Write code to sandbox and execute
+        await sandbox.writeFile(fileName, cleanCode);
+
+        const result = await sandbox.exec(execCommand, {
+          timeout: body.timeout || 30000, // 30 seconds default
+        });
+
+        const executionTime = Date.now() - startTime;
+
+        const response: ExecuteResponse = {
+          success: result.success,
+          question: body.question,
+          code: cleanCode,
+          output: result.stdout || '',
+          error: result.stderr || '',
+          sandboxId: sandboxId,
+          executionTime: executionTime,
+        };
+
+        console.log(
+          `Execution completed in ${executionTime}ms. Success: ${result.success}`
+        );
+
+        return Response.json(response, {
+          headers: corsHeaders,
+        });
+      } catch (error: unknown) {
+        console.error('Execution error:', error);
+
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        const executionTime = Date.now() - startTime;
+
+        return Response.json(
+          {
+            error: 'Internal server error',
+            message: errorMessage,
+            executionTime: executionTime,
+          },
+          { status: 500, headers: corsHeaders }
+        );
+      }
+    }
+
+    // Unknown endpoint
+    return new Response(
+      'POST /execute with { "question": "your question" }\nGET /health for health check\nGET / for API information',
+      { status: 404, headers: corsHeaders }
+    );
+  },
+};