推进 INI 面板 control view renderer helper

wasm-port/runtime/ui/ini-panel/app.js

@@ -53,6 +53,9 @@ import {
   createMachineSessionStateReportExport,
   createMachineSessionWorkflowStatus,
 } from "./panel-state-summary.js";
+import {
+  renderMachineSessionControlView,
+} from "./control-view-renderer.js";
 
 const SAMPLE_PATH =
   "../../../vendor/linuxcnc/configs/sim/axis/vismach/5axis/table-dual-rotary/xyzab-tdr.ini";
@@ -114,6 +117,7 @@ const runProgressLabelNode = document.getElementById("run-progress-label");
 const runMotionNode = document.getElementById("run-motion");
 const runLineNode = document.getElementById("run-line");
 const runStatementNode = document.getElementById("run-statement");
+const controlViewNode = document.getElementById("machine-session-control-view");
 const axisNodes = {
   x: document.getElementById("axis-x"),
   y: document.getElementById("axis-y"),
@@ -176,6 +180,10 @@ function getMachineSessionControlView() {
   return createMachineSessionControlView(getMachineSessionStateBundle());
 }
 
+function renderCurrentMachineSessionControlView(container = controlViewNode) {
+  return renderMachineSessionControlView(container, getMachineSessionControlView());
+}
+
 function updatePanelMachineSessionState(patch = {}) {
   panelMachineSessionState = createMachineSessionStateSnapshot({
     ...panelMachineSessionState,
@@ -186,6 +194,7 @@ function updatePanelMachineSessionState(patch = {}) {
     },
   });
   window.linuxCncIniPanelMachineSessionState = panelMachineSessionState;
+  renderCurrentMachineSessionControlView();
   return panelMachineSessionState;
 }
 
@@ -195,13 +204,16 @@ window.linuxCncIniPanelApi = {
   getMachineSessionStateReport,
   getMachineSessionStateReportExport,
   getMachineSessionWorkflowStatus,
+  renderMachineSessionControlView: renderCurrentMachineSessionControlView,
 };
 window.getMachineSessionControlView = getMachineSessionControlView;
 window.getMachineSessionStateBundle = getMachineSessionStateBundle;
 window.getMachineSessionStateReport = getMachineSessionStateReport;
 window.getMachineSessionStateReportExport = getMachineSessionStateReportExport;
 window.getMachineSessionWorkflowStatus = getMachineSessionWorkflowStatus;
+window.renderMachineSessionControlView = renderCurrentMachineSessionControlView;
 window.linuxCncIniPanelMachineSessionState = panelMachineSessionState;
+renderCurrentMachineSessionControlView();
 
 function setBadge(node, text, className = "badge") {
   node.className = className;

wasm-port/runtime/ui/ini-panel/control-view-renderer.js

@@ -0,0 +1,60 @@
+function displayValue(value) {
+  return String(value ?? "-");
+}
+
+function statusText(status = {}) {
+  return [
+    status.lastAction ?? "-",
+    status.runStatus ?? "-",
+    status.error ?? "-",
+  ].join(" | ");
+}
+
+export function renderMachineSessionControlView(container, view = {}) {
+  if (!container) {
+    throw new Error("A control view container is required.");
+  }
+
+  const document = container.ownerDocument;
+  container.textContent = "";
+
+  const statusNode = document.createElement("div");
+  statusNode.dataset.controlViewStatus = "";
+  statusNode.textContent = statusText(view.status);
+  container.appendChild(statusNode);
+
+  const sectionsNode = document.createElement("div");
+  sectionsNode.dataset.controlViewSections = "";
+  container.appendChild(sectionsNode);
+
+  const sectionNodes = [];
+  for (const section of view.sections ?? []) {
+    const sectionNode = document.createElement("section");
+    sectionNode.dataset.sectionId = section.id;
+    sectionNode.dataset.controlViewSectionId = section.id;
+
+    const heading = document.createElement("h3");
+    heading.textContent = section.title;
+    sectionNode.appendChild(heading);
+
+    const list = document.createElement("dl");
+    for (const row of section.rows ?? []) {
+      const term = document.createElement("dt");
+      term.textContent = row.label;
+      const def = document.createElement("dd");
+      def.dataset.controlViewRow = row.label;
+      def.textContent = displayValue(row.value);
+      list.append(term, def);
+    }
+
+    sectionNode.appendChild(list);
+    sectionsNode.appendChild(sectionNode);
+    sectionNodes.push(sectionNode);
+  }
+
+  return {
+    statusNode,
+    sectionsNode,
+    sectionNodes,
+  };
+}

wasm-port/runtime/ui/ini-panel/index.html

@@ -85,6 +85,47 @@
       background: #fbfdff;
     }
     .status { display: grid; gap: 8px; }
+    .control-view {
+      border-top: 1px solid #edf2f6;
+      padding-top: 12px;
+      display: grid;
+      gap: 12px;
+    }
+    .control-view [data-control-view-status] {
+      color: var(--muted);
+      font: 13px/1.4 "SFMono-Regular", "Consolas", monospace;
+      overflow-wrap: anywhere;
+    }
+    .control-view [data-control-view-sections] {
+      display: grid;
+      gap: 10px;
+    }
+    .control-view section {
+      border-top: 1px solid #edf2f6;
+      padding-top: 10px;
+      display: grid;
+      gap: 8px;
+    }
+    .control-view h3 {
+      margin: 0;
+      font-size: 13px;
+      font-weight: 700;
+    }
+    .control-view dl {
+      display: grid;
+      grid-template-columns: 132px 1fr;
+      gap: 6px 10px;
+      margin: 0;
+    }
+    .control-view dt {
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .control-view dd {
+      margin: 0;
+      font: 12px/1.4 "SFMono-Regular", "Consolas", monospace;
+      overflow-wrap: anywhere;
+    }
     .badge {
       display: inline-block;
       padding: 4px 8px;
@@ -247,6 +288,7 @@
           <div><span id="interp-badge" class="badge">Interpreter WASM: loading</span></div>
           <div><span id="opfs-badge" class="badge">OPFS: checking</span></div>
         </div>
+        <div id="machine-session-control-view" class="control-view"></div>
 
         <dl class="kv">
           <dt>Machine</dt>