1 files changed, 286 insertions, 0 deletions
diff --git a/js/scripting-lang/web/src/app.js b/js/scripting-lang/web/src/app.js
new file mode 100644
index 0000000..086cba1
--- /dev/null
+++ b/js/scripting-lang/web/src/app.js
@@ -0,0 +1,286 @@
+// app.js
+// Entrypoint for the app
+
+import { initialState, cloneState } from './state.js';
+import { update } from './update.js';
+import { view } from './view.js';
+import { fetchPokemon, fetchEvolutionData, executeBabaYagaScript, getExampleScripts, getCurrentHarness } from './api.js';
+import { initDevMode } from './dev.js';
+
+const root = document.getElementById('app');
+let state = cloneState(initialState);
+let dev;
+
+/**
+ * Entrypoint for the app.
+ *
+ * This file implements a minimal Elm-style architecture using only browser APIs and ES modules.
+ * - All state is immutable and updated by a pure update function.
+ * - The entire UI is re-rendered as a string on each state change for simplicity and predictability.
+ * - Event delegation is used to keep wiring minimal and functional.
+ * - No 3rd party code: everything is browser-native for cozy portability and clarity.
+ *
+ * Why this approach?
+ * - Functional, pure update/view logic is easier for me to reason about and test.
+ * - Re-rendering the whole UI avoids bugs from manual DOM updates and keeps state/UI in sync.
+ * - Minimal code and clear data flow make it easy to extend or adapt for new projects.
+ */
+
+// Enable devMode if ?dev=1 is in the URL
+/**
+ * devMode enables logging of all actions and state transitions for debugging.
+ *
+ * Why? This makes the app's state flow transparent, helping you understand and debug the app without extra tooling.
+ */
+const devMode = window.location.search.includes('dev=1');
+
+/**
+ * Generalized render function for Elm-style apps.
+ *
+ * @param {Object} config - Render configuration
+ * @param {HTMLElement} config.root - Root DOM element
+ * @param {any} config.state - Current app state
+ * @param {Function} config.view - View function (state => HTML string)
+ * @param {Array} [config.events] - Array of { selector, event, handler }
+ * @param {Function} [config.postRender] - Optional function({ root, state }) for post-render logic
+ */
+function render({ root, state, view, events = [], postRender }) {
+  root.innerHTML = view(state);
+  events.forEach(({ selector, event, handler }) => {
+    const el = root.querySelector(selector);
+    if (el) el.addEventListener(event, handler);
+  });
+  if (typeof postRender === 'function') {
+    postRender({ root, state });
+  }
+}
+
+// --- App-specific config for render ---
+function postRender({ root, state }) {
+  // Preserve scroll position
+  const scrollPosition = window.scrollY;
+  
+  const input = root.querySelector('#pokemon-query');
+  const error = root.querySelector('.error');
+  
+  // Only handle error focus - don't interfere with user typing
+  if (error) {
+    error.focus();
+  } else if (input && !document.activeElement) {
+    // Only auto-focus search input if nothing is currently focused
+    input.focus();
+    input.value = state.query;
+    input.setSelectionRange(input.value.length, input.value.length);
+  }
+  
+  // Restore scroll position
+  window.scrollTo(0, scrollPosition);
+}
+
+function doRender() {
+  render({
+    root,
+    state,
+    view,
+    events: [
+      { selector: '#search-form', event: 'submit', handler: handleSubmit },
+      { selector: '#pokemon-query', event: 'input', handler: handleInput },
+      { selector: '#execute-script', event: 'click', handler: handleExecuteScript },
+      { selector: '#clear-script', event: 'click', handler: handleClearScript },
+      { selector: '#example-scripts', event: 'change', handler: handleLoadExample },
+      { selector: '#baba-yaga-script', event: 'input', handler: handleScriptInput },
+    ],
+    postRender,
+  });
+}
+
+/**
+ * Dispatches an action to update state and re-render.
+ *
+ * Why centralize dispatch? This enforces a single source of truth for state changes, making the app predictable and easy to debug.
+ *
+ * Why log actions/state in devMode? This provides a transparent, time-travel-like view of app logic without needing any extra tooling.
+ */
+function dispatch(action) {
+  const prevState = state;
+  state = update(state, action);
+  
+  if (devMode && dev && typeof dev.pushState === 'function') {
+    dev.pushState(state);
+    console.groupCollapsed(`Action: ${action.type}`);
+    console.log('Payload:', action.payload);
+    console.log('Prev state:', prevState);
+    console.log('Next state:', state);
+    console.groupEnd();
+  }
+  
+  // Only re-render for actions that actually change the UI
+  const shouldRender = [
+    'FETCH_SUCCESS',
+    'FETCH_ERROR', 
+    'FETCH_EVOLUTION_SUCCESS',
+    'FETCH_EVOLUTION_ERROR',
+    'EXECUTE_SCRIPT_SUCCESS',
+    'EXECUTE_SCRIPT_ERROR',
+    'CLEAR_SCRIPT_OUTPUT',
+    'UPDATE_BABA_YAGA_SCRIPT' // Only when loading examples
+  ].includes(action.type);
+  
+  if (shouldRender) {
+    doRender();
+  }
+}
+
+/**
+ * Handles input events by updating state without re-rendering.
+ */
+function handleInput(e) {
+  // Update state directly without triggering re-render
+  state.query = e.target.value;
+}
+
+/**
+ * Handles script input events by updating state without re-rendering.
+ */
+function handleScriptInput(e) {
+  // Update state directly without triggering re-render
+  state.babaYagaScript = e.target.value;
+}
+
+/**
+ * Handles form submission, triggers async fetch, and dispatches state updates.
+ *
+ * Why handle async here? Keeps update/view pure and centralizes side-effect.
+ */
+async function handleSubmit(e) {
+  e.preventDefault();
+  if (!state.query.trim()) return;
+  dispatch({ type: 'FETCH_START' });
+  try {
+    const data = await fetchPokemon(state.query.trim());
+    dispatch({ type: 'FETCH_SUCCESS', payload: data });
+    
+    // Automatically fetch evolution chain after successful Pokémon search
+    try {
+      dispatch({ type: 'FETCH_EVOLUTION_START' });
+      const evolutionData = await fetchEvolutionData(data.name);
+      dispatch({ type: 'FETCH_EVOLUTION_SUCCESS', payload: evolutionData });
+    } catch (evolutionErr) {
+      dispatch({ type: 'FETCH_EVOLUTION_ERROR', payload: evolutionErr.message });
+    }
+  } catch (err) {
+    dispatch({ type: 'FETCH_ERROR', payload: err.message });
+  }
+}
+
+
+
+/**
+ * Handles Baba Yaga script execution.
+ */
+async function handleExecuteScript(e) {
+  e.preventDefault();
+  if (!state.evolutionChain || !state.babaYagaScript.trim()) return;
+  
+  dispatch({ type: 'EXECUTE_SCRIPT_START' });
+  try {
+    // state.evolutionChain contains the wrapper object, pass it directly
+    const result = await executeBabaYagaScript(state.babaYagaScript, state.evolutionChain);
+    dispatch({ type: 'EXECUTE_SCRIPT_SUCCESS', payload: result });
+    
+    // Update dev mode with the harness instance for enhanced debugging
+    console.log('[App] Checking dev mode integration:', {
+      devMode,
+      dev: !!dev,
+      updateHarness: dev ? typeof dev.updateHarness : 'no dev',
+      updateHarnessValue: dev ? dev.updateHarness : 'no dev'
+    });
+    
+    if (devMode && dev && typeof dev.updateHarness === 'function') {
+      const currentHarness = getCurrentHarness();
+      console.log('[App] Script executed, current harness:', !!currentHarness);
+      try {
+        dev.updateHarness(currentHarness);
+        console.log('[App] updateHarness called successfully');
+      } catch (error) {
+        console.error('[App] Error calling updateHarness:', error);
+      }
+    } else {
+      console.log('[App] Dev mode or updateHarness not available:', {
+        devMode,
+        dev: !!dev,
+        updateHarness: dev ? typeof dev.updateHarness : false
+      });
+      
+      // Try to access the function directly from window.dev
+      if (window.dev && typeof window.dev.updateHarness === 'function') {
+        console.log('[App] Found updateHarness on window.dev, trying direct call');
+        const currentHarness = getCurrentHarness();
+        try {
+          window.dev.updateHarness(currentHarness);
+          console.log('[App] Direct updateHarness call successful');
+        } catch (error) {
+          console.error('[App] Error in direct updateHarness call:', error);
+        }
+      }
+    }
+  } catch (err) {
+    dispatch({ type: 'EXECUTE_SCRIPT_ERROR', payload: err.message });
+  }
+}
+
+/**
+ * Handles script clearing.
+ */
+function handleClearScript(e) {
+  e.preventDefault();
+  dispatch({ type: 'UPDATE_BABA_YAGA_SCRIPT', payload: '' });
+  dispatch({ type: 'CLEAR_SCRIPT_OUTPUT' });
+}
+
+/**
+ * Handles loading example scripts.
+ */
+function handleLoadExample(e) {
+  const selectedExample = e.target.value;
+  if (!selectedExample) return;
+  
+  const examples = getExampleScripts();
+  if (examples[selectedExample]) {
+    // Update state and trigger re-render to show the example
+    state.babaYagaScript = examples[selectedExample];
+    doRender();
+  }
+  
+  // Reset the select
+  e.target.value = '';
+}
+
+// Initialize dev mode before first render
+if (devMode) {
+  dev = initDevMode({
+    getState: () => state,
+    setState: s => { state = s; },
+    render: doRender,
+    harness: null // Will be updated when harness is created
+  });
+}
+
+// Initial render
+doRender();
+
+function updateHistoryInfo() {
+  if (!devMode || !dev) return;
+  dev.update();
+}
+
+function setHistoryPointer(idx) {
+  const info = dev.getHistoryInfo();
+  if (idx < 1 || idx > info.length) return;
+  const newState = dev.setPointer(idx - 1);
+  if (newState) {
+    state = newState;
+    doRender();
+    updateHistoryInfo();
+  }
+}