mirror of
https://github.com/basicmachines-co/basic-memory
synced 2026-06-21 13:47:35 +00:00
Paul Hernandez
161 lines
4.5 KiB
HTML
161 lines
4.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Basic Memory Note Preview</title>
|
|
<style>
|
|
:root {
|
|
color-scheme: light;
|
|
--bg: #f5f1ea;
|
|
--panel: #ffffff;
|
|
--ink: #1d1d1f;
|
|
--muted: #6d6d6d;
|
|
--accent: #0f766e;
|
|
--border: #e1d7cc;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 24px;
|
|
font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
|
|
background: linear-gradient(140deg, #f7f3ed, #efe8dd);
|
|
color: var(--ink);
|
|
}
|
|
|
|
h1 {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
margin-top: 4px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.panel {
|
|
background: var(--panel);
|
|
border: 1px solid var(--border);
|
|
border-radius: 14px;
|
|
padding: 16px;
|
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
font-family: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
white-space: pre-wrap;
|
|
color: #2a2a2a;
|
|
}
|
|
|
|
.empty {
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
padding: 18px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 id="title">Note Preview</h1>
|
|
<div class="subtitle" id="subtitle">Waiting for note content...</div>
|
|
|
|
<div class="panel">
|
|
<div id="empty" class="empty" style="display: none;">No content available.</div>
|
|
<pre id="content"></pre>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const title = document.getElementById("title");
|
|
const subtitle = document.getElementById("subtitle");
|
|
const contentEl = document.getElementById("content");
|
|
const emptyEl = document.getElementById("empty");
|
|
let hasData = false;
|
|
|
|
function stripFrontmatter(text) {
|
|
if (!text.startsWith("---")) return text;
|
|
const end = text.indexOf("---", 3);
|
|
if (end === -1) return text;
|
|
return text.slice(end + 3).trim();
|
|
}
|
|
|
|
function parseTitle(text) {
|
|
const lines = text.split("\n");
|
|
for (const line of lines) {
|
|
if (line.startsWith("# ")) return line.replace("# ", "").trim();
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function extractText(toolOutput) {
|
|
if (!toolOutput) return "";
|
|
|
|
if (typeof toolOutput === "string") return toolOutput;
|
|
|
|
const content = toolOutput.content;
|
|
if (Array.isArray(content)) {
|
|
const textBlock = content.find(
|
|
(block) => block && block.type === "text" && typeof block.text === "string"
|
|
);
|
|
if (textBlock) return textBlock.text;
|
|
}
|
|
|
|
if (toolOutput.structuredContent) {
|
|
if (typeof toolOutput.structuredContent === "string") {
|
|
return toolOutput.structuredContent;
|
|
}
|
|
}
|
|
|
|
return "";
|
|
}
|
|
|
|
function updateFromRenderData(renderData) {
|
|
if (!renderData) return;
|
|
const identifier = renderData.toolInput && renderData.toolInput.identifier;
|
|
const rawText = extractText(renderData.toolOutput);
|
|
if (!rawText) {
|
|
emptyEl.style.display = "block";
|
|
contentEl.textContent = "";
|
|
return;
|
|
}
|
|
|
|
emptyEl.style.display = "none";
|
|
const text = stripFrontmatter(rawText);
|
|
const previewTitle = parseTitle(text) || identifier || "Note Preview";
|
|
|
|
title.textContent = previewTitle;
|
|
subtitle.textContent = identifier ? `Identifier: ${identifier}` : "Note content";
|
|
contentEl.textContent = text.slice(0, 1400).trim();
|
|
}
|
|
|
|
function handleMessage(event) {
|
|
const message = event.data || {};
|
|
if (message.type === "ui-lifecycle-iframe-render-data") {
|
|
hasData = true;
|
|
updateFromRenderData(message.payload && message.payload.renderData);
|
|
}
|
|
}
|
|
|
|
window.addEventListener("message", handleMessage);
|
|
window.parent?.postMessage({ type: "ui-lifecycle-iframe-ready" }, "*");
|
|
|
|
setTimeout(() => {
|
|
if (!hasData) {
|
|
window.parent?.postMessage({ type: "ui-request-render-data" }, "*");
|
|
}
|
|
}, 200);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|