@mmapp/react-compiler 0.1.0-alpha.17 → 0.1.0-alpha.19

package/dist/dev-server.js

@@ -6468,7 +6468,8 @@ function convertOnEvent(sub) {
   };
 }
 function emitIR(extracted) {
-  const { slug, name, version, description, category, fields, states, transitions } = extracted;
+  const { slug, name, version, description, category: rawCategory, fields, states, transitions } = extracted;
+  const category = Array.isArray(rawCategory) ? rawCategory : [rawCategory];
   const stateArray = Array.from(states.values());
   if (stateArray.length === 0) {
     stateArray.push({
@@ -6856,13 +6857,15 @@ function emitCanonical(extracted, sourceFilename) {
       }
     ]
   });
-  const category = extracted.category;
+  const rawCat = extracted.category;
   let categoryArray;
-  if (category.includes("/")) {
-    const [primary, ...tags] = category.split("/");
+  if (Array.isArray(rawCat)) {
+    categoryArray = rawCat;
+  } else if (rawCat.includes("/")) {
+    const [primary, ...tags] = rawCat.split("/");
     categoryArray = (0, import_player_core.normalizeCategory)(primary, ...tags);
   } else {
-    categoryArray = [category];
+    categoryArray = [rawCat];
   }
   return {
     slug: ir.slug,
@@ -7009,7 +7012,7 @@ function compilerStateToWorkflow(state, metadata) {
     name: metadata.name || "Workflow",
     version: metadata.version || "0.1.0",
     description: metadata.description,
-    category: metadata.category || "workflow",
+    category: metadata.categoryArray ? metadata.categoryArray : [metadata.category || "workflow"],
     fields: state.fields || [],
     states: state.states || /* @__PURE__ */ new Map(),
     transitions: state.transitions || [],
@@ -7787,7 +7790,7 @@ function extractRouterWorkflow(pages, options = {}) {
     name: "Router",
     version: "1.0.0",
     description: "Auto-derived router workflow from file-based routing",
-    category: "router",
+    category: ["router"],
     fields,
     states,
     transitions,
@@ -7886,7 +7889,8 @@ function compileModel(filename, source, options = {}) {
     parserOpts: { plugins: parserPlugins, attachComment: true }
   });
   const ir = babelResult?.metadata?.mindmatrixIR ?? createEmptyModelIR(interfaceName);
-  ir.category = options.categoryOverride || annotation.category || "data";
+  const catOverride = options.categoryOverride || annotation.category || "data";
+  ir.category = Array.isArray(catOverride) ? catOverride : [catOverride];
   if (options.slugOverride) {
     ir.slug = options.slugOverride;
   }
@@ -7950,7 +7954,7 @@ function createEmptyModelIR(interfaceName) {
     name: interfaceName,
     version: "1.0.0",
     description: "Data model: " + interfaceName,
-    category: "data",
+    category: ["data"],
     fields: [],
     states: [{
       name: "draft",
@@ -8118,7 +8122,7 @@ function buildRouterIR(routes, layouts, allParams, slugPrefix) {
     name: "Router",
     version: "1.0.0",
     description: "Auto-generated router from app/ directory structure",
-    category: "router",
+    category: ["router"],
     fields,
     states,
     transitions,
@@ -8367,7 +8371,7 @@ function extractAction(source, filename) {
         slug,
         name: humanName,
         version: "0.1.0",
-        category: "action",
+        category: ["action"],
         fields,
         states: states2,
         transitions: transitions2,
@@ -8419,7 +8423,7 @@ function extractAction(source, filename) {
     slug,
     name: humanName,
     version: "0.1.0",
-    category: "action",
+    category: ["action"],
     fields,
     states,
     transitions,
@@ -9856,7 +9860,7 @@ function applyConfig(ir, config) {
   if (config.name) ir.name = config.name;
   if (config.version) ir.version = config.version;
   if (config.description !== void 0) ir.description = config.description;
-  if (config.category) ir.category = config.category;
+  if (config.category) ir.category = Array.isArray(config.category) ? config.category : [config.category];
   if (!ir.metadata) ir.metadata = {};
   ir.metadata.stable_id = "def-" + ir.slug;
   ir.metadata.provenance = {
@@ -9872,7 +9876,7 @@ function createEmptyIR(config) {
     name: config.name || "Project",
     version: config.version || "0.1.0",
     description: config.description,
-    category: config.category || "workflow",
+    category: Array.isArray(config.category) ? config.category : [config.category || "workflow"],
     fields: [],
     states: [{
       name: "draft",
@@ -10030,8 +10034,10 @@ function buildComposedResult(files, fileIRs, config, errors, warnings, options =
     if (isWorkflowFile(filename)) {
       workflowIRs.push(ir);
     } else if (isModelFile2(filename)) {
-      if (!ir.category || ir.category === "workflow") {
-        ir.category = "data";
+      const cat = ir.category;
+      const isDefault = !cat || cat === "workflow" || Array.isArray(cat) && cat.length === 1 && cat[0] === "workflow";
+      if (isDefault) {
+        ir.category = ["data"];
       }
       modelIRs.push(ir);
     } else if (isServerActionFile2(filename)) {
@@ -11171,7 +11177,7 @@ function mindmatrixReact(options) {
         slug: ir.slug,
         name: ir.name,
         version: ir.version,
-        category: ir.category || "workflow",
+        category: ir.category || ["workflow"],
         fields: ir.fields || [],
         states: ir.states || [],
         transitions: ir.transitions || [],
@@ -11705,425 +11711,6 @@ async function startWatchMode(options) {
   });
 }
 
-// src/cli/local-server.ts
-var http = __toESM(require("http"));
-var import_node_crypto = require("crypto");
-var MemoryStore = class {
-  constructor() {
-    this.definitions = /* @__PURE__ */ new Map();
-    this.instances = /* @__PURE__ */ new Map();
-    this.slugIndex = /* @__PURE__ */ new Map();
-  }
-  // slug → id
-  // ── Definitions ──────────────────────────────────────────────────────
-  createDefinition(input) {
-    if (this.slugIndex.has(input.slug)) {
-      const existing = this.definitions.get(this.slugIndex.get(input.slug));
-      if (existing) return existing;
-    }
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const def = {
-      id: input.id ?? (0, import_node_crypto.randomUUID)(),
-      slug: input.slug,
-      name: input.name,
-      version: input.version ?? "1.0.0",
-      description: input.description ?? null,
-      category: input.category ?? "workflow",
-      fields: input.fields ?? [],
-      states: input.states ?? [],
-      transitions: input.transitions ?? [],
-      roles: input.roles ?? [],
-      experience: input.experience ?? null,
-      metadata: input.metadata ?? {},
-      child_definitions: input.child_definitions ?? [],
-      is_immutable: input.is_immutable ?? false,
-      tags: input.tags ?? [],
-      inline_tags: input.inline_tags ?? [],
-      created_at: now,
-      updated_at: now
-    };
-    this.definitions.set(def.id, def);
-    this.slugIndex.set(def.slug, def.id);
-    return def;
-  }
-  getDefinition(idOrSlug) {
-    const byId = this.definitions.get(idOrSlug);
-    if (byId) return byId;
-    const id = this.slugIndex.get(idOrSlug);
-    if (id) return this.definitions.get(id);
-    return void 0;
-  }
-  listDefinitions(opts) {
-    let items = Array.from(this.definitions.values());
-    if (opts?.category) {
-      items = items.filter((d) => d.category === opts.category);
-    }
-    const total = items.length;
-    const offset = opts?.offset ?? 0;
-    const limit = opts?.limit ?? 50;
-    items = items.slice(offset, offset + limit);
-    return { items, total };
-  }
-  patchDefinition(id, patch) {
-    const def = this.definitions.get(id);
-    if (!def) return void 0;
-    Object.assign(def, patch, { updated_at: (/* @__PURE__ */ new Date()).toISOString() });
-    return def;
-  }
-  deleteDefinition(id) {
-    const def = this.definitions.get(id);
-    if (!def) return false;
-    this.slugIndex.delete(def.slug);
-    this.definitions.delete(id);
-    return true;
-  }
-  // ── Instances ────────────────────────────────────────────────────────
-  createInstance(input) {
-    const def = this.getDefinition(input.definition_id) ?? this.getDefinition(input.definition_slug);
-    if (!def) return null;
-    const initialState = def.states.find((s) => s.type === "START" || s.type === "initial");
-    const stateName = initialState?.name ?? "initial";
-    const stateData = {};
-    for (const field of def.fields) {
-      if (field.default_value !== void 0) {
-        stateData[field.name] = field.default_value;
-      }
-    }
-    Object.assign(stateData, input.state_data ?? {});
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const inst = {
-      id: (0, import_node_crypto.randomUUID)(),
-      definition_id: def.id,
-      definition_slug: def.slug,
-      current_state: stateName,
-      state_data: stateData,
-      execution_lock_version: 0,
-      event_log: [{
-        event_type: "transition",
-        message: `Instance created in state '${stateName}'`,
-        timestamp: now
-      }],
-      created_at: now,
-      updated_at: now
-    };
-    this.instances.set(inst.id, inst);
-    return inst;
-  }
-  getInstance(id) {
-    return this.instances.get(id);
-  }
-  listInstances(opts) {
-    let items = Array.from(this.instances.values());
-    if (opts?.definition_id) {
-      items = items.filter((i) => i.definition_id === opts.definition_id);
-    }
-    const total = items.length;
-    const offset = opts?.offset ?? 0;
-    const limit = opts?.limit ?? 50;
-    items = items.slice(offset, offset + limit);
-    return { items, total };
-  }
-  // ── Execute Action (Transition) ──────────────────────────────────────
-  executeAction(input) {
-    const def = this.getDefinition(input.definition_id);
-    if (!def) return { success: false, error: "Definition not found" };
-    let inst;
-    if (input.instance_id) {
-      const existing = this.instances.get(input.instance_id);
-      if (!existing) return { success: false, error: "Instance not found" };
-      inst = existing;
-    } else {
-      const created = this.createInstance({
-        definition_id: def.id,
-        definition_slug: def.slug,
-        state_data: input.payload
-      });
-      if (!created) return { success: false, error: "Failed to create instance" };
-      inst = created;
-    }
-    if (input.payload && input.instance_id) {
-      Object.assign(inst.state_data, input.payload);
-    }
-    const transition = def.transitions.find((t23) => t23.name === input.action_name && t23.from.includes(inst.current_state));
-    if (!transition) {
-      return {
-        success: false,
-        instance_id: inst.id,
-        from_state: inst.current_state,
-        to_state: null,
-        state_data: inst.state_data,
-        error: `No transition '${input.action_name}' from state '${inst.current_state}'`
-      };
-    }
-    const fromState = inst.current_state;
-    const now = (/* @__PURE__ */ new Date()).toISOString();
-    const events = [];
-    let lastEvalResult = null;
-    events.push({ event_type: "transition", message: `Transition '${transition.name}' started: ${fromState} \u2192 ${transition.to}`, timestamp: now });
-    for (const action of transition.actions ?? []) {
-      try {
-        if (action.type === "set_field") {
-          const field = action.config?.field;
-          if (action.config?.expression) {
-            const expr = action.config.expression;
-            const result = this.evaluateSimpleExpression(expr, inst.state_data);
-            inst.state_data[field] = result;
-          } else if (action.config?.value !== void 0) {
-            inst.state_data[field] = action.config.value;
-          }
-          events.push({ event_type: "action_executed", message: `transition action 'set_field' succeeded`, timestamp: now });
-        } else if (action.type === "eval") {
-          const expr = action.config?.expression;
-          lastEvalResult = this.evaluateSimpleExpression(expr, inst.state_data);
-          events.push({ event_type: "action_executed", message: `transition action 'eval' succeeded`, timestamp: now });
-        } else {
-          events.push({ event_type: "action_executed", message: `transition action '${action.type}' succeeded (no-op in local mode)`, timestamp: now });
-        }
-      } catch (err) {
-        const msg = err instanceof Error ? err.message : String(err);
-        events.push({ event_type: "action_failed", message: `transition action '${action.type}' failed: ${msg}`, timestamp: now });
-        return {
-          success: false,
-          instance_id: inst.id,
-          from_state: fromState,
-          to_state: null,
-          state_data: inst.state_data,
-          event_log: events,
-          error: `transition action failed: ${msg}`
-        };
-      }
-    }
-    inst.current_state = transition.to;
-    inst.execution_lock_version++;
-    inst.updated_at = now;
-    events.push({ event_type: "transition", message: `State changed: ${fromState} \u2192 ${transition.to}`, timestamp: now });
-    inst.event_log.push(...events);
-    return {
-      success: true,
-      instance_id: inst.id,
-      from_state: fromState,
-      to_state: transition.to,
-      state_data: inst.state_data,
-      result: lastEvalResult,
-      event_log: events
-    };
-  }
-  /**
-   * Minimal expression evaluator for local dev mode.
-   * Handles: field references, arithmetic, string literals, simple comparisons.
-   * Does NOT handle: while loops, if/else, function calls, multi-statement blocks.
-   * For full evaluation, use mm-napi when available.
-   */
-  evaluateSimpleExpression(expr, context) {
-    if (context[expr] !== void 0) return context[expr];
-    const arithMatch = expr.match(/^(\w+)\s*([+\-*/])\s*(\d+(?:\.\d+)?)$/);
-    if (arithMatch) {
-      const [, field, op, numStr] = arithMatch;
-      const left = Number(context[field] ?? 0);
-      const right = Number(numStr);
-      switch (op) {
-        case "+":
-          return left + right;
-        case "-":
-          return left - right;
-        case "*":
-          return left * right;
-        case "/":
-          return right !== 0 ? left / right : 0;
-      }
-    }
-    if (/^\d+(\.\d+)?$/.test(expr.trim())) {
-      return Number(expr.trim());
-    }
-    const strMatch = expr.match(/^["'](.*)["']$/);
-    if (strMatch) return strMatch[1];
-    try {
-      const keys = Object.keys(context);
-      const values = Object.values(context);
-      const fn = new Function(...keys, `"use strict"; return (${expr});`);
-      return fn(...values);
-    } catch {
-      return null;
-    }
-  }
-};
-async function startLocalServer(options = {}) {
-  const { port = 4200, noAuth = true } = options;
-  const store = new MemoryStore();
-  const startedAt = (/* @__PURE__ */ new Date()).toISOString();
-  function json(res, status, body) {
-    const data = JSON.stringify(body);
-    res.writeHead(status, {
-      "Content-Type": "application/json",
-      "Access-Control-Allow-Origin": "*",
-      "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
-      "Access-Control-Allow-Headers": "Content-Type, Authorization",
-      "Content-Length": Buffer.byteLength(data)
-    });
-    res.end(data);
-  }
-  function readBody(req) {
-    return new Promise((resolve2, reject) => {
-      const chunks = [];
-      req.on("data", (chunk) => chunks.push(chunk));
-      req.on("end", () => resolve2(Buffer.concat(chunks).toString()));
-      req.on("error", reject);
-    });
-  }
-  function parseQuery(url) {
-    const idx = url.indexOf("?");
-    if (idx === -1) return {};
-    const params = {};
-    const qs = url.slice(idx + 1);
-    for (const pair of qs.split("&")) {
-      const [k, v] = pair.split("=");
-      if (k) params[decodeURIComponent(k)] = decodeURIComponent(v ?? "");
-    }
-    return params;
-  }
-  const server = http.createServer(async (req, res) => {
-    const method = req.method?.toUpperCase() ?? "GET";
-    const rawUrl = req.url ?? "/";
-    const queryStart = rawUrl.indexOf("?");
-    const path = queryStart >= 0 ? rawUrl.slice(0, queryStart) : rawUrl;
-    const query = parseQuery(rawUrl);
-    if (method === "OPTIONS") {
-      res.writeHead(204, {
-        "Access-Control-Allow-Origin": "*",
-        "Access-Control-Allow-Methods": "GET, POST, PATCH, PUT, DELETE, OPTIONS",
-        "Access-Control-Allow-Headers": "Content-Type, Authorization",
-        "Access-Control-Max-Age": "86400"
-      });
-      res.end();
-      return;
-    }
-    try {
-      if (path === "/health" && method === "GET") {
-        return json(res, 200, {
-          status: "ok",
-          service: "mm-local-dev",
-          mode: "in-memory",
-          started_at: startedAt,
-          definitions: store.definitions.size,
-          instances: store.instances.size
-        });
-      }
-      if (path === "/api/v1/auth/login" && (method === "POST" || method === "GET")) {
-        return json(res, 200, {
-          token: "dev-token-local",
-          user: {
-            id: "dev-user-001",
-            email: "dev@localhost",
-            role: "admin",
-            name: "Local Developer"
-          }
-        });
-      }
-      if (path === "/api/v1/workflow/definitions" && method === "GET") {
-        const result = store.listDefinitions({
-          category: query.category,
-          limit: query.limit ? parseInt(query.limit, 10) : void 0,
-          offset: query.offset ? parseInt(query.offset, 10) : void 0
-        });
-        if (query.slug) {
-          const def = store.getDefinition(query.slug);
-          return json(res, 200, { items: def ? [def] : [], total: def ? 1 : 0 });
-        }
-        return json(res, 200, result);
-      }
-      const defMatch = path.match(/^\/api\/v1\/workflow\/definitions\/([^/]+)$/);
-      if (defMatch && method === "GET") {
-        const def = store.getDefinition(defMatch[1]);
-        if (!def) return json(res, 404, { error: "Not found" });
-        return json(res, 200, def);
-      }
-      if (path === "/api/v1/workflow/definitions" && method === "POST") {
-        const body = JSON.parse(await readBody(req));
-        const def = store.createDefinition(body);
-        return json(res, 201, def);
-      }
-      if (defMatch && method === "PATCH") {
-        const body = JSON.parse(await readBody(req));
-        const updated = store.patchDefinition(defMatch[1], body);
-        if (!updated) return json(res, 404, { error: "Not found" });
-        return json(res, 200, updated);
-      }
-      if (defMatch && method === "DELETE") {
-        const deleted = store.deleteDefinition(defMatch[1]);
-        if (!deleted) return json(res, 404, { error: "Not found" });
-        return json(res, 204, null);
-      }
-      if (path === "/api/v1/workflow/instances" && method === "GET") {
-        const result = store.listInstances({
-          definition_id: query.definition_id,
-          limit: query.limit ? parseInt(query.limit, 10) : void 0,
-          offset: query.offset ? parseInt(query.offset, 10) : void 0
-        });
-        return json(res, 200, result);
-      }
-      if (path === "/api/v1/workflow/instances" && method === "POST") {
-        const body = JSON.parse(await readBody(req));
-        const inst = store.createInstance(body);
-        if (!inst) return json(res, 404, { error: "Definition not found" });
-        return json(res, 201, inst);
-      }
-      const instMatch = path.match(/^\/api\/v1\/workflow\/instances\/([^/]+)$/);
-      if (instMatch && method === "GET") {
-        const inst = store.getInstance(instMatch[1]);
-        if (!inst) return json(res, 404, { error: "Not found" });
-        return json(res, 200, inst);
-      }
-      if (path === "/api/v1/workflow/execute-action" && method === "POST") {
-        const body = JSON.parse(await readBody(req));
-        const result = store.executeAction(body);
-        return json(res, 200, result);
-      }
-      const dataMatch = path.match(/^\/api\/v1\/data\/([^/]+)$/);
-      if (dataMatch && method === "GET") {
-        const def = store.getDefinition(dataMatch[1]);
-        if (!def) return json(res, 404, { error: "Not found" });
-        const instances = store.listInstances({ definition_id: def.id });
-        return json(res, 200, instances);
-      }
-      if (path.startsWith("/api/v1/")) {
-        return json(res, 501, { error: "Not implemented in local dev mode", path, method });
-      }
-      return json(res, 404, { error: "Not found", path });
-    } catch (err) {
-      const message = err instanceof Error ? err.message : String(err);
-      console.error(`[mm-local] ${method} ${path} \u2014 Error: ${message}`);
-      return json(res, 500, { error: message });
-    }
-  });
-  return new Promise((resolve2, reject) => {
-    server.on("error", (err) => {
-      if (err.code === "EADDRINUSE") {
-        reject(new Error(`Port ${port} is already in use. Is another server running?`));
-      } else {
-        reject(err);
-      }
-    });
-    server.listen(port, () => {
-      console.log(`[mm-local] Local API server running at http://localhost:${port}`);
-      console.log(`[mm-local] Mode: in-memory (data lost on restart)`);
-      console.log(`[mm-local] Auth: disabled (all requests accepted)`);
-      resolve2({
-        server,
-        port,
-        store,
-        async close() {
-          return new Promise((res) => {
-            server.close(() => {
-              console.log("[mm-local] Local API server stopped");
-              res();
-            });
-          });
-        }
-      });
-    });
-  });
-}
-
 // src/dev-server.ts
 var currentErrors = null;
 function escapeHtml(s) {
@@ -12300,34 +11887,33 @@ async function createDevServer(options = {}) {
     open = false
   } = options;
   const clients = /* @__PURE__ */ new Set();
-  let localServer = null;
   let apiUrl;
-  let isLocalMode = false;
-  if (rawApiUrl === "local") {
-    localServer = await startLocalServer({ port: 4200 });
-    apiUrl = "http://localhost:4200/api/v1";
-    isLocalMode = true;
-  } else if (rawApiUrl === "auto") {
-    const defaultRemote = "https://dev.mindmatrix.club/api/v1";
-    const remoteHealth = await checkBackendHealth(defaultRemote);
-    if (remoteHealth.ok) {
-      apiUrl = defaultRemote;
-    } else {
-      const localHealth = await checkBackendHealth("http://localhost:4200/api/v1");
-      if (localHealth.ok) {
-        apiUrl = "http://localhost:4200/api/v1";
+  if (rawApiUrl === "local" || rawApiUrl === "auto") {
+    const localHealth = await checkBackendHealth("http://localhost:4200/api/v1");
+    if (localHealth.ok) {
+      apiUrl = "http://localhost:4200/api/v1";
+    } else if (rawApiUrl === "auto") {
+      const defaultRemote = "https://dev.mindmatrix.club/api/v1";
+      const remoteHealth = await checkBackendHealth(defaultRemote);
+      if (remoteHealth.ok) {
+        apiUrl = defaultRemote;
       } else {
-        console.log("[mm-dev] No backend detected \u2014 starting local in-memory API server...");
-        localServer = await startLocalServer({ port: 4200 });
+        console.error("[mm-dev] No backend detected. Start the engine first:");
+        console.error("         mmrc dev         (auto-starts engine)");
+        console.error("         mmrc engine start (manual start)");
+        console.error("[mm-dev] Or specify a remote API: mmrc dev --api-url https://...");
         apiUrl = "http://localhost:4200/api/v1";
-        isLocalMode = true;
       }
+    } else {
+      console.error("[mm-dev] Local engine not running on port 4200.");
+      console.error("         Start it with: mmrc dev (or mmrc engine start)");
+      apiUrl = "http://localhost:4200/api/v1";
     }
   } else {
     apiUrl = rawApiUrl;
   }
-  const token = isLocalMode ? "dev-token-local" : await resolveDevToken(apiUrl, explicitToken);
-  const health = isLocalMode ? { ok: true, version: "local", db: "in-memory" } : await checkBackendHealth(apiUrl);
+  const token = await resolveDevToken(apiUrl, explicitToken);
+  const health = await checkBackendHealth(apiUrl);
   let initialSlug, initialCompiled = 0, initialDeployed = false, initialErrors = 0;
   if (token && health.ok) {
     const r = await initialBuildDeploy(src, outDir, mode, apiUrl, token);
@@ -12387,74 +11973,163 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
 `;
     }
   };
-  const devHtml = `<!DOCTYPE html>
+  const { existsSync: fsExists } = await import("fs");
+  const projectIndexPath = require("path").join(process.cwd(), "index.html");
+  const hasProjectIndex = fsExists(projectIndexPath);
+  if (!hasProjectIndex) {
+    const { writeFileSync: fsWrite } = await import("fs");
+    fsWrite(projectIndexPath, `<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>MindMatrix Dev</title>
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #fafafa; color: #111; }
-    #root { min-height: 100vh; }
-    .mm-loading { display: flex; align-items: center; justify-content: center; min-height: 100vh; flex-direction: column; gap: 12px; }
-    .mm-loading h1 { font-size: 20px; font-weight: 600; color: #333; }
-    .mm-loading p { color: #888; font-size: 14px; }
-  </style>
 </head>
 <body>
-  <div id="root">
-    <div class="mm-loading">
-      <h1>MindMatrix Dev</h1>
-      <p>Loading...</p>
-    </div>
-  </div>
-  <script type="module">
-    import React from 'react';
-    import { createRoot } from 'react-dom/client';
+  <div id="root"></div>
+  <script type="module" src="/__mm_dev_entry.tsx"></script>
+</body>
+</html>`, "utf-8");
+  }
+  const devEntryPlugin = {
+    name: "mindmatrix-dev-entry",
+    resolveId(id) {
+      if (id === "/__mm_dev_entry.tsx") return id;
+      return null;
+    },
+    load(id) {
+      if (id !== "/__mm_dev_entry.tsx") return null;
+      return `
+import React, { useState, useEffect } from 'react';
+import { createRoot } from 'react-dom/client';
+import { DevPlayer } from '@mmapp/react/player';
+import { PlayerProvider, ExperienceRenderer, createApiResolver } from '@mmapp/react/player';
 
-    function App() {
-      const [data, setData] = React.useState({ definitions: [], instances: [] });
-      const [error, setError] = React.useState(null);
+// Detect API base URL \u2014 proxy through dev server or use direct URL
+const API_BASE = window.location.origin + '/api/v1';
+const resolver = createApiResolver({ baseUrl: API_BASE, token: () => localStorage.getItem('auth_token') });
 
-      React.useEffect(() => {
-        fetch('/api/v1/workflow/definitions')
-          .then(r => r.ok ? r.json() : Promise.reject('API ' + r.status))
-          .then(defs => setData(d => ({ ...d, definitions: Array.isArray(defs) ? defs : defs.data || [] })))
-          .catch(e => setError(String(e)));
-      }, []);
+/**
+ * Prepare experience tree for rendering.
+ * Attaches metadata.dataSources to the root node and remaps
+ * dataSource slugs to use definition-relative naming.
+ *
+ * @param definition - The main blueprint definition
+ * @param allDefinitions - ALL definitions from the API (used for slug resolution)
+ */
+function prepareTree(definition, allDefinitions) {
+  const exp = definition.experience;
+  if (!exp || typeof exp !== 'object') return null;
 
-      if (error) return React.createElement('div', { style: { padding: 40 } },
-        React.createElement('h1', null, 'MindMatrix Dev'),
-        React.createElement('p', { style: { color: '#c00', marginTop: 8 } }, 'API Error: ' + error),
-        React.createElement('p', { style: { color: '#888', marginTop: 8 } }, 'The engine is running but the API returned an error. This may be an auth issue in SQLite mode.')
-      );
+  const meta = definition.metadata || {};
+  const dataSources = meta.dataSources || [];
+  const mutationTargets = meta.mutationTargets || [];
 
-      return React.createElement('div', { style: { padding: 40, maxWidth: 800 } },
-        React.createElement('h1', { style: { marginBottom: 16 } }, 'MindMatrix Dev'),
-        React.createElement('p', { style: { color: '#666', marginBottom: 24 } },
-          data.definitions.length + ' definition(s) deployed'),
-        data.definitions.map((def, i) =>
-          React.createElement('div', { key: i, style: { border: '1px solid #ddd', borderRadius: 8, padding: 16, marginBottom: 12, background: '#fff' } },
-            React.createElement('h3', { style: { marginBottom: 4 } }, def.name || def.slug || 'Unnamed'),
-            React.createElement('p', { style: { color: '#888', fontSize: 13 } },
-              'slug: ' + (def.slug || '?') + ' | states: ' + (def.states?.length || 0) + ' | fields: ' + (def.fields?.length || 0))
-          )
-        ),
-        data.definitions.length === 0 && React.createElement('p', { style: { color: '#888' } },
-          'No definitions deployed yet. Edit your model files and save \u2014 mmrc dev will auto-compile and deploy.')
-      );
+  // Build a slug map from ALL deployed definitions
+  // This resolves bare model names (e.g. "item") to full slugs (e.g. "tutorial-1-item")
+  const blueprintSlug = definition.slug || '';
+  const allSlugs = (allDefinitions || []).map(d => d.slug).filter(Boolean);
+
+  function resolveSlug(bareSlug) {
+    if (!bareSlug) return bareSlug;
+    // Already a full slug (contains hyphen matching a known definition)
+    if (allSlugs.includes(bareSlug)) return bareSlug;
+    // Try blueprint-prefixed slug: "item" \u2192 "tutorial-1-item"
+    const prefixed = blueprintSlug + '-' + bareSlug;
+    if (allSlugs.includes(prefixed)) return prefixed;
+    // Try matching by suffix across all definitions
+    const match = allSlugs.find(s => s.endsWith('-' + bareSlug));
+    if (match) return match;
+    // Return original (will attempt as-is)
+    return bareSlug;
+  }
+
+  // Clone root node and attach dataSources
+  const root = { ...exp };
+  if (dataSources.length > 0 && !root.dataSources) {
+    root.dataSources = dataSources.map(ds => ({
+      ...ds,
+      slug: resolveSlug(ds.slug),
+    }));
+  }
+
+  // Remap mutation targets the same way
+  if (mutationTargets.length > 0) {
+    const resolvedTargets = mutationTargets.map(t => resolveSlug(t));
+    root.config = { ...(root.config || {}), _mutationTargets: resolvedTargets };
+  }
+
+  return root;
+}
+
+function App() {
+  const [tree, setTree] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    async function loadTree() {
+      try {
+        const res = await fetch(API_BASE + '/workflow/definitions');
+        const json = await res.json();
+        const items = json.items || json.data || [];
+        // Find the main blueprint definition (has experience tree)
+        const main = items.find(d => d.experience && !(Array.isArray(d.category) ? d.category.includes('data') : d.category === 'data')) || items.find(d => d.experience) || items[0];
+        if (main?.experience) {
+          const prepared = prepareTree(main, items);
+          if (prepared) {
+            setTree(prepared);
+            return;
+          }
+        }
+        if (main) {
+          // No experience tree \u2014 show definition info
+          setTree({
+            type: 'Stack',
+            props: { style: { padding: 40, gap: 16 } },
+            children: [
+              { type: 'Text', props: { children: main.name || main.slug, style: { fontSize: 24, fontWeight: 'bold' } } },
+              { type: 'Text', props: { children: (main.states?.length || 0) + ' states, ' + (main.fields?.length || 0) + ' fields', style: { color: '#666' } } },
+              ...items.map((d, i) => ({
+                type: 'Card',
+                props: { key: i, style: { padding: 16, border: '1px solid #ddd', borderRadius: 8 } },
+                children: [
+                  { type: 'Text', props: { children: d.name || d.slug, style: { fontWeight: 600 } } },
+                  { type: 'Text', props: { children: 'slug: ' + d.slug + ' | ' + (d.states?.length || 0) + ' states', style: { fontSize: 13, color: '#888' } } },
+                ],
+              })),
+            ],
+          });
+        }
+      } catch (e) {
+        setError(e.message);
+      }
     }
+    loadTree();
+  }, []);
 
-    createRoot(document.getElementById('root')).render(React.createElement(App));
-  </script>
-</body>
-</html>`;
-  const { mkdtempSync, writeFileSync: writeFileSync5 } = await import("fs");
-  const { join: join4 } = await import("path");
-  const { tmpdir } = await import("os");
-  const devRoot = mkdtempSync(join4(tmpdir(), "mm-dev-"));
-  writeFileSync5(join4(devRoot, "index.html"), devHtml, "utf-8");
+  if (error) return React.createElement('div', { style: { padding: 40 } },
+    React.createElement('h1', null, 'MindMatrix Dev'),
+    React.createElement('p', { style: { color: '#c00' } }, 'Error: ' + error)
+  );
+
+  if (!tree) return React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' } },
+    React.createElement('p', null, 'Loading...')
+  );
+
+  // If tree has 'component' field, use ExperienceRenderer; otherwise legacy DevPlayer
+  if (tree.component) {
+    return React.createElement(PlayerProvider, { resolver },
+      React.createElement(ExperienceRenderer, { tree, className: 'mm-experience-root' })
+    );
+  }
+
+  return React.createElement(DevPlayer, { tree, title: document.title || 'MindMatrix Dev' });
+}
+
+createRoot(document.getElementById('root')).render(React.createElement(App));
+`;
+    }
+  };
   let deployInFlight = false;
   const compileDeployPlugin = {
     name: "mindmatrix-dev-compile-deploy",
@@ -12485,16 +12160,16 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     }
   };
   const viteConfig = {
-    // Physical index.html lives in a temp dir so Vite serves it natively.
-    root: devRoot,
-    // Pre-bundle React so Vite doesn't warn about missing entry point.
+    // Use the blueprint directory as Vite root (has node_modules with React).
+    root: process.cwd(),
+    // Pre-bundle React and the player for fast dev startup.
     optimizeDeps: { include: ["react", "react-dom/client"] },
     server: {
       port,
       open,
       host: true,
       // Allow serving files from the real project directory (fs.allow).
-      fs: { allow: [devRoot, process.cwd(), ".."] },
+      fs: { allow: [process.cwd(), ".."] },
       proxy: {
         "/api": { target: proxyTarget, changeOrigin: true, secure: true, ws: true },
         "/health": { target: proxyTarget, changeOrigin: true, secure: true },
@@ -12504,6 +12179,7 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     plugins: [
       mindmatrixReact(pluginOpts),
       compileDeployPlugin,
+      devEntryPlugin,
       devPlayerPlugin,
       { name: "mindmatrix-error-overlay", configureServer(server) {
         server.middlewares.use(errorOverlayMiddleware());
@@ -12511,8 +12187,8 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     ],
     logLevel: "warn"
   };
-  const { createServer: createServer2 } = await import("vite");
-  const vite = await createServer2(viteConfig);
+  const { createServer } = await import("vite");
+  const vite = await createServer(viteConfig);
   await vite.listen();
   const resolvedPort = vite.config.server.port ?? port;
   if (enableWs && vite.httpServer) {
@@ -12530,7 +12206,7 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
     } catch {
     }
   }
-  printBanner({ port: resolvedPort, apiUrl: isLocalMode ? `${apiUrl} (local in-memory)` : apiUrl, src, include, health, token: !!token, compiled: initialCompiled, deployed: initialDeployed, slug: initialSlug, errors: initialErrors });
+  printBanner({ port: resolvedPort, apiUrl, src, include, health, token: !!token, compiled: initialCompiled, deployed: initialDeployed, slug: initialSlug, errors: initialErrors });
   return {
     vite,
     port: resolvedPort,
@@ -12562,14 +12238,6 @@ createRoot(document.getElementById('root')).render(React.createElement(App));
       clients.clear();
       currentErrors = null;
       await vite.close();
-      if (localServer) {
-        await localServer.close();
-      }
-      try {
-        const { rmSync } = await import("fs");
-        rmSync(devRoot, { recursive: true, force: true });
-      } catch {
-      }
     }
   };
 }