|
| 1 | +import { createToolHostManifest, getToolHostEntryById } from "../shared/toolHostManifest.js"; |
| 2 | +import { createToolHostRuntime } from "../shared/toolHostRuntime.js"; |
| 3 | + |
| 4 | +const refs = { |
| 5 | + toolSelect: document.querySelector("[data-tool-host-select]"), |
| 6 | + mountButton: document.querySelector("[data-tool-host-mount]"), |
| 7 | + unmountButton: document.querySelector("[data-tool-host-unmount]"), |
| 8 | + standaloneLink: document.querySelector("[data-tool-host-standalone]"), |
| 9 | + statusText: document.querySelector("[data-tool-host-status]"), |
| 10 | + currentLabel: document.querySelector("[data-tool-host-current-label]"), |
| 11 | + mountContainer: document.querySelector("[data-tool-host-mount-container]") |
| 12 | +}; |
| 13 | + |
| 14 | +const manifest = createToolHostManifest(); |
| 15 | + |
| 16 | +function readSelectedToolId() { |
| 17 | + return refs.toolSelect instanceof HTMLSelectElement ? refs.toolSelect.value : ""; |
| 18 | +} |
| 19 | + |
| 20 | +function writeStatus(text) { |
| 21 | + if (refs.statusText instanceof HTMLElement) { |
| 22 | + refs.statusText.textContent = text; |
| 23 | + } |
| 24 | +} |
| 25 | + |
| 26 | +function setCurrentLabel(text) { |
| 27 | + if (refs.currentLabel instanceof HTMLElement) { |
| 28 | + refs.currentLabel.textContent = text; |
| 29 | + } |
| 30 | +} |
| 31 | + |
| 32 | +function updateStandaloneHref(toolId) { |
| 33 | + if (!(refs.standaloneLink instanceof HTMLAnchorElement)) { |
| 34 | + return; |
| 35 | + } |
| 36 | + const entry = getToolHostEntryById(manifest, toolId); |
| 37 | + refs.standaloneLink.href = entry ? entry.launchPath : "#"; |
| 38 | +} |
| 39 | + |
| 40 | +function writeQueryToolId(toolId, replace = false) { |
| 41 | + const url = new URL(window.location.href); |
| 42 | + if (toolId) { |
| 43 | + url.searchParams.set("tool", toolId); |
| 44 | + } else { |
| 45 | + url.searchParams.delete("tool"); |
| 46 | + } |
| 47 | + const method = replace ? "replaceState" : "pushState"; |
| 48 | + window.history[method]({}, "", url.toString()); |
| 49 | +} |
| 50 | + |
| 51 | +function readInitialToolId() { |
| 52 | + const url = new URL(window.location.href); |
| 53 | + const fromQuery = url.searchParams.get("tool"); |
| 54 | + if (fromQuery && getToolHostEntryById(manifest, fromQuery)) { |
| 55 | + return fromQuery; |
| 56 | + } |
| 57 | + return manifest.tools[0]?.id || ""; |
| 58 | +} |
| 59 | + |
| 60 | +function populateToolSelect(initialToolId) { |
| 61 | + if (!(refs.toolSelect instanceof HTMLSelectElement)) { |
| 62 | + return; |
| 63 | + } |
| 64 | + |
| 65 | + refs.toolSelect.innerHTML = manifest.tools |
| 66 | + .map((tool) => `<option value="${tool.id}">${tool.displayName}</option>`) |
| 67 | + .join(""); |
| 68 | + refs.toolSelect.value = getToolHostEntryById(manifest, initialToolId) ? initialToolId : (manifest.tools[0]?.id || ""); |
| 69 | +} |
| 70 | + |
| 71 | +const runtime = createToolHostRuntime({ |
| 72 | + manifest, |
| 73 | + mountContainer: refs.mountContainer, |
| 74 | + onStatus(message) { |
| 75 | + writeStatus(message); |
| 76 | + }, |
| 77 | + onMounted(tool) { |
| 78 | + setCurrentLabel(`Mounted: ${tool.displayName}`); |
| 79 | + }, |
| 80 | + onUnmounted() { |
| 81 | + setCurrentLabel("No tool mounted."); |
| 82 | + } |
| 83 | +}); |
| 84 | + |
| 85 | +function mountSelectedTool(source = "manual") { |
| 86 | + const toolId = readSelectedToolId(); |
| 87 | + if (!toolId) { |
| 88 | + writeStatus("Select a tool to mount."); |
| 89 | + return; |
| 90 | + } |
| 91 | + updateStandaloneHref(toolId); |
| 92 | + writeQueryToolId(toolId, source === "init"); |
| 93 | + runtime.mountTool(toolId, { |
| 94 | + source, |
| 95 | + requestedAt: new Date().toISOString() |
| 96 | + }); |
| 97 | +} |
| 98 | + |
| 99 | +function bindEvents() { |
| 100 | + if (refs.mountButton instanceof HTMLButtonElement) { |
| 101 | + refs.mountButton.addEventListener("click", () => { |
| 102 | + mountSelectedTool("button"); |
| 103 | + }); |
| 104 | + } |
| 105 | + |
| 106 | + if (refs.unmountButton instanceof HTMLButtonElement) { |
| 107 | + refs.unmountButton.addEventListener("click", () => { |
| 108 | + runtime.unmountCurrentTool("manual"); |
| 109 | + }); |
| 110 | + } |
| 111 | + |
| 112 | + if (refs.toolSelect instanceof HTMLSelectElement) { |
| 113 | + refs.toolSelect.addEventListener("change", () => { |
| 114 | + updateStandaloneHref(readSelectedToolId()); |
| 115 | + mountSelectedTool("select"); |
| 116 | + }); |
| 117 | + } |
| 118 | + |
| 119 | + window.addEventListener("popstate", () => { |
| 120 | + const toolId = readInitialToolId(); |
| 121 | + if (refs.toolSelect instanceof HTMLSelectElement) { |
| 122 | + refs.toolSelect.value = toolId; |
| 123 | + } |
| 124 | + updateStandaloneHref(toolId); |
| 125 | + mountSelectedTool("popstate"); |
| 126 | + }); |
| 127 | +} |
| 128 | + |
| 129 | +function init() { |
| 130 | + const initialToolId = readInitialToolId(); |
| 131 | + populateToolSelect(initialToolId); |
| 132 | + updateStandaloneHref(initialToolId); |
| 133 | + bindEvents(); |
| 134 | + mountSelectedTool("init"); |
| 135 | +} |
| 136 | + |
| 137 | +init(); |
0 commit comments