Update app/micro_distillv2.html

app/micro_distillv2.html

@@ -179,6 +179,7 @@ select {
 select:focus { border-color: var(--border-focus); }
 
 .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+#osc-display { grid-template-columns: repeat(4, 1fr); }
 .metric {
   padding: 10px 8px; background: var(--panel-2); border: 1px solid var(--border);
   border-radius: 3px; text-align: center;
@@ -346,7 +347,7 @@ select:focus { border-color: var(--border-focus); }
   <div class="brand">
     <span class="brand-mark">mD</span>
     <span class="brand-name">Micro Distillery</span>
-    <span class="brand-version">v3.1.1</span>
+    <span class="brand-version">v3.1.2</span>
   </div>
   <div class="hdr-actions">
     <button class="btn btn-ghost" id="btn-wizard">Setup Wizard</button>
@@ -428,11 +429,11 @@ select:focus { border-color: var(--border-focus); }
           <input type="range" id="cfg-kl" min="0.01" max="0.5" step="0.01" value="0.1">
         </div>
         <div class="setting">
-          <div class="setting-label"><span>VAE Latent Dim</span><span class="setting-val" id="val-latent">32</span></div>
+          <div class="setting-label"><span>VAE Latent Dim (metadata)</span><span class="setting-val" id="val-latent">32</span></div>
           <input type="range" id="cfg-latent" min="8" max="128" step="8" value="32">
         </div>
         <div class="setting">
-          <div class="setting-label"><span>Filter Threshold</span><span class="setting-val" id="val-filter">0.70</span></div>
+          <div class="setting-label"><span>Filter Threshold (metadata)</span><span class="setting-val" id="val-filter">0.70</span></div>
           <input type="range" id="cfg-filter" min="0.1" max="0.9" step="0.05" value="0.7">
         </div>
         <div class="setting">
@@ -444,7 +445,7 @@ select:focus { border-color: var(--border-focus); }
             <option value="olmo2-1b">OLMo-2-1B (AllenAI)</option>
             <option value="tinyllama-11b">TinyLlama-1.1B (TinyLlama)</option>
           </select>
-          <div class="small text-mute mt-8">Reference only — metadata used in export. Actual model is character-level bigram.</div>
+          <div class="small text-mute mt-8">Reference only — metadata used in export. Actual model is character-level bigram. GRPO training uses group size and KL penalty; VAE fields are recorded in export metadata only.</div>
         </div>
       </div>
     </section>
@@ -508,7 +509,7 @@ select:focus { border-color: var(--border-focus); }
           <span class="small text-mute" style="align-self:center;" id="osc-result"></span>
         </div>
         <div class="small text-mute mt-8">
-          Four incommensurate frequencies (1, phi, 2, pi). Collapse produces a deterministic seed for export.
+          Four incommensurate frequencies (1, phi, 2, pi). Coherent equal-weight superposition — |c_i|² is invariant under Hamiltonian evolution, so probabilities stay at 0.25 each. Measurement collapse drives the export seed.
         </div>
       </div>
     </section>
@@ -593,6 +594,10 @@ select:focus { border-color: var(--border-focus); }
 const $ = (id) => document.getElementById(id);
 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 
+// Production: suppress info/ok logs, keep warn + err visible in the Console / API panes.
+// Success feedback is provided by step markers, progress bar, metrics, and status chips.
+const LOG_ONLY_ERRORS = true;
+
 function factorial(n) {
   if (n <= 1) return 1;
   let r = 1;
@@ -724,11 +729,16 @@ class KnowledgeGraph {
   constructor() { this.nodes = new Map(); this.edges = new Map(); }
   clear() { this.nodes.clear(); this.edges.clear(); }
   addNode(id, data = {}) {
-    if (!this.nodes.has(id)) this.nodes.set(id, Object.assign({ id, weight: 1 }, data));
-    else {
+    if (!this.nodes.has(id)) {
+      // New node: start with base weight 1; if data.weight provided, it replaces base.
+      this.nodes.set(id, Object.assign({ id, weight: 1 }, data));
+    } else {
+      // Existing node: accumulate weight from data onto current weight, then apply other fields.
       const n = this.nodes.get(id);
-      if (data.weight) n.weight = (n.weight || 1) + data.weight;
+      const prevW = (typeof n.weight === "number" ? n.weight : 1);
+      const addW = (typeof data.weight === "number" ? data.weight : 0);
       Object.assign(n, data);
+      n.weight = prevW + addW;
     }
     return this.nodes.get(id);
   }
@@ -918,6 +928,9 @@ class Engine {
     this.apiFanOut = new APIFanOut((m, c) => this.apiLog(m, c));
     this.corpus = FALLBACK_NAMES.slice();
 
+    // Persistent trajectory cache for cache hit/miss accounting across training steps.
+    this.cache = new Map();
+
     this.metrics = {
       trainingSteps: 0,
       finalLoss: 0,
@@ -934,6 +947,7 @@ class Engine {
   }
 
   log(msg, cls = "") {
+    if (LOG_ONLY_ERRORS && cls !== "warn" && cls !== "err") return;
     const term = $("terminal");
     if (!term) return;
     const time = new Date().toLocaleTimeString("en-US", { hour12: false });
@@ -945,6 +959,7 @@ class Engine {
     while (term.children.length > 300) term.removeChild(term.firstChild);
   }
   apiLog(msg, cls = "") {
+    if (LOG_ONLY_ERRORS && cls !== "err") return;
     const log = $("api-log");
     if (!log) return;
     const time = new Date().toLocaleTimeString("en-US", { hour12: false });
@@ -958,11 +973,21 @@ class Engine {
 
   setProgress(pct, task) {
     const p = Math.max(0, Math.min(100, pct));
-    $("progress-fill").style.width = p + "%";
-    $("progress-pct").textContent = Math.round(p) + "%";
-    if (task !== undefined) $("progress-task").textContent = task;
+    const fill = $("progress-fill");
+    if (fill) fill.style.width = p + "%";
+    const pctEl = $("progress-pct");
+    if (pctEl) pctEl.textContent = Math.round(p) + "%";
+    if (task !== undefined) {
+      const taskEl = $("progress-task");
+      if (taskEl) taskEl.textContent = task;
+    }
+  }
+  setProgressLabel(label) {
+    const p = $("progress-label");
+    if (p) p.textContent = label;
+    const ps = $("pipeline-status");
+    if (ps) ps.textContent = label;
   }
-  setProgressLabel(label) { $("progress-label").textContent = label; }
 
   updateMetrics() {
     $("m-steps").textContent = String(this.metrics.trainingSteps);
@@ -1262,16 +1287,20 @@ class Engine {
     }
   }
 
+  // Uses persistent this.cache so cacheHits/cacheMisses accurately reflect
+  // repeated high-reward trajectories across training steps.
   updateCache(trajectories) {
     const threshold = 0.9;
-    const cache = new Map();
     const maxSize = 512;
     for (const tr of trajectories) {
       if (tr.reward > threshold) {
         const key = tr.text.substring(0, 20);
-        if (!cache.has(key)) {
-          cache.set(key, { text: tr.text, reward: tr.reward });
-          if (cache.size > maxSize) cache.delete(cache.keys().next().value);
+        if (!this.cache.has(key)) {
+          this.cache.set(key, { text: tr.text, reward: tr.reward });
+          if (this.cache.size > maxSize) {
+            const oldest = this.cache.keys().next().value;
+            if (oldest !== undefined) this.cache.delete(oldest);
+          }
           this.metrics.cacheMisses++;
         } else {
           this.metrics.cacheHits++;
@@ -1375,6 +1404,8 @@ class Engine {
     this.updateOscDisplay();
     const msg = "osc " + m.oscillator + "  E=" + m.energy.toFixed(3) + "  x=" + m.x.toFixed(4);
     $("osc-result").textContent = msg;
+    const os = $("osc-status");
+    if (os) os.textContent = "superposition · " + this.quantumMeasurements.length + " measured";
     this.log("Quantum collapse: " + msg);
     return m;
   }
@@ -1397,7 +1428,7 @@ class Engine {
 
     const modelJson = {
       format: "micro-distill-bigram-v1",
-      version: "3.1.1",
+      version: "3.1.2",
       arch: policyArch,
       created: new Date().toISOString(),
       bos_token: this.bos,
@@ -1619,12 +1650,16 @@ class Engine {
 '    prompts = []',
 '    i = 0',
 '    while i < len(args):',
-'        if args[i] == "--temperature" and i + 1 < len(args):',
-'            try:',
-'                temperature = float(args[i + 1])',
-'            except ValueError:',
-'                print("Warning: invalid --temperature value, using 0.9", file=sys.stderr)',
-'            i += 2',
+'        if args[i] == "--temperature":',
+'            if i + 1 < len(args):',
+'                try:',
+'                    temperature = float(args[i + 1])',
+'                except ValueError:',
+'                    print("Warning: invalid --temperature value, using 0.9", file=sys.stderr)',
+'                i += 2',
+'            else:',
+'                print("Warning: --temperature requires a value, using 0.9", file=sys.stderr)',
+'                i += 1',
 '        elif args[i] in ("--help", "-h"):',
 '            print("Usage: python3 test.py [prompt...] [--temperature T]")',
 '            sys.exit(0)',
@@ -1728,7 +1763,7 @@ class Engine {
 '',
 '```bash',
 'python3 test.py alice',
-'# => alicea',
+'# => alice… (seed-dependent continuation)',
 '```',
 '',
 '### Custom temperature',
@@ -2082,6 +2117,8 @@ class Engine {
     if (files.length > 0) {
       if (this.selectedPreviewIndex >= files.length) this.selectedPreviewIndex = 0;
       this.renderPreview(files, this.selectedPreviewIndex);
+    } else {
+      $("file-preview").textContent = "No files selected.";
     }
   }
 
@@ -2139,7 +2176,13 @@ class Engine {
     this.kgSeed = 42;
     this.quantumMeasurements = [];
     this.corpus = FALLBACK_NAMES.slice();
+    this.cache = new Map();
     this.metrics = { trainingSteps: 0, finalLoss: 0, averageReward: 0, cacheHits: 0, cacheMisses: 0, filteredCount: 0, totalSamples: 0, vaeLoss: 0 };
+    this.superposition = new Superposition4(1337);
+    this.apiFanOut = new APIFanOut((m, c) => this.apiLog(m, c));
+    this.lastCollapse = null;
+    this.selectedPreviewIndex = 0;
+    this.modelFiles = [];
     this.markStep("fetch", "active", "");
     this.markStep("train", "", "");
     this.markStep("export", "", "");
@@ -2149,6 +2192,8 @@ class Engine {
     this.setProgressLabel("idle");
     this.updateOscDisplay();
     $("osc-result").textContent = "";
+    const os = $("osc-status");
+    if (os) os.textContent = "superposition";
     this.log("System reset.");
   }
 }
@@ -2253,7 +2298,7 @@ class Wizard {
           '<div class="wiz-info">',
           '<strong>Status:</strong> <span id="wiz-export-status">ready</span>',
           "</div>",
-          '<button class="btn btn-primary btn-lg btn-block" id="wiz-run-export">Download .zip</button>'
+          '<button class="btn btn-primary btn-lg btn-block" id="wiz-run-export">Open Export Panel</button>'
         ],
         next: "Done",
         back: null
@@ -2292,7 +2337,12 @@ class Wizard {
 
     if (id === "fetch") {
       const btn = $("wiz-run-fetch");
+      if (this.engine.fetching && btn) btn.disabled = true;
       if (btn) btn.addEventListener("click", async () => {
+        if (this.engine.fetching) {
+          $("wiz-fetch-status").textContent = "fetch already in progress";
+          return;
+        }
         btn.disabled = true;
         $("wiz-fetch-status").textContent = "fetching...";
         const ok = await this.engine.fetch();
@@ -2324,9 +2374,9 @@ class Wizard {
       }
       if (btn) btn.addEventListener("click", async () => {
         btn.disabled = true;
-        $("wiz-export-status").textContent = "building .zip...";
+        $("wiz-export-status").textContent = "opening export panel...";
         await this.engine.showExportModal();
-        $("wiz-export-status").textContent = "ready - click Download in the export panel";
+        $("wiz-export-status").textContent = "ready - configure options in the export panel";
         btn.disabled = false;
       });
     }
@@ -2398,6 +2448,20 @@ function setupCloseButtons() {
   });
 }
 
+function setupExportOptions() {
+  // Keep the file list, preview, and total size in sync with checkbox state.
+  // No-op when the bundle hasn't been built yet (modelFiles empty).
+  const boxes = document.querySelectorAll(".opt input[type='checkbox']");
+  boxes.forEach((cb) => {
+    cb.addEventListener("change", () => {
+      if (!engine || !engine.modelFiles || engine.modelFiles.length === 0) return;
+      const filtered = engine.applyExportOptions();
+      engine.renderFileList(filtered);
+      engine.renderExportSize(filtered);
+    });
+  });
+}
+
 function setupButtons() {
   $("btn-fetch").addEventListener("click", async () => {
     $("btn-fetch").disabled = true;
@@ -2445,25 +2509,36 @@ function boot() {
   engine = new Engine();
   wizard = new Wizard(engine);
 
-  engine.log("Micro Distillery v3.1.1 initialized.");
-  engine.log("Data sources (2026): HuggingFace (SmolLM2, Qwen2.5, OLMo-2) + GitHub (Karpathy makemore)");
+  engine.log("Micro Distillery v3.1.2 initialized.");
+  engine.log("Data sources (2026): HuggingFace + GitHub");
   engine.log("Click Setup Wizard in the header, or use the pipeline.");
   engine.log("Ready.");
 
+  window.addEventListener("error", (e) => {
+    try { engine.log("Unhandled: " + (e.message || e.error || e), "err"); } catch (_) {}
+  });
+  window.addEventListener("unhandledrejection", (e) => {
+    const r = e && e.reason;
+    const m = r && r.message ? r.message : String(r);
+    try { engine.log("Unhandled rejection: " + m, "err"); } catch (_) {}
+  });
+
   setupTabs();
   setupSliders();
   setupCloseButtons();
+  setupExportOptions();
   setupButtons();
   engine.updateMetrics();
   engine.updateOscDisplay();
   engine.renderGraph();
   engine.setProgress(0, "idle");
 
-  const seen = localStorage.getItem("md_wizard_seen");
+  let seen = null;
+  try { seen = localStorage.getItem("md_wizard_seen"); } catch (_) {}
   if (!seen) {
     setTimeout(() => {
-      wizard.open();
-      localStorage.setItem("md_wizard_seen", "1");
+      try { wizard.open(); } catch (_) {}
+      try { localStorage.setItem("md_wizard_seen", "1"); } catch (_) {}
     }, 400);
   }
 
@@ -2476,7 +2551,7 @@ function boot() {
   window.addEventListener("resize", () => engine.renderGraph());
 
   if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.register("sw.js").catch(() => { /* ignored */ });
+    navigator.serviceWorker.register("sw.js").catch(() => { /* expected when sw.js absent */ });
   }
 }