<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Universal Menu Preview</title>
<style>
body {
margin: 0;
background: #f7f7f8;
font-family: Inter, system-ui, -apple-system, sans-serif;
}
.wrapper {
max-width: 640px;
margin: 40px auto;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
background: white;
box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}
</style>
<script>
window.openai = {
toolOutput: {
title: "What's next?",
items: [
{ id: "plan", label: "Plan next steps", hint: "Add the task to your tracker" },
{ id: "share", label: "Share", hint: "Copy a link to the answer" },
{ id: "summarize", label: "Summarize", hint: "Create a brief recap" },
{ id: "ask_more", label: "Ask another question" }
]
},
widgetState: null,
theme: "light",
displayMode: "inline",
callTool: async () => ({ ok: true }),
sendFollowupMessage: async () => {},
requestDisplayMode: async () => ({ mode: "inline" }),
setWidgetState: async () => {}
};
</script>
</head>
<body>
<div class="wrapper">
<div id="menu-root"></div>
</div>
<script type="module" src="./dist/menu.js"></script>
</body>
</html>
