+
-
--
-
No events scheduled.
+
--
+
No events scheduled.
-
Updated --
+
Updated --
-
diff --git a/examples/cards/templates/calendar-timeline-live/card.js b/examples/cards/templates/calendar-timeline-live/card.js
new file mode 100644
index 0000000..c0080c3
--- /dev/null
+++ b/examples/cards/templates/calendar-timeline-live/card.js
@@ -0,0 +1,584 @@
+export function mount({ root, state, host }) {
+ state = state || {};
+ const __cleanup = [];
+ const __setInterval = (...args) => {
+ const id = window.setInterval(...args);
+ __cleanup.push(() => window.clearInterval(id));
+ return id;
+ };
+ const __setTimeout = (...args) => {
+ const id = window.setTimeout(...args);
+ __cleanup.push(() => window.clearTimeout(id));
+ return id;
+ };
+ if (!(root instanceof HTMLElement)) return;
+
+ const headlineEl = root.querySelector('[data-calendar-headline]');
+ const detailEl = root.querySelector('[data-calendar-detail]');
+ const allDayWrapEl = root.querySelector('[data-calendar-all-day-wrap]');
+ const allDayEl = root.querySelector('[data-calendar-all-day]');
+ const emptyEl = root.querySelector('[data-calendar-empty]');
+ const timelineShellEl = root.querySelector('[data-calendar-timeline-shell]');
+ const timelineEl = root.querySelector('[data-calendar-timeline]');
+
+ if (!(headlineEl instanceof HTMLElement) ||
+ !(detailEl instanceof HTMLElement) ||
+ !(allDayWrapEl instanceof HTMLElement) ||
+ !(allDayEl instanceof HTMLElement) ||
+ !(emptyEl instanceof HTMLElement) ||
+ !(timelineShellEl instanceof HTMLElement) ||
+ !(timelineEl instanceof HTMLElement)) {
+ return;
+ }
+
+ const subtitle = typeof state.subtitle === 'string' ? state.subtitle.trim() : '';
+ const configuredToolName = typeof state.tool_name === 'string' ? state.tool_name.trim() : '';
+ const calendarNames = Array.isArray(state.calendar_names)
+ ? state.calendar_names.map((value) => String(value || '').trim()).filter(Boolean)
+ : [];
+ const refreshMsRaw = Number(state.refresh_ms);
+ const refreshMs = Number.isFinite(refreshMsRaw) && refreshMsRaw >= 60000 ? refreshMsRaw : 15 * 60 * 1000;
+ const minStartHourRaw = Number(state.min_start_hour);
+ const maxEndHourRaw = Number(state.max_end_hour);
+ const minWindowHoursRaw = Number(state.min_window_hours);
+ const slotHeightRaw = Number(state.slot_height);
+ const minStartHour = Number.isFinite(minStartHourRaw) ? Math.max(0, Math.min(23, Math.round(minStartHourRaw))) : 6;
+ const maxEndHour = Number.isFinite(maxEndHourRaw) ? Math.max(minStartHour + 1, Math.min(24, Math.round(maxEndHourRaw))) : 22;
+ const minWindowMinutes = (Number.isFinite(minWindowHoursRaw) ? Math.max(3, Math.min(18, minWindowHoursRaw)) : 6) * 60;
+ const slotHeight = Number.isFinite(slotHeightRaw) ? Math.max(14, Math.min(24, Math.round(slotHeightRaw))) : 18;
+ const emptyText = typeof state.empty_text === 'string' && state.empty_text.trim()
+ ? state.empty_text.trim()
+ : 'No events for today.';
+
+ const LABEL_WIDTH = 42;
+ const TRACK_TOP_PAD = 6;
+ const TOOL_FALLBACK = configuredToolName || 'mcp_home_assistant_calendar_get_events';
+
+ let latestEvents = [];
+ let latestSelectedCalendars = [];
+ let latestUpdatedAt = '';
+ let clockIntervalId = null;
+
+ emptyEl.textContent = emptyText;
+
+ const updateLiveContent = (snapshot) => {
+ host.setLiveContent(snapshot);
+ };
+
+ const normalizeDateValue = (value) => {
+ if (typeof value === 'string') return value;
+ if (value && typeof value === 'object') {
+ if (typeof value.dateTime === 'string') return value.dateTime;
+ if (typeof value.date === 'string') return value.date;
+ }
+ return '';
+ };
+
+ const isAllDay = (start, end) =>
+ /^\d{4}-\d{2}-\d{2}$/.test(normalizeDateValue(start)) ||
+ /^\d{4}-\d{2}-\d{2}$/.test(normalizeDateValue(end));
+
+ const parseDate = (value, allDay, endOfDay = false) => {
+ const raw = normalizeDateValue(value);
+ if (!raw) return null;
+ const normalized = /^\d{4}-\d{2}-\d{2}$/.test(raw)
+ ? `${raw}T${endOfDay ? '23:59:59' : '00:00:00'}`
+ : raw;
+ const date = new Date(normalized);
+ return Number.isNaN(date.getTime()) ? null : date;
+ };
+
+ const eventBounds = (event) => {
+ const allDay = isAllDay(event?.start, event?.end);
+ const startDate = parseDate(event?.start, allDay, false);
+ const endDate = parseDate(event?.end, allDay, allDay);
+ if (!startDate) return null;
+ const start = startDate.getTime();
+ let end = endDate ? endDate.getTime() : start + 30 * 60 * 1000;
+ if (!Number.isFinite(end) || end <= start) end = start + 30 * 60 * 1000;
+ return { start, end, allDay };
+ };
+
+ const formatClock = (date) => {
+ const hours = String(date.getHours()).padStart(2, '0');
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+ return `${hours}:${minutes}`;
+ };
+ const formatShortDate = (date) => date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
+
+ const formatDistance = (ms) => {
+ const totalMinutes = Math.max(0, Math.round(ms / 60000));
+ const hours = Math.floor(totalMinutes / 60);
+ const minutes = totalMinutes % 60;
+ if (hours <= 0) return `${minutes}m`;
+ if (minutes === 0) return `${hours}h`;
+ return `${hours}h ${minutes}m`;
+ };
+
+ const formatTimeRange = (event) => {
+ const bounds = eventBounds(event);
+ if (!bounds) return '--';
+ if (bounds.allDay) return 'All day';
+ return `${formatClock(new Date(bounds.start))}–${formatClock(new Date(bounds.end))}`;
+ };
+
+ const hourLabel = (minutes) => String(Math.floor(minutes / 60)).padStart(2, '0');
+
+ const minutesIntoDay = (time) => {
+ const date = new Date(time);
+ return date.getHours() * 60 + date.getMinutes();
+ };
+
+ const roundDownToHalfHour = (minutes) => Math.floor(minutes / 30) * 30;
+ const roundUpToHalfHour = (minutes) => Math.ceil(minutes / 30) * 30;
+
+ const computeVisibleWindow = (events) => {
+ const now = new Date();
+ const nowMinutes = now.getHours() * 60 + now.getMinutes();
+ const timedEvents = events.filter((event) => !event._allDay);
+
+ if (timedEvents.length === 0) {
+ let start = roundDownToHalfHour(nowMinutes - 120);
+ let end = start + minWindowMinutes;
+ const minBound = minStartHour * 60;
+ const maxBound = maxEndHour * 60;
+ if (start < minBound) {
+ start = minBound;
+ end = start + minWindowMinutes;
+ }
+ if (end > maxBound) {
+ end = maxBound;
+ start = Math.max(minBound, end - minWindowMinutes);
+ }
+ return { start, end };
+ }
+
+ const earliest = Math.min(nowMinutes, ...timedEvents.map((event) => minutesIntoDay(event._start)));
+ const latest = Math.max(nowMinutes + 30, ...timedEvents.map((event) => minutesIntoDay(event._end)));
+
+ let start = roundDownToHalfHour(earliest - 60);
+ let end = roundUpToHalfHour(latest + 90);
+ if (end - start < minWindowMinutes) {
+ const center = roundDownToHalfHour((earliest + latest) / 2);
+ start = center - Math.floor(minWindowMinutes / 2);
+ end = start + minWindowMinutes;
+ }
+
+ const minBound = minStartHour * 60;
+ const maxBound = maxEndHour * 60;
+
+ if (start < minBound) {
+ const shift = minBound - start;
+ start += shift;
+ end += shift;
+ }
+ if (end > maxBound) {
+ const shift = end - maxBound;
+ start -= shift;
+ end -= shift;
+ }
+ start = Math.max(minBound, start);
+ end = Math.min(maxBound, end);
+ if (end - start < 120) {
+ end = Math.min(maxBound, start + 120);
+ }
+ return { start, end };
+ };
+
+ const assignColumns = (events) => {
+ const timed = events.filter((event) => !event._allDay).sort((left, right) => left._start - right._start);
+ let active = [];
+ let cluster = [];
+ let clusterEnd = -Infinity;
+ let clusterMax = 1;
+
+ const finalizeCluster = () => {
+ for (const item of cluster) item._columns = clusterMax;
+ };
+
+ for (const event of timed) {
+ if (cluster.length > 0 && event._start >= clusterEnd) {
+ finalizeCluster();
+ active = [];
+ cluster = [];
+ clusterEnd = -Infinity;
+ clusterMax = 1;
+ }
+ active = active.filter((item) => item.end > event._start);
+ const used = new Set(active.map((item) => item.column));
+ let column = 0;
+ while (used.has(column)) column += 1;
+ event._column = column;
+ active.push({ end: event._end, column });
+ cluster.push(event);
+ clusterEnd = Math.max(clusterEnd, event._end);
+ clusterMax = Math.max(clusterMax, active.length, column + 1);
+ }
+
+ if (cluster.length > 0) finalizeCluster();
+ return timed;
+ };
+
+ const extractEvents = (toolResult) => {
+ if (toolResult && toolResult.parsed && typeof toolResult.parsed === 'object' && Array.isArray(toolResult.parsed.result)) {
+ return toolResult.parsed.result;
+ }
+ if (typeof toolResult?.content === 'string') {
+ try {
+ const parsed = JSON.parse(toolResult.content);
+ if (parsed && typeof parsed === 'object' && Array.isArray(parsed.result)) return parsed.result;
+ } catch {}
+ }
+ return [];
+ };
+
+ const resolveToolConfig = async () => {
+ if (!host.listTools) {
+ return { name: TOOL_FALLBACK, availableCalendars: calendarNames };
+ }
+ try {
+ const tools = await host.listTools();
+ const tool = Array.isArray(tools)
+ ? tools.find((item) => /(^|_)calendar_get_events$/i.test(String(item?.name || '')))
+ : null;
+ const enumValues = Array.isArray(tool?.parameters?.properties?.calendar?.enum)
+ ? tool.parameters.properties.calendar.enum.map((value) => String(value || '').trim()).filter(Boolean)
+ : [];
+ return {
+ name: tool?.name || TOOL_FALLBACK,
+ availableCalendars: enumValues,
+ };
+ } catch {
+ return { name: TOOL_FALLBACK, availableCalendars: calendarNames };
+ }
+ };
+
+ const computeScore = (events, nowTime) => {
+ const current = events.find((event) => !event._allDay && event._start <= nowTime && event._end > nowTime);
+ if (current) return 99;
+ const next = events.find((event) => !event._allDay && event._start > nowTime);
+ if (!next) {
+ if (events.some((event) => event._allDay)) return 74;
+ return 18;
+ }
+ const minutesAway = Math.max(0, Math.round((next._start - nowTime) / 60000));
+ let score = 70;
+ if (minutesAway <= 15) score = 98;
+ else if (minutesAway <= 30) score = 95;
+ else if (minutesAway <= 60) score = 92;
+ else if (minutesAway <= 180) score = 88;
+ else if (minutesAway <= 360) score = 82;
+ else score = 76;
+ score += Math.min(events.length, 3);
+ return Math.min(100, score);
+ };
+
+ const createAllDayChip = (event) => {
+ const chip = document.createElement('div');
+ chip.style.padding = '3px 6px';
+ chip.style.border = '1px solid rgba(161, 118, 84, 0.28)';
+ chip.style.background = 'rgba(255, 249, 241, 0.94)';
+ chip.style.color = '#5e412d';
+ chip.style.fontSize = '0.62rem';
+ chip.style.lineHeight = '1.2';
+ chip.style.fontWeight = '700';
+ chip.style.minWidth = '0';
+ chip.style.maxWidth = '100%';
+ chip.style.overflow = 'hidden';
+ chip.style.textOverflow = 'ellipsis';
+ chip.style.whiteSpace = 'nowrap';
+ chip.textContent = String(event.summary || '(No title)');
+ return chip;
+ };
+
+ const renderState = () => {
+ const now = new Date();
+ const nowTime = now.getTime();
+ const todayLabel = formatShortDate(now);
+ if (!Array.isArray(latestEvents) || latestEvents.length === 0) {
+ headlineEl.textContent = todayLabel;
+ detailEl.textContent = emptyText;
+ allDayWrapEl.style.display = 'none';
+ timelineShellEl.style.display = 'none';
+ emptyEl.style.display = 'block';
+ updateLiveContent({
+ kind: 'calendar_timeline',
+ subtitle: subtitle || null,
+ tool_name: TOOL_FALLBACK,
+ calendar_names: latestSelectedCalendars,
+ updated_at: latestUpdatedAt || null,
+ now_label: formatClock(now),
+ headline: headlineEl.textContent || null,
+ detail: detailEl.textContent || null,
+ event_count: 0,
+ all_day_count: 0,
+ score: 18,
+ events: [],
+ });
+ return;
+ }
+
+ const allDayEvents = latestEvents.filter((event) => event._allDay);
+ const timedEvents = latestEvents.filter((event) => !event._allDay);
+ const currentEvent = timedEvents.find((event) => event._start <= nowTime && event._end > nowTime) || null;
+ const nextEvent = timedEvents.find((event) => event._start > nowTime) || null;
+
+ headlineEl.textContent = todayLabel;
+
+ if (currentEvent) {
+ detailEl.textContent = '';
+ } else if (nextEvent) {
+ detailEl.textContent = '';
+ } else if (allDayEvents.length > 0) {
+ detailEl.textContent = 'All-day events on your calendar.';
+ } else {
+ detailEl.textContent = 'Your calendar is clear for the rest of the day.';
+ }
+
+ const windowRange = computeVisibleWindow(latestEvents);
+ allDayEl.innerHTML = '';
+ allDayWrapEl.style.display = allDayEvents.length > 0 ? 'block' : 'none';
+ for (const event of allDayEvents) allDayEl.appendChild(createAllDayChip(event));
+
+ emptyEl.style.display = 'none';
+ timelineShellEl.style.display = timedEvents.length > 0 ? 'block' : 'none';
+ timelineEl.innerHTML = '';
+
+ if (timedEvents.length > 0) {
+ const slotCount = Math.max(1, Math.round((windowRange.end - windowRange.start) / 30));
+ const timelineHeight = TRACK_TOP_PAD + slotCount * slotHeight;
+ timelineEl.style.height = `${timelineHeight}px`;
+
+ const gridLayer = document.createElement('div');
+ gridLayer.style.position = 'absolute';
+ gridLayer.style.inset = '0';
+ timelineEl.appendChild(gridLayer);
+
+ for (let index = 0; index <= slotCount; index += 1) {
+ const minutes = windowRange.start + index * 30;
+ const top = TRACK_TOP_PAD + index * slotHeight;
+
+ const line = document.createElement('div');
+ line.style.position = 'absolute';
+ line.style.left = `${LABEL_WIDTH}px`;
+ line.style.right = '0';
+ line.style.top = `${top}px`;
+ line.style.borderTop = minutes % 60 === 0
+ ? '1px solid rgba(143, 101, 69, 0.24)'
+ : '1px dashed rgba(181, 145, 116, 0.18)';
+ gridLayer.appendChild(line);
+
+ if (minutes % 60 === 0 && minutes < windowRange.end) {
+ const label = document.createElement('div');
+ label.style.position = 'absolute';
+ label.style.left = '0';
+ label.style.top = `${Math.max(0, top - 7)}px`;
+ label.style.width = `${LABEL_WIDTH - 8}px`;
+ label.style.fontFamily = "'M-1m Code', ui-monospace, Menlo, Consolas, monospace";
+ label.style.fontSize = '0.54rem';
+ label.style.lineHeight = '1';
+ label.style.color = '#8a6248';
+ label.style.textAlign = 'right';
+ label.style.textTransform = 'uppercase';
+ label.style.letterSpacing = '0.05em';
+ label.textContent = hourLabel(minutes);
+ gridLayer.appendChild(label);
+ }
+ }
+
+ const eventsLayer = document.createElement('div');
+ eventsLayer.style.position = 'absolute';
+ eventsLayer.style.left = `${LABEL_WIDTH + 6}px`;
+ eventsLayer.style.right = '0';
+ eventsLayer.style.top = `${TRACK_TOP_PAD}px`;
+ eventsLayer.style.bottom = '0';
+ timelineEl.appendChild(eventsLayer);
+
+ const layoutEvents = assignColumns(timedEvents.map((event) => ({ ...event })));
+ for (const event of layoutEvents) {
+ const offsetStart = Math.max(windowRange.start, minutesIntoDay(event._start)) - windowRange.start;
+ const offsetEnd = Math.min(windowRange.end, minutesIntoDay(event._end)) - windowRange.start;
+ const top = Math.max(0, (offsetStart / 30) * slotHeight);
+ const height = Math.max(16, ((offsetEnd - offsetStart) / 30) * slotHeight - 3);
+
+ const block = document.createElement('div');
+ block.style.position = 'absolute';
+ block.style.top = `${top}px`;
+ block.style.height = `${height}px`;
+ block.style.left = `calc(${(100 / event._columns) * event._column}% + ${event._column * 4}px)`;
+ block.style.width = `calc(${100 / event._columns}% - 4px)`;
+ block.style.padding = '5px 6px';
+ block.style.border = currentEvent && currentEvent._start === event._start && currentEvent._end === event._end
+ ? '1px solid rgba(169, 39, 29, 0.38)'
+ : '1px solid rgba(162, 105, 62, 0.26)';
+ block.style.background = currentEvent && currentEvent._start === event._start && currentEvent._end === event._end
+ ? 'linear-gradient(180deg, rgba(255, 228, 224, 0.98) 0%, rgba(248, 205, 198, 0.94) 100%)'
+ : 'linear-gradient(180deg, rgba(244, 220, 196, 0.98) 0%, rgba(230, 197, 165, 0.98) 100%)';
+ block.style.boxShadow = '0 4px 10px rgba(84, 51, 29, 0.08)';
+ block.style.overflow = 'hidden';
+
+ const title = document.createElement('div');
+ title.style.fontFamily = "'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif";
+ title.style.fontSize = '0.74rem';
+ title.style.lineHeight = '0.98';
+ title.style.letterSpacing = '-0.01em';
+ title.style.color = '#22140c';
+ title.style.fontWeight = '700';
+ title.style.whiteSpace = 'nowrap';
+ title.style.textOverflow = 'ellipsis';
+ title.style.overflow = 'hidden';
+ title.textContent = String(event.summary || '(No title)');
+ block.appendChild(title);
+
+ eventsLayer.appendChild(block);
+ }
+
+ if (nowTime >= new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, windowRange.start, 0, 0).getTime() &&
+ nowTime <= new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, windowRange.end, 0, 0).getTime()) {
+ const nowMinutes = now.getHours() * 60 + now.getMinutes();
+ const nowTop = TRACK_TOP_PAD + ((nowMinutes - windowRange.start) / 30) * slotHeight;
+
+ const line = document.createElement('div');
+ line.style.position = 'absolute';
+ line.style.left = `${LABEL_WIDTH + 6}px`;
+ line.style.right = '0';
+ line.style.top = `${nowTop}px`;
+ line.style.borderTop = '1.5px solid #cf2f21';
+ line.style.transition = 'top 28s linear';
+ timelineEl.appendChild(line);
+
+ const dot = document.createElement('div');
+ dot.style.position = 'absolute';
+ dot.style.left = `${LABEL_WIDTH + 1}px`;
+ dot.style.top = `${nowTop - 4}px`;
+ dot.style.width = '8px';
+ dot.style.height = '8px';
+ dot.style.borderRadius = '999px';
+ dot.style.background = '#cf2f21';
+ dot.style.boxShadow = '0 0 0 2px rgba(255, 255, 255, 0.95)';
+ dot.style.transition = 'top 28s linear';
+ timelineEl.appendChild(dot);
+
+ }
+ }
+
+ updateLiveContent({
+ kind: 'calendar_timeline',
+ subtitle: subtitle || null,
+ tool_name: TOOL_FALLBACK,
+ calendar_names: latestSelectedCalendars,
+ updated_at: latestUpdatedAt || null,
+ now_label: formatClock(now),
+ headline: headlineEl.textContent || null,
+ detail: detailEl.textContent || null,
+ current_event: currentEvent ? {
+ summary: String(currentEvent.summary || '(No title)'),
+ start: normalizeDateValue(currentEvent.start) || null,
+ end: normalizeDateValue(currentEvent.end) || null,
+ } : null,
+ next_event: nextEvent ? {
+ summary: String(nextEvent.summary || '(No title)'),
+ start: normalizeDateValue(nextEvent.start) || null,
+ end: normalizeDateValue(nextEvent.end) || null,
+ starts_in: formatDistance(nextEvent._start - nowTime),
+ } : null,
+ event_count: latestEvents.length,
+ all_day_count: allDayEvents.length,
+ score: computeScore(latestEvents, nowTime),
+ events: latestEvents.map((event) => ({
+ summary: String(event.summary || '(No title)'),
+ start: normalizeDateValue(event.start) || null,
+ end: normalizeDateValue(event.end) || null,
+ all_day: Boolean(event._allDay),
+ })),
+ });
+ };
+
+ const refresh = async () => {
+ headlineEl.textContent = 'Loading today…';
+ detailEl.textContent = 'Checking your calendar.';
+
+ try {
+ const toolConfig = await resolveToolConfig();
+ const selectedCalendars = calendarNames.length > 0 ? calendarNames : toolConfig.availableCalendars;
+ if (!toolConfig.name) throw new Error('Calendar tool unavailable');
+ if (!Array.isArray(selectedCalendars) || selectedCalendars.length === 0) {
+ throw new Error('No calendars configured');
+ }
+
+ const allEvents = [];
+ for (const calendarName of selectedCalendars) {
+ const toolResult = await host.callTool(toolConfig.name, {
+ calendar: calendarName,
+ range: 'today',
+ });
+ const events = extractEvents(toolResult);
+ for (const event of events) {
+ const bounds = eventBounds(event);
+ if (!bounds) continue;
+ allEvents.push({
+ ...event,
+ _calendarName: calendarName,
+ _start: bounds.start,
+ _end: bounds.end,
+ _allDay: bounds.allDay,
+ });
+ }
+ }
+
+ allEvents.sort((left, right) => left._start - right._start);
+ latestEvents = allEvents;
+ latestSelectedCalendars = selectedCalendars;
+ latestUpdatedAt = new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+ renderState();
+ } catch (error) {
+ const errorText = String(error);
+ latestEvents = [];
+ latestSelectedCalendars = calendarNames;
+ latestUpdatedAt = errorText;
+ headlineEl.textContent = formatShortDate(new Date());
+ detailEl.textContent = errorText;
+ allDayWrapEl.style.display = 'none';
+ timelineShellEl.style.display = 'none';
+ emptyEl.style.display = 'block';
+ updateLiveContent({
+ kind: 'calendar_timeline',
+ subtitle: subtitle || null,
+ tool_name: TOOL_FALLBACK,
+ calendar_names: latestSelectedCalendars,
+ updated_at: errorText,
+ now_label: formatClock(new Date()),
+ headline: headlineEl.textContent || null,
+ detail: detailEl.textContent || null,
+ event_count: 0,
+ all_day_count: 0,
+ score: 0,
+ events: [],
+ error: errorText,
+ });
+ }
+ };
+
+ host.setRefreshHandler(() => {
+ void refresh();
+ });
+
+ if (clockIntervalId) window.clearInterval(clockIntervalId);
+ clockIntervalId = __setInterval(() => {
+ renderState();
+ }, 30000);
+
+ void refresh();
+ __setInterval(() => {
+ void refresh();
+ }, refreshMs);
+
+ return {
+ destroy() {
+ host.setRefreshHandler(null);
+ host.setLiveContent(null);
+ host.clearSelection();
+ for (const cleanup of __cleanup.splice(0)) cleanup();
+ },
+ };
+}
diff --git a/examples/cards/templates/calendar-timeline-live/manifest.json b/examples/cards/templates/calendar-timeline-live/manifest.json
new file mode 100644
index 0000000..a28b227
--- /dev/null
+++ b/examples/cards/templates/calendar-timeline-live/manifest.json
@@ -0,0 +1,20 @@
+{
+ "key": "calendar-timeline-live",
+ "title": "Today Calendar Timeline",
+ "notes": "Today-only Home Assistant calendar timeline with half-hour grid, current time marker, and next-event distance. Fill template_state with subtitle, tool_name (defaults to calendar_get_events), optional calendar_names, refresh_ms, min_start_hour, max_end_hour, min_window_hours, slot_height, and empty_text.",
+ "example_state": {
+ "subtitle": "Family Calendar",
+ "tool_name": "mcp_home_assistant_calendar_get_events",
+ "calendar_names": [
+ "Family Calendar"
+ ],
+ "refresh_ms": 900000,
+ "min_start_hour": 6,
+ "max_end_hour": 22,
+ "min_window_hours": 6,
+ "slot_height": 24,
+ "empty_text": "No events for today."
+ },
+ "created_at": "2026-04-02T00:00:00+00:00",
+ "updated_at": "2026-04-02T00:00:00+00:00"
+}
diff --git a/examples/cards/templates/calendar-timeline-live/template.html b/examples/cards/templates/calendar-timeline-live/template.html
new file mode 100644
index 0000000..518ed95
--- /dev/null
+++ b/examples/cards/templates/calendar-timeline-live/template.html
@@ -0,0 +1,38 @@
+
+
+
Today Calendar
+
+
+
+
Loading today…
+
Checking your calendar.
+
+
+
+
+
+
No events for today.
+
+
+
diff --git a/examples/cards/templates/calendar-timeline-weather-live/card.js b/examples/cards/templates/calendar-timeline-weather-live/card.js
new file mode 100644
index 0000000..d604897
--- /dev/null
+++ b/examples/cards/templates/calendar-timeline-weather-live/card.js
@@ -0,0 +1,778 @@
+export function mount({ root, state, host }) {
+ state = state || {};
+ const __cleanup = [];
+ const __setInterval = (...args) => {
+ const id = window.setInterval(...args);
+ __cleanup.push(() => window.clearInterval(id));
+ return id;
+ };
+ const __setTimeout = (...args) => {
+ const id = window.setTimeout(...args);
+ __cleanup.push(() => window.clearTimeout(id));
+ return id;
+ };
+ if (!(root instanceof HTMLElement)) return;
+
+ const headlineEl = root.querySelector('[data-calendar-headline]');
+ const detailEl = root.querySelector('[data-calendar-detail]');
+ const allDayWrapEl = root.querySelector('[data-calendar-all-day-wrap]');
+ const allDayEl = root.querySelector('[data-calendar-all-day]');
+ const emptyEl = root.querySelector('[data-calendar-empty]');
+ const timelineShellEl = root.querySelector('[data-calendar-timeline-shell]');
+ const weatherScaleEl = root.querySelector('[data-calendar-weather-scale]');
+ const weatherLowEl = root.querySelector('[data-calendar-weather-low]');
+ const weatherHighEl = root.querySelector('[data-calendar-weather-high]');
+ const timelineEl = root.querySelector('[data-calendar-timeline]');
+
+ if (!(headlineEl instanceof HTMLElement) ||
+ !(detailEl instanceof HTMLElement) ||
+ !(allDayWrapEl instanceof HTMLElement) ||
+ !(allDayEl instanceof HTMLElement) ||
+ !(emptyEl instanceof HTMLElement) ||
+ !(timelineShellEl instanceof HTMLElement) ||
+ !(weatherScaleEl instanceof HTMLElement) ||
+ !(weatherLowEl instanceof HTMLElement) ||
+ !(weatherHighEl instanceof HTMLElement) ||
+ !(timelineEl instanceof HTMLElement)) {
+ return;
+ }
+
+ const subtitle = typeof state.subtitle === 'string' ? state.subtitle.trim() : '';
+ const configuredToolName = typeof state.tool_name === 'string' ? state.tool_name.trim() : '';
+ const calendarNames = Array.isArray(state.calendar_names)
+ ? state.calendar_names.map((value) => String(value || '').trim()).filter(Boolean)
+ : [];
+ const refreshMsRaw = Number(state.refresh_ms);
+ const refreshMs = Number.isFinite(refreshMsRaw) && refreshMsRaw >= 60000 ? refreshMsRaw : 15 * 60 * 1000;
+ const configuredWeatherToolName = typeof state.weather_tool_name === 'string' ? state.weather_tool_name.trim() : 'exec';
+ const weatherCommand = typeof state.weather_command === 'string' ? state.weather_command.trim() : '';
+ const minStartHourRaw = Number(state.min_start_hour);
+ const maxEndHourRaw = Number(state.max_end_hour);
+ const minWindowHoursRaw = Number(state.min_window_hours);
+ const slotHeightRaw = Number(state.slot_height);
+ const minStartHour = Number.isFinite(minStartHourRaw) ? Math.max(0, Math.min(23, Math.round(minStartHourRaw))) : 6;
+ const maxEndHour = Number.isFinite(maxEndHourRaw) ? Math.max(minStartHour + 1, Math.min(24, Math.round(maxEndHourRaw))) : 22;
+ const minWindowMinutes = (Number.isFinite(minWindowHoursRaw) ? Math.max(3, Math.min(18, minWindowHoursRaw)) : 6) * 60;
+ const slotHeight = Number.isFinite(slotHeightRaw) ? Math.max(14, Math.min(24, Math.round(slotHeightRaw))) : 18;
+ const emptyText = typeof state.empty_text === 'string' && state.empty_text.trim()
+ ? state.empty_text.trim()
+ : 'No events for today.';
+
+ const LABEL_WIDTH = 42;
+ const TRACK_TOP_PAD = 6;
+ const TOOL_FALLBACK = configuredToolName || 'mcp_home_assistant_calendar_get_events';
+
+ let latestEvents = [];
+ let latestSelectedCalendars = [];
+ let latestUpdatedAt = '';
+ let latestWeatherPoints = [];
+ let latestWeatherRange = null;
+ let clockIntervalId = null;
+
+ emptyEl.textContent = emptyText;
+
+ const updateLiveContent = (snapshot) => {
+ host.setLiveContent(snapshot);
+ };
+
+ const normalizeDateValue = (value) => {
+ if (typeof value === 'string') return value;
+ if (value && typeof value === 'object') {
+ if (typeof value.dateTime === 'string') return value.dateTime;
+ if (typeof value.date === 'string') return value.date;
+ }
+ return '';
+ };
+
+ const isAllDay = (start, end) =>
+ /^\d{4}-\d{2}-\d{2}$/.test(normalizeDateValue(start)) ||
+ /^\d{4}-\d{2}-\d{2}$/.test(normalizeDateValue(end));
+
+ const parseDate = (value, allDay, endOfDay = false) => {
+ const raw = normalizeDateValue(value);
+ if (!raw) return null;
+ const normalized = /^\d{4}-\d{2}-\d{2}$/.test(raw)
+ ? `${raw}T${endOfDay ? '23:59:59' : '00:00:00'}`
+ : raw;
+ const date = new Date(normalized);
+ return Number.isNaN(date.getTime()) ? null : date;
+ };
+
+ const eventBounds = (event) => {
+ const allDay = isAllDay(event?.start, event?.end);
+ const startDate = parseDate(event?.start, allDay, false);
+ const endDate = parseDate(event?.end, allDay, allDay);
+ if (!startDate) return null;
+ const start = startDate.getTime();
+ let end = endDate ? endDate.getTime() : start + 30 * 60 * 1000;
+ if (!Number.isFinite(end) || end <= start) end = start + 30 * 60 * 1000;
+ return { start, end, allDay };
+ };
+
+ const formatClock = (date) => {
+ const hours = String(date.getHours()).padStart(2, '0');
+ const minutes = String(date.getMinutes()).padStart(2, '0');
+ return `${hours}:${minutes}`;
+ };
+ const formatShortDate = (date) => date.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' });
+
+ const formatDistance = (ms) => {
+ const totalMinutes = Math.max(0, Math.round(ms / 60000));
+ const hours = Math.floor(totalMinutes / 60);
+ const minutes = totalMinutes % 60;
+ if (hours <= 0) return `${minutes}m`;
+ if (minutes === 0) return `${hours}h`;
+ return `${hours}h ${minutes}m`;
+ };
+
+ const formatTimeRange = (event) => {
+ const bounds = eventBounds(event);
+ if (!bounds) return '--';
+ if (bounds.allDay) return 'All day';
+ return `${formatClock(new Date(bounds.start))}–${formatClock(new Date(bounds.end))}`;
+ };
+
+ const hourLabel = (minutes) => String(Math.floor(minutes / 60)).padStart(2, '0');
+
+ const minutesIntoDay = (time) => {
+ const date = new Date(time);
+ return date.getHours() * 60 + date.getMinutes();
+ };
+
+ const roundDownToHalfHour = (minutes) => Math.floor(minutes / 30) * 30;
+ const roundUpToHalfHour = (minutes) => Math.ceil(minutes / 30) * 30;
+
+ const computeWeatherWindow = () => {
+ if (!Array.isArray(latestWeatherPoints) || latestWeatherPoints.length < 2) return null;
+ const sorted = latestWeatherPoints
+ .map((point) => minutesIntoDay(point.time))
+ .filter((minutes) => Number.isFinite(minutes))
+ .sort((left, right) => left - right);
+ if (sorted.length < 2) return null;
+ const start = roundDownToHalfHour(sorted[0]);
+ const end = roundUpToHalfHour(sorted[sorted.length - 1]);
+ if (end <= start) return null;
+ return { start, end };
+ };
+
+ const computeVisibleWindow = (events) => {
+ const now = new Date();
+ const nowMinutes = now.getHours() * 60 + now.getMinutes();
+ const timedEvents = events.filter((event) => !event._allDay);
+ const weatherWindow = computeWeatherWindow();
+
+ if (timedEvents.length === 0) {
+ let start = roundDownToHalfHour(nowMinutes - 120);
+ let end = start + minWindowMinutes;
+ const minBound = minStartHour * 60;
+ const maxBound = maxEndHour * 60;
+ if (start < minBound) {
+ start = minBound;
+ end = start + minWindowMinutes;
+ }
+ if (end > maxBound) {
+ end = maxBound;
+ start = Math.max(minBound, end - minWindowMinutes);
+ }
+ if (weatherWindow) {
+ start = Math.max(start, weatherWindow.start);
+ end = Math.min(end, weatherWindow.end);
+ if (end <= start) return { start: weatherWindow.start, end: weatherWindow.end };
+ }
+ return { start, end };
+ }
+
+ const earliest = Math.min(nowMinutes, ...timedEvents.map((event) => minutesIntoDay(event._start)));
+ const latest = Math.max(nowMinutes + 30, ...timedEvents.map((event) => minutesIntoDay(event._end)));
+
+ let start = roundDownToHalfHour(earliest - 60);
+ let end = roundUpToHalfHour(latest + 90);
+ if (end - start < minWindowMinutes) {
+ const center = roundDownToHalfHour((earliest + latest) / 2);
+ start = center - Math.floor(minWindowMinutes / 2);
+ end = start + minWindowMinutes;
+ }
+
+ const minBound = minStartHour * 60;
+ const maxBound = maxEndHour * 60;
+
+ if (start < minBound) {
+ const shift = minBound - start;
+ start += shift;
+ end += shift;
+ }
+ if (end > maxBound) {
+ const shift = end - maxBound;
+ start -= shift;
+ end -= shift;
+ }
+ start = Math.max(minBound, start);
+ end = Math.min(maxBound, end);
+ if (end - start < 120) {
+ end = Math.min(maxBound, start + 120);
+ }
+ if (weatherWindow) {
+ start = Math.max(start, weatherWindow.start);
+ end = Math.min(end, weatherWindow.end);
+ if (end <= start) return { start: weatherWindow.start, end: weatherWindow.end };
+ }
+ return { start, end };
+ };
+
+ const assignColumns = (events) => {
+ const timed = events.filter((event) => !event._allDay).sort((left, right) => left._start - right._start);
+ let active = [];
+ let cluster = [];
+ let clusterEnd = -Infinity;
+ let clusterMax = 1;
+
+ const finalizeCluster = () => {
+ for (const item of cluster) item._columns = clusterMax;
+ };
+
+ for (const event of timed) {
+ if (cluster.length > 0 && event._start >= clusterEnd) {
+ finalizeCluster();
+ active = [];
+ cluster = [];
+ clusterEnd = -Infinity;
+ clusterMax = 1;
+ }
+ active = active.filter((item) => item.end > event._start);
+ const used = new Set(active.map((item) => item.column));
+ let column = 0;
+ while (used.has(column)) column += 1;
+ event._column = column;
+ active.push({ end: event._end, column });
+ cluster.push(event);
+ clusterEnd = Math.max(clusterEnd, event._end);
+ clusterMax = Math.max(clusterMax, active.length, column + 1);
+ }
+
+ if (cluster.length > 0) finalizeCluster();
+ return timed;
+ };
+
+ const extractEvents = (toolResult) => {
+ if (toolResult && toolResult.parsed && typeof toolResult.parsed === 'object' && Array.isArray(toolResult.parsed.result)) {
+ return toolResult.parsed.result;
+ }
+ if (typeof toolResult?.content === 'string') {
+ try {
+ const parsed = JSON.parse(toolResult.content);
+ if (parsed && typeof parsed === 'object' && Array.isArray(parsed.result)) return parsed.result;
+ } catch {}
+ }
+ return [];
+ };
+
+ const stripExecFooter = (value) => String(value || '').replace(/\n+\s*Exit code:\s*\d+\s*$/i, '').trim();
+
+ const extractExecJson = (toolResult) => {
+ const text = stripExecFooter(toolResult?.content);
+ if (!text) return null;
+ try {
+ return JSON.parse(text);
+ } catch {
+ return null;
+ }
+ };
+
+ const forecastTime = (entry) => {
+ const time = new Date(String(entry?.datetime || '')).getTime();
+ return Number.isFinite(time) ? time : Number.NaN;
+ };
+
+ const extractWeatherPoints = (payload) => {
+ const rows = Array.isArray(payload?.nws?.forecast) ? payload.nws.forecast : [];
+ const today = new Date();
+ const dayStart = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0, 0).getTime();
+ const dayEnd = dayStart + 24 * 60 * 60 * 1000;
+ return rows
+ .map((entry) => {
+ const time = forecastTime(entry);
+ const temp = Number(entry?.temperature);
+ if (!Number.isFinite(time) || !Number.isFinite(temp)) return null;
+ if (time < dayStart || time >= dayEnd) return null;
+ return {
+ time,
+ temp,
+ };
+ })
+ .filter(Boolean);
+ };
+
+ const resolveWeatherForecast = async () => {
+ if (!weatherCommand) return [];
+ const toolResult = await host.callTool(configuredWeatherToolName || 'exec', {
+ command: weatherCommand,
+ max_output_chars: 200000,
+ });
+ const payload = extractExecJson(toolResult);
+ if (!payload || typeof payload !== 'object') return [];
+ return extractWeatherPoints(payload);
+ };
+
+ const resolveToolConfig = async () => {
+ if (!host.listTools) {
+ return { name: TOOL_FALLBACK, availableCalendars: calendarNames };
+ }
+ try {
+ const tools = await host.listTools();
+ const tool = Array.isArray(tools)
+ ? tools.find((item) => /(^|_)calendar_get_events$/i.test(String(item?.name || '')))
+ : null;
+ const enumValues = Array.isArray(tool?.parameters?.properties?.calendar?.enum)
+ ? tool.parameters.properties.calendar.enum.map((value) => String(value || '').trim()).filter(Boolean)
+ : [];
+ return {
+ name: tool?.name || TOOL_FALLBACK,
+ availableCalendars: enumValues,
+ };
+ } catch {
+ return { name: TOOL_FALLBACK, availableCalendars: calendarNames };
+ }
+ };
+
+ const computeScore = (events, nowTime) => {
+ const current = events.find((event) => !event._allDay && event._start <= nowTime && event._end > nowTime);
+ if (current) return 99;
+ const next = events.find((event) => !event._allDay && event._start > nowTime);
+ if (!next) {
+ if (events.some((event) => event._allDay)) return 74;
+ return 18;
+ }
+ const minutesAway = Math.max(0, Math.round((next._start - nowTime) / 60000));
+ let score = 70;
+ if (minutesAway <= 15) score = 98;
+ else if (minutesAway <= 30) score = 95;
+ else if (minutesAway <= 60) score = 92;
+ else if (minutesAway <= 180) score = 88;
+ else if (minutesAway <= 360) score = 82;
+ else score = 76;
+ score += Math.min(events.length, 3);
+ return Math.min(100, score);
+ };
+
+ const createAllDayChip = (event) => {
+ const chip = document.createElement('div');
+ chip.style.padding = '3px 6px';
+ chip.style.border = '1px solid rgba(161, 118, 84, 0.28)';
+ chip.style.background = 'rgba(255, 249, 241, 0.94)';
+ chip.style.color = '#5e412d';
+ chip.style.fontSize = '0.62rem';
+ chip.style.lineHeight = '1.2';
+ chip.style.fontWeight = '700';
+ chip.style.minWidth = '0';
+ chip.style.maxWidth = '100%';
+ chip.style.overflow = 'hidden';
+ chip.style.textOverflow = 'ellipsis';
+ chip.style.whiteSpace = 'nowrap';
+ chip.textContent = String(event.summary || '(No title)');
+ return chip;
+ };
+
+ const computeWeatherRange = (points) => {
+ if (!Array.isArray(points) || points.length === 0) return null;
+ let low = Number.POSITIVE_INFINITY;
+ let high = Number.NEGATIVE_INFINITY;
+ for (const point of points) {
+ low = Math.min(low, point.temp);
+ high = Math.max(high, point.temp);
+ }
+ if (!Number.isFinite(low) || !Number.isFinite(high)) return null;
+ if (low === high) high = low + 1;
+ return { low, high };
+ };
+
+ const renderWeatherGraph = (windowRange, timelineHeight) => {
+ weatherScaleEl.style.display = 'none';
+ weatherLowEl.textContent = '--';
+ weatherHighEl.textContent = '--';
+
+ if (!Array.isArray(latestWeatherPoints) || latestWeatherPoints.length === 0 || !latestWeatherRange) return;
+
+ const visiblePoints = latestWeatherPoints.filter((point) => {
+ const minutes = minutesIntoDay(point.time);
+ return minutes >= windowRange.start && minutes <= windowRange.end;
+ });
+ if (visiblePoints.length < 2) return;
+
+ weatherScaleEl.style.display = 'flex';
+ weatherLowEl.textContent = `${Math.round(latestWeatherRange.low)}°`;
+ weatherHighEl.textContent = `${Math.round(latestWeatherRange.high)}°`;
+
+ const timelineWidth = timelineEl.getBoundingClientRect().width;
+ const overlayWidth = Math.max(1, timelineWidth - (LABEL_WIDTH + 6));
+
+ const overlay = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ overlay.setAttribute('viewBox', `0 0 ${overlayWidth} ${timelineHeight}`);
+ overlay.style.position = 'absolute';
+ overlay.style.left = `${LABEL_WIDTH + 6}px`;
+ overlay.style.top = '0';
+ overlay.style.height = `${timelineHeight}px`;
+ overlay.style.width = `${overlayWidth}px`;
+ overlay.style.pointerEvents = 'none';
+ overlay.style.opacity = '0.85';
+
+ const toPoint = (point) => {
+ const minutes = minutesIntoDay(point.time);
+ const y = TRACK_TOP_PAD + ((minutes - windowRange.start) / 30) * slotHeight;
+ const x = ((point.temp - latestWeatherRange.low) / (latestWeatherRange.high - latestWeatherRange.low)) * overlayWidth;
+ return { x, y };
+ };
+
+ const coords = visiblePoints.map(toPoint);
+ const buildSmoothPath = (points) => {
+ if (points.length === 0) return '';
+ if (points.length === 1) return `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`;
+ let d = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`;
+ for (let index = 1; index < points.length - 1; index += 1) {
+ const point = points[index];
+ const next = points[index + 1];
+ const midX = (point.x + next.x) / 2;
+ const midY = (point.y + next.y) / 2;
+ d += ` Q ${point.x.toFixed(2)} ${point.y.toFixed(2)} ${midX.toFixed(2)} ${midY.toFixed(2)}`;
+ }
+ const penultimate = points[points.length - 2];
+ const last = points[points.length - 1];
+ d += ` Q ${penultimate.x.toFixed(2)} ${penultimate.y.toFixed(2)} ${last.x.toFixed(2)} ${last.y.toFixed(2)}`;
+ return d;
+ };
+
+ const line = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ line.setAttribute('d', buildSmoothPath(coords));
+ line.setAttribute('fill', 'none');
+ line.setAttribute('stroke', 'rgba(184, 110, 58, 0.34)');
+ line.setAttribute('stroke-width', '1.8');
+ line.setAttribute('stroke-linecap', 'round');
+ line.setAttribute('stroke-linejoin', 'round');
+ line.setAttribute('vector-effect', 'non-scaling-stroke');
+ overlay.appendChild(line);
+
+ for (const point of coords) {
+ const dot = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+ dot.setAttribute('cx', point.x.toFixed(2));
+ dot.setAttribute('cy', point.y.toFixed(2));
+ dot.setAttribute('r', '1.9');
+ dot.setAttribute('fill', 'rgba(184, 110, 58, 0.34)');
+ dot.setAttribute('stroke', 'rgba(226, 188, 156, 0.62)');
+ dot.setAttribute('stroke-width', '0.55');
+ overlay.appendChild(dot);
+ }
+
+ timelineEl.appendChild(overlay);
+ };
+
+ const renderState = () => {
+ const now = new Date();
+ const nowTime = now.getTime();
+ const todayLabel = formatShortDate(now);
+ if (!Array.isArray(latestEvents) || latestEvents.length === 0) {
+ headlineEl.textContent = todayLabel;
+ detailEl.textContent = emptyText;
+ allDayWrapEl.style.display = 'none';
+ timelineShellEl.style.display = 'none';
+ emptyEl.style.display = 'block';
+ updateLiveContent({
+ kind: 'calendar_timeline',
+ subtitle: subtitle || null,
+ tool_name: TOOL_FALLBACK,
+ calendar_names: latestSelectedCalendars,
+ updated_at: latestUpdatedAt || null,
+ now_label: formatClock(now),
+ headline: headlineEl.textContent || null,
+ detail: detailEl.textContent || null,
+ weather_temperature_range: latestWeatherRange ? {
+ low: latestWeatherRange.low,
+ high: latestWeatherRange.high,
+ } : null,
+ event_count: 0,
+ all_day_count: 0,
+ score: 18,
+ events: [],
+ });
+ return;
+ }
+
+ const allDayEvents = latestEvents.filter((event) => event._allDay);
+ const timedEvents = latestEvents.filter((event) => !event._allDay);
+ const currentEvent = timedEvents.find((event) => event._start <= nowTime && event._end > nowTime) || null;
+ const nextEvent = timedEvents.find((event) => event._start > nowTime) || null;
+
+ headlineEl.textContent = todayLabel;
+
+ if (currentEvent) {
+ detailEl.textContent = '';
+ } else if (nextEvent) {
+ detailEl.textContent = '';
+ } else if (allDayEvents.length > 0) {
+ detailEl.textContent = 'All-day events on your calendar.';
+ } else {
+ detailEl.textContent = 'Your calendar is clear for the rest of the day.';
+ }
+
+ const windowRange = computeVisibleWindow(latestEvents);
+ allDayEl.innerHTML = '';
+ allDayWrapEl.style.display = allDayEvents.length > 0 ? 'block' : 'none';
+ for (const event of allDayEvents) allDayEl.appendChild(createAllDayChip(event));
+
+ emptyEl.style.display = 'none';
+ timelineShellEl.style.display = timedEvents.length > 0 ? 'block' : 'none';
+ timelineEl.innerHTML = '';
+
+ if (timedEvents.length > 0) {
+ const slotCount = Math.max(1, Math.round((windowRange.end - windowRange.start) / 30));
+ const timelineHeight = TRACK_TOP_PAD + slotCount * slotHeight;
+ timelineEl.style.height = `${timelineHeight}px`;
+
+ const gridLayer = document.createElement('div');
+ gridLayer.style.position = 'absolute';
+ gridLayer.style.inset = '0';
+ timelineEl.appendChild(gridLayer);
+
+ for (let index = 0; index <= slotCount; index += 1) {
+ const minutes = windowRange.start + index * 30;
+ const top = TRACK_TOP_PAD + index * slotHeight;
+
+ const line = document.createElement('div');
+ line.style.position = 'absolute';
+ line.style.left = `${LABEL_WIDTH}px`;
+ line.style.right = '0';
+ line.style.top = `${top}px`;
+ line.style.borderTop = minutes % 60 === 0
+ ? '1px solid rgba(143, 101, 69, 0.24)'
+ : '1px dashed rgba(181, 145, 116, 0.18)';
+ gridLayer.appendChild(line);
+
+ if (minutes % 60 === 0 && minutes < windowRange.end) {
+ const label = document.createElement('div');
+ label.style.position = 'absolute';
+ label.style.left = '0';
+ label.style.top = `${Math.max(0, top - 7)}px`;
+ label.style.width = `${LABEL_WIDTH - 8}px`;
+ label.style.fontFamily = "'M-1m Code', ui-monospace, Menlo, Consolas, monospace";
+ label.style.fontSize = '0.54rem';
+ label.style.lineHeight = '1';
+ label.style.color = '#8a6248';
+ label.style.textAlign = 'right';
+ label.style.textTransform = 'uppercase';
+ label.style.letterSpacing = '0.05em';
+ label.textContent = hourLabel(minutes);
+ gridLayer.appendChild(label);
+ }
+ }
+
+ renderWeatherGraph(windowRange, timelineHeight);
+
+ const eventsLayer = document.createElement('div');
+ eventsLayer.style.position = 'absolute';
+ eventsLayer.style.left = `${LABEL_WIDTH + 6}px`;
+ eventsLayer.style.right = '0';
+ eventsLayer.style.top = `${TRACK_TOP_PAD}px`;
+ eventsLayer.style.bottom = '0';
+ timelineEl.appendChild(eventsLayer);
+
+ const layoutEvents = assignColumns(timedEvents.map((event) => ({ ...event })));
+ for (const event of layoutEvents) {
+ const offsetStart = Math.max(windowRange.start, minutesIntoDay(event._start)) - windowRange.start;
+ const offsetEnd = Math.min(windowRange.end, minutesIntoDay(event._end)) - windowRange.start;
+ const top = Math.max(0, (offsetStart / 30) * slotHeight);
+ const height = Math.max(16, ((offsetEnd - offsetStart) / 30) * slotHeight - 3);
+
+ const block = document.createElement('div');
+ block.style.position = 'absolute';
+ block.style.top = `${top}px`;
+ block.style.height = `${height}px`;
+ block.style.left = `calc(${(100 / event._columns) * event._column}% + ${event._column * 4}px)`;
+ block.style.width = `calc(${100 / event._columns}% - 4px)`;
+ block.style.padding = '5px 6px';
+ block.style.border = currentEvent && currentEvent._start === event._start && currentEvent._end === event._end
+ ? '1px solid rgba(169, 39, 29, 0.38)'
+ : '1px solid rgba(162, 105, 62, 0.26)';
+ block.style.background = currentEvent && currentEvent._start === event._start && currentEvent._end === event._end
+ ? 'linear-gradient(180deg, rgba(255, 228, 224, 0.98) 0%, rgba(248, 205, 198, 0.94) 100%)'
+ : 'linear-gradient(180deg, rgba(244, 220, 196, 0.98) 0%, rgba(230, 197, 165, 0.98) 100%)';
+ block.style.boxShadow = '0 4px 10px rgba(84, 51, 29, 0.08)';
+ block.style.overflow = 'hidden';
+
+ const title = document.createElement('div');
+ title.style.fontFamily = "'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif";
+ title.style.fontSize = '0.74rem';
+ title.style.lineHeight = '0.98';
+ title.style.letterSpacing = '-0.01em';
+ title.style.color = '#22140c';
+ title.style.fontWeight = '700';
+ title.style.whiteSpace = 'nowrap';
+ title.style.textOverflow = 'ellipsis';
+ title.style.overflow = 'hidden';
+ title.textContent = String(event.summary || '(No title)');
+ block.appendChild(title);
+
+ eventsLayer.appendChild(block);
+ }
+
+ if (nowTime >= new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, windowRange.start, 0, 0).getTime() &&
+ nowTime <= new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, windowRange.end, 0, 0).getTime()) {
+ const nowMinutes = now.getHours() * 60 + now.getMinutes();
+ const nowTop = TRACK_TOP_PAD + ((nowMinutes - windowRange.start) / 30) * slotHeight;
+
+ const line = document.createElement('div');
+ line.style.position = 'absolute';
+ line.style.left = `${LABEL_WIDTH + 6}px`;
+ line.style.right = '0';
+ line.style.top = `${nowTop}px`;
+ line.style.borderTop = '1.5px solid #cf2f21';
+ line.style.transition = 'top 28s linear';
+ timelineEl.appendChild(line);
+
+ const dot = document.createElement('div');
+ dot.style.position = 'absolute';
+ dot.style.left = `${LABEL_WIDTH + 1}px`;
+ dot.style.top = `${nowTop - 4}px`;
+ dot.style.width = '8px';
+ dot.style.height = '8px';
+ dot.style.borderRadius = '999px';
+ dot.style.background = '#cf2f21';
+ dot.style.boxShadow = '0 0 0 2px rgba(255, 255, 255, 0.95)';
+ dot.style.transition = 'top 28s linear';
+ timelineEl.appendChild(dot);
+
+ }
+ }
+
+ updateLiveContent({
+ kind: 'calendar_timeline',
+ subtitle: subtitle || null,
+ tool_name: TOOL_FALLBACK,
+ calendar_names: latestSelectedCalendars,
+ updated_at: latestUpdatedAt || null,
+ now_label: formatClock(now),
+ headline: headlineEl.textContent || null,
+ detail: detailEl.textContent || null,
+ weather_temperature_range: latestWeatherRange ? {
+ low: latestWeatherRange.low,
+ high: latestWeatherRange.high,
+ } : null,
+ current_event: currentEvent ? {
+ summary: String(currentEvent.summary || '(No title)'),
+ start: normalizeDateValue(currentEvent.start) || null,
+ end: normalizeDateValue(currentEvent.end) || null,
+ } : null,
+ next_event: nextEvent ? {
+ summary: String(nextEvent.summary || '(No title)'),
+ start: normalizeDateValue(nextEvent.start) || null,
+ end: normalizeDateValue(nextEvent.end) || null,
+ starts_in: formatDistance(nextEvent._start - nowTime),
+ } : null,
+ event_count: latestEvents.length,
+ all_day_count: allDayEvents.length,
+ score: computeScore(latestEvents, nowTime),
+ events: latestEvents.map((event) => ({
+ summary: String(event.summary || '(No title)'),
+ start: normalizeDateValue(event.start) || null,
+ end: normalizeDateValue(event.end) || null,
+ all_day: Boolean(event._allDay),
+ })),
+ });
+ };
+
+ const refresh = async () => {
+ headlineEl.textContent = 'Loading today…';
+ detailEl.textContent = 'Checking your calendar.';
+
+ try {
+ const toolConfig = await resolveToolConfig();
+ const selectedCalendars = calendarNames.length > 0 ? calendarNames : toolConfig.availableCalendars;
+ if (!toolConfig.name) throw new Error('Calendar tool unavailable');
+ if (!Array.isArray(selectedCalendars) || selectedCalendars.length === 0) {
+ throw new Error('No calendars configured');
+ }
+
+ const [weatherPoints, allEvents] = await Promise.all([
+ resolveWeatherForecast().catch(() => []),
+ (async () => {
+ const allEvents = [];
+ for (const calendarName of selectedCalendars) {
+ const toolResult = await host.callTool(toolConfig.name, {
+ calendar: calendarName,
+ range: 'today',
+ });
+ const events = extractEvents(toolResult);
+ for (const event of events) {
+ const bounds = eventBounds(event);
+ if (!bounds) continue;
+ allEvents.push({
+ ...event,
+ _calendarName: calendarName,
+ _start: bounds.start,
+ _end: bounds.end,
+ _allDay: bounds.allDay,
+ });
+ }
+ }
+ return allEvents;
+ })(),
+ ]);
+
+ allEvents.sort((left, right) => left._start - right._start);
+ latestWeatherPoints = weatherPoints;
+ latestWeatherRange = computeWeatherRange(weatherPoints);
+ latestEvents = allEvents;
+ latestSelectedCalendars = selectedCalendars;
+ latestUpdatedAt = new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+ renderState();
+ } catch (error) {
+ const errorText = String(error);
+ latestWeatherPoints = [];
+ latestWeatherRange = null;
+ latestEvents = [];
+ latestSelectedCalendars = calendarNames;
+ latestUpdatedAt = errorText;
+ headlineEl.textContent = formatShortDate(new Date());
+ detailEl.textContent = errorText;
+ allDayWrapEl.style.display = 'none';
+ timelineShellEl.style.display = 'none';
+ emptyEl.style.display = 'block';
+ updateLiveContent({
+ kind: 'calendar_timeline',
+ subtitle: subtitle || null,
+ tool_name: TOOL_FALLBACK,
+ calendar_names: latestSelectedCalendars,
+ updated_at: errorText,
+ now_label: formatClock(new Date()),
+ headline: headlineEl.textContent || null,
+ detail: detailEl.textContent || null,
+ weather_temperature_range: null,
+ event_count: 0,
+ all_day_count: 0,
+ score: 0,
+ events: [],
+ error: errorText,
+ });
+ }
+ };
+
+ host.setRefreshHandler(() => {
+ void refresh();
+ });
+
+ if (clockIntervalId) window.clearInterval(clockIntervalId);
+ clockIntervalId = __setInterval(() => {
+ renderState();
+ }, 30000);
+
+ void refresh();
+ __setInterval(() => {
+ void refresh();
+ }, refreshMs);
+
+ return {
+ destroy() {
+ host.setRefreshHandler(null);
+ host.setLiveContent(null);
+ host.clearSelection();
+ for (const cleanup of __cleanup.splice(0)) cleanup();
+ },
+ };
+}
diff --git a/examples/cards/templates/calendar-timeline-weather-live/manifest.json b/examples/cards/templates/calendar-timeline-weather-live/manifest.json
new file mode 100644
index 0000000..c4c43fb
--- /dev/null
+++ b/examples/cards/templates/calendar-timeline-weather-live/manifest.json
@@ -0,0 +1,22 @@
+{
+ "key": "calendar-timeline-weather-live",
+ "title": "Today Calendar Weather Timeline",
+ "notes": "Experimental copy of the today-only Home Assistant calendar timeline with a subtle hourly temperature graph behind the timeline. Fill template_state with subtitle, tool_name (defaults to calendar_get_events), optional calendar_names, refresh_ms, min_start_hour, max_end_hour, min_window_hours, slot_height, empty_text, weather_tool_name (defaults to exec), and weather_command.",
+ "example_state": {
+ "subtitle": "Family Calendar",
+ "tool_name": "mcp_home_assistant_calendar_get_events",
+ "calendar_names": [
+ "Family Calendar"
+ ],
+ "refresh_ms": 900000,
+ "min_start_hour": 6,
+ "max_end_hour": 22,
+ "min_window_hours": 6,
+ "slot_height": 24,
+ "empty_text": "No events for today.",
+ "weather_tool_name": "exec",
+ "weather_command": "python3 /home/kacper/nanobot/scripts/card_upcoming_conditions.py --nws-entity weather.korh --uv-entity weather.openweathermap_2 --forecast-type hourly --limit 48"
+ },
+ "created_at": "2026-04-02T00:00:00+00:00",
+ "updated_at": "2026-04-02T00:00:00+00:00"
+}
diff --git a/examples/cards/templates/calendar-timeline-weather-live/template.html b/examples/cards/templates/calendar-timeline-weather-live/template.html
new file mode 100644
index 0000000..30ede4d
--- /dev/null
+++ b/examples/cards/templates/calendar-timeline-weather-live/template.html
@@ -0,0 +1,41 @@
+
+
+
Today Calendar + Weather
+
+
+
+
Loading today…
+
Checking your calendar.
+
+
+
+
+
+
No events for today.
+
+
+
diff --git a/examples/cards/templates/git-diff-live/card.js b/examples/cards/templates/git-diff-live/card.js
new file mode 100644
index 0000000..64874a3
--- /dev/null
+++ b/examples/cards/templates/git-diff-live/card.js
@@ -0,0 +1,719 @@
+export function mount({ root, state, host }) {
+ state = state || {};
+ const __cleanup = [];
+ const __setInterval = (...args) => {
+ const id = window.setInterval(...args);
+ __cleanup.push(() => window.clearInterval(id));
+ return id;
+ };
+ const __setTimeout = (...args) => {
+ const id = window.setTimeout(...args);
+ __cleanup.push(() => window.clearTimeout(id));
+ return id;
+ };
+ if (!(root instanceof HTMLElement)) return;
+
+ const subtitleEl = root.querySelector('[data-git-subtitle]');
+ const branchEl = root.querySelector('[data-git-branch]');
+ const statusEl = root.querySelector('[data-git-status]');
+ const changedEl = root.querySelector('[data-git-changed]');
+ const stagingEl = root.querySelector('[data-git-staging]');
+ const untrackedEl = root.querySelector('[data-git-untracked]');
+ const upstreamEl = root.querySelector('[data-git-upstream]');
+ const plusEl = root.querySelector('[data-git-plus]');
+ const minusEl = root.querySelector('[data-git-minus]');
+ const updatedEl = root.querySelector('[data-git-updated]');
+ const filesEl = root.querySelector('[data-git-files]');
+ if (!(subtitleEl instanceof HTMLElement) || !(branchEl instanceof HTMLElement) || !(statusEl instanceof HTMLElement) || !(changedEl instanceof HTMLElement) || !(stagingEl instanceof HTMLElement) || !(untrackedEl instanceof HTMLElement) || !(upstreamEl instanceof HTMLElement) || !(plusEl instanceof HTMLElement) || !(minusEl instanceof HTMLElement) || !(updatedEl instanceof HTMLElement) || !(filesEl instanceof HTMLElement)) return;
+
+ const configuredToolName = typeof state.tool_name === 'string' ? state.tool_name.trim() : '';
+ const rawToolArguments = state && typeof state.tool_arguments === 'object' && state.tool_arguments && !Array.isArray(state.tool_arguments)
+ ? state.tool_arguments
+ : {};
+ const subtitle = typeof state.subtitle === 'string' ? state.subtitle.trim() : '';
+ const numberFormatter = new Intl.NumberFormat([], { maximumFractionDigits: 0 });
+
+ const setStatus = (label, fg, bg) => {
+ statusEl.textContent = label;
+ statusEl.style.color = fg;
+ statusEl.style.background = bg;
+ statusEl.style.padding = '3px 7px';
+ statusEl.style.borderRadius = '999px';
+ };
+
+ const statusTone = (value) => {
+ if (value === 'Clean') return { fg: '#6c8b63', bg: '#dfe9d8' };
+ if (value === 'Dirty') return { fg: '#9a6a2f', bg: '#f4e2b8' };
+ return { fg: '#a14d43', bg: '#f3d8d2' };
+ };
+
+ const formatBranch = (payload) => {
+ const parts = [];
+ const branch = typeof payload.branch === 'string' ? payload.branch : '';
+ if (branch) parts.push(branch);
+ if (typeof payload.upstream === 'string' && payload.upstream) {
+ parts.push(payload.upstream);
+ }
+ const ahead = Number(payload.ahead || 0);
+ const behind = Number(payload.behind || 0);
+ if (ahead || behind) {
+ parts.push(`+${ahead} / -${behind}`);
+ }
+ if (!parts.length && typeof payload.head === 'string' && payload.head) {
+ parts.push(payload.head);
+ }
+ return parts.join(' · ') || 'No branch information';
+ };
+
+ const formatUpdated = (raw) => {
+ if (typeof raw !== 'string' || !raw) return '--';
+ const parsed = new Date(raw);
+ if (Number.isNaN(parsed.getTime())) return raw;
+ return parsed.toLocaleString([], { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+ };
+
+ const chipStyle = (status) => {
+ if (status === '??') return { fg: '#6f7582', bg: '#e8edf2' };
+ if (status.includes('D')) return { fg: '#a45b51', bg: '#f3d7d2' };
+ if (status.includes('A')) return { fg: '#6d8a5d', bg: '#dce7d6' };
+ return { fg: '#9a6a2f', bg: '#f3e1ba' };
+ };
+
+ const asLineNumber = (value) => {
+ if (typeof value === 'number' && Number.isFinite(value)) return value;
+ if (typeof value === 'string' && /^\d+$/.test(value)) return Number(value);
+ return null;
+ };
+
+ const formatRangePart = (label, start, end) => {
+ if (start === null || end === null) return '';
+ return start === end ? `${label} ${start}` : `${label} ${start}-${end}`;
+ };
+
+ const buildSelectionPayload = (filePath, lines) => {
+ const oldNumbers = lines.map((line) => line.oldNumber).filter((value) => value !== null);
+ const newNumbers = lines.map((line) => line.newNumber).filter((value) => value !== null);
+ const oldStart = oldNumbers.length ? Math.min(...oldNumbers) : null;
+ const oldEnd = oldNumbers.length ? Math.max(...oldNumbers) : null;
+ const newStart = newNumbers.length ? Math.min(...newNumbers) : null;
+ const newEnd = newNumbers.length ? Math.max(...newNumbers) : null;
+ const rangeParts = [
+ formatRangePart('old', oldStart, oldEnd),
+ formatRangePart('new', newStart, newEnd),
+ ].filter(Boolean);
+ const fileLabel = filePath || 'Selected diff';
+ const rangeLabel = rangeParts.join(' · ') || 'Selected diff lines';
+ return {
+ kind: 'git_diff_range',
+ file_path: filePath || fileLabel,
+ file_label: fileLabel,
+ range_label: rangeLabel,
+ label: `${fileLabel} · ${rangeLabel}`,
+ old_start: oldStart,
+ old_end: oldEnd,
+ new_start: newStart,
+ new_end: newEnd,
+ };
+ };
+
+ let activeSelectionController = null;
+
+ const clearActiveSelection = () => {
+ if (activeSelectionController) {
+ const controller = activeSelectionController;
+ activeSelectionController = null;
+ controller.clear(false);
+ }
+ host.setSelection(null);
+ };
+
+ const renderPatchBody = (target, item) => {
+ target.innerHTML = '';
+ target.dataset.noSwipe = '1';
+ target.style.marginTop = '10px';
+ target.style.marginLeft = '-12px';
+ target.style.marginRight = '-12px';
+ target.style.width = 'calc(100% + 24px)';
+ target.style.paddingTop = '10px';
+ target.style.borderTop = '1px solid rgba(177, 140, 112, 0.16)';
+ target.style.overflow = 'hidden';
+ target.style.minWidth = '0';
+ target.style.maxWidth = 'none';
+
+ const viewport = document.createElement('div');
+ viewport.dataset.noSwipe = '1';
+ viewport.style.width = '100%';
+ viewport.style.maxWidth = 'none';
+ viewport.style.minWidth = '0';
+ viewport.style.overflowX = 'auto';
+ viewport.style.overflowY = 'hidden';
+ viewport.style.touchAction = 'auto';
+ viewport.style.overscrollBehavior = 'contain';
+ viewport.style.webkitOverflowScrolling = 'touch';
+ viewport.style.scrollbarWidth = 'thin';
+ viewport.style.scrollbarColor = 'rgba(120, 94, 74, 0.28) transparent';
+
+ const diffText = typeof item?.diff === 'string' ? item.diff : '';
+ const diffLines = Array.isArray(item?.diff_lines) ? item.diff_lines : [];
+ if (!diffText && diffLines.length === 0) {
+ const message = document.createElement('div');
+ message.textContent = 'No line diff available for this path.';
+ message.style.fontSize = '0.76rem';
+ message.style.lineHeight = '1.4';
+ message.style.color = '#9a7b68';
+ message.style.fontWeight = '600';
+ target.appendChild(message);
+ return;
+ }
+
+ const block = document.createElement('div');
+ block.dataset.noSwipe = '1';
+ block.style.display = 'grid';
+ block.style.gap = '0';
+ block.style.padding = '0';
+ block.style.borderRadius = '0';
+ block.style.background = 'rgba(255,255,255,0.58)';
+ block.style.border = '1px solid rgba(153, 118, 92, 0.14)';
+ block.style.borderLeft = '0';
+ block.style.borderRight = '0';
+ block.style.fontFamily =
+ "var(--card-font, 'Iosevka', 'SF Mono', ui-monospace, Menlo, Consolas, monospace)";
+ block.style.fontSize = '0.64rem';
+ block.style.lineHeight = '1.45';
+ block.style.color = '#5f4a3f';
+ block.style.width = 'max-content';
+ block.style.minWidth = '100%';
+
+ const selectableLines = [];
+ let localSelection = null;
+ let localAnchorIndex = null;
+
+ const setSelectedState = (entry, selected) => {
+ if (selected) entry.lineEl.dataset.selected = 'true';
+ else delete entry.lineEl.dataset.selected;
+ };
+
+ const controller = {
+ clear(publish = true) {
+ localSelection = null;
+ localAnchorIndex = null;
+ for (const entry of selectableLines) setSelectedState(entry, false);
+ if (publish) {
+ if (activeSelectionController === controller) activeSelectionController = null;
+ host.setSelection(null);
+ }
+ },
+ };
+
+ const applySelection = (startIndex, endIndex) => {
+ const lower = Math.min(startIndex, endIndex);
+ const upper = Math.max(startIndex, endIndex);
+ localSelection = { startIndex: lower, endIndex: upper };
+ for (const [index, entry] of selectableLines.entries()) {
+ setSelectedState(entry, index >= lower && index <= upper);
+ }
+ if (activeSelectionController && activeSelectionController !== controller) {
+ activeSelectionController.clear(false);
+ }
+ activeSelectionController = controller;
+ host.setSelection(buildSelectionPayload(String(item?.path || ''), selectableLines.slice(lower, upper + 1)),
+ );
+ };
+
+ const handleSelectableLine = (index) => {
+ if (!localSelection) {
+ localAnchorIndex = index;
+ applySelection(index, index);
+ return;
+ }
+ const singleLine = localSelection.startIndex === localSelection.endIndex;
+ if (singleLine) {
+ const anchorIndex = localAnchorIndex ?? localSelection.startIndex;
+ if (index === anchorIndex) {
+ controller.clear(true);
+ return;
+ }
+ applySelection(anchorIndex, index);
+ localAnchorIndex = null;
+ return;
+ }
+ localAnchorIndex = index;
+ applySelection(index, index);
+ };
+
+ const registerSelectableLine = (lineEl, oldNumber, newNumber) => {
+ const entry = {
+ lineEl,
+ oldNumber: asLineNumber(oldNumber),
+ newNumber: asLineNumber(newNumber),
+ };
+ const index = selectableLines.push(entry) - 1;
+ lineEl.dataset.selectable = 'true';
+ lineEl.tabIndex = 0;
+ lineEl.setAttribute('role', 'button');
+ lineEl.addEventListener('click', (event) => {
+ event.preventDefault();
+ event.stopPropagation();
+ handleSelectableLine(index);
+ });
+ lineEl.addEventListener('keydown', (event) => {
+ if (event.key !== 'Enter' && event.key !== ' ') return;
+ event.preventDefault();
+ handleSelectableLine(index);
+ });
+ };
+
+ if (diffLines.length > 0) {
+ for (const row of diffLines) {
+ const lineEl = document.createElement('div');
+ lineEl.dataset.gitPatchRow = '1';
+ lineEl.style.display = 'grid';
+ lineEl.style.gridTemplateColumns = 'max-content max-content';
+ lineEl.style.columnGap = '8px';
+ lineEl.style.alignItems = 'start';
+ lineEl.style.justifyContent = 'start';
+ lineEl.style.padding = '0';
+ lineEl.style.borderRadius = '0';
+ lineEl.style.width = 'max-content';
+ lineEl.style.minWidth = '100%';
+
+ const numberEl = document.createElement('span');
+ const lineNumber =
+ typeof row?.line_number === 'number' || typeof row?.line_number === 'string'
+ ? String(row.line_number)
+ : '';
+ numberEl.textContent = lineNumber;
+ numberEl.style.minWidth = '2.2em';
+ numberEl.style.textAlign = 'right';
+ numberEl.style.color = '#8c7464';
+ numberEl.style.opacity = '0.92';
+
+ const textEl = document.createElement('span');
+ textEl.dataset.gitPatchText = '1';
+ textEl.textContent = typeof row?.text === 'string' ? row.text : '';
+ textEl.style.whiteSpace = 'pre';
+ textEl.style.wordBreak = 'normal';
+
+ const kind = typeof row?.kind === 'string' ? row.kind : '';
+ if (kind === 'added') {
+ lineEl.style.color = '#0c3f12';
+ lineEl.style.background = 'rgba(158, 232, 147, 0.98)';
+ } else if (kind === 'removed') {
+ lineEl.style.color = '#6d0d08';
+ lineEl.style.background = 'rgba(249, 156, 145, 0.98)';
+ } else {
+ lineEl.style.color = '#5f4a3f';
+ }
+
+ lineEl.append(numberEl, textEl);
+ block.appendChild(lineEl);
+ }
+ } else {
+ const makePatchLine = (line, kind, oldNumber = '', newNumber = '') => {
+ const lineEl = document.createElement('div');
+ lineEl.dataset.gitPatchRow = '1';
+ lineEl.style.display = 'grid';
+ lineEl.style.gridTemplateColumns = 'max-content max-content max-content';
+ lineEl.style.columnGap = '8px';
+ lineEl.style.alignItems = 'start';
+ lineEl.style.justifyContent = 'start';
+ lineEl.style.padding = '0';
+ lineEl.style.borderRadius = '0';
+ lineEl.style.width = 'max-content';
+ lineEl.style.minWidth = '100%';
+
+ const oldEl = document.createElement('span');
+ oldEl.textContent = oldNumber ? String(oldNumber) : '';
+ oldEl.style.minWidth = '2.4em';
+ oldEl.style.textAlign = 'right';
+ oldEl.style.color = '#8c7464';
+ oldEl.style.opacity = '0.92';
+
+ const newEl = document.createElement('span');
+ newEl.textContent = newNumber ? String(newNumber) : '';
+ newEl.style.minWidth = '2.4em';
+ newEl.style.textAlign = 'right';
+ newEl.style.color = '#8c7464';
+ newEl.style.opacity = '0.92';
+
+ const textEl = document.createElement('span');
+ textEl.dataset.gitPatchText = '1';
+ textEl.textContent = line || ' ';
+ textEl.style.whiteSpace = 'pre';
+ textEl.style.wordBreak = 'normal';
+
+ if (kind === 'hunk') {
+ lineEl.style.color = '#6c523f';
+ lineEl.style.background = 'rgba(224, 204, 184, 0.94)';
+ lineEl.style.fontWeight = '800';
+ } else if (kind === 'added') {
+ lineEl.style.color = '#0f4515';
+ lineEl.style.background = 'rgba(170, 232, 160, 0.98)';
+ } else if (kind === 'removed') {
+ lineEl.style.color = '#74110a';
+ lineEl.style.background = 'rgba(247, 170, 160, 0.98)';
+ } else if (kind === 'context') {
+ lineEl.style.color = '#6f5b4d';
+ lineEl.style.background = 'rgba(247, 236, 223, 0.72)';
+ } else if (kind === 'meta') {
+ lineEl.style.color = '#725c4f';
+ lineEl.style.background = 'rgba(255, 255, 255, 0.42)';
+ } else if (kind === 'note') {
+ lineEl.style.color = '#8a6f5c';
+ lineEl.style.background = 'rgba(236, 226, 216, 0.72)';
+ lineEl.style.fontStyle = 'italic';
+ }
+
+ lineEl.append(oldEl, newEl, textEl);
+ if (kind === 'added' || kind === 'removed' || kind === 'context') {
+ registerSelectableLine(lineEl, oldNumber, newNumber);
+ }
+ return lineEl;
+ };
+
+ const parseHunkHeader = (line) => {
+ const match = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/.exec(line);
+ if (!match) return null;
+ return {
+ oldLine: Number(match[1] || '0'),
+ newLine: Number(match[3] || '0'),
+ };
+ };
+
+ const prelude = [];
+ const hunks = [];
+ let currentHunk = null;
+ for (const line of diffText.split('\n')) {
+ if (line.startsWith('@@')) {
+ if (currentHunk) hunks.push(currentHunk);
+ currentHunk = { header: line, lines: [] };
+ continue;
+ }
+ if (currentHunk) {
+ currentHunk.lines.push(line);
+ } else {
+ prelude.push(line);
+ }
+ }
+ if (currentHunk) hunks.push(currentHunk);
+
+ for (const line of prelude) {
+ let kind = 'meta';
+ if (line.startsWith('Binary files') || line.startsWith('\\')) kind = 'note';
+ else if (line.startsWith('+') && !line.startsWith('+++')) kind = 'added';
+ else if (line.startsWith('-') && !line.startsWith('---')) kind = 'removed';
+ else if (line.startsWith(' ')) kind = 'context';
+ block.appendChild(makePatchLine(line, kind));
+ }
+
+ for (const hunk of hunks) {
+ const section = document.createElement('section');
+ section.style.display = 'grid';
+ section.style.gap = '0';
+ section.style.marginTop = block.childNodes.length ? '10px' : '0';
+ section.style.borderTop = '1px solid rgba(177, 140, 112, 0.24)';
+ section.style.borderBottom = '1px solid rgba(177, 140, 112, 0.24)';
+
+ section.appendChild(makePatchLine(hunk.header, 'hunk'));
+ const parsed = parseHunkHeader(hunk.header);
+ let oldLine = parsed ? parsed.oldLine : 0;
+ let newLine = parsed ? parsed.newLine : 0;
+ for (const line of hunk.lines) {
+ if (line.startsWith('+') && !line.startsWith('+++')) {
+ section.appendChild(makePatchLine(line, 'added', '', newLine));
+ newLine += 1;
+ } else if (line.startsWith('-') && !line.startsWith('---')) {
+ section.appendChild(makePatchLine(line, 'removed', oldLine, ''));
+ oldLine += 1;
+ } else if (line.startsWith('\\')) {
+ section.appendChild(makePatchLine(line, 'note'));
+ } else if (line.startsWith('+++') || line.startsWith('---')) {
+ section.appendChild(makePatchLine(line, 'meta'));
+ } else {
+ const oldNumber = oldLine ? oldLine : '';
+ const newNumber = newLine ? newLine : '';
+ section.appendChild(makePatchLine(line, 'context', oldNumber, newNumber));
+ oldLine += 1;
+ newLine += 1;
+ }
+ }
+ block.appendChild(section);
+ }
+ }
+
+ viewport.appendChild(block);
+ target.appendChild(viewport);
+
+ if (item?.diff_truncated) {
+ const note = document.createElement('div');
+ note.textContent = 'Diff truncated for readability.';
+ note.style.marginTop = '8px';
+ note.style.fontSize = '0.72rem';
+ note.style.lineHeight = '1.35';
+ note.style.color = '#9a7b68';
+ note.style.fontWeight = '600';
+ target.appendChild(note);
+ }
+ };
+
+ const renderFiles = (items) => {
+ clearActiveSelection();
+ filesEl.innerHTML = '';
+ if (!Array.isArray(items) || items.length === 0) {
+ const empty = document.createElement('div');
+ empty.textContent = 'Working tree clean.';
+ empty.style.fontSize = '0.92rem';
+ empty.style.lineHeight = '1.4';
+ empty.style.color = '#7d8f73';
+ empty.style.fontWeight = '700';
+ empty.style.padding = '12px';
+ empty.style.borderRadius = '12px';
+ empty.style.background = 'rgba(223, 233, 216, 0.55)';
+ empty.style.border = '1px solid rgba(109, 138, 93, 0.12)';
+ filesEl.appendChild(empty);
+ return;
+ }
+
+ for (const item of items) {
+ const row = document.createElement('div');
+ row.style.display = 'block';
+ row.style.minWidth = '0';
+ row.style.maxWidth = '100%';
+ row.style.padding = '0';
+ row.style.borderRadius = '0';
+ row.style.background = 'transparent';
+ row.style.border = '0';
+ row.style.boxShadow = 'none';
+
+ const summaryButton = document.createElement('button');
+ summaryButton.type = 'button';
+ summaryButton.style.display = 'flex';
+ summaryButton.style.alignItems = 'flex-start';
+ summaryButton.style.justifyContent = 'space-between';
+ summaryButton.style.gap = '8px';
+ summaryButton.style.width = '100%';
+ summaryButton.style.minWidth = '0';
+ summaryButton.style.padding = '0';
+ summaryButton.style.margin = '0';
+ summaryButton.style.border = '0';
+ summaryButton.style.background = 'transparent';
+ summaryButton.style.textAlign = 'left';
+ summaryButton.style.cursor = 'pointer';
+
+ const left = document.createElement('div');
+ left.style.display = 'flex';
+ left.style.alignItems = 'flex-start';
+ left.style.gap = '8px';
+ left.style.minWidth = '0';
+ left.style.flex = '1 1 auto';
+
+ const chip = document.createElement('span');
+ const chipTone = chipStyle(String(item?.status || 'M'));
+ chip.textContent = String(item?.status || 'M');
+ chip.style.fontSize = '0.72rem';
+ chip.style.lineHeight = '1.1';
+ chip.style.fontWeight = '800';
+ chip.style.color = chipTone.fg;
+ chip.style.background = chipTone.bg;
+ chip.style.padding = '4px 7px';
+ chip.style.borderRadius = '999px';
+ chip.style.flex = '0 0 auto';
+
+ const pathWrap = document.createElement('div');
+ pathWrap.style.minWidth = '0';
+
+ const pathEl = document.createElement('div');
+ pathEl.textContent = String(item?.path || '--');
+ pathEl.style.fontSize = '0.92rem';
+ pathEl.style.lineHeight = '1.3';
+ pathEl.style.fontWeight = '700';
+ pathEl.style.color = '#65483a';
+ pathEl.style.wordBreak = 'break-word';
+
+ const detailEl = document.createElement('div');
+ detailEl.style.marginTop = '3px';
+ detailEl.style.fontSize = '0.77rem';
+ detailEl.style.lineHeight = '1.35';
+ detailEl.style.color = '#9a7b68';
+ const insertions = Number(item?.insertions || 0);
+ const deletions = Number(item?.deletions || 0);
+ detailEl.textContent = insertions || deletions
+ ? `+${numberFormatter.format(insertions)} / -${numberFormatter.format(deletions)}`
+ : 'No line diff';
+
+ pathWrap.append(pathEl, detailEl);
+ left.append(chip, pathWrap);
+ const toggle = document.createElement('span');
+ toggle.setAttribute('aria-hidden', 'true');
+ toggle.style.fontSize = '0.95rem';
+ toggle.style.lineHeight = '1';
+ toggle.style.fontWeight = '800';
+ toggle.style.color = '#9a7b68';
+ toggle.style.whiteSpace = 'nowrap';
+ toggle.style.flex = '0 0 auto';
+ toggle.style.paddingTop = '1px';
+
+ const body = document.createElement('div');
+ body.hidden = true;
+ body.style.width = '100%';
+ body.style.maxWidth = '100%';
+ body.style.minWidth = '0';
+ renderPatchBody(body, item);
+
+ const hasDiff = Boolean(item?.diff_available) || Boolean(item?.diff);
+ const setExpanded = (expanded) => {
+ body.hidden = !expanded;
+ summaryButton.setAttribute('aria-expanded', expanded ? 'true' : 'false');
+ toggle.textContent = expanded ? '▴' : '▾';
+ };
+ setExpanded(false);
+
+ summaryButton.addEventListener('click', () => {
+ setExpanded(body.hidden);
+ });
+
+ summaryButton.append(left, toggle);
+ row.append(summaryButton, body);
+ filesEl.appendChild(row);
+ }
+ };
+
+ const updateLiveContent = (snapshot) => {
+ host.setLiveContent(snapshot);
+ };
+
+ const render = (payload) => {
+ subtitleEl.textContent = subtitle || payload.repo_name || payload.repo_path || 'Git repo';
+ branchEl.textContent = formatBranch(payload);
+ changedEl.textContent = numberFormatter.format(Number(payload.changed_files || 0));
+ stagingEl.textContent = `${numberFormatter.format(Number(payload.staged_files || 0))} staged · ${numberFormatter.format(Number(payload.unstaged_files || 0))} unstaged`;
+ untrackedEl.textContent = numberFormatter.format(Number(payload.untracked_files || 0));
+ upstreamEl.textContent = typeof payload.repo_path === 'string' ? payload.repo_path : '--';
+ plusEl.textContent = `+${numberFormatter.format(Number(payload.insertions || 0))}`;
+ minusEl.textContent = `-${numberFormatter.format(Number(payload.deletions || 0))}`;
+ updatedEl.textContent = `Updated ${formatUpdated(payload.generated_at)}`;
+ const label = payload.dirty ? 'Dirty' : 'Clean';
+ const tone = statusTone(label);
+ setStatus(label, tone.fg, tone.bg);
+ renderFiles(payload.files);
+ updateLiveContent({
+ kind: 'git_repo_diff',
+ repo_name: payload.repo_name || null,
+ repo_path: payload.repo_path || null,
+ branch: payload.branch || null,
+ upstream: payload.upstream || null,
+ ahead: Number(payload.ahead || 0),
+ behind: Number(payload.behind || 0),
+ dirty: Boolean(payload.dirty),
+ changed_files: Number(payload.changed_files || 0),
+ staged_files: Number(payload.staged_files || 0),
+ unstaged_files: Number(payload.unstaged_files || 0),
+ untracked_files: Number(payload.untracked_files || 0),
+ insertions: Number(payload.insertions || 0),
+ deletions: Number(payload.deletions || 0),
+ files: Array.isArray(payload.files)
+ ? payload.files.map((item) => ({
+ path: item?.path || null,
+ status: item?.status || null,
+ insertions: Number(item?.insertions || 0),
+ deletions: Number(item?.deletions || 0),
+ diff_available: Boolean(item?.diff_available),
+ diff_truncated: Boolean(item?.diff_truncated),
+ }))
+ : [],
+ generated_at: payload.generated_at || null,
+ });
+ };
+
+ const renderError = (message) => {
+ clearActiveSelection();
+ subtitleEl.textContent = subtitle || 'Git repo';
+ branchEl.textContent = 'Unable to load repo diff';
+ changedEl.textContent = '--';
+ stagingEl.textContent = '--';
+ untrackedEl.textContent = '--';
+ upstreamEl.textContent = '--';
+ plusEl.textContent = '+--';
+ minusEl.textContent = '- --';
+ updatedEl.textContent = message;
+ const tone = statusTone('Unavailable');
+ setStatus('Unavailable', tone.fg, tone.bg);
+ filesEl.innerHTML = '';
+ const error = document.createElement('div');
+ error.textContent = message;
+ error.style.fontSize = '0.88rem';
+ error.style.lineHeight = '1.4';
+ error.style.color = '#a45b51';
+ error.style.fontWeight = '700';
+ error.style.padding = '12px';
+ error.style.borderRadius = '12px';
+ error.style.background = 'rgba(243, 216, 210, 0.55)';
+ error.style.border = '1px solid rgba(164, 91, 81, 0.14)';
+ filesEl.appendChild(error);
+ updateLiveContent({
+ kind: 'git_repo_diff',
+ repo_name: null,
+ repo_path: null,
+ dirty: null,
+ error: message,
+ });
+ };
+
+ const loadPayload = async () => {
+ if (!configuredToolName) throw new Error('Missing template_state.tool_name');
+ if (!host.callToolAsync) throw new Error('Async tool helper unavailable');
+ const toolResult = await host.callToolAsync(
+ configuredToolName,
+ rawToolArguments,
+ { timeoutMs: 180000 },
+ );
+ if (toolResult && toolResult.parsed && typeof toolResult.parsed === 'object' && !Array.isArray(toolResult.parsed)) {
+ return toolResult.parsed;
+ }
+ const rawContent = typeof toolResult?.content === 'string' ? toolResult.content.trim() : '';
+ if (rawContent) {
+ if (rawContent.includes('(truncated,')) {
+ throw new Error('Tool output was truncated. Increase exec max_output_chars for this card.');
+ }
+ const normalizedContent = rawContent.replace(/\n+Exit code:\s*-?\d+\s*$/i, '').trim();
+ if (!normalizedContent.startsWith('{')) {
+ throw new Error(rawContent);
+ }
+ try {
+ const parsed = JSON.parse(normalizedContent);
+ if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+ return parsed;
+ }
+ } catch (error) {
+ const detail = error instanceof Error ? error.message : String(error);
+ throw new Error(`Tool returned invalid JSON: ${detail}`);
+ }
+ }
+ throw new Error('Tool returned invalid JSON');
+ };
+
+ const refresh = async () => {
+ const loadingTone = { fg: '#9a7b68', bg: '#efe3d6' };
+ setStatus('Refreshing', loadingTone.fg, loadingTone.bg);
+ try {
+ const payload = await loadPayload();
+ render(payload);
+ } catch (error) {
+ renderError(String(error));
+ }
+ };
+
+ host.setRefreshHandler(() => {
+ void refresh();
+ });
+ void refresh();
+
+ return {
+ destroy() {
+ host.setRefreshHandler(null);
+ host.setLiveContent(null);
+ host.clearSelection();
+ for (const cleanup of __cleanup.splice(0)) cleanup();
+ },
+ };
+}
diff --git a/examples/cards/templates/git-diff-live/template.html b/examples/cards/templates/git-diff-live/template.html
index 626db78..7dd37f5 100644
--- a/examples/cards/templates/git-diff-live/template.html
+++ b/examples/cards/templates/git-diff-live/template.html
@@ -162,708 +162,3 @@