@pinepaper.studio/mcp-server 1.2.2 → 1.3.1

package/dist/tools/handlers.js

@@ -6,9 +6,11 @@
  * Supports browser execution via Puppeteer.
  */
 import { codeGenerator } from '../types/code-generator.js';
-import { CreateItemInputSchema, ModifyItemInputSchema, DeleteItemInputSchema, AddRelationInputSchema, RemoveRelationInputSchema, QueryRelationsInputSchema, AnimateItemInputSchema, KeyframeAnimateInputSchema, ExecuteGeneratorInputSchema, ApplyEffectInputSchema, GetItemsInputSchema, PlayTimelineInputSchema, SetBackgroundColorInputSchema, SetCanvasSizeInputSchema, ExportTrainingDataInputSchema, ImportSVGInputSchema, AddFilterInputSchema, CreateGlossySphereInputSchema, CreateDiagonalStripesInputSchema, BatchCreateInputSchema, BatchModifyInputSchema, CreateGridInputSchema, ErrorCodes, } from '../types/schemas.js';
+import { CreateItemInputSchema, ModifyItemInputSchema, DeleteItemInputSchema, AddRelationInputSchema, RemoveRelationInputSchema, QueryRelationsInputSchema, AnimateItemInputSchema, KeyframeAnimateInputSchema, ExecuteGeneratorInputSchema, ApplyEffectInputSchema, GetItemsInputSchema, PlayTimelineInputSchema, SetBackgroundColorInputSchema, SetCanvasSizeInputSchema, ExportTrainingDataInputSchema, ImportSVGInputSchema, AddFilterInputSchema, CreateGlossySphereInputSchema, CreateDiagonalStripesInputSchema, BatchCreateInputSchema, BatchModifyInputSchema, CreateGridInputSchema, GetPerformanceMetricsInputSchema, SearchAssetsInputSchema, ImportAssetInputSchema, P5DrawInputSchema, ErrorCodes, } from '../types/schemas.js';
 import { ZodError } from 'zod';
 import { getBrowserController, } from '../browser/puppeteer-controller.js';
+import { getPerformanceTracker } from '../metrics/index.js';
+import { formatErrorContext, captureCanvasState } from '../execution/index.js';
 /**
  * Get screenshot mode from environment variable.
  * Defaults to 'on_request' for optimal performance.
@@ -72,15 +74,24 @@ function screenshotResult(screenshot) {
         ],
     };
 }
-function errorResult(code, message, details) {
+function errorResult(code, message, details, context) {
+    // Build error object
+    const errorObj = {
+        success: false,
+        error: { code, message, details },
+    };
+    // Add formatted context if available
+    if (context) {
+        const contextText = formatErrorContext(context);
+        if (contextText) {
+            errorObj.context = contextText;
+        }
+    }
     return {
         content: [
             {
                 type: 'text',
-                text: JSON.stringify({
-                    success: false,
-                    error: { code, message, details },
-                }, null, 2),
+                text: JSON.stringify(errorObj, null, 2),
             },
         ],
         isError: true,
@@ -105,22 +116,83 @@ function handleValidationError(error, i18n) {
  *
  * Default is 'on_request' for optimal performance per best practices.
  */
-async function executeOrGenerate(code, description, options) {
+async function executeOrGenerate(code, description, options, toolName) {
     const { executeInBrowser, browserController, screenshotMode } = options;
     const effectiveScreenshotMode = screenshotMode ?? getScreenshotMode();
+    const tracker = getPerformanceTracker();
+    // Start total timer
+    const timerId = `${toolName}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    tracker.startTimer(`${timerId}_total`);
     if (!executeInBrowser) {
+        const totalDuration = tracker.endTimer(`${timerId}_total`);
+        tracker.recordMetric({
+            toolName,
+            phase: 'total',
+            duration: totalDuration,
+            timestamp: Date.now(),
+            success: true,
+        });
         return successResult(code, description);
     }
     const controller = browserController || getBrowserController();
     if (!controller.connected) {
+        const totalDuration = tracker.endTimer(`${timerId}_total`);
+        tracker.recordMetric({
+            toolName,
+            phase: 'total',
+            duration: totalDuration,
+            timestamp: Date.now(),
+            success: true,
+            metadata: { browserConnected: false },
+        });
         return successResult(code, `${description}\n\n⚠️ Browser not connected. Call pinepaper_browser_connect first to execute code live.`);
     }
+    // Track browser execution time
+    tracker.startTimer(`${timerId}_browser_execution`);
     // Only take screenshot if mode is 'always'
     // 'on_request' mode means screenshots only via pinepaper_browser_screenshot
     const shouldTakeScreenshot = effectiveScreenshotMode === 'always';
+    // Track screenshot time separately if taking screenshot
+    if (shouldTakeScreenshot) {
+        tracker.startTimer(`${timerId}_screenshot`);
+    }
     const result = await controller.executeCode(code, shouldTakeScreenshot);
+    const browserDuration = tracker.endTimer(`${timerId}_browser_execution`);
+    tracker.recordMetric({
+        toolName,
+        phase: 'browser_execution',
+        duration: browserDuration,
+        timestamp: Date.now(),
+        success: result.success,
+        error: result.error,
+    });
+    if (shouldTakeScreenshot) {
+        const screenshotDuration = tracker.endTimer(`${timerId}_screenshot`);
+        tracker.recordMetric({
+            toolName,
+            phase: 'screenshot',
+            duration: screenshotDuration,
+            timestamp: Date.now(),
+            success: !!result.screenshot,
+        });
+    }
+    // Record total duration
+    const totalDuration = tracker.endTimer(`${timerId}_total`);
+    tracker.recordMetric({
+        toolName,
+        phase: 'total',
+        duration: totalDuration,
+        timestamp: Date.now(),
+        success: result.success,
+        error: result.error,
+    });
     if (!result.success) {
-        return errorResult(ErrorCodes.EXECUTION_ERROR, result.error || 'Failed to execute code in browser', { code });
+        // Capture canvas state for error context
+        const canvasState = await captureCanvasState(controller);
+        return errorResult(ErrorCodes.EXECUTION_ERROR, result.error || 'Failed to execute code in browser', { code }, {
+            toolName,
+            canvasState: canvasState || undefined,
+        });
     }
     return executedResult(code, result.result, result.screenshot, description);
 }
@@ -135,24 +207,82 @@ function getLocalizedSuccessMessage(i18n, key, params) {
     return i18n.getSuccess(key, params);
 }
 // =============================================================================
+// PERFORMANCE TRACKING HELPER
+// =============================================================================
+/**
+ * Execute a tool handler with automatic performance tracking for validation and code generation
+ */
+async function executeToolWithTracking(toolName, args, options, validator, codeGenerator, description) {
+    const tracker = getPerformanceTracker();
+    const baseTimerId = `${toolName}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    // Track validation
+    tracker.startTimer(`${baseTimerId}_validation`);
+    const input = validator();
+    const validationDuration = tracker.endTimer(`${baseTimerId}_validation`);
+    tracker.recordMetric({
+        toolName,
+        phase: 'validation',
+        duration: validationDuration,
+        timestamp: Date.now(),
+        success: true,
+    });
+    // Track code generation
+    tracker.startTimer(`${baseTimerId}_code_generation`);
+    const code = codeGenerator(input);
+    const codeGenDuration = tracker.endTimer(`${baseTimerId}_code_generation`);
+    tracker.recordMetric({
+        toolName,
+        phase: 'code_generation',
+        duration: codeGenDuration,
+        timestamp: Date.now(),
+        success: true,
+    });
+    // Get final description
+    const finalDescription = typeof description === 'function' ? description(input) : description;
+    // Execute (will handle browser execution and screenshot timing)
+    return executeOrGenerate(code, finalDescription, options, toolName);
+}
+// =============================================================================
 // TOOL HANDLERS
 // =============================================================================
 export async function handleToolCall(toolName, args, options = {}) {
     const { i18n } = options;
+    const tracker = getPerformanceTracker();
+    const baseTimerId = `${toolName}_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
     try {
         switch (toolName) {
             // -----------------------------------------------------------------------
             // ITEM TOOLS
             // -----------------------------------------------------------------------
             case 'pinepaper_create_item': {
+                // Track validation phase
+                tracker.startTimer(`${baseTimerId}_validation`);
                 const input = CreateItemInputSchema.parse(args);
+                const validationDuration = tracker.endTimer(`${baseTimerId}_validation`);
+                tracker.recordMetric({
+                    toolName,
+                    phase: 'validation',
+                    duration: validationDuration,
+                    timestamp: Date.now(),
+                    success: true,
+                });
+                // Track code generation phase
+                tracker.startTimer(`${baseTimerId}_code_generation`);
                 const code = codeGenerator.generateCreateItem(input);
+                const codeGenDuration = tracker.endTimer(`${baseTimerId}_code_generation`);
+                tracker.recordMetric({
+                    toolName,
+                    phase: 'code_generation',
+                    duration: codeGenDuration,
+                    timestamp: Date.now(),
+                    success: true,
+                });
                 const description = getLocalizedSuccessMessage(i18n, 'itemCreated', {
                     itemType: input.itemType,
                     x: input.position.x,
                     y: input.position.y,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, toolName);
             }
             case 'pinepaper_modify_item': {
                 const input = ModifyItemInputSchema.parse(args);
@@ -160,7 +290,7 @@ export async function handleToolCall(toolName, args, options = {}) {
                 const description = getLocalizedSuccessMessage(i18n, 'itemModified', {
                     itemId: input.itemId,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_modify_item');
             }
             case 'pinepaper_delete_item': {
                 const input = DeleteItemInputSchema.parse(args);
@@ -168,7 +298,7 @@ export async function handleToolCall(toolName, args, options = {}) {
                 const description = getLocalizedSuccessMessage(i18n, 'itemDeleted', {
                     itemId: input.itemId,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_delete_item');
             }
             // -----------------------------------------------------------------------
             // HIGH-LEVEL DESIGN TOOLS
@@ -177,13 +307,13 @@ export async function handleToolCall(toolName, args, options = {}) {
                 const input = CreateGlossySphereInputSchema.parse(args);
                 const code = codeGenerator.generateCreateGlossySphere(input);
                 const description = `Creates a 3D glossy sphere with ${input.baseColor} color at (${input.position.x}, ${input.position.y})`;
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_create_glossy_sphere');
             }
             case 'pinepaper_create_diagonal_stripes': {
                 const input = CreateDiagonalStripesInputSchema.parse(args);
                 const code = codeGenerator.generateCreateDiagonalStripes(input);
                 const description = `Creates diagonal stripes pattern at (${input.position.x}, ${input.position.y}) with ${input.colors.length} colors`;
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_create_diagonal_stripes');
             }
             // -----------------------------------------------------------------------
             // BATCH OPERATION TOOLS
@@ -192,19 +322,19 @@ export async function handleToolCall(toolName, args, options = {}) {
                 const input = BatchCreateInputSchema.parse(args);
                 const code = codeGenerator.generateBatchCreate(input);
                 const description = `Batch creates ${input.items.length} items with single history save`;
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_batch_create');
             }
             case 'pinepaper_batch_modify': {
                 const input = BatchModifyInputSchema.parse(args);
                 const code = codeGenerator.generateBatchModify(input);
                 const description = `Batch modifies ${input.modifications.length} items with single history save`;
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_batch_modify');
             }
             case 'pinepaper_create_grid': {
                 const input = CreateGridInputSchema.parse(args);
                 const code = codeGenerator.generateCreateGrid(input);
                 const description = `Creates a ${input.cols}x${input.rows} grid${input.animated ? ' with wave animation' : ''}`;
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_create_grid');
             }
             // -----------------------------------------------------------------------
             // RELATION TOOLS
@@ -217,7 +347,7 @@ export async function handleToolCall(toolName, args, options = {}) {
                     sourceId: input.sourceId,
                     targetId: input.targetId,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_add_relation');
             }
             case 'pinepaper_remove_relation': {
                 const input = RemoveRelationInputSchema.parse(args);
@@ -226,12 +356,12 @@ export async function handleToolCall(toolName, args, options = {}) {
                     sourceId: input.sourceId,
                     targetId: input.targetId,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_remove_relation');
             }
             case 'pinepaper_query_relations': {
                 const input = QueryRelationsInputSchema.parse(args);
                 const code = codeGenerator.generateQueryRelations(input.itemId, input.relationType, input.direction);
-                return executeOrGenerate(code, `Queries ${input.direction || 'all'} relations for ${input.itemId}`, options);
+                return executeOrGenerate(code, `Queries ${input.direction || 'all'} relations for ${input.itemId}`, options, 'pinepaper_query_relations');
             }
             // -----------------------------------------------------------------------
             // ANIMATION TOOLS
@@ -243,17 +373,17 @@ export async function handleToolCall(toolName, args, options = {}) {
                     animationType: input.animationType,
                     itemId: input.itemId,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_animate');
             }
             case 'pinepaper_keyframe_animate': {
                 const input = KeyframeAnimateInputSchema.parse(args);
                 const code = codeGenerator.generateKeyframeAnimate(input);
-                return executeOrGenerate(code, `Applies keyframe animation with ${input.keyframes.length} keyframes to ${input.itemId}`, options);
+                return executeOrGenerate(code, `Applies keyframe animation with ${input.keyframes.length} keyframes to ${input.itemId}`, options, 'pinepaper_keyframe_animate');
             }
             case 'pinepaper_play_timeline': {
                 const input = PlayTimelineInputSchema.parse(args);
                 const code = codeGenerator.generatePlayTimeline(input.action, input.duration, input.loop, input.time);
-                return executeOrGenerate(code, `Timeline action: ${input.action}`, options);
+                return executeOrGenerate(code, `Timeline action: ${input.action}`, options, 'pinepaper_play_timeline');
             }
             // -----------------------------------------------------------------------
             // GENERATOR TOOLS
@@ -264,11 +394,11 @@ export async function handleToolCall(toolName, args, options = {}) {
                 const description = getLocalizedSuccessMessage(i18n, 'generatorExecuted', {
                     generatorName: input.generatorName,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_execute_generator');
             }
             case 'pinepaper_list_generators': {
                 const code = codeGenerator.generateListGenerators();
-                return executeOrGenerate(code, 'Lists all available generators', options);
+                return executeOrGenerate(code, 'Lists all available generators', options, 'pinepaper_list_generators');
             }
             // -----------------------------------------------------------------------
             // EFFECT TOOLS
@@ -280,7 +410,7 @@ export async function handleToolCall(toolName, args, options = {}) {
                     effectType: input.effectType,
                     itemId: input.itemId,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_apply_effect');
             }
             // -----------------------------------------------------------------------
             // QUERY TOOLS
@@ -288,11 +418,11 @@ export async function handleToolCall(toolName, args, options = {}) {
             case 'pinepaper_get_items': {
                 const input = GetItemsInputSchema.parse(args);
                 const code = codeGenerator.generateGetItems(input.filter);
-                return executeOrGenerate(code, 'Gets items from canvas', options);
+                return executeOrGenerate(code, 'Gets items from canvas', options, 'pinepaper_get_items');
             }
             case 'pinepaper_get_relation_stats': {
                 const code = codeGenerator.generateGetRelationStats();
-                return executeOrGenerate(code, 'Gets relation statistics', options);
+                return executeOrGenerate(code, 'Gets relation statistics', options, 'pinepaper_get_relation_stats');
             }
             // -----------------------------------------------------------------------
             // CANVAS TOOLS
@@ -303,7 +433,7 @@ export async function handleToolCall(toolName, args, options = {}) {
                 const description = getLocalizedSuccessMessage(i18n, 'backgroundSet', {
                     color: input.color,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_set_background_color');
             }
             case 'pinepaper_set_canvas_size': {
                 const input = SetCanvasSizeInputSchema.parse(args);
@@ -312,16 +442,16 @@ export async function handleToolCall(toolName, args, options = {}) {
                     width: input.width,
                     height: input.height,
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_set_canvas_size');
             }
             case 'pinepaper_get_canvas_size': {
                 const code = codeGenerator.generateGetCanvasSize();
-                return executeOrGenerate(code, 'Gets current canvas dimensions', options);
+                return executeOrGenerate(code, 'Gets current canvas dimensions', options, 'pinepaper_get_canvas_size');
             }
             case 'pinepaper_clear_canvas': {
                 const code = codeGenerator.generateClearCanvas();
                 const description = 'Clears all items from the canvas, including any welcome template items';
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_clear_canvas');
             }
             case 'pinepaper_refresh_page': {
                 const controller = options.browserController || getBrowserController();
@@ -365,7 +495,7 @@ You can now start creating new items on a clean canvas.`,
                 const input = ImportSVGInputSchema.parse(args);
                 const code = codeGenerator.generateImportSVG(input.svgString, input.url, input.position, input.scale);
                 const description = 'Imports SVG onto the canvas';
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_import_svg');
             }
             // -----------------------------------------------------------------------
             // FILTER TOOLS
@@ -374,7 +504,7 @@ You can now start creating new items on a clean canvas.`,
                 const input = AddFilterInputSchema.parse(args);
                 const code = codeGenerator.generateAddFilter(input.filterType, input.params);
                 const description = `Adds ${input.filterType} filter to the canvas`;
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_add_filter');
             }
             // -----------------------------------------------------------------------
             // EXPORT TOOLS
@@ -384,7 +514,7 @@ You can now start creating new items on a clean canvas.`,
                 const description = getLocalizedSuccessMessage(i18n, 'exported', {
                     format: 'SVG',
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_export_svg');
             }
             case 'pinepaper_export_training_data': {
                 const input = ExportTrainingDataInputSchema.parse(args);
@@ -392,7 +522,7 @@ You can now start creating new items on a clean canvas.`,
                 const description = getLocalizedSuccessMessage(i18n, 'exported', {
                     format: input.format?.toUpperCase() || 'JSON',
                 });
-                return executeOrGenerate(code, description, options);
+                return executeOrGenerate(code, description, options, 'pinepaper_export_training_data');
             }
             // -----------------------------------------------------------------------
             // BROWSER CONTROL TOOLS
@@ -476,7 +606,12 @@ Browser is ready. You can now use other pinepaper tools to create and animate gr
                 }
                 const screenshot = await controller.takeScreenshot();
                 if (!screenshot) {
-                    return errorResult('SCREENSHOT_FAILED', 'Failed to capture screenshot');
+                    // Capture canvas state for debugging
+                    const canvasState = await captureCanvasState(controller);
+                    return errorResult('SCREENSHOT_FAILED', 'Failed to capture screenshot', undefined, {
+                        toolName: 'pinepaper_browser_screenshot',
+                        canvasState: canvasState || undefined,
+                    });
                 }
                 return screenshotResult(screenshot);
             }
@@ -495,6 +630,115 @@ Browser is ready. You can now use other pinepaper tools to create and animate gr
                 };
             }
             // -----------------------------------------------------------------------
+            // PERFORMANCE TOOLS
+            // -----------------------------------------------------------------------
+            case 'pinepaper_get_performance_metrics': {
+                const input = GetPerformanceMetricsInputSchema.parse(args);
+                const perfTracker = getPerformanceTracker();
+                // Build filter
+                const filter = {
+                    toolName: input.toolName,
+                    phase: input.phase,
+                    since: input.since,
+                    limit: input.limit ?? 100,
+                };
+                // Get format (default to 'summary')
+                const format = input.format ?? 'summary';
+                // Export metrics in requested format
+                const output = perfTracker.exportMetrics(format, filter);
+                // Get tracker stats
+                const trackerStats = perfTracker.getStats();
+                return {
+                    content: [
+                        {
+                            type: 'text',
+                            text: format === 'csv' || format === 'summary'
+                                ? output
+                                : JSON.stringify({
+                                    metrics: output,
+                                    trackerInfo: trackerStats,
+                                }, null, 2),
+                        },
+                    ],
+                };
+            }
+            // -----------------------------------------------------------------------
+            // ASSET TOOLS
+            // -----------------------------------------------------------------------
+            case 'pinepaper_search_assets': {
+                const input = SearchAssetsInputSchema.parse(args);
+                const { getAssetManager } = await import('../assets/index.js');
+                const assetManager = getAssetManager();
+                try {
+                    const results = await assetManager.search(input.query, input.repository || 'all', input.limit || 10);
+                    return {
+                        content: [
+                            {
+                                type: 'text',
+                                text: JSON.stringify({
+                                    success: true,
+                                    query: input.query,
+                                    repository: input.repository || 'all',
+                                    count: results.length,
+                                    results: results.map((r) => ({
+                                        id: r.id,
+                                        repository: r.repository,
+                                        title: r.title,
+                                        description: r.description,
+                                        previewUrl: r.previewUrl,
+                                        license: r.license,
+                                        tags: r.tags,
+                                    })),
+                                }, null, 2),
+                            },
+                        ],
+                    };
+                }
+                catch (error) {
+                    return errorResult(ErrorCodes.EXECUTION_ERROR, error instanceof Error ? error.message : 'Failed to search assets', { query: input.query });
+                }
+            }
+            case 'pinepaper_import_asset': {
+                const input = ImportAssetInputSchema.parse(args);
+                const { getAssetManager } = await import('../assets/index.js');
+                const assetManager = getAssetManager();
+                try {
+                    // Validate that either assetId or url is provided
+                    if (!input.assetId && !input.url) {
+                        return errorResult(ErrorCodes.INVALID_PARAMS, 'Either assetId or url must be provided');
+                    }
+                    let svg;
+                    let metadata;
+                    if (input.assetId) {
+                        // Download from asset manager
+                        const result = await assetManager.download(input.assetId);
+                        svg = result.svg;
+                        metadata = result.metadata;
+                    }
+                    else if (input.url) {
+                        // For URL imports, we'd need to fetch the SVG
+                        // For now, delegate to pinepaper_import_svg
+                        return errorResult(ErrorCodes.INVALID_PARAMS, 'URL imports not yet implemented - use pinepaper_import_svg with url parameter instead', { url: input.url });
+                    }
+                    // Import the SVG onto canvas using existing import_svg tool
+                    const code = codeGenerator.generateImportSVG(svg, undefined, input.position, input.scale);
+                    const description = `Imported asset: ${metadata.title} (${metadata.license.name})`;
+                    return executeOrGenerate(code, description, options, 'pinepaper_import_asset');
+                }
+                catch (error) {
+                    return errorResult(ErrorCodes.EXECUTION_ERROR, error instanceof Error ? error.message : 'Failed to import asset', { assetId: input.assetId, url: input.url });
+                }
+            }
+            // -----------------------------------------------------------------------
+            // P5.JS COMPATIBILITY
+            // -----------------------------------------------------------------------
+            case 'pinepaper_p5_draw': {
+                const input = P5DrawInputSchema.parse(args);
+                const code = codeGenerator.generateP5Draw(input.code);
+                const description = 'Executed p5.js-style drawing code';
+                return executeOrGenerate(code, description, options, 'pinepaper_p5_draw');
+            }
+            // -----------------------------------------------------------------------
             // UNKNOWN TOOL
             // -----------------------------------------------------------------------
             default: {
@@ -535,6 +779,9 @@ Browser is ready. You can now use other pinepaper tools to create and animate gr
                         'pinepaper_browser_disconnect',
                         'pinepaper_browser_screenshot',
                         'pinepaper_browser_status',
+                        'pinepaper_get_performance_metrics',
+                        'pinepaper_search_assets',
+                        'pinepaper_import_asset',
                     ],
                 });
             }
@@ -544,18 +791,35 @@ Browser is ready. You can now use other pinepaper tools to create and animate gr
         if (error instanceof ZodError) {
             return handleValidationError(error, i18n);
         }
+        // Try to capture canvas state for error context (if browser is connected)
+        let canvasState = null;
+        try {
+            const controller = options.browserController || getBrowserController();
+            if (controller.connected) {
+                canvasState = await captureCanvasState(controller);
+            }
+        }
+        catch (stateError) {
+            // Ignore errors from canvas state capture
+        }
         if (error instanceof Error) {
             const message = i18n
                 ? i18n.getError('executionError', { message: error.message })
                 : error.message;
             return errorResult(ErrorCodes.EXECUTION_ERROR, message, {
                 stack: error.stack,
+            }, {
+                toolName,
+                canvasState: canvasState || undefined,
             });
         }
         const message = i18n
             ? i18n.getError('executionError', { message: 'Unknown error occurred' })
             : 'Unknown error occurred';
-        return errorResult(ErrorCodes.EXECUTION_ERROR, message, { error });
+        return errorResult(ErrorCodes.EXECUTION_ERROR, message, { error }, {
+            toolName,
+            canvasState: canvasState || undefined,
+        });
     }
 }
 //# sourceMappingURL=handlers.js.map