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

292 lines
13 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LinuxCNC INI Panel Launch</title>
<style>
:root {
color-scheme: light;
--bg: #f2f5f8;
--panel: #ffffff;
--border: #cfd8e1;
--text: #17212b;
--muted: #5a6875;
--accent: #1366a6;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Segoe UI", "Noto Sans", sans-serif;
background: var(--bg);
color: var(--text);
}
main {
max-width: 960px;
margin: 0 auto;
padding: 24px;
display: grid;
gap: 16px;
}
.panel {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 10px 30px rgba(17, 34, 51, 0.06);
padding: 16px;
display: grid;
gap: 14px;
}
h1 {
margin: 0;
font-size: 18px;
font-weight: 600;
}
.links {
display: grid;
gap: 8px;
}
.handoff-status {
border-top: 1px solid var(--border);
padding-top: 12px;
display: grid;
gap: 8px;
}
.handoff-status dl {
margin: 0;
display: grid;
grid-template-columns: minmax(120px, 180px) 1fr;
gap: 6px 12px;
font: 13px/1.4 "Segoe UI", "Noto Sans", sans-serif;
}
.handoff-status dt {
color: var(--muted);
}
.handoff-status dd {
margin: 0;
color: var(--text);
overflow-wrap: anywhere;
}
a {
color: var(--accent);
text-decoration: none;
font: 14px/1.4 "Segoe UI", "Noto Sans", sans-serif;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0;
color: var(--muted);
font: 13px/1.5 "Segoe UI", "Noto Sans", sans-serif;
}
</style>
</head>
<body>
<main>
<section class="panel">
<h1>LinuxCNC INI Panel</h1>
<p>Choose the editable panel, the read-only control view, or the shell handoff overview.</p>
<div class="links">
<a data-entry-id="edit-run" href="./index.html">Open edit and run panel</a>
<a data-entry-id="control-view" href="./control-page.html">Open read-only control view</a>
<a data-entry-id="workflow-overview" href="./workflow-overview.html">Open shell handoff overview</a>
</div>
<section class="handoff-status" aria-label="Shell handoff compatibility" data-handoff-shell>
<p data-handoff-status>Checking shell handoff compatibility.</p>
<dl data-handoff-rows></dl>
</section>
<section class="handoff-status" aria-label="Shell handoff mount readiness" data-handoff-mount>
<p data-handoff-mount-status>Checking shell handoff mount readiness.</p>
<dl data-handoff-mount-rows></dl>
</section>
<section class="handoff-status" aria-label="Shell handoff workflow summary" data-handoff-workflow>
<p data-handoff-workflow-status>Checking shell handoff workflow summary.</p>
<dl data-handoff-workflow-rows></dl>
</section>
</section>
</main>
<script type="module">
import {
createIniPanelLauncherLinkViewModel,
createIniPanelShellViewModel,
isSupportedIniPanelLaunchApiManifest,
createIniPanelShellSessionHandoffMountDomContract,
createIniPanelShellSessionHandoffMountDomReadiness,
mountIniPanelShellSessionHandoff,
mountIniPanelShellSessionHandoffFromControlPage,
readIniPanelShellSessionHandoffStatusFromControlPage,
createIniPanelShellSessionHandoffWorkflowSummary,
createIniPanelShellSessionHandoffWorkflowDisplayViewModel,
createIniPanelShellSessionHandoffWorkflowRenderState,
createIniPanelShellSessionHandoffWorkflowDomContract,
createIniPanelShellSessionHandoffWorkflowDomReadiness,
renderIniPanelShellSessionHandoffWorkflowState,
mountIniPanelShellSessionHandoffWorkflow,
renderIniPanelShellSessionHandoffMountState,
} from "./ui-shell.js";
const shellViewModel = createIniPanelShellViewModel();
const links = shellViewModel.launcherLinks;
for (const linkModel of links) {
const link = document.querySelector(`a[data-entry-id="${linkModel.entryId}"]`);
if (!link) {
throw new Error(`Missing launcher entry ${linkModel.entryId}`);
}
link.textContent = linkModel.label;
link.href = linkModel.href;
}
const handoffRenderState = shellViewModel.shellSessionHandoffPackageRenderState;
const handoffShell = document.querySelector("[data-handoff-shell]");
handoffShell.dataset.handoffPhase = handoffRenderState.dataset.handoffPhase;
handoffShell.dataset.handoffReady = handoffRenderState.dataset.handoffReady;
handoffShell.dataset.handoffScope = handoffRenderState.dataset.handoffScope;
document.querySelector("[data-handoff-status]").textContent = handoffRenderState.statusLine;
const handoffRows = document.querySelector("[data-handoff-rows]");
for (const row of handoffRenderState.rows) {
const term = document.createElement("dt");
term.dataset.handoffRow = row.id;
term.textContent = row.label;
const detail = document.createElement("dd");
detail.dataset.handoffValue = row.id;
detail.textContent = row.value;
handoffRows.append(term, detail);
}
const handoffMountRenderState = shellViewModel.shellSessionHandoffPackageMountRenderState;
renderIniPanelShellSessionHandoffMountState(handoffMountRenderState, { documentRef: document });
const handoffWorkflowRenderState = shellViewModel.shellSessionHandoffWorkflowRenderState;
renderIniPanelShellSessionHandoffWorkflowState(handoffWorkflowRenderState, { documentRef: document });
window.linuxCncIniPanelLaunchApi = {
isSupportedLaunchApiManifest: isSupportedIniPanelLaunchApiManifest,
getLaunchApiSchema: () => shellViewModel.launchApiSchema,
getLaunchApiManifest: () => shellViewModel.launchApiManifest,
getShellIntegrationSchema: () => shellViewModel.shellIntegrationSchema,
getShellIntegrationManifest: () => shellViewModel.shellIntegrationManifest,
getShellIntegrationReadiness: () => shellViewModel.shellIntegrationReadiness,
getShellSessionHandoffSummarySchema: () => shellViewModel.shellSessionHandoffSummarySchema,
getShellSessionHandoffSummary: () => shellViewModel.shellSessionHandoffSummary,
isSupportedShellSessionHandoffSummary: shellViewModel.isSupportedShellSessionHandoffSummary,
getShellSessionHandoffCompatibilityReport: () => shellViewModel.shellSessionHandoffCompatibilityReport,
getShellSessionHandoffDisplayViewModel: () => shellViewModel.shellSessionHandoffDisplayViewModel,
getShellSessionHandoffSnapshot: () => shellViewModel.shellSessionHandoffSnapshot,
getShellSessionHandoffRenderState: () => shellViewModel.shellSessionHandoffRenderState,
getShellSessionHandoffActionPlan: () => shellViewModel.shellSessionHandoffActionPlan,
getShellSessionHandoffChecklist: () => shellViewModel.shellSessionHandoffChecklist,
getShellSessionHandoffPackageSchema: () => shellViewModel.shellSessionHandoffPackageSchema,
getShellSessionHandoffPackage: () => shellViewModel.shellSessionHandoffPackage,
getShellSessionHandoffPackageReport: () => shellViewModel.shellSessionHandoffPackageReport,
getShellSessionHandoffPackageDisplayViewModel: () => shellViewModel.shellSessionHandoffPackageDisplayViewModel,
getShellSessionHandoffPackageRenderState: () => shellViewModel.shellSessionHandoffPackageRenderState,
getShellSessionHandoffPackageMountState: (sessionLoadState) => (
sessionLoadState
? shellViewModel.createShellSessionHandoffPackageMountState({
handoffPackage: shellViewModel.shellSessionHandoffPackage,
packageRenderState: shellViewModel.shellSessionHandoffPackageRenderState,
sessionLoadState,
})
: shellViewModel.shellSessionHandoffPackageMountState
),
getShellSessionHandoffPackageMountDisplayViewModel: (mountState) => (
shellViewModel.createShellSessionHandoffPackageMountDisplayViewModel(
mountState ?? shellViewModel.shellSessionHandoffPackageMountState,
)
),
getShellSessionHandoffPackageMountRenderState: (mountState) => (
shellViewModel.createShellSessionHandoffPackageMountRenderState(
shellViewModel.createShellSessionHandoffPackageMountDisplayViewModel(
mountState ?? shellViewModel.shellSessionHandoffPackageMountState,
),
)
),
getShellSessionHandoffMountDomContract: (options) => (
createIniPanelShellSessionHandoffMountDomContract(options)
),
getShellSessionHandoffMountDomReadiness: (options) => (
createIniPanelShellSessionHandoffMountDomReadiness(options ?? { documentRef: document })
),
renderShellSessionHandoffMountState: (renderState, options) => (
renderIniPanelShellSessionHandoffMountState(renderState, options ?? { documentRef: document })
),
mountShellSessionHandoff: (options) => (
mountIniPanelShellSessionHandoff(options ?? {
renderState: shellViewModel.shellSessionHandoffPackageMountRenderState,
documentRef: document,
})
),
mountShellSessionHandoffFromControlPage: (options) => (
mountIniPanelShellSessionHandoffFromControlPage({
handoffPackage: shellViewModel.shellSessionHandoffPackage,
packageRenderState: shellViewModel.shellSessionHandoffPackageRenderState,
documentRef: document,
...(options ?? {}),
})
),
readShellSessionHandoffStatusFromControlPage: (options) => (
readIniPanelShellSessionHandoffStatusFromControlPage({
handoffSummary: shellViewModel.shellSessionHandoffSummary,
...(options ?? {}),
})
),
getShellSessionHandoffWorkflowSummary: (options) => (
createIniPanelShellSessionHandoffWorkflowSummary(options ?? {
mountWorkflow: {
phase: shellViewModel.shellSessionHandoffPackageMountRenderState.phase,
ready: shellViewModel.shellSessionHandoffPackageMountRenderState.ready,
statusLine: shellViewModel.shellSessionHandoffPackageMountRenderState.statusLine,
},
controlPageMountWorkflow: {
phase: shellViewModel.shellSessionHandoffPackageMountState.phase,
ready: shellViewModel.shellSessionHandoffPackageMountState.ready,
statusLine: shellViewModel.shellSessionHandoffPackageMountState.statusLine,
},
readonlyStatusResult: shellViewModel.readShellSessionHandoffStatusFromControlPage({
handoffSummary: shellViewModel.shellSessionHandoffSummary,
}),
})
),
getShellSessionHandoffWorkflowDisplayViewModel: (options) => (
createIniPanelShellSessionHandoffWorkflowDisplayViewModel(
options ?? shellViewModel.shellSessionHandoffWorkflowSummary,
)
),
getShellSessionHandoffWorkflowRenderState: (options) => (
createIniPanelShellSessionHandoffWorkflowRenderState(
options ?? shellViewModel.shellSessionHandoffWorkflowDisplayViewModel,
)
),
getShellSessionHandoffWorkflowDomContract: (options) => (
createIniPanelShellSessionHandoffWorkflowDomContract(options)
),
getShellSessionHandoffWorkflowDomReadiness: (options) => (
createIniPanelShellSessionHandoffWorkflowDomReadiness(options ?? { documentRef: document })
),
renderShellSessionHandoffWorkflowState: (renderState, options) => (
renderIniPanelShellSessionHandoffWorkflowState(renderState, options ?? { documentRef: document })
),
mountShellSessionHandoffWorkflow: (options) => (
mountIniPanelShellSessionHandoffWorkflow(options ?? {
renderState: shellViewModel.shellSessionHandoffWorkflowRenderState,
documentRef: document,
})
),
getWorkflowOverviewContract: (options) => (
shellViewModel.createWorkflowOverviewContract(options)
),
getWorkflowOverviewReadiness: (options) => (
shellViewModel.createWorkflowOverviewReadiness(options)
),
mountWorkflowOverviewEmbedding: (options) => (
shellViewModel.mountWorkflowOverviewEmbedding(options)
),
getWorkflowOverviewEmbeddingReport: (embeddingResult, contract) => (
shellViewModel.createWorkflowOverviewEmbeddingReport(embeddingResult, contract)
),
isSupportedShellSessionHandoffPackage: shellViewModel.isSupportedShellSessionHandoffPackage,
getLauncherLinks: () => shellViewModel.launcherLinks,
getControlPageApiMethods: () => shellViewModel.controlPage.browserApiMethods,
};
</script>
</body>
</html>