Skip to content

feat(embedded-web): send wrapper init metadata before host ready #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Morten Barklund (barklund) merged 11 commits into from
Sep 11, 2026
Merged

feat(embedded-web): send wrapper init metadata before host ready #37

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e57ceff
feat(embedded-web): add automatic init handshake and wrapper metadata…
barklund Aug 24, 2026
d8a74d4
fix: address Copilot review - ensure metadata freshness and mark _ini…
barklund Aug 24, 2026
96c86a3
fix: keep init protocol private
barklund Aug 24, 2026
6293ed3
fix: use prepack for publish artifacts
barklund Aug 25, 2026
a89ad60
fix: harden embedded ready handling
barklund Aug 25, 2026
65f2924
fix: avoid duplicate metadata builds
barklund Aug 25, 2026
5a9772f
chore: format embedded source files
barklund Aug 25, 2026
e4e366d
fix: fail fast after init failure
barklund Aug 25, 2026
c92868b
chore: format embedded review files
barklund Aug 25, 2026
69cd3cb
fix: align embedded public protocol types
barklund Aug 25, 2026
cb27429
fix: restore public demo assistant URL
barklund Aug 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/workflows/release.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,14 +116,14 @@ jobs:
- name: Install dependencies
run: npm ci

- name: Build
run: npm run prerelease

- name: Set version from tag
run: |
TAG_VERSION="${GITHUB_REF#refs/tags/v}"
npm version --no-git-tag-version "$TAG_VERSION"

- name: Build
run: npm run prerelease

Comment thread
barklund marked this conversation as resolved.
- name: Publish to npm
run: |
if [[ ${GITHUB_REF} == *alpha* ]]; then
Expand Down
185 changes: 45 additions & 140 deletions demo/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ window.testAuthentication = async () => {
try {
authPayload = JSON.parse(authPayloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

Expand All @@ -39,10 +36,7 @@ window.testAuthentication = async () => {
"info",
);
const response = await component.auth(authPayload);
window.addLogEntry(
`Authentication successful: ${JSON.stringify(response)}`,
"success",
);
window.addLogEntry(`Authentication successful: ${JSON.stringify(response)}`, "success");
} catch (error) {
window.addLogEntry(`Authentication failed: ${error.message}`, "error");
}
Expand All @@ -54,26 +48,18 @@ window.testAuthentication = async () => {
window.showDeviceLinkQR = async () => {
if (component?.showDeviceLinkQR) {
try {
const payloadText = document.getElementById(
"device-link-qr-payload",
).value;
const payloadText = document.getElementById("device-link-qr-payload").value;
let payload;
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

window.addLogEntry("Showing device-link QR", "info");
const response = await component.showDeviceLinkQR(payload);
window.addLogEntry(
`Device-link QR finished with status: ${response.status}`,
"success",
);
window.addLogEntry(`Device-link QR finished with status: ${response.status}`, "success");
} catch (error) {
window.addLogEntry(`Device-link QR failed: ${error.message}`, "error");
}
Expand All @@ -85,24 +71,16 @@ window.showDeviceLinkQR = async () => {
window.configureApp = async () => {
if (component?.configureApp) {
try {
const payloadText = document.getElementById(
"configure-app-payload",
).value;
const payloadText = document.getElementById("configure-app-payload").value;
let payload;
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

window.addLogEntry(
`Configuring app with payload: ${JSON.stringify(payload)}`,
"info",
);
window.addLogEntry(`Configuring app with payload: ${JSON.stringify(payload)}`, "info");
await component.configureApp(payload);
window.addLogEntry("App configuration successful", "success");
} catch (error) {
Expand All @@ -116,17 +94,12 @@ window.configureApp = async () => {
window.setInteractionOptions = async () => {
if (component?.setInteractionOptions) {
try {
const payloadText = document.getElementById(
"interaction-options-payload",
).value;
const payloadText = document.getElementById("interaction-options-payload").value;
let payload;
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

Expand All @@ -137,40 +110,26 @@ window.setInteractionOptions = async () => {
await component.setInteractionOptions(payload);
window.addLogEntry("Interaction options set successfully", "success");
} catch (error) {
window.addLogEntry(
`Set interaction options failed: ${error.message}`,
"error",
);
window.addLogEntry(`Set interaction options failed: ${error.message}`, "error");
}
} else {
window.addLogEntry(
"Component not ready for setInteractionOptions",
"error",
);
window.addLogEntry("Component not ready for setInteractionOptions", "error");
}
};

window.configureLegacy = async () => {
if (component?.configure) {
try {
const payloadText = document.getElementById(
"legacy-configure-payload",
).value;
const payloadText = document.getElementById("legacy-configure-payload").value;
let payload;
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

window.addLogEntry(
`Sending legacy configure payload: ${JSON.stringify(payload)}`,
"info",
);
window.addLogEntry(`Sending legacy configure payload: ${JSON.stringify(payload)}`, "info");
await component.configure(payload);
window.addLogEntry("Legacy configure successful", "success");
} catch (error) {
Expand All @@ -184,17 +143,12 @@ window.configureLegacy = async () => {
window.configureSessionLegacy = async () => {
if (component?.configureSession) {
try {
const payloadText = document.getElementById(
"legacy-configure-session-payload",
).value;
const payloadText = document.getElementById("legacy-configure-session-payload").value;
let payload;
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

Expand All @@ -205,10 +159,7 @@ window.configureSessionLegacy = async () => {
await component.configureSession(payload);
window.addLogEntry("Legacy configureSession successful", "success");
} catch (error) {
window.addLogEntry(
`Legacy configureSession failed: ${error.message}`,
"error",
);
window.addLogEntry(`Legacy configureSession failed: ${error.message}`, "error");
}
} else {
window.addLogEntry("Component not ready for configureSession", "error");
Expand All @@ -224,17 +175,11 @@ window.addFacts = async () => {
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

window.addLogEntry(
`Adding facts with payload: ${JSON.stringify(payload)}`,
"info",
);
window.addLogEntry(`Adding facts with payload: ${JSON.stringify(payload)}`, "info");
await component.addFacts(payload);
window.addLogEntry("Add facts successful", "success");
} catch (error) {
Expand All @@ -254,17 +199,11 @@ window.navigate = async () => {
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

window.addLogEntry(
`Navigating with payload: ${JSON.stringify(payload)}`,
"info",
);
window.addLogEntry(`Navigating with payload: ${JSON.stringify(payload)}`, "info");
await component.navigate(payload);
window.addLogEntry("Navigation successful", "success");
} catch (error) {
Expand All @@ -279,29 +218,18 @@ window.createInteraction = async () => {
if (component?.createInteraction) {
try {
// Parse the JSON from the textarea
const payloadText = document.getElementById(
"create-interaction-payload",
).value;
const payloadText = document.getElementById("create-interaction-payload").value;
let payload;
try {
payload = JSON.parse(payloadText);
} catch (jsonError) {
window.addLogEntry(
`Invalid JSON in payload: ${jsonError.message}`,
"error",
);
window.addLogEntry(`Invalid JSON in payload: ${jsonError.message}`, "error");
return;
}

window.addLogEntry(
`Creating interaction with payload: ${JSON.stringify(payload)}`,
"info",
);
window.addLogEntry(`Creating interaction with payload: ${JSON.stringify(payload)}`, "info");
const response = await component.createInteraction(payload);
window.addLogEntry(
`Interaction creation successful: ${JSON.stringify(response)}`,
"success",
);
window.addLogEntry(`Interaction creation successful: ${JSON.stringify(response)}`, "success");
// Update navigate payload textarea with the returned interaction ID
try {
const interactionId = response.id || null;
Expand Down Expand Up @@ -337,16 +265,10 @@ window.createInteraction = async () => {
}
}
} catch (updateError) {
window.addLogEntry(
`Failed to update navigate payload: ${updateError.message}`,
"error",
);
window.addLogEntry(`Failed to update navigate payload: ${updateError.message}`, "error");
}
} catch (error) {
window.addLogEntry(
`Interaction creation failed: ${error.message}`,
"error",
);
window.addLogEntry(`Interaction creation failed: ${error.message}`, "error");
}
} else {
window.addLogEntry("Component not ready for createInteraction", "error");
Expand All @@ -372,11 +294,14 @@ window.updateStatus = () => {

if (component) {
const baseURL = component.getAttribute("baseURL");
const debugStatus = component.getDebugStatus?.();

statusElement.innerHTML = `
<strong>Current Status:</strong><br>
Base URL: ${baseURL}<br>
Component Ready: ${component.show && component.hide ? "Yes" : "No"}<br>
Custom element loaded: ${component.show && component.hide ? "Yes" : "No"}<br>
Message bridge created: ${debugStatus?.postMessageHandlerExists ? "Yes" : "No"}<br>
Assistant ready for postMessage: ${debugStatus?.postMessageHandlerReady ? "Yes" : "No"}<br>
`;
} else {
statusElement.innerHTML = "Status: Component not found";
Expand All @@ -386,9 +311,7 @@ window.updateStatus = () => {
// Initialize demo when DOM is ready
document.addEventListener("DOMContentLoaded", () => {
// Generate random encounter ID for create interaction
const createInteractionPayload = document.getElementById(
"create-interaction-payload",
);
const createInteractionPayload = document.getElementById("create-interaction-payload");
if (createInteractionPayload) {
const randomId = `encounter-${Date.now()}`;
const payload = {
Expand All @@ -406,42 +329,24 @@ document.addEventListener("DOMContentLoaded", () => {
}

// Add event listeners to buttons
document
.getElementById("show-btn")
.addEventListener("click", window.showCorti);
document
.getElementById("hide-btn")
.addEventListener("click", window.hideCorti);
document
.getElementById("auth-btn")
.addEventListener("click", window.testAuthentication);
document
.getElementById("device-link-qr-btn")
.addEventListener("click", window.showDeviceLinkQR);
document
.getElementById("clear-log-btn")
.addEventListener("click", window.clearLog);
document.getElementById("show-btn").addEventListener("click", window.showCorti);
document.getElementById("hide-btn").addEventListener("click", window.hideCorti);
document.getElementById("auth-btn").addEventListener("click", window.testAuthentication);
document.getElementById("device-link-qr-btn").addEventListener("click", window.showDeviceLinkQR);
document.getElementById("clear-log-btn").addEventListener("click", window.clearLog);
document
.getElementById("create-interaction-btn")
.addEventListener("click", window.createInteraction);
document
.getElementById("configure-app-btn")
.addEventListener("click", window.configureApp);
document.getElementById("configure-app-btn").addEventListener("click", window.configureApp);
document
.getElementById("set-interaction-options-btn")
.addEventListener("click", window.setInteractionOptions);
document
.getElementById("legacy-configure-btn")
.addEventListener("click", window.configureLegacy);
document.getElementById("legacy-configure-btn").addEventListener("click", window.configureLegacy);
document
.getElementById("legacy-configure-session-btn")
.addEventListener("click", window.configureSessionLegacy);
document
.getElementById("add-facts-btn")
.addEventListener("click", window.addFacts);
document
.getElementById("navigate-btn")
.addEventListener("click", window.navigate);
document.getElementById("add-facts-btn").addEventListener("click", window.addFacts);
document.getElementById("navigate-btn").addEventListener("click", window.navigate);

// Update status periodically
setInterval(window.updateStatus, 1000);
Expand All @@ -450,11 +355,11 @@ document.addEventListener("DOMContentLoaded", () => {
// Initialize when component is defined
customElements.whenDefined("corti-embedded").then(() => {
window.updateStatus();
window.addLogEntry("Corti component loaded and ready", "success");
component.addEventListener("error", event => {
window.addLogEntry("Corti custom element loaded", "success");
component.addEventListener("error", (event) => {
console.log(event.detail);
});
component.addEventListener("add-facts", event => {
component.addEventListener("add-facts", (event) => {
console.log(event.detail);
});
});
Loading
Loading