@vib3code/sdk 2.0.3-canary.75a3290 → 2.0.3-canary.ef8d292

package/DOCS/MASTER_PLAN_2026-01-31.md

@@ -19,10 +19,10 @@ The codebase is complete. The product isn't. You have 95,000+ lines of working e
 - Creative Tooling (color presets, transitions, post-processing, timeline) — complete
 - Platform Integrations (React, Vue, Svelte, Figma, Three.js, TouchDesigner, OBS) — code complete
 - Advanced Features (WebXR, WebGPU Compute, MIDI, AI Presets, OffscreenWorker) — code complete
-- MCP Agentic Control (14 tools) — working
+- MCP Agentic Control (36 tools — 14 core + 22 added in Phases 6.5-8) — working
 - C++ WASM Core with JS fallback — working
 - Export System (SVG, CSS, Lottie, Shader, Trading Cards, VIB3Package) — working
-- 693+ tests passing, 34 test files
+- 1762 tests passing, 77 test files (as of Feb 15, 2026)
 - 6 CI/CD workflows active
 
 **What's not done**: Everything below.

package/DOCS/SYSTEM_INVENTORY.md

@@ -31,7 +31,7 @@ The SDK provides 3 active visualization systems with shared 6D rotation mathemat
 | **Core Warp Types** | 3 (Base, Hypersphere, Hypertetrahedron) |
 | **Total Geometries** | 24 per system (8 base × 3 cores) |
 | **Canvas Layers** | 5 per system (background, shadow, content, highlight, accent) |
-| **MCP Tools** | 12 agent-accessible tools |
+| **MCP Tools** | 36 agent-accessible tools (14 core + 4 Phase 6.5 + 7 Phase 7 + 5 Phase 7.1 + 5 Phase 8 + 1 reactivity) |
 | **Spatial Input Sources** | 8 (deviceTilt, mouse, gyroscope, gamepad, perspective, programmatic, audio, MIDI) |
 | **Spatial Profiles** | 6 built-in (cardTilt, wearablePerspective, gameAsset, vjAudioSpatial, uiElement, immersiveXR) |
 | **Creative Effects** | 14 post-processing effects, 22 color presets, 14 easing functions |
@@ -245,7 +245,7 @@ All rotation parameters: `-6.28` to `6.28` (radians, ±2π)
 
 ## MCP Server & Agent Tools
 
-### Available Tools (12 total)
+### Available Tools (36 total — see CLAUDE.md for full breakdown by phase)
 
 | Tool | Description | Key Parameters |
 |------|-------------|----------------|

package/DOCS/WEBGPU_STATUS.md

@@ -1,38 +1,119 @@
-# WebGPU status and testing requirements
-
-This document records the current WebGPU backend state, what is implemented, and what is required
-to validate it in local development or CI.
-
-## Current status
-- **Backend scaffold:** `WebGPUBackend` initializes adapter/device, configures the canvas, manages
-  resize, and supports a clear-pass `renderFrame()` path.
-- **Async context creation:** `createRenderContextAsync()` can instantiate WebGPU contexts using
-  `{ backend: 'webgpu' }`.
-- **Resource tracking:** depth textures are registered in the shared `RenderResourceRegistry`.
-
-## What is still needed
-1. **Pipeline parity:** implement basic shader pipelines (vertex/fragment) and buffer binding that
-   match the WebGL backend command flow.
-2. **Command buffer bridge:** map existing render commands to WebGPU render passes.
-3. **Feature gating:** add host-app controls to toggle WebGPU via feature flags.
-4. **Diagnostics:** add per-frame stats and resource delta reporting for WebGPU.
-
-## Testing requirements
-### Local smoke test
-Prerequisites:
-- A browser with WebGPU enabled (Chrome/Edge with `chrome://flags/#enable-unsafe-webgpu`, or a
-  Chromium build with WebGPU support).
-- A device with WebGPU-capable GPU drivers.
-
-Suggested smoke flow:
-1. Create a canvas and call `createRenderContextAsync(canvas, { backend: 'webgpu' })`.
-2. Call `backend.renderFrame({ clearColor: [0.1, 0.1, 0.2, 1] })` and confirm the canvas clears.
-3. Resize the canvas and ensure the clear pass still succeeds.
-
-### CI validation
-- WebGPU cannot be reliably validated in headless CI without GPU support.
-- CI should instead run WebGL tests and lint/static checks; keep a manual WebGPU smoke checklist.
-
-## File locations
-- `src/render/backends/WebGPUBackend.js`
-- `src/render/index.js` (`createRenderContextAsync`)
+# WebGPU Backend Status
+
+**Last updated**: 2026-02-15
+
+> Previous version archived at `DOCS/archive/WEBGPU_STATUS_2026-02-15_STALE.md`.
+
+## Current State: Functional but Not Validated End-to-End
+
+The WebGPU backend is **architecturally complete** — real device init, shader compilation, pipeline creation, uniform buffers, render passes. It is not a stub. However, no end-to-end browser validation has confirmed correct pixel output through the WebGPU path.
+
+## What Is Implemented
+
+| Component | Status | File |
+|-----------|--------|------|
+| Device/adapter/context init | Done | `src/render/backends/WebGPUBackend.js` (1410 lines) |
+| Canvas configuration + resize | Done | WebGPUBackend.js |
+| WGSL shader module compilation | Done | WebGPUBackend.js `compileShader()` |
+| Fullscreen quad pipeline | Done | WebGPUBackend.js `createFullscreenPipeline()` |
+| Custom geometry pipeline | Done | WebGPUBackend.js `createPipeline()` |
+| Uniform buffer management | Done | WebGPUBackend.js `createCustomUniformBuffer()` / `updateCustomUniforms()` |
+| Fullscreen quad rendering | Done | WebGPUBackend.js `renderFullscreenQuad()` |
+| Geometry rendering | Done | WebGPUBackend.js `renderGeometry()` / `renderWithPipeline()` |
+| Manual render pass control | Done | WebGPUBackend.js `beginRenderPass()` / `endRenderPass()` |
+| Vertex/index buffer creation | Done | WebGPUBackend.js |
+| Texture + sampler creation | Done | WebGPUBackend.js |
+| Resource cleanup | Done | WebGPUBackend.js `dispose()` |
+| WebGL/WebGPU bridge abstraction | Done | `src/render/UnifiedRenderBridge.js` |
+| Uniform packing (JS → GPU) | Done | `packVIB3Uniforms()` in UnifiedRenderBridge.js |
+| FacetedSystem WebGPU path | Done | `src/faceted/FacetedSystem.js` `initWithBridge()` |
+
+## WGSL Shader Files
+
+All seven WGSL files are real, substantive shaders (not stubs):
+
+| File | Lines | Content |
+|------|-------|---------|
+| `src/shaders/common/fullscreen.vert.wgsl` | 18 | Fullscreen triangle vertex shader |
+| `src/shaders/common/uniforms.wgsl` | 49 | Canonical VIB3Uniforms struct definition |
+| `src/shaders/common/rotation4d.wgsl` | 87 | All six 4D rotation matrices + projection |
+| `src/shaders/common/geometry24.wgsl` | 55 | All 24 geometry SDFs |
+| `src/shaders/faceted/faceted.frag.wgsl` | 206 | Complete faceted fragment shader |
+| `src/shaders/quantum/quantum.frag.wgsl` | 362 | Complete quantum fragment shader |
+| `src/shaders/holographic/holographic.frag.wgsl` | 255 | Complete holographic fragment shader |
+
+## Canonical Uniform Struct Layout
+
+All WGSL uniform structs **must** match `packVIB3Uniforms()` in `UnifiedRenderBridge.js`. The canonical layout uses only `f32` scalars and one `vec2<f32>` to avoid WGSL alignment surprises:
+
+```wgsl
+struct VIB3Uniforms {
+    time: f32,              // index 0
+    _pad0: f32,             // index 1
+    resolution: vec2<f32>,  // index 2-3
+    geometry: f32,          // index 4
+    rot4dXY: f32,           // index 5
+    rot4dXZ: f32,           // index 6
+    rot4dYZ: f32,           // index 7
+    rot4dXW: f32,           // index 8
+    rot4dYW: f32,           // index 9
+    rot4dZW: f32,           // index 10
+    dimension: f32,         // index 11
+    gridDensity: f32,       // index 12
+    morphFactor: f32,       // index 13
+    chaos: f32,             // index 14
+    speed: f32,             // index 15
+    hue: f32,               // index 16
+    intensity: f32,         // index 17
+    saturation: f32,        // index 18
+    mouseIntensity: f32,    // index 19
+    clickIntensity: f32,    // index 20
+    bass: f32,              // index 21
+    mid: f32,               // index 22
+    high: f32,              // index 23
+    layerScale: f32,        // index 24
+    layerOpacity: f32,      // index 25
+    _pad1: f32,             // index 26
+    layerColorR: f32,       // index 27
+    layerColorG: f32,       // index 28
+    layerColorB: f32,       // index 29
+    densityMult: f32,       // index 30
+    speedMult: f32,         // index 31
+    breath: f32,            // index 32
+};
+```
+
+**Rule**: Do NOT use `vec3<f32>` for layerColor — it triggers 16-byte alignment padding that breaks the flat Float32Array packing. Always use three separate f32 fields.
+
+## System Integration
+
+| System | WebGPU Path | Notes |
+|--------|-------------|-------|
+| **Faceted** | Single-canvas via UnifiedRenderBridge | Inline WGSL matches canonical layout. Only system with a complete WebGPU path wired in the demo page. |
+| **Quantum** | Multi-canvas via MultiCanvasBridge | Requires 5 separate canvas DOM elements. Falls back to WebGL on `docs/webgpu-live.html` (single canvas). |
+| **Holographic** | Multi-canvas via MultiCanvasBridge | Same 5-canvas requirement. Falls back to WebGL on demo page. |
+
+## Remaining Work
+
+1. **End-to-end browser validation** — Run FacetedSystem through WebGPU in a Chrome/Edge browser with WebGPU enabled and confirm correct visual output matches WebGL.
+2. **Quantum/Holographic single-canvas path** — Either provide a single-canvas WebGPU fallback or create a demo page with the required 5-canvas DOM structure.
+3. **Automated smoke test** — A Playwright test (with WebGPU-capable browser) that initializes the bridge, renders one frame, and confirms no errors.
+4. **Shader sync verification** — Extend `tools/shader-sync-verify.js` to also verify WGSL struct layouts match `packVIB3Uniforms()`.
+
+## Demo Page
+
+`docs/webgpu-live.html` — Tries WebGPU for FacetedSystem, always WebGL for Quantum/Holographic. Shows green "WEBGPU" or yellow "WEBGL" badge.
+
+## Testing
+
+WebGPU cannot be validated in headless CI without GPU support. Strategy:
+- CI: Run WebGL tests + shader lint + struct layout checks
+- Manual: Smoke test in Chrome/Edge with `chrome://flags/#enable-unsafe-webgpu`
+
+## File Locations
+
+- Backend: `src/render/backends/WebGPUBackend.js`
+- Bridge: `src/render/UnifiedRenderBridge.js`
+- Packing: `packVIB3Uniforms()` in UnifiedRenderBridge.js
+- WGSL shaders: `src/shaders/`
+- Demo: `docs/webgpu-live.html`

package/DOCS/archive/WEBGPU_STATUS_2026-02-15_STALE.md

@@ -0,0 +1,38 @@
+# WebGPU status and testing requirements
+
+This document records the current WebGPU backend state, what is implemented, and what is required
+to validate it in local development or CI.
+
+## Current status
+- **Backend scaffold:** `WebGPUBackend` initializes adapter/device, configures the canvas, manages
+  resize, and supports a clear-pass `renderFrame()` path.
+- **Async context creation:** `createRenderContextAsync()` can instantiate WebGPU contexts using
+  `{ backend: 'webgpu' }`.
+- **Resource tracking:** depth textures are registered in the shared `RenderResourceRegistry`.
+
+## What is still needed
+1. **Pipeline parity:** implement basic shader pipelines (vertex/fragment) and buffer binding that
+   match the WebGL backend command flow.
+2. **Command buffer bridge:** map existing render commands to WebGPU render passes.
+3. **Feature gating:** add host-app controls to toggle WebGPU via feature flags.
+4. **Diagnostics:** add per-frame stats and resource delta reporting for WebGPU.
+
+## Testing requirements
+### Local smoke test
+Prerequisites:
+- A browser with WebGPU enabled (Chrome/Edge with `chrome://flags/#enable-unsafe-webgpu`, or a
+  Chromium build with WebGPU support).
+- A device with WebGPU-capable GPU drivers.
+
+Suggested smoke flow:
+1. Create a canvas and call `createRenderContextAsync(canvas, { backend: 'webgpu' })`.
+2. Call `backend.renderFrame({ clearColor: [0.1, 0.1, 0.2, 1] })` and confirm the canvas clears.
+3. Resize the canvas and ensure the clear pass still succeeds.
+
+### CI validation
+- WebGPU cannot be reliably validated in headless CI without GPU support.
+- CI should instead run WebGL tests and lint/static checks; keep a manual WebGPU smoke checklist.
+
+## File locations
+- `src/render/backends/WebGPUBackend.js`
+- `src/render/index.js` (`createRenderContextAsync`)

package/DOCS/dev-tracks/DEV_TRACK_SESSION_2026-02-16.md

@@ -0,0 +1,108 @@
+# Development Session — 2026-02-16
+
+**Session type**: Architecture Bug Fixes, Shader Consistency, Documentation Sweep
+**Branch**: `claude/vib3-sdk-handoff-p00R8`
+**Operator**: Claude Code (Opus 4.6)
+**Parent work**: Continues from Feb 15 layer architecture + codebase audit
+
+---
+
+## Session Overview
+
+### Phase 1 — Bug Fixes & Geometry Differentiation (committed in `7debad8`)
+
+- Fixed QuantumVisualizer `canvasId` reference error — 6 sites used undefined variable, replaced with `this._canvasLabel`
+- Differentiated tetrahedron lattice (geometry 0) from hypercube (geometry 1) using tetrahedral symmetry planes in GLSL + WGSL
+- Updated CLAUDE.md geometry docs: "24 geometries" → "24 geometry variants (8 base shapes × 3 warp modes)"
+
+### Phase 2 — Shader Module Infrastructure (committed in `7debad8`)
+
+- Added `resolveIncludes()` and `loadAndResolve()` to `src/render/ShaderLoader.js` for `#include` / `// @include` directive resolution
+- Added warp functions (`warpHypersphereCore`, `warpHypertetraCore`, `applyCoreWarp`) to external `geometry24.glsl` and `geometry24.wgsl`
+
+### Phase 3.1 — Holographic Uniform Standardization (committed in `7debad8`)
+
+- Renamed shader uniforms: `u_density` → `u_gridDensity`, `u_morph` → `u_morphFactor`, `u_geometryType` → `u_geometry`
+- Updated JS uniform location lookups to match
+
+### Phase 3.3 — Quantum Layer Detection Bug Fix (committed in `5e1b4c5`)
+
+- **Bug**: Shader float comparison values didn't match JS `roleIntensities`. Only background (fallthrough) and content (1.0) worked; shadow, highlight, accent were broken.
+- **Fix**: Aligned shader values to match JS (0.6, 1.0, 1.3, 1.6), added epsilon comparison (`abs() < 0.05`), moved roleIntensities to module-scope `ROLE_INTENSITIES` constant.
+
+### Phase 3.2 — Remove mapParameterName() (committed in `9d73627`)
+
+- Renamed `generateVariantParams()` return keys: `geometryType`→`geometry`, `density`→`gridDensity`, `morph`→`morphFactor`
+- Renamed `geometryConfigs` object keys to match
+- Updated `generateRoleParams()` to use `vp.gridDensity`
+- Updated uniform location map keys to match SDK names directly
+- Consolidated duplicate geometry uniform set in render()
+- Deleted `mapParameterName()` method
+- Removed debug `console.log` from density scaling
+
+### Phase 2.3 — rotateXZ Sign Convention Alignment (committed in `3198645`)
+
+- **Discovery**: External shader files (ShaderLib, rotation4d.glsl/wgsl, WebGPUBackend, WebGPURenderer.ts) had opposite sign convention for `rotateXZ` compared to all 3 inline system shaders
+- **Fix**: Aligned all external/shared sources to match the inline (working) convention: `col0=(c,0,s,0)`, `col2=(-s,0,c,0)`
+- 7 files fixed: ShaderProgram.js, WebGPUBackend.js, rotation4d.glsl, rotation4d.wgsl, quantum.frag.wgsl, holographic.frag.wgsl, WebGPURenderer.ts
+
+### Phase 5 — Documentation Updates
+
+- SYSTEM_INVENTORY.md: "12 MCP tools" → "36 agent-accessible tools"
+- MASTER_PLAN: "14 tools" → "36 tools", "693+ tests" → "1762 tests"
+- CLAUDE.md: Updated doc map staleness notes, added Feb 16 shipped items, added session work section
+
+---
+
+## Files Modified
+
+| File | Changes |
+|---|---|
+| `src/quantum/QuantumVisualizer.js` | canvasId bug fix, layer detection epsilon fix, ROLE_INTENSITIES constant |
+| `src/faceted/FacetedSystem.js` | Tetrahedron lattice differentiation (GLSL + WGSL) |
+| `src/holograms/HolographicVisualizer.js` | Uniform rename, mapParameterName removal, variantParams key rename |
+| `src/render/ShaderLoader.js` | resolveIncludes(), loadAndResolve() |
+| `src/render/ShaderProgram.js` | ShaderLib rotateXZ sign fix |
+| `src/render/backends/WebGPUBackend.js` | rotateXZ sign fix |
+| `src/shaders/common/rotation4d.glsl` | rotateXZ sign fix |
+| `src/shaders/common/rotation4d.wgsl` | rotateXZ sign fix |
+| `src/shaders/common/geometry24.glsl` | Added warp functions |
+| `src/shaders/common/geometry24.wgsl` | Added warp functions |
+| `src/shaders/faceted/faceted.frag.wgsl` | Tetrahedron differentiation, struct fixes |
+| `src/shaders/quantum/quantum.frag.wgsl` | rotateXZ sign fix |
+| `src/shaders/holographic/holographic.frag.wgsl` | rotateXZ sign fix |
+| `src/ui/adaptive/renderers/webgpu/WebGPURenderer.ts` | rotateXZ sign fix |
+| `CLAUDE.md` | Geometry docs, shipped items, session work, doc map notes |
+| `DOCS/SYSTEM_INVENTORY.md` | Tool count 12 → 36 |
+| `DOCS/MASTER_PLAN_2026-01-31.md` | Tool count 14 → 36, test count 693 → 1762 |
+| `tools/shader-sync-verify.js` | Fixed stale Holographic uniforms (u_density→u_gridDensity, removed u_geometryType, u_morph→u_morphFactor), added missing Faceted uniforms (u_mouse, u_roleIntensity), updated comments |
+
+---
+
+## Commits
+
+| Hash | Message |
+|---|---|
+| `7debad8` | refactor: Phase 1-3 architecture fixes — bugs, shader modules, uniform standardization |
+| `5e1b4c5` | fix(quantum): align layer detection values with JS roleIntensities |
+| `9d73627` | refactor(holographic): remove mapParameterName() translation layer |
+| `3198645` | fix(shaders): align rotateXZ sign convention across all shader sources |
+| `2ce407d` | docs: update stale tool/test counts, add Feb 16 dev track |
+| (pending) | fix(tools): update stale embedded shaders in shader-sync-verify.js |
+
+---
+
+## Test Results
+
+- **Before**: 1762 tests, 77 files (all passing)
+- **After**: 1762 tests, 77 files (all passing)
+- No new tests added this session (bug fixes and refactoring of existing code)
+
+## Decisions Made
+
+1. **Keep per-system color personality** — Quantum's hue normalization (0-1 in JS) is intentional, not a bug
+2. **Keep role-intensity layer detection** — User wants layer relations to follow 4D rotation principles; used epsilon comparison instead of integer indices
+3. **Dropped GeometryPresets phase** — VariationManager already implements 100-slot preset system
+4. **Dropped FrameBudget phase** — Adaptive rendering infrastructure exists in `src/ui/adaptive/`
+5. **Dropped context loss recovery phase** — Already properly implemented in both QuantumVisualizer and HolographicVisualizer
+6. **rotateXZ convention** — Aligned all external files to match inline (working) convention rather than vice versa

package/docs/webgpu-live.html

@@ -477,7 +477,7 @@
 
             // Render active system
             if (activeSystem === 'faceted' && faceted) {
-                faceted.renderFrame();
+                faceted.render();
             } else if (activeSystem === 'quantum' && quantum) {
                 quantum.render();
             } else if (activeSystem === 'holographic' && holographic) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vib3code/sdk",
-  "version": "2.0.3-canary.75a3290",
+  "version": "2.0.3-canary.ef8d292",
   "description": "VIB3+ 4D Visualization SDK - Unified engine with 6D rotation, MCP agentic integration, and cross-platform support",
   "type": "module",
   "main": "src/core/VIB3Engine.js",

package/src/agent/mcp/MCPServer.js

@@ -9,6 +9,8 @@ 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';
 
 /**
@@ -42,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 = {}) {
@@ -484,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'
         };
     }
 
@@ -1217,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) => ({
@@ -1228,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']
         };
     }
@@ -1237,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']
         };
     }
@@ -1296,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']
         };
     }