Move Save into the editor as the program's name

The editor pane was showing the runtime's status while the global toolbar held
Save, which is the one control up there with no runtime meaning. Swap them, so
each sits with its subject.

Save becomes the program's identity rather than a verb: the editor pane names
the program it holds, marks unsaved edits with a dot, and opens the save
dialog when clicked. Dirty state is derived by comparing against the stored
project instead of tracked with a flag, so editing something back to its saved
state clears the marker. The runtime status indicator moves beside the REPL
header, where the VM's own output already is.

Author: bdbarnett

simulator/index.html

@@ -87,13 +87,6 @@
                 <span>Reset VM</span>
             </button>
 
-            <!-- Saved Programs -->
-            <button type="button" class="sim-btn" id="save-btn" title="Save this program in the browser or download it (Ctrl+S)">
-                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
-                <span>Save</span>
-                <kbd>Ctrl+S</kbd>
-            </button>
-
             <!-- Theme Toggle -->
             <button type="button" class="sim-btn sim-icon-btn" id="theme-toggle" aria-label="Toggle Color Theme" title="Toggle Light/Dark Theme">
                 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
@@ -143,10 +136,13 @@
                 <button type="button" class="sim-tab-add" id="add-file-btn" title="New file" aria-label="New file">
                     <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                 </button>
-                <div class="sim-status-indicator">
-                    <span class="sim-status-dot is-ready" id="status-dot"></span>
-                    <span id="status-text">Ready</span>
-                </div>
+                <!-- The program this pane is holding. Names it, flags unsaved
+                     edits, and opens the save dialog. -->
+                <button type="button" class="sim-program" id="program-btn" title="Save this program (Ctrl+S)">
+                    <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
+                    <span id="program-name">Unsaved</span>
+                    <span class="sim-program-dirty" id="program-dirty" role="img" aria-label="Unsaved changes" hidden></span>
+                </button>
             </div>
             <div class="sim-editor-container" id="editor-container"></div>
         </section>
@@ -181,6 +177,11 @@
                         <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
                         <span>REPL</span>
                     </div>
+                    <!-- VM state belongs next to the VM's own output. -->
+                    <div class="sim-status-indicator">
+                        <span class="sim-status-dot is-ready" id="status-dot"></span>
+                        <span id="status-text">Ready</span>
+                    </div>
                     <button type="button" class="sim-btn sim-icon-btn" id="clear-console-btn" title="Clear runtime output">
                         <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
                     </button>

simulator/simulator.css

@@ -396,6 +396,57 @@ html, body {
   color: var(--text-main);
 }
 
+/* The program name, at the right of the tab strip. Distinct from the file tabs
+   next to it: it names the whole program, not one of its files. */
+.sim-program {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex: none;
+  max-width: 40%;
+  padding: 4px 9px;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: var(--text-muted);
+  font-family: inherit;
+  font-size: 0.78rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.sim-program:hover {
+  background: var(--bg-control);
+  border-color: var(--border-color);
+  color: var(--text-main);
+}
+
+.sim-program svg {
+  flex: none;
+  opacity: 0.75;
+}
+
+.sim-program #program-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* A drawn dot rather than a "•" glyph: a bullet sized to look right needs a
+   collapsed line-height, which leaves the element with a zero-height box. */
+.sim-program-dirty {
+  display: inline-block;
+  flex: none;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--accent);
+}
+
+.sim-program-dirty[hidden] {
+  display: none;
+}
+
 .sim-editor-container {
   flex: 1;
   width: 100%;
@@ -565,7 +616,11 @@ html, body {
   align-items: center;
   gap: 6px;
   font-size: 0.76rem;
+  font-weight: 500;
   color: var(--text-muted);
+  /* Sits beside the REPL label rather than being spread across the header by
+     the pane header's space-between. */
+  margin: 0 auto 0 14px;
 }
 
 .sim-status-dot {

simulator/simulator.js

@@ -1,8 +1,9 @@
 /**
  * simulator.js — Interactive PyDevices Python Simulator Engine
  *
- * Manages Monaco Editor, direct MicroPython runtime execution,
- * synthetic board_config binding, LZ-string sharing, and split layout.
+ * Manages the Monaco editor and its multi-file program buffers, the xterm
+ * REPL over the MicroPython WebAssembly runtime, locally saved programs,
+ * and the resizable split layout.
  */
 
 (function () {
@@ -22,7 +23,7 @@
   const elRunBtn = document.getElementById("run-btn");
   const elResetVmBtn = document.getElementById("reset-vm");
   const elStopBtn = document.getElementById("stop-btn");
-  const elSaveBtn = document.getElementById("save-btn");
+  const elProgramBtn = document.getElementById("program-btn");
   const elClearConsoleBtn = document.getElementById("clear-console-btn");
   const elDeviceBezel = document.getElementById("device-bezel");
   const elCanvas = document.getElementById("display_canvas");
@@ -122,10 +123,6 @@
   const fileModels = new Map();
   let activeFile = ENTRY_FILE;
 
-  function fileNames() {
-    return [...fileModels.keys()];
-  }
-
   function fileSource(name) {
     const model = fileModels.get(name);
     return model ? model.getValue() : "";
@@ -254,6 +251,39 @@
       localStorage.setItem(DRAFT_STORAGE_KEY,
         JSON.stringify({ files: allFiles(), active: activeFile }));
     } catch (e) {}
+    refreshProgramLabel();
+  }
+
+  // Key order would otherwise make a rename look like an edit.
+  function programSnapshot(files, width, height, shape) {
+    const sorted = {};
+    for (const name of Object.keys(files).sort()) sorted[name] = files[name];
+    return JSON.stringify({ files: sorted, width, height, shape });
+  }
+
+  // Compared against the stored project rather than tracked with a flag, so
+  // editing something back to its saved state clears the marker honestly.
+  function isProgramDirty() {
+    const name = currentProjectName();
+    if (!name) return true;
+    const project = readProjects()[name];
+    if (!project) return true;
+    const { width, height, shape } = currentResolution;
+    return programSnapshot(allFiles(), width, height, shape) !==
+      programSnapshot(project.files || {}, project.width, project.height, project.shape);
+  }
+
+  function refreshProgramLabel() {
+    const label = document.getElementById("program-name");
+    const dirty = document.getElementById("program-dirty");
+    const button = document.getElementById("program-btn");
+    if (!label || !dirty || !button) return;
+    const name = currentProjectName();
+    label.textContent = name || "Unsaved";
+    dirty.hidden = !isProgramDirty();
+    button.title = name
+      ? `${name} — save this program (Ctrl+S)`
+      : "Save this program (Ctrl+S)";
   }
 
   function readDraft() {
@@ -1113,6 +1143,7 @@ os.chdir("/")
       localStorage.setItem(LAST_PROJECT_KEY, trimmed);
     } catch (e) {}
     renderProjectList();
+    refreshProgramLabel();
     showToast(`✓ Saved “${trimmed}”`);
     return true;
   }
@@ -1128,6 +1159,7 @@ os.chdir("/")
     try {
       localStorage.setItem(LAST_PROJECT_KEY, name);
     } catch (e) {}
+    refreshProgramLabel();
     document.getElementById("save-dialog")?.close();
     showToast(`Loaded “${name}”`);
   }
@@ -1143,6 +1175,7 @@ os.chdir("/")
       } catch (e) {}
     }
     renderProjectList();
+    refreshProgramLabel();
   }
 
   // Downloads the file that is currently open, under its own name. One file at a
@@ -1363,7 +1396,7 @@ os.chdir("/")
       event.preventDefault();
       requestInterrupt();
     });
-    if (elSaveBtn) elSaveBtn.addEventListener("click", openSaveDialog);
+    if (elProgramBtn) elProgramBtn.addEventListener("click", openSaveDialog);
     initSaveDialog();
     initFileNameDialog();
     initMoreMenu();