Kacper/nanobot-voice-interface
2
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: unify card runtime and event-driven web ui
Some checks failed
CI / Backend Checks (push) Failing after 36s
Details
CI / Frontend Checks (push) Failing after 40s
Details

Browse source
This commit is contained in:
kacper 2026-04-06 15:42:53 -04:00
parent 0edf8c3fef
commit 4dfb7ca3cc
105 changed files with 17382 additions and 8505 deletions
Download patch file Download diff file Expand all files Collapse all files

199
examples/cards/templates/live-bedroom-co2/template.html
View file

@ -1,204 +1,15 @@
<div data-co2-card="bedroom" style="font-family: var(--card-font, 'Iosevka', 'SF Mono', ui-monospace, Menlo, Consolas, monospace); background: #ffffff; color: #111827; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 8px 24px rgba(17, 24, 39, 0.12); padding: 24px; max-width: 520px;">
<div data-co2-card="bedroom" style="font-family: var(--card-font, 'Iosevka', 'SF Mono', ui-monospace, Menlo, Consolas, monospace); background: var(--theme-card-neutral-bg); color: var(--theme-card-neutral-text); border: 1px solid var(--theme-card-neutral-border); border-radius: 16px; box-shadow: var(--theme-shadow); padding: 24px; max-width: 520px;">
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px;">
<h2 style="margin:0; font-size:1.15rem; font-weight:700; color:#111827;">Bedroom CO2</h2>
<span data-co2-status style="font-size:0.82rem; color:#6b7280;">Loading...</span>
<h2 style="margin:0; font-size:1.15rem; font-weight:700; color:var(--theme-card-neutral-text);">Bedroom CO2</h2>
<span data-co2-status style="font-size:0.82rem; color:var(--theme-status-muted);">Loading...</span>
</div>
<div style="display:flex; align-items:baseline; gap:8px;">
<span data-co2-value style="font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-0.03em;">--</span>
<span style="font-size:1rem; font-weight:600; color:#4b5563;">ppm</span>
<span style="font-size:1rem; font-weight:600; color:var(--theme-card-neutral-subtle);">ppm</span>
</div>
<div style="margin-top:12px; font-size:0.84rem; color:#6b7280;">
<div style="margin-top:12px; font-size:0.84rem; color:var(--theme-card-neutral-muted);">
Updated: <span data-co2-updated>--</span>
</div>
</div>
<script>
(() => {
const script = document.currentScript;
const root = script?.closest('[data-nanobot-card-root]');
const state = window.__nanobotGetCardState?.(script) || {};
if (!(root instanceof HTMLElement)) return;
const valueEl = root.querySelector("[data-co2-value]");
const statusEl = root.querySelector("[data-co2-status]");
const updatedEl = root.querySelector("[data-co2-updated]");
if (!(valueEl instanceof HTMLElement) || !(statusEl instanceof HTMLElement) || !(updatedEl instanceof HTMLElement)) return;
const configuredToolName = typeof state.tool_name === 'string' ? state.tool_name.trim() : '';
const matchName = typeof state.match_name === 'string' ? state.match_name.trim() : 'Bedroom-Esp-Sensor CO2';
const INTERVAL_RAW = Number(state.refresh_ms);
const INTERVAL_MS = Number.isFinite(INTERVAL_RAW) && INTERVAL_RAW >= 1000 ? INTERVAL_RAW : 15000;
const setStatus = (label, color) => {
statusEl.textContent = label;
statusEl.style.color = color;
};
const setUpdatedNow = () => {
updatedEl.textContent = new Date().toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
second: "2-digit",
});
};
const parseValue = (raw) => {
const n = Number(raw);
return Number.isFinite(n) ? Math.round(n) : null;
};
const stripQuotes = (value) => {
const text = String(value ?? '').trim();
if ((text.startsWith("'") && text.endsWith("'")) || (text.startsWith('"') && text.endsWith('"'))) {
return text.slice(1, -1);
}
return text;
};
const normalizeText = (value) => String(value || '').trim().toLowerCase();
const parseLiveContextEntries = (payloadText) => {
const text = String(payloadText || '').replace(/\r/g, '');
const startIndex = text.indexOf('- names: ');
const relevant = startIndex >= 0 ? text.slice(startIndex) : text;
const entries = [];
let current = null;
let inAttributes = false;
const pushCurrent = () => {
if (current) entries.push(current);
current = null;
inAttributes = false;
};
for (const rawLine of relevant.split('\n')) {
if (rawLine.startsWith('- names: ')) {
pushCurrent();
current = {
name: stripQuotes(rawLine.slice(9)),
domain: '',
state: '',
attributes: {},
};
continue;
}
if (!current) continue;
const trimmed = rawLine.trim();
if (!trimmed) continue;
if (trimmed === 'attributes:') {
inAttributes = true;
continue;
}
if (rawLine.startsWith(' domain:')) {
current.domain = stripQuotes(rawLine.slice(rawLine.indexOf(':') + 1));
inAttributes = false;
continue;
}
if (rawLine.startsWith(' state:')) {
current.state = stripQuotes(rawLine.slice(rawLine.indexOf(':') + 1));
inAttributes = false;
continue;
}
if (inAttributes && rawLine.startsWith(' ')) {
const separatorIndex = rawLine.indexOf(':');
if (separatorIndex >= 0) {
const key = rawLine.slice(4, separatorIndex).trim();
const value = stripQuotes(rawLine.slice(separatorIndex + 1));
current.attributes[key] = value;
}
continue;
}
inAttributes = false;
}
pushCurrent();
return entries;
};
const extractLiveContextText = (toolResult) => {
if (toolResult && toolResult.parsed && typeof toolResult.parsed === 'object') {
const parsed = toolResult.parsed;
if (typeof parsed.result === 'string') return parsed.result;
}
if (typeof toolResult?.content === 'string') {
try {
const parsed = JSON.parse(toolResult.content);
if (parsed && typeof parsed === 'object' && typeof parsed.result === 'string') {
return parsed.result;
}
} catch {
return toolResult.content;
}
return toolResult.content;
}
return '';
};
const resolveToolName = async () => {
if (configuredToolName) return configuredToolName;
if (!window.__nanobotListTools) return 'mcp_home_assistant_GetLiveContext';
try {
const tools = await window.__nanobotListTools();
const liveContextTool = Array.isArray(tools)
? tools.find((tool) => /(^|_)GetLiveContext$/i.test(String(tool?.name || '')))
: null;
return liveContextTool?.name || 'mcp_home_assistant_GetLiveContext';
} catch {
return 'mcp_home_assistant_GetLiveContext';
}
};
const refresh = async () => {
setStatus("Refreshing", "#6b7280");
try {
const toolName = await resolveToolName();
const toolResult = await window.__nanobotCallTool?.(toolName, {});
const entries = parseLiveContextEntries(extractLiveContextText(toolResult));
const entry = entries.find((item) => normalizeText(item.name) === normalizeText(matchName));
if (!entry) throw new Error(`Missing sensor ${matchName}`);
const value = parseValue(entry.state);
if (value === null) throw new Error("Invalid sensor payload");
valueEl.textContent = String(value);
if (value >= 1200) setStatus("High", "#b91c1c");
else if (value >= 900) setStatus("Elevated", "#b45309");
else setStatus("Good", "#047857");
setUpdatedNow();
window.__nanobotSetCardLiveContent?.(script, {
kind: 'sensor',
tool_name: toolName,
match_name: entry.name,
value,
display_value: String(value),
unit: entry.attributes?.unit_of_measurement || 'ppm',
status: statusEl.textContent || null,
updated_at: updatedEl.textContent || null,
});
} catch (err) {
valueEl.textContent = "--";
setStatus("Unavailable", "#b91c1c");
updatedEl.textContent = String(err);
window.__nanobotSetCardLiveContent?.(script, {
kind: 'sensor',
tool_name: configuredToolName || 'mcp_home_assistant_GetLiveContext',
match_name: matchName,
value: null,
display_value: '--',
unit: 'ppm',
status: 'Unavailable',
updated_at: String(err),
error: String(err),
});
}
};
window.__nanobotSetCardRefresh?.(script, () => {
void refresh();
});
void refresh();
window.setInterval(() => {
void refresh();
}, INTERVAL_MS);
})();
</script>