推进 INI 面板 shell handoff mount DOM renderer

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

@@ -106,6 +106,7 @@
       createIniPanelLauncherLinkViewModel,
       createIniPanelShellViewModel,
       isSupportedIniPanelLaunchApiManifest,
+      renderIniPanelShellSessionHandoffMountState,
     } from "./ui-shell.js";
 
     const shellViewModel = createIniPanelShellViewModel();
@@ -135,23 +136,7 @@
       handoffRows.append(term, detail);
     }
     const handoffMountRenderState = shellViewModel.shellSessionHandoffPackageMountRenderState;
-    const handoffMount = document.querySelector("[data-handoff-mount]");
-    handoffMount.dataset.handoffPhase = handoffMountRenderState.dataset.handoffPhase;
-    handoffMount.dataset.handoffReady = handoffMountRenderState.dataset.handoffReady;
-    handoffMount.dataset.handoffScope = handoffMountRenderState.dataset.handoffScope;
-    document.querySelector("[data-handoff-mount-status]").textContent = handoffMountRenderState.statusLine;
-    const handoffMountRows = document.querySelector("[data-handoff-mount-rows]");
-    for (const row of handoffMountRenderState.rows) {
-      const term = document.createElement("dt");
-      term.dataset.handoffMountRow = row.id;
-      term.dataset.handoffMountStatus = row.status;
-      term.textContent = row.label;
-      const detail = document.createElement("dd");
-      detail.dataset.handoffMountValue = row.id;
-      detail.dataset.handoffMountStatus = row.status;
-      detail.textContent = row.value;
-      handoffMountRows.append(term, detail);
-    }
+    renderIniPanelShellSessionHandoffMountState(handoffMountRenderState, { documentRef: document });
 
     window.linuxCncIniPanelLaunchApi = {
       isSupportedLaunchApiManifest: isSupportedIniPanelLaunchApiManifest,
@@ -195,6 +180,9 @@
           ),
         )
       ),
+      renderShellSessionHandoffMountState: (renderState, options) => (
+        renderIniPanelShellSessionHandoffMountState(renderState, options ?? { documentRef: document })
+      ),
       isSupportedShellSessionHandoffPackage: shellViewModel.isSupportedShellSessionHandoffPackage,
       getLauncherLinks: () => shellViewModel.launcherLinks,
       getControlPageApiMethods: () => shellViewModel.controlPage.browserApiMethods,

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

@@ -143,6 +143,7 @@ export function createIniPanelLaunchApiManifest(entries = getVisibleIniPanelEntr
       "getShellSessionHandoffPackageMountState",
       "getShellSessionHandoffPackageMountDisplayViewModel",
       "getShellSessionHandoffPackageMountRenderState",
+      "renderShellSessionHandoffMountState",
       "isSupportedShellSessionHandoffPackage",
       "getLauncherLinks",
       "getControlPageApiMethods",
@@ -1078,6 +1079,55 @@ export function createIniPanelShellSessionHandoffPackageMountRenderState(
   };
 }
 
+export function renderIniPanelShellSessionHandoffMountState(
+  renderState = createIniPanelShellSessionHandoffPackageMountRenderState(),
+  {
+    documentRef = globalThis.document,
+    mountNode = documentRef?.querySelector?.("[data-handoff-mount]"),
+    statusNode = documentRef?.querySelector?.("[data-handoff-mount-status]"),
+    rowsNode = documentRef?.querySelector?.("[data-handoff-mount-rows]"),
+    rowDatasetPrefix = "handoffMount",
+  } = {},
+) {
+  if (!documentRef?.createElement) {
+    throw new Error("A DOM document is required to render shell handoff mount state.");
+  }
+  if (!mountNode || !statusNode || !rowsNode) {
+    throw new Error("Mount, status, and rows nodes are required to render shell handoff mount state.");
+  }
+
+  mountNode.dataset.handoffPhase = renderState?.dataset?.handoffPhase ?? "blocked";
+  mountNode.dataset.handoffReady = renderState?.dataset?.handoffReady ?? "false";
+  mountNode.dataset.handoffScope = renderState?.dataset?.handoffScope ?? "mount";
+  statusNode.textContent = renderState?.statusLine ?? "Blocked: No mount render state";
+  rowsNode.replaceChildren();
+
+  const rows = Array.isArray(renderState?.rows) ? renderState.rows : [];
+  for (const row of rows) {
+    const term = documentRef.createElement("dt");
+    term.dataset[`${rowDatasetPrefix}Row`] = row.id;
+    term.dataset[`${rowDatasetPrefix}Status`] = row.status;
+    term.textContent = row.label;
+    const detail = documentRef.createElement("dd");
+    detail.dataset[`${rowDatasetPrefix}Value`] = row.id;
+    detail.dataset[`${rowDatasetPrefix}Status`] = row.status;
+    detail.textContent = row.value;
+    rowsNode.append(term, detail);
+  }
+
+  return {
+    rendered: true,
+    statusLine: statusNode.textContent,
+    rowCount: rows.length,
+    rowIds: rows.map(({ id }) => id),
+    dataset: {
+      handoffPhase: mountNode.dataset.handoffPhase,
+      handoffReady: mountNode.dataset.handoffReady,
+      handoffScope: mountNode.dataset.handoffScope,
+    },
+  };
+}
+
 export function createIniPanelShellViewModel(entries = getVisibleIniPanelEntries()) {
   const shellIntegrationManifest = createIniPanelShellIntegrationManifest(entries);
   const shellIntegrationReadiness = createIniPanelShellIntegrationReadiness(shellIntegrationManifest);
@@ -1190,6 +1240,7 @@ export function createIniPanelShellViewModel(entries = getVisibleIniPanelEntries
     createShellSessionHandoffPackageMountState: createIniPanelShellSessionHandoffPackageMountState,
     createShellSessionHandoffPackageMountDisplayViewModel: createIniPanelShellSessionHandoffPackageMountDisplayViewModel,
     createShellSessionHandoffPackageMountRenderState: createIniPanelShellSessionHandoffPackageMountRenderState,
+    renderShellSessionHandoffMountState: renderIniPanelShellSessionHandoffMountState,
     isSupportedShellSessionHandoffPackage: isSupportedIniPanelShellSessionHandoffPackage,
     controlPage: {
       browserApiSchema: createControlPageBrowserApiSchema(),