npm - reflexive - Versions diffs - 0.1.0 - Mend

reflexive 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/CLAUDE.md +77 -0
package/FAILURES.md +245 -0
package/README.md +264 -0
package/Screenshot 2026-01-22 at 6.31.27/342/200/257AM.png +0 -0
package/dashboard.html +620 -0
package/demo-ai-features.js +571 -0
package/demo-app.js +210 -0
package/demo-inject.js +212 -0
package/demo-instrumented.js +272 -0
package/docs/BREAKPOINT-AUDIT.md +293 -0
package/docs/GENESIS.md +110 -0
package/docs/HN-LAUNCH-PLAN-V2.md +631 -0
package/docs/HN-LAUNCH-PLAN.md +492 -0
package/docs/TODO.md +69 -0
package/docs/V8-INSPECTOR-RESEARCH.md +1231 -0
package/logo-carbon.png +0 -0
package/logo0.jpg +0 -0
package/logo1.jpg +0 -0
package/logo2.jpg +0 -0
package/new-ui-template.html +435 -0
package/one-shot.js +1109 -0
package/package.json +47 -0
package/play-story.sh +10 -0
package/src/demo-inject.js +3 -0
package/src/inject.cjs +474 -0
package/src/reflexive.js +6214 -0
package/story-game-reflexive.js +1246 -0
package/story-game-web.js +1030 -0
package/story-mystery-1769171430377.js +162 -0

package/dashboard.html ADDED Viewed

@@ -0,0 +1,620 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Reflexive Nexus - Story Dashboard</title>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: 'Courier New', monospace;
+      background: #000;
+      overflow: hidden;
+      color: #fff;
+    }
+    #three-canvas {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 0;
+    }
+    .overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+      pointer-events: none;
+    }
+    .ui-container {
+      position: relative;
+      z-index: 2;
+      padding: 40px;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      pointer-events: none;
+    }
+    .ui-container > * {
+      pointer-events: auto;
+    }
+    .header {
+      text-align: center;
+      margin-bottom: 30px;
+    }
+    h1 {
+      font-size: 4em;
+      text-shadow:
+        0 0 10px rgba(0, 255, 255, 0.8),
+        0 0 20px rgba(0, 255, 255, 0.6),
+        0 0 30px rgba(0, 255, 255, 0.4),
+        0 0 40px rgba(0, 200, 255, 0.3);
+      animation: pulse 3s ease-in-out infinite;
+      letter-spacing: 0.1em;
+    }
+    @keyframes pulse {
+      0%, 100% { text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.6); }
+      50% { text-shadow: 0 0 20px rgba(0, 255, 255, 1), 0 0 40px rgba(0, 255, 255, 0.8); }
+    }
+    .content {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 30px;
+      flex: 1;
+    }
+    .panel {
+      background: rgba(0, 20, 40, 0.7);
+      border: 2px solid rgba(0, 255, 255, 0.4);
+      border-radius: 20px;
+      padding: 30px;
+      backdrop-filter: blur(10px);
+      box-shadow:
+        0 0 20px rgba(0, 255, 255, 0.2),
+        inset 0 0 20px rgba(0, 255, 255, 0.05);
+    }
+    .panel h2 {
+      color: #00ffff;
+      margin-bottom: 20px;
+      font-size: 1.8em;
+      text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+    }
+    .story-text {
+      font-size: 1.2em;
+      line-height: 1.8;
+      color: #a0d8ff;
+      margin-bottom: 20px;
+    }
+    .metrics {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+    .metric {
+      background: rgba(0, 0, 0, 0.5);
+      padding: 15px;
+      border-radius: 10px;
+      border-left: 4px solid #00ffff;
+    }
+    .metric-label {
+      color: #00ffff;
+      font-size: 0.9em;
+      margin-bottom: 8px;
+    }
+    .metric-bar {
+      height: 30px;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 15px;
+      overflow: hidden;
+      position: relative;
+    }
+    .metric-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #00ff88, #00ffff, #0088ff);
+      transition: width 1s ease;
+      box-shadow: 0 0 20px rgba(0, 255, 200, 0.6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      color: #000;
+    }
+    .choices {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    .choice-btn {
+      padding: 20px;
+      background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 200, 255, 0.15));
+      border: 2px solid rgba(0, 255, 200, 0.5);
+      border-radius: 12px;
+      color: #fff;
+      font-size: 1.2em;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      text-align: left;
+      font-family: 'Courier New', monospace;
+    }
+    .choice-btn:hover {
+      background: linear-gradient(135deg, rgba(0, 255, 136, 0.3), rgba(0, 200, 255, 0.3));
+      transform: translateX(10px);
+      box-shadow: 0 0 30px rgba(0, 255, 200, 0.5);
+      border-color: #00ffff;
+    }
+    .chat-panel {
+      grid-column: 1 / -1;
+      max-height: 200px;
+    }
+    .chat-input {
+      width: 100%;
+      padding: 15px;
+      background: rgba(0, 0, 0, 0.6);
+      border: 2px solid rgba(0, 255, 255, 0.4);
+      border-radius: 10px;
+      color: #fff;
+      font-size: 1.1em;
+      font-family: 'Courier New', monospace;
+      transition: all 0.1s ease-out, transform 0.1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+    }
+    .chat-input:focus {
+      outline: none;
+      border-color: #00ffff;
+      box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
+    }
+    .chat-send {
+      margin-top: 10px;
+      padding: 15px 30px;
+      background: linear-gradient(135deg, #00ff88, #00ffff);
+      border: none;
+      border-radius: 10px;
+      color: #000;
+      font-weight: bold;
+      cursor: pointer;
+      font-size: 1.1em;
+      font-family: 'Courier New', monospace;
+    }
+    .chat-send:hover {
+      box-shadow: 0 0 30px rgba(0, 255, 200, 0.8);
+      transform: translateY(-2px);
+    }
+    .start-screen {
+      position: relative;
+      z-index: 10;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+    }
+    .start-btn {
+      padding: 30px 60px;
+      background: linear-gradient(135deg, #00ff88, #00ffff);
+      border: none;
+      border-radius: 20px;
+      color: #000;
+      font-size: 2em;
+      font-weight: bold;
+      cursor: pointer;
+      font-family: 'Courier New', monospace;
+      box-shadow: 0 0 40px rgba(0, 255, 200, 0.6);
+    }
+    .start-btn:hover {
+      box-shadow: 0 0 60px rgba(0, 255, 200, 1);
+      transform: scale(1.05);
+    }
+    .hidden { display: none; }
+  </style>
+</head>
+<body>
+  <canvas id="three-canvas"></canvas>
+  <div id="start-screen" class="start-screen">
+    <h1>⚡ REFLEXIVE NEXUS ⚡</h1>
+    <p style="font-size: 1.5em; margin: 20px 0; color: #00ffff;">AI-POWERED STORY ENGINE</p>
+    <button class="start-btn" onclick="startGame()">► INITIALIZE</button>
+  </div>
+  <div id="game-screen" class="ui-container hidden">
+    <div class="header">
+      <h1>⚡ NEXUS ACTIVE ⚡</h1>
+    </div>
+    <div class="content">
+      <div class="panel">
+        <h2>◉ NARRATIVE STREAM</h2>
+        <div class="story-text" id="story-text">Initializing story engine...</div>
+        <div class="chat-panel">
+          <input type="text" id="chat-input" class="chat-input" placeholder="► Enter command..." />
+          <button class="chat-send" onclick="sendCommand()">⚡ EXECUTE</button>
+        </div>
+      </div>
+      <div class="panel">
+        <h2>◉ SYSTEM METRICS</h2>
+        <div class="metrics">
+          <div class="metric">
+            <div class="metric-label">⚡ QUALITY INDEX</div>
+            <div class="metric-bar">
+              <div class="metric-fill" id="quality-bar" style="width: 50%">50%</div>
+            </div>
+          </div>
+          <div class="metric">
+            <div class="metric-label">📍 SCENE PROGRESSION</div>
+            <div class="metric-bar">
+              <div class="metric-fill" id="scene-bar" style="width: 10%"><span id="scene-count">0</span></div>
+            </div>
+          </div>
+          <div class="metric">
+            <div class="metric-label">💫 ENGAGEMENT FLOW</div>
+            <div class="metric-bar">
+              <div class="metric-fill" id="engagement-bar" style="width: 50%">50%</div>
+            </div>
+          </div>
+        </div>
+        <h2 style="margin-top: 30px;">◉ ACTION VECTORS</h2>
+        <div class="choices" id="choices"></div>
+      </div>
+    </div>
+  </div>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+  <script>
+    // Three.js setup
+    let scene, camera, renderer;
+    let particleSystem, galaxySystem;
+    let time = 0;
+    function initThreeJS() {
+      scene = new THREE.Scene();
+      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+      camera.position.z = 30;
+      renderer = new THREE.WebGLRenderer({
+        canvas: document.getElementById('three-canvas'),
+        antialias: true,
+        alpha: true
+      });
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      renderer.setClearColor(0x000000, 1);
+      // Create main particle system with custom shader
+      createParticleSystem();
+      // Create rotating galaxy
+      createGalaxy();
+      // Animation loop
+      animate();
+      window.addEventListener('resize', onWindowResize);
+    }
+    function createParticleSystem() {
+      const particleCount = 5000;
+      const geometry = new THREE.BufferGeometry();
+      const positions = new Float32Array(particleCount * 3);
+      const colors = new Float32Array(particleCount * 3);
+      const sizes = new Float32Array(particleCount);
+      for (let i = 0; i < particleCount; i++) {
+        positions[i * 3] = (Math.random() - 0.5) * 100;
+        positions[i * 3 + 1] = (Math.random() - 0.5) * 100;
+        positions[i * 3 + 2] = (Math.random() - 0.5) * 100;
+        const color = new THREE.Color();
+        color.setHSL(0.5 + Math.random() * 0.2, 1.0, 0.5 + Math.random() * 0.3);
+        colors[i * 3] = color.r;
+        colors[i * 3 + 1] = color.g;
+        colors[i * 3 + 2] = color.b;
+        sizes[i] = Math.random() * 3 + 1;
+      }
+      geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+      geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+      geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));
+      const material = new THREE.ShaderMaterial({
+        uniforms: {
+          time: { value: 0 },
+          mood: { value: 0.5 },
+          quality: { value: 0.5 }
+        },
+        vertexShader: `
+          attribute float size;
+          varying vec3 vColor;
+          uniform float time;
+          uniform float mood;
+          uniform float quality;
+          void main() {
+            vColor = color;
+            vec3 pos = position;
+            // Swirling motion based on mood
+            float angle = time * 0.2 + length(pos.xy) * 0.02;
+            float radius = length(pos.xy);
+            pos.x += sin(angle + pos.z * 0.01) * mood * 5.0;
+            pos.y += cos(angle + pos.z * 0.01) * mood * 5.0;
+            pos.z += sin(time * 0.5 + radius * 0.05) * quality * 3.0;
+            vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);
+            gl_PointSize = size * (300.0 / -mvPosition.z) * (0.5 + mood + quality * 0.5);
+            gl_Position = projectionMatrix * mvPosition;
+          }
+        `,
+        fragmentShader: `
+          varying vec3 vColor;
+          uniform float mood;
+          uniform float quality;
+          void main() {
+            vec2 center = gl_PointCoord - vec2(0.5);
+            float dist = length(center);
+            if (dist > 0.5) discard;
+            float alpha = 1.0 - (dist * 2.0);
+            alpha = pow(alpha, 2.0);
+            alpha *= (0.4 + mood * 0.3 + quality * 0.3);
+            // Glow effect
+            vec3 glowColor = vColor * (1.0 + mood * 0.5);
+            gl_FragColor = vec4(glowColor, alpha);
+          }
+        `,
+        transparent: true,
+        vertexColors: true,
+        blending: THREE.AdditiveBlending,
+        depthTest: false
+      });
+      particleSystem = new THREE.Points(geometry, material);
+      scene.add(particleSystem);
+    }
+    function createGalaxy() {
+      const galaxyCount = 3000;
+      const geometry = new THREE.BufferGeometry();
+      const positions = new Float32Array(galaxyCount * 3);
+      const colors = new Float32Array(galaxyCount * 3);
+      for (let i = 0; i < galaxyCount; i++) {
+        const radius = Math.random() * 50 + 10;
+        const spinAngle = radius * 0.3;
+        const branchAngle = (i % 3) * (Math.PI * 2 / 3);
+        positions[i * 3] = Math.cos(branchAngle + spinAngle) * radius;
+        positions[i * 3 + 1] = (Math.random() - 0.5) * 5;
+        positions[i * 3 + 2] = Math.sin(branchAngle + spinAngle) * radius;
+        const color = new THREE.Color();
+        color.setHSL(0.5 + Math.random() * 0.3, 0.8, 0.6);
+        colors[i * 3] = color.r;
+        colors[i * 3 + 1] = color.g;
+        colors[i * 3 + 2] = color.b;
+      }
+      geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+      geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+      const material = new THREE.PointsMaterial({
+        size: 2,
+        vertexColors: true,
+        transparent: true,
+        opacity: 0.6,
+        blending: THREE.AdditiveBlending
+      });
+      galaxySystem = new THREE.Points(geometry, material);
+      galaxySystem.position.z = -20;
+      scene.add(galaxySystem);
+    }
+    function animate() {
+      requestAnimationFrame(animate);
+      time += 0.016;
+      // Apply screen shake to camera
+      applyShakeToCamera();
+      if (particleSystem) {
+        particleSystem.material.uniforms.time.value = time;
+        particleSystem.rotation.y += 0.0005;
+        particleSystem.rotation.x += 0.0002;
+      }
+      if (galaxySystem) {
+        galaxySystem.rotation.y += 0.002;
+        galaxySystem.rotation.z += 0.001;
+      }
+      renderer.render(scene, camera);
+    }
+    function onWindowResize() {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    }
+    function updateParticleMood(quality, engagement) {
+      if (particleSystem) {
+        particleSystem.material.uniforms.mood.value = engagement;
+        particleSystem.material.uniforms.quality.value = quality;
+        // Update particle colors based on quality
+        const colors = particleSystem.geometry.attributes.color;
+        for (let i = 0; i < colors.count; i++) {
+          const color = new THREE.Color();
+          if (quality > 0.7) {
+            color.setHSL(0.3 + Math.random() * 0.15, 1.0, 0.5);
+          } else if (quality < 0.3) {
+            color.setHSL(0.0 + Math.random() * 0.1, 1.0, 0.5);
+          } else {
+            color.setHSL(0.5 + Math.random() * 0.2, 1.0, 0.5);
+          }
+          colors.array[i * 3] = color.r;
+          colors.array[i * 3 + 1] = color.g;
+          colors.array[i * 3 + 2] = color.b;
+        }
+        colors.needsUpdate = true;
+      }
+    }
+    // Game logic
+    let sessionId = null;
+    function startGame() {
+      console.log('Starting game...');
+      fetch('/api/start', { method: 'POST' })
+        .then(res => {
+          console.log('Got response:', res.status);
+          return res.json();
+        })
+        .then(data => {
+          console.log('Game data:', data);
+          sessionId = data.sessionId;
+          document.getElementById('start-screen').classList.add('hidden');
+          document.getElementById('game-screen').classList.remove('hidden');
+          displayGameState(data.state);
+        })
+        .catch(err => {
+          console.error('Error starting game:', err);
+          alert('Error starting game: ' + err.message);
+        });
+    }
+    function makeChoice(index) {
+      fetch('/api/choice', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId, choiceIndex: index })
+      })
+        .then(res => res.json())
+        .then(data => displayGameState(data.state));
+    }
+    function sendCommand() {
+      const input = document.getElementById('chat-input');
+      const prompt = input.value.trim();
+      if (!prompt) return;
+      fetch('/api/prompt', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId, prompt })
+      })
+        .then(res => res.json())
+        .then(data => {
+          displayGameState(data.state);
+          input.value = '';
+        });
+    }
+    // Screen shake and input effects
+    let shakeIntensity = 0;
+    let shakeDecay = 0.95;
+    function triggerShake(intensity = 0.5) {
+      shakeIntensity = intensity;
+    }
+    function applyShakeToCamera() {
+      if (shakeIntensity > 0.01) {
+        camera.position.x += (Math.random() - 0.5) * shakeIntensity * 2;
+        camera.position.y += (Math.random() - 0.5) * shakeIntensity * 2;
+        camera.rotation.z += (Math.random() - 0.5) * shakeIntensity * 0.02;
+        shakeIntensity *= shakeDecay;
+      } else {
+        // Reset to original position smoothly
+        camera.position.x *= 0.9;
+        camera.position.y *= 0.9;
+        camera.rotation.z *= 0.9;
+      }
+    }
+    document.addEventListener('DOMContentLoaded', () => {
+      const chatInput = document.getElementById('chat-input');
+      // Vibrate and shake on keypress
+      chatInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          sendCommand();
+          return;
+        }
+        // Trigger screen shake
+        triggerShake(0.3);
+        // Particle burst effect
+        if (particleSystem) {
+          particleSystem.material.uniforms.mood.value = Math.min(1.0, particleSystem.material.uniforms.mood.value + 0.1);
+        }
+        // Input vibration effect
+        chatInput.style.transform = 'scale(1.02)';
+        setTimeout(() => {
+          chatInput.style.transform = 'scale(1)';
+        }, 100);
+        // Visual flash
+        chatInput.style.borderColor = 'rgba(0, 255, 255, 1)';
+        chatInput.style.boxShadow = '0 0 30px rgba(0, 255, 255, 0.8)';
+        setTimeout(() => {
+          chatInput.style.borderColor = 'rgba(0, 255, 255, 0.4)';
+          chatInput.style.boxShadow = '0 0 20px rgba(0, 255, 255, 0.4)';
+        }, 150);
+      });
+      chatInput.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter') sendCommand();
+      });
+    });
+    function displayGameState(state) {
+      document.getElementById('story-text').textContent = state.text;
+      const choicesEl = document.getElementById('choices');
+      choicesEl.innerHTML = '';
+      if (state.choices && state.choices.length > 0) {
+        state.choices.forEach((choice, index) => {
+          const btn = document.createElement('button');
+          btn.className = 'choice-btn';
+          btn.textContent = '▸ ' + choice.text;
+          btn.onclick = () => makeChoice(index);
+          choicesEl.appendChild(btn);
+        });
+      }
+      if (state.quality !== undefined) {
+        const qualityPct = Math.round(state.quality * 100);
+        const engagementPct = Math.round((state.engagement || 0.5) * 100);
+        const sceneCount = state.sceneCount || 0;
+        document.getElementById('quality-bar').style.width = qualityPct + '%';
+        document.getElementById('quality-bar').textContent = qualityPct + '%';
+        document.getElementById('engagement-bar').style.width = engagementPct + '%';
+        document.getElementById('engagement-bar').textContent = engagementPct + '%';
+        document.getElementById('scene-count').textContent = sceneCount;
+        document.getElementById('scene-bar').style.width = Math.min(sceneCount * 10, 100) + '%';
+        // Update Three.js particles
+        updateParticleMood(state.quality, state.engagement || 0.5);
+      }
+    }
+    // Initialize Three.js on load
+    initThreeJS();
+  </script>
+</body>
+</html>