@vib3code/sdk 2.0.3-canary.91a95f3 → 2.0.3-canary.ef8d292

package/src/agent/mcp/MCPServer.js

@@ -9,6 +9,9 @@ import { telemetry, EventType, withTelemetry } from '../telemetry/index.js';
 import { AestheticMapper } from '../../creative/AestheticMapper.js';
 import { ChoreographyPlayer } from '../../creative/ChoreographyPlayer.js';
 import { ParameterTimeline } from '../../creative/ParameterTimeline.js';
+import { ColorPresetsSystem } from '../../creative/ColorPresetsSystem.js';
+import { TransitionAnimator } from '../../creative/TransitionAnimator.js';
+import { PRESET_REGISTRY } from '../../render/LayerRelationshipGraph.js';
 
 /**
  * Generate unique IDs
@@ -41,6 +44,36 @@ export class MCPServer {
         this.engine = engine;
         this.sceneId = null;
         this.initialized = false;
+        this._gallerySlots = new Map();
+    }
+
+    /**
+     * Get or lazily create ColorPresetsSystem instance.
+     * Requires engine for the parameter update callback.
+     * @returns {ColorPresetsSystem|null}
+     */
+    _getColorPresets() {
+        if (this._colorPresets) return this._colorPresets;
+        if (!this.engine) return null;
+        this._colorPresets = new ColorPresetsSystem(
+            (name, value) => this.engine.setParameter(name, value)
+        );
+        return this._colorPresets;
+    }
+
+    /**
+     * Get or lazily create TransitionAnimator instance.
+     * Requires engine for the parameter update/get callbacks.
+     * @returns {TransitionAnimator|null}
+     */
+    _getTransitionAnimator() {
+        if (this._transitionAnimator) return this._transitionAnimator;
+        if (!this.engine) return null;
+        this._transitionAnimator = new TransitionAnimator(
+            (name, value) => this.engine.setParameter(name, value),
+            (name) => this.engine.getParameter(name)
+        );
+        return this._transitionAnimator;
     }
 
     buildResponse(operation, data, options = {}) {
@@ -204,6 +237,22 @@ export class MCPServer {
                 case 'control_timeline':
                     result = this.controlTimeline(args);
                     break;
+                // Layer relationship tools (Phase 8)
+                case 'set_layer_profile':
+                    result = this.setLayerProfile(args);
+                    break;
+                case 'set_layer_relationship':
+                    result = this.setLayerRelationship(args);
+                    break;
+                case 'set_layer_keystone':
+                    result = this.setLayerKeystone(args);
+                    break;
+                case 'get_layer_config':
+                    result = this.getLayerConfig();
+                    break;
+                case 'tune_layer_relationship':
+                    result = this.tuneLayerRelationship(args);
+                    break;
                 default:
                     throw new Error(`Unknown tool: ${toolName}`);
             }
@@ -467,32 +516,68 @@ export class MCPServer {
 
         telemetry.recordEvent(EventType.GALLERY_SAVE, { slot });
 
+        // Persist actual engine state if available
+        if (this.engine) {
+            const state = this.engine.exportState();
+            this._gallerySlots.set(slot, {
+                name: name || `Variation ${slot}`,
+                saved_at: new Date().toISOString(),
+                state
+            });
+        }
+
         return {
             slot,
             name: name || `Variation ${slot}`,
             saved_at: new Date().toISOString(),
+            persisted: !!this.engine,
+            gallery_size: this._gallerySlots.size,
             suggested_next_actions: ['load_from_gallery', 'randomize_parameters']
         };
     }
 
     /**
-     * Load from gallery
+     * Load from gallery — restores previously saved state
      */
     loadFromGallery(args) {
         const { slot } = args;
 
-        if (this.engine) {
-            // Apply variation
-            const params = this.engine.parameters?.generateVariationParameters?.(slot) || {};
-            this.engine.setParameters(params);
+        telemetry.recordEvent(EventType.GALLERY_LOAD, { slot });
+
+        const saved = this._gallerySlots.get(slot);
+        if (saved && this.engine) {
+            // Restore saved state
+            this.engine.importState(saved.state);
+            return {
+                slot,
+                name: saved.name,
+                saved_at: saved.saved_at,
+                loaded_at: new Date().toISOString(),
+                restored: true,
+                ...this.getState()
+            };
         }
 
-        telemetry.recordEvent(EventType.GALLERY_LOAD, { slot });
+        if (!saved) {
+            // No saved state — fall back to random variation
+            if (this.engine) {
+                const params = this.engine.parameters?.generateVariationParameters?.(slot) || {};
+                this.engine.setParameters(params);
+            }
+            return {
+                slot,
+                loaded_at: new Date().toISOString(),
+                restored: false,
+                note: 'No saved state in this slot — generated random variation',
+                ...this.getState()
+            };
+        }
 
         return {
             slot,
             loaded_at: new Date().toISOString(),
-            ...this.getState()
+            restored: false,
+            note: 'Engine not initialized — cannot apply state'
         };
     }
 
@@ -1200,8 +1285,17 @@ export class MCPServer {
             (sum, step) => sum + step.duration + step.delay, 0
         );
 
+        // Execute live if engine available
+        let executing = false;
+        const animator = this._getTransitionAnimator();
+        if (animator) {
+            const seqId = animator.sequence(normalizedSequence);
+            executing = !!seqId;
+        }
+
         return {
             transition_id: transitionId,
+            executing,
             step_count: normalizedSequence.length,
             total_duration_ms: totalDuration,
             steps: normalizedSequence.map((step, i) => ({
@@ -1211,7 +1305,7 @@ export class MCPServer {
                 easing: step.easing,
                 delay: step.delay
             })),
-            load_code: `const animator = new TransitionAnimator(\n  (n, v) => engine.setParameter(n, v),\n  (n) => engine.getParameter(n)\n);\nanimator.sequence(${JSON.stringify(normalizedSequence)});`,
+            load_code: executing ? null : `const animator = new TransitionAnimator(\n  (n, v) => engine.setParameter(n, v),\n  (n) => engine.getParameter(n)\n);\nanimator.sequence(${JSON.stringify(normalizedSequence)});`,
             suggested_next_actions: ['describe_visual_state', 'create_timeline', 'save_to_gallery']
         };
     }
@@ -1220,55 +1314,41 @@ export class MCPServer {
      * Apply a named color preset
      */
     applyColorPreset(args) {
-        const { preset } = args;
+        const { preset, transition = true, duration = 800 } = args;
 
-        // Color preset hue/saturation mappings (subset — full list in ColorPresetsSystem)
-        const COLOR_PRESETS = {
-            Ocean: { hue: 200, saturation: 0.8, intensity: 0.6 },
-            Lava: { hue: 15, saturation: 0.9, intensity: 0.8 },
-            Neon: { hue: 300, saturation: 1.0, intensity: 0.9 },
-            Monochrome: { hue: 0, saturation: 0.0, intensity: 0.6 },
-            Sunset: { hue: 30, saturation: 0.85, intensity: 0.7 },
-            Aurora: { hue: 140, saturation: 0.7, intensity: 0.6 },
-            Cyberpunk: { hue: 280, saturation: 0.9, intensity: 0.8 },
-            Forest: { hue: 120, saturation: 0.6, intensity: 0.5 },
-            Desert: { hue: 40, saturation: 0.5, intensity: 0.7 },
-            Galaxy: { hue: 260, saturation: 0.8, intensity: 0.4 },
-            Ice: { hue: 190, saturation: 0.5, intensity: 0.8 },
-            Fire: { hue: 10, saturation: 1.0, intensity: 0.9 },
-            Toxic: { hue: 100, saturation: 0.9, intensity: 0.7 },
-            Royal: { hue: 270, saturation: 0.7, intensity: 0.5 },
-            Pastel: { hue: 330, saturation: 0.3, intensity: 0.8 },
-            Retro: { hue: 50, saturation: 0.7, intensity: 0.6 },
-            Midnight: { hue: 240, saturation: 0.6, intensity: 0.3 },
-            Tropical: { hue: 160, saturation: 0.8, intensity: 0.7 },
-            Ethereal: { hue: 220, saturation: 0.4, intensity: 0.7 },
-            Volcanic: { hue: 5, saturation: 0.95, intensity: 0.6 },
-            Holographic: { hue: 180, saturation: 0.6, intensity: 0.8 },
-            Vaporwave: { hue: 310, saturation: 0.7, intensity: 0.7 }
-        };
+        const colorSystem = this._getColorPresets();
+
+        if (colorSystem) {
+            // Use real ColorPresetsSystem — full preset library with transitions
+            const config = colorSystem.getPreset(preset);
+            if (!config) {
+                const allPresets = colorSystem.getPresets().map(p => p.name);
+                return {
+                    error: {
+                        type: 'ValidationError',
+                        code: 'INVALID_COLOR_PRESET',
+                        message: `Unknown color preset: ${preset}`,
+                        valid_options: allPresets
+                    }
+                };
+            }
+
+            colorSystem.applyPreset(preset, transition, duration);
 
-        const presetData = COLOR_PRESETS[preset];
-        if (!presetData) {
             return {
-                error: {
-                    type: 'ValidationError',
-                    code: 'INVALID_COLOR_PRESET',
-                    message: `Unknown color preset: ${preset}`,
-                    valid_options: Object.keys(COLOR_PRESETS)
-                }
+                preset,
+                applied: { hue: config.hue, saturation: config.saturation, intensity: config.intensity },
+                transition: transition ? { enabled: true, duration } : { enabled: false },
+                full_config: config,
+                suggested_next_actions: ['set_post_processing', 'describe_visual_state', 'set_visual_parameters']
             };
         }
 
-        if (this.engine) {
-            this.engine.setParameter('hue', presetData.hue);
-            this.engine.setParameter('saturation', presetData.saturation);
-            this.engine.setParameter('intensity', presetData.intensity);
-        }
-
+        // Fallback: no engine, return preset metadata for artifact mode
         return {
             preset,
-            applied: presetData,
+            applied: null,
+            load_code: `const colors = new ColorPresetsSystem((n, v) => engine.setParameter(n, v));\ncolors.applyPreset('${preset}', ${transition}, ${duration});`,
             suggested_next_actions: ['set_post_processing', 'describe_visual_state', 'set_visual_parameters']
         };
     }
@@ -1279,14 +1359,50 @@ export class MCPServer {
     setPostProcessing(args) {
         const { effects, chain_preset, clear_first = true } = args;
 
+        // Try to execute live in browser context
+        let executing = false;
+        if (typeof document !== 'undefined') {
+            try {
+                const target = document.getElementById('viz-container')
+                    || document.querySelector('.vib3-container')
+                    || document.querySelector('canvas')?.parentElement;
+
+                if (target) {
+                    // Lazy-init pipeline, importing dynamically to avoid Node.js issues
+                    if (!this._postPipeline) {
+                        // PostProcessingPipeline imported statically would fail in Node;
+                        // it's already a known browser-only module, so guard at runtime
+                        const { PostProcessingPipeline: PPP } = { PostProcessingPipeline: globalThis.PostProcessingPipeline };
+                        if (PPP) {
+                            this._postPipeline = new PPP(target);
+                        }
+                    }
+
+                    if (this._postPipeline) {
+                        if (clear_first) this._postPipeline.clearChain?.();
+                        if (chain_preset) {
+                            this._postPipeline.loadPresetChain(chain_preset);
+                        } else if (effects) {
+                            for (const e of effects) {
+                                this._postPipeline.addEffect(e.name, { intensity: e.intensity || 0.5, ...e });
+                            }
+                        }
+                        this._postPipeline.apply();
+                        executing = true;
+                    }
+                }
+            } catch { /* fall through to code generation */ }
+        }
+
         return {
             applied: true,
+            executing,
             effects: effects || [],
             chain_preset: chain_preset || null,
             cleared_previous: clear_first,
-            load_code: effects ?
-                `const pipeline = new PostProcessingPipeline(gl, canvas);\n${effects.map(e => `pipeline.addEffect('${e.name}', { intensity: ${e.intensity || 0.5} });`).join('\n')}` :
-                `pipeline.applyChain('${chain_preset}');`,
+            load_code: executing ? null : (effects ?
+                `const pipeline = new PostProcessingPipeline(document.getElementById('viz-container'));\n${effects.map(e => `pipeline.addEffect('${e.name}', { intensity: ${e.intensity || 0.5} });`).join('\n')}\npipeline.apply();` :
+                `const pipeline = new PostProcessingPipeline(document.getElementById('viz-container'));\npipeline.loadPresetChain('${chain_preset}');\npipeline.apply();`),
             suggested_next_actions: ['describe_visual_state', 'apply_color_preset', 'create_choreography']
         };
     }
@@ -1665,6 +1781,185 @@ export class MCPServer {
             suggested_next_actions: ['control_timeline', 'describe_visual_state', 'capture_screenshot']
         };
     }
+
+    // ====================================================================
+    // Layer Relationship Tools (Phase 8)
+    // ====================================================================
+
+    /**
+     * Get the holographic system's layer graph (if available).
+     * @private
+     * @returns {import('../../render/LayerRelationshipGraph.js').LayerRelationshipGraph|null}
+     */
+    _getLayerGraph() {
+        if (!this.engine) return null;
+        // Try to access the current system's layer graph
+        const system = this.engine.currentSystem || this.engine._activeSystem;
+        if (system && system.layerGraph) {
+            return system.layerGraph;
+        }
+        if (system && system._layerGraph) {
+            return system._layerGraph;
+        }
+        return null;
+    }
+
+    /**
+     * Load a named layer relationship profile.
+     */
+    setLayerProfile(args) {
+        const { profile } = args;
+        const graph = this._getLayerGraph();
+
+        if (!graph) {
+            return {
+                error: 'Layer relationship graph not available. Switch to holographic system first.',
+                suggested_next_actions: ['switch_system']
+            };
+        }
+
+        graph.loadProfile(profile);
+        telemetry.recordEvent(EventType.PARAMETER_CHANGE, { type: 'layer_profile', profile });
+
+        return {
+            profile,
+            keystone: graph.keystone,
+            active_profile: graph.activeProfile,
+            available_profiles: ['holographic', 'symmetry', 'chord', 'storm', 'legacy'],
+            suggested_next_actions: ['get_layer_config', 'set_layer_relationship', 'tune_layer_relationship']
+        };
+    }
+
+    /**
+     * Set relationship for a specific layer.
+     */
+    setLayerRelationship(args) {
+        const { layer, relationship, config } = args;
+        const graph = this._getLayerGraph();
+
+        if (!graph) {
+            return {
+                error: 'Layer relationship graph not available. Switch to holographic system first.',
+                suggested_next_actions: ['switch_system']
+            };
+        }
+
+        if (config) {
+            graph.setRelationship(layer, { preset: relationship, config });
+        } else {
+            graph.setRelationship(layer, relationship);
+        }
+
+        telemetry.recordEvent(EventType.PARAMETER_CHANGE, {
+            type: 'layer_relationship', layer, relationship
+        });
+
+        return {
+            layer,
+            relationship,
+            config: config || {},
+            keystone: graph.keystone,
+            suggested_next_actions: ['get_layer_config', 'tune_layer_relationship', 'describe_visual_state']
+        };
+    }
+
+    /**
+     * Change the keystone (driver) layer.
+     */
+    setLayerKeystone(args) {
+        const { layer } = args;
+        const graph = this._getLayerGraph();
+
+        if (!graph) {
+            return {
+                error: 'Layer relationship graph not available. Switch to holographic system first.',
+                suggested_next_actions: ['switch_system']
+            };
+        }
+
+        graph.setKeystone(layer);
+        telemetry.recordEvent(EventType.PARAMETER_CHANGE, { type: 'layer_keystone', layer });
+
+        return {
+            keystone: layer,
+            note: 'Other layers\' relationships are preserved. Set new relationships for the old keystone if needed.',
+            suggested_next_actions: ['set_layer_relationship', 'get_layer_config']
+        };
+    }
+
+    /**
+     * Get current layer configuration.
+     */
+    getLayerConfig() {
+        const graph = this._getLayerGraph();
+
+        if (!graph) {
+            return {
+                error: 'Layer relationship graph not available. Switch to holographic system first.',
+                suggested_next_actions: ['switch_system']
+            };
+        }
+
+        const config = graph.exportConfig();
+
+        return {
+            keystone: config.keystone,
+            active_profile: config.profile,
+            relationships: config.relationships,
+            shaders: config.shaders,
+            available_profiles: ['holographic', 'symmetry', 'chord', 'storm', 'legacy'],
+            available_presets: ['echo', 'mirror', 'complement', 'harmonic', 'reactive', 'chase'],
+            suggested_next_actions: ['set_layer_profile', 'set_layer_relationship', 'tune_layer_relationship']
+        };
+    }
+
+    /**
+     * Tune a layer's relationship config.
+     */
+    tuneLayerRelationship(args) {
+        const { layer, config: configOverrides } = args;
+        const graph = this._getLayerGraph();
+
+        if (!graph) {
+            return {
+                error: 'Layer relationship graph not available. Switch to holographic system first.',
+                suggested_next_actions: ['switch_system']
+            };
+        }
+
+        const graphConfig = graph.exportConfig();
+        const currentRel = graphConfig.relationships[layer];
+
+        if (!currentRel || !currentRel.preset) {
+            return {
+                error: `Layer "${layer}" has no tunable preset relationship. Set one first with set_layer_relationship.`,
+                suggested_next_actions: ['set_layer_relationship']
+            };
+        }
+
+        const factory = PRESET_REGISTRY[currentRel.preset];
+        if (!factory) {
+            return {
+                error: `Unknown preset "${currentRel.preset}" on layer "${layer}".`,
+                suggested_next_actions: ['set_layer_relationship']
+            };
+        }
+
+        const newConfig = { ...(currentRel.config || {}), ...configOverrides };
+        graph.setRelationship(layer, { preset: currentRel.preset, config: newConfig });
+
+        telemetry.recordEvent(EventType.PARAMETER_CHANGE, {
+            type: 'layer_tune', layer, tuned_keys: Object.keys(configOverrides)
+        });
+
+        return {
+            layer,
+            preset: currentRel.preset,
+            previous_config: currentRel.config,
+            new_config: newConfig,
+            suggested_next_actions: ['get_layer_config', 'describe_visual_state', 'capture_screenshot']
+        };
+    }
 }
 
 // Singleton instance

package/src/agent/mcp/index.js

@@ -6,4 +6,4 @@
 export { MCPServer, mcpServer } from './MCPServer.js';
 export { toolDefinitions, getToolList, getToolNames, getTool, validateToolInput } from './tools.js';
 
-export default mcpServer from './MCPServer.js';
+export { mcpServer as default } from './MCPServer.js';

package/src/agent/mcp/tools.js

@@ -762,6 +762,93 @@ export const toolDefinitions = {
             },
             required: ['timeline_id', 'action']
         }
+    },
+
+    // Layer Relationship Tools (Phase 8)
+    set_layer_profile: {
+        name: 'set_layer_profile',
+        description: 'Loads a named layer relationship profile that configures how the 5 canvas layers relate to each other. Profiles: holographic (default), symmetry, chord, storm, legacy (original static behavior).',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                profile: {
+                    type: 'string',
+                    enum: ['holographic', 'symmetry', 'chord', 'storm', 'legacy'],
+                    description: 'Named profile to load'
+                }
+            },
+            required: ['profile']
+        }
+    },
+
+    set_layer_relationship: {
+        name: 'set_layer_relationship',
+        description: 'Sets the relationship type for a specific layer relative to the keystone. Available relationships: echo (attenuated follower), mirror (inverted rotation/hue), complement (color opposite), harmonic (musical intervals), reactive (amplifies changes), chase (delayed follower).',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                layer: {
+                    type: 'string',
+                    enum: ['background', 'shadow', 'content', 'highlight', 'accent'],
+                    description: 'Target layer name'
+                },
+                relationship: {
+                    type: 'string',
+                    enum: ['echo', 'mirror', 'complement', 'harmonic', 'reactive', 'chase'],
+                    description: 'Relationship preset name'
+                },
+                config: {
+                    type: 'object',
+                    description: 'Optional config overrides for the relationship (e.g., { opacity: 0.5, gain: 3 })'
+                }
+            },
+            required: ['layer', 'relationship']
+        }
+    },
+
+    set_layer_keystone: {
+        name: 'set_layer_keystone',
+        description: 'Changes which layer acts as the keystone (driver) for the layer relationship graph. Other layers derive their parameters from the keystone through relationship functions.',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                layer: {
+                    type: 'string',
+                    enum: ['background', 'shadow', 'content', 'highlight', 'accent'],
+                    description: 'Layer to designate as keystone'
+                }
+            },
+            required: ['layer']
+        }
+    },
+
+    get_layer_config: {
+        name: 'get_layer_config',
+        description: 'Returns the current layer relationship configuration including keystone, profile, and per-layer relationships with their config parameters.',
+        inputSchema: {
+            type: 'object',
+            properties: {}
+        }
+    },
+
+    tune_layer_relationship: {
+        name: 'tune_layer_relationship',
+        description: 'Hot-patches a layer relationship config without replacing the full graph. Merges provided config values into the existing relationship (e.g., increase reactive gain, shift harmonic hue angle).',
+        inputSchema: {
+            type: 'object',
+            properties: {
+                layer: {
+                    type: 'string',
+                    enum: ['background', 'shadow', 'content', 'highlight', 'accent'],
+                    description: 'Layer to tune'
+                },
+                config: {
+                    type: 'object',
+                    description: 'Config values to merge (e.g., { opacity: 0.6, gain: 3.0, hueAngle: 120 })'
+                }
+            },
+            required: ['layer', 'config']
+        }
     }
 };