Claude
54338ddf16
Topbar: the add button is now just ＋ and the layout button a 3-segment grid icon (two squares + one tall rectangle). Modules no longer build their own toolbars — moduleApi.header.addButton/addMenu put controls in the tile's title bar next to the gear/close (menus are fixed-positioned by the shell so a tile's overflow can't clip them, and everything a module adds is removed automatically on unmount). Each title bar grows a notch on its bottom edge that hides/shows the bar, ProdCom-Listener style; the choice persists with the layout. Modules renamed: ProdCom and ProPresenter. The ProdCom tile regains the original listener tools as icon buttons in its title bar: timestamps toggle (clock), A−/A+ text size, jump-to-latest, and a circle-with-cross clear button, plus the Channels menu. MODULE-GUIDE documents the header API; README updated. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RNYUv9EyrGSFmCnmH7WYKH
446 lines
16 KiB
JavaScript
446 lines
16 KiB
JavaScript
/* ProdCom Transcript — client part.
|
||
|
||
Ported from prodcom-listener/public/app.js into the ProdDash module
|
||
contract: everything lives inside the tile's root, per-tile state
|
||
(hidden channels, timestamps, text size) persists in instance settings,
|
||
and all network traffic goes through moduleApi (the module's server
|
||
proxy at /prodcom/*). */
|
||
|
||
export default function create({ root, moduleApi }) {
|
||
/* ── per-instance state ─────────────────────────────────────────── */
|
||
|
||
const channels = new Map(); // channelId -> {name, color}
|
||
const groups = new Map(); // groupId -> {name, channelIds}
|
||
const entryEls = new Map(); // entryId -> element
|
||
let pinnedToBottom = true;
|
||
let hiddenChannels = new Set(moduleApi.instanceSettings.hiddenChannels || []);
|
||
let stream = null; // moduleApi.sse handle
|
||
let bootTimer = null;
|
||
let stopped = false;
|
||
|
||
/* ── DOM skeleton ───────────────────────────────────────────────── */
|
||
|
||
root.innerHTML = `
|
||
<div class="pt-wrap">
|
||
<div class="pt-stream">
|
||
<div class="pt-empty">Waiting for transcript…</div>
|
||
<div class="pt-entries"></div>
|
||
</div>
|
||
<button class="pt-jump" hidden>↓ New messages</button>
|
||
</div>`;
|
||
|
||
const wrap = root.querySelector('.pt-wrap');
|
||
const streamEl = root.querySelector('.pt-stream');
|
||
const entriesEl = root.querySelector('.pt-entries');
|
||
const emptyEl = root.querySelector('.pt-empty');
|
||
const jumpBtn = root.querySelector('.pt-jump');
|
||
|
||
/* ── title-bar controls ─────────────────────────────────────────── */
|
||
|
||
const CLOCK_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>';
|
||
const JUMP_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11"/><path d="m7 10 5 5 5-5"/><path d="M5 20h14"/></svg>';
|
||
const CLEAR_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="m9 9 6 6M15 9l-6 6"/></svg>';
|
||
|
||
let channelMenuEl = null; // the open menu's element (filled on each open)
|
||
const channelsMenu = moduleApi.header.addMenu({
|
||
label: 'Channels ▾',
|
||
title: 'Choose visible channels',
|
||
build(menu) {
|
||
menu.classList.add('pt-menu');
|
||
channelMenuEl = menu;
|
||
rebuildChannelMenu();
|
||
},
|
||
});
|
||
channelsMenu.button.classList.add('pt-channels-btn');
|
||
|
||
let timeBtn = null;
|
||
timeBtn = moduleApi.header.addButton({
|
||
icon: CLOCK_SVG,
|
||
title: 'Show / hide timestamps',
|
||
onClick() {
|
||
moduleApi.saveInstanceSettings({ showTimes: !moduleApi.instanceSettings.showTimes });
|
||
applyInstanceSettings();
|
||
},
|
||
});
|
||
|
||
function bumpTextSize(delta) {
|
||
const current = Number(moduleApi.instanceSettings.textSize) || 15;
|
||
moduleApi.saveInstanceSettings({ textSize: Math.min(48, Math.max(10, current + delta)) });
|
||
applyInstanceSettings();
|
||
}
|
||
moduleApi.header.addButton({ label: 'A−', title: 'Smaller text', onClick: () => bumpTextSize(-2) });
|
||
moduleApi.header.addButton({ label: 'A+', title: 'Larger text', onClick: () => bumpTextSize(2) });
|
||
|
||
moduleApi.header.addButton({
|
||
icon: JUMP_SVG,
|
||
title: 'Jump to latest',
|
||
onClick() {
|
||
pinnedToBottom = true;
|
||
jumpBtn.hidden = true;
|
||
scrollToBottom();
|
||
},
|
||
});
|
||
|
||
const clearBtn = moduleApi.header.addButton({
|
||
icon: CLEAR_SVG,
|
||
title: 'Clear this tile (does not affect ProdCom)',
|
||
onClick: clearView,
|
||
});
|
||
clearBtn.classList.add('pt-clear');
|
||
|
||
function applyInstanceSettings() {
|
||
const s = moduleApi.instanceSettings;
|
||
const size = Math.min(48, Math.max(10, Number(s.textSize) || 15));
|
||
wrap.style.setProperty('--pt-size', size + 'px');
|
||
wrap.classList.toggle('show-times', Boolean(s.showTimes));
|
||
timeBtn?.classList.toggle('active', Boolean(s.showTimes));
|
||
}
|
||
applyInstanceSettings();
|
||
|
||
/* ── channel filter (instance setting) ──────────────────────────── */
|
||
|
||
function channelFilter() {
|
||
return String(moduleApi.instanceSettings.channel || '').trim().toLowerCase();
|
||
}
|
||
|
||
/** Entry hidden by the hard per-tile filter (settings.channel)? */
|
||
function filteredOut(channelId, channelName) {
|
||
const want = channelFilter();
|
||
if (!want) return false;
|
||
const known = channels.get(channelId);
|
||
const name = ((known && known.name) || channelName || '').toLowerCase();
|
||
return name !== want && String(channelId).toLowerCase() !== want;
|
||
}
|
||
|
||
/* ── channel visibility toggles ─────────────────────────────────── */
|
||
|
||
function persistHidden() {
|
||
moduleApi.saveInstanceSettings({ hiddenChannels: [...hiddenChannels] });
|
||
}
|
||
|
||
function applyFilter(el) {
|
||
const hidden = hiddenChannels.has(el.dataset.channelId)
|
||
|| filteredOut(el.dataset.channelId, el.dataset.channelName);
|
||
el.classList.toggle('hidden-by-filter', hidden);
|
||
}
|
||
|
||
function toggleChannel(id) {
|
||
if (hiddenChannels.has(id)) hiddenChannels.delete(id);
|
||
else hiddenChannels.add(id);
|
||
persistHidden();
|
||
rebuildChannelMenu();
|
||
entryEls.forEach((el) => applyFilter(el));
|
||
if (pinnedToBottom) scrollToBottom();
|
||
}
|
||
|
||
/** Show exactly this group's channels, hide the rest */
|
||
function applyGroup(g) {
|
||
hiddenChannels = new Set([...channels.keys()].filter((cid) => !g.channelIds.includes(cid)));
|
||
persistHidden();
|
||
rebuildChannelMenu();
|
||
entryEls.forEach((el) => applyFilter(el));
|
||
if (pinnedToBottom) scrollToBottom();
|
||
}
|
||
|
||
function groupIsActive(g) {
|
||
const members = g.channelIds.filter((cid) => channels.has(cid));
|
||
if (!members.length) return false;
|
||
return [...channels.keys()].every((cid) =>
|
||
members.includes(cid) ? !hiddenChannels.has(cid) : hiddenChannels.has(cid)
|
||
);
|
||
}
|
||
|
||
function updateChannelsLabel() {
|
||
let visibleCount = 0;
|
||
for (const id of channels.keys()) {
|
||
if (!hiddenChannels.has(id)) visibleCount++;
|
||
}
|
||
channelsMenu.setLabel(visibleCount === channels.size
|
||
? 'Channels ▾'
|
||
: `Channels (${visibleCount}/${channels.size}) ▾`);
|
||
}
|
||
|
||
function rebuildChannelMenu() {
|
||
updateChannelsLabel();
|
||
const channelMenu = channelMenuEl;
|
||
if (!channelMenu) return; // menu not opened yet — the label is enough
|
||
channelMenu.innerHTML = '';
|
||
|
||
if (groups.size) {
|
||
for (const g of groups.values()) {
|
||
const on = groupIsActive(g);
|
||
const item = document.createElement('button');
|
||
item.className = 'pt-channel-item pt-group-item' + (on ? ' on' : '');
|
||
item.setAttribute('role', 'menuitemradio');
|
||
item.setAttribute('aria-checked', String(on));
|
||
const check = document.createElement('span');
|
||
check.className = 'check';
|
||
check.textContent = '✓';
|
||
const name = document.createElement('span');
|
||
name.className = 'name';
|
||
name.textContent = g.name;
|
||
item.append(check, name);
|
||
item.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
applyGroup(g);
|
||
});
|
||
channelMenu.appendChild(item);
|
||
}
|
||
const divider = document.createElement('div');
|
||
divider.className = 'pt-menu-divider';
|
||
channelMenu.appendChild(divider);
|
||
}
|
||
|
||
for (const [id, info] of channels) {
|
||
const on = !hiddenChannels.has(id);
|
||
const item = document.createElement('button');
|
||
item.className = 'pt-channel-item' + (on ? ' on' : '');
|
||
item.setAttribute('role', 'menuitemcheckbox');
|
||
item.setAttribute('aria-checked', String(on));
|
||
const check = document.createElement('span');
|
||
check.className = 'check';
|
||
check.textContent = '✓';
|
||
const name = document.createElement('span');
|
||
name.className = 'name';
|
||
name.textContent = info.name;
|
||
name.style.color = info.color;
|
||
item.append(check, name);
|
||
item.addEventListener('click', (e) => {
|
||
// keep the menu open: the rebuild detaches this item, which would
|
||
// make the outside-click handler think we clicked outside
|
||
e.stopPropagation();
|
||
toggleChannel(id);
|
||
});
|
||
channelMenu.appendChild(item);
|
||
}
|
||
}
|
||
|
||
/* ── clear (local view only) ────────────────────────────────────── */
|
||
|
||
function clearView() {
|
||
entryEls.forEach((el) => el.remove());
|
||
entryEls.clear();
|
||
emptyEl.hidden = false;
|
||
}
|
||
|
||
/* ── scrolling ──────────────────────────────────────────────────── */
|
||
|
||
streamEl.addEventListener('scroll', () => {
|
||
const nearBottom = streamEl.scrollHeight - streamEl.scrollTop - streamEl.clientHeight < 60;
|
||
pinnedToBottom = nearBottom;
|
||
if (nearBottom) jumpBtn.hidden = true;
|
||
});
|
||
|
||
jumpBtn.addEventListener('click', () => {
|
||
pinnedToBottom = true;
|
||
jumpBtn.hidden = true;
|
||
scrollToBottom();
|
||
});
|
||
|
||
function scrollToBottom() {
|
||
streamEl.scrollTop = streamEl.scrollHeight;
|
||
}
|
||
|
||
function afterInsert(el) {
|
||
if (el.classList.contains('hidden-by-filter')) return;
|
||
if (pinnedToBottom) scrollToBottom();
|
||
else jumpBtn.hidden = false;
|
||
}
|
||
|
||
/* ── entry rendering ────────────────────────────────────────────── */
|
||
|
||
function channelInfo(entry) {
|
||
const known = channels.get(entry.channelId);
|
||
return {
|
||
name: (known && known.name) || entry.channelName || 'Unknown',
|
||
color: (known && known.color) || 'var(--muted)',
|
||
};
|
||
}
|
||
|
||
function fmtTime(iso) {
|
||
const d = iso ? new Date(iso) : new Date();
|
||
return isNaN(d) ? '' : d.toLocaleTimeString([], { hour12: false });
|
||
}
|
||
|
||
function upsertEntry(entry) {
|
||
if (!entry || typeof entry.text !== 'string') return;
|
||
const id = entry.id || entry.channelId + '|' + entry.date;
|
||
|
||
let el = entryEls.get(id);
|
||
if (!el) {
|
||
emptyEl.hidden = true;
|
||
el = document.createElement('div');
|
||
el.className = 'pt-entry';
|
||
el.dataset.channelId = entry.channelId || '';
|
||
el.dataset.channelName = entry.channelName || '';
|
||
const info = channelInfo(entry);
|
||
el.style.setProperty('--ch', info.color);
|
||
|
||
const time = document.createElement('span');
|
||
time.className = 'time';
|
||
time.textContent = fmtTime(entry.date);
|
||
|
||
const avatar = document.createElement('span');
|
||
avatar.className = 'avatar';
|
||
avatar.style.color = info.color;
|
||
avatar.innerHTML =
|
||
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">' +
|
||
'<circle cx="12" cy="8.5" r="3.2"/>' +
|
||
'<path d="M5.5 19c1.6-3.2 3.9-4.8 6.5-4.8s4.9 1.6 6.5 4.8"/></svg>';
|
||
|
||
const ch = document.createElement('span');
|
||
ch.className = 'channel';
|
||
ch.textContent = info.name;
|
||
ch.style.color = info.color;
|
||
|
||
const text = document.createElement('span');
|
||
text.className = 'text';
|
||
|
||
const body = document.createElement('div');
|
||
body.className = 'body';
|
||
body.append(ch, text);
|
||
|
||
el.append(time, avatar, body);
|
||
entryEls.set(id, el);
|
||
applyFilter(el);
|
||
entriesEl.appendChild(el);
|
||
updateEntryEl(el, entry);
|
||
afterInsert(el);
|
||
} else {
|
||
updateEntryEl(el, entry);
|
||
if (pinnedToBottom && !el.classList.contains('hidden-by-filter')) scrollToBottom();
|
||
}
|
||
}
|
||
|
||
function updateEntryEl(el, entry) {
|
||
el.querySelector('.text').textContent = entry.translatedText || entry.text;
|
||
el.classList.toggle('in-progress', entry.inProgress === true);
|
||
}
|
||
|
||
/* ── SSE event parsing ──────────────────────────────────────────── */
|
||
|
||
/* The stream sends JSON objects for new/updated/completed transcript
|
||
entries. Be liberal about the envelope shape. */
|
||
function extractEntries(obj) {
|
||
if (!obj || typeof obj !== 'object') return [];
|
||
if (Array.isArray(obj)) return obj.flatMap(extractEntries);
|
||
if (typeof obj.text === 'string' && (obj.id || obj.channelId)) return [obj];
|
||
for (const key of ['data', 'payload', 'entry', 'entries', 'transcript']) {
|
||
if (obj[key] && typeof obj[key] === 'object') {
|
||
const found = extractEntries(obj[key]);
|
||
if (found.length) return found;
|
||
}
|
||
}
|
||
return [];
|
||
}
|
||
|
||
function handleEventData(raw) {
|
||
let obj;
|
||
try { obj = JSON.parse(raw); } catch { return; }
|
||
const kind = String(obj.type || obj.event || '').toLowerCase();
|
||
if (kind.includes('clear')) {
|
||
entryEls.forEach((el) => el.remove());
|
||
entryEls.clear();
|
||
emptyEl.hidden = false;
|
||
return;
|
||
}
|
||
extractEntries(obj).forEach(upsertEntry);
|
||
}
|
||
|
||
/* ── data loading (all via the module's proxy) ──────────────────── */
|
||
|
||
async function loadChannels() {
|
||
const res = await moduleApi.fetch('/prodcom/api/v1/channels');
|
||
if (!res.ok) throw new Error('channels ' + res.status);
|
||
const body = await res.json();
|
||
channels.clear();
|
||
for (const ch of body.data || []) {
|
||
channels.set(ch.id, { name: ch.name, color: ch.color || '#8b98a5' });
|
||
}
|
||
rebuildChannelMenu();
|
||
}
|
||
|
||
async function loadGroups() {
|
||
const res = await moduleApi.fetch('/prodcom/api/v1/groups');
|
||
if (!res.ok) throw new Error('groups ' + res.status);
|
||
const body = await res.json();
|
||
groups.clear();
|
||
for (const g of body.data || []) {
|
||
groups.set(g.id, { name: g.name, channelIds: g.channelIds || [] });
|
||
}
|
||
rebuildChannelMenu();
|
||
}
|
||
|
||
async function loadHistory() {
|
||
const res = await moduleApi.fetch('/prodcom/api/v1/transcript?limit=100');
|
||
if (!res.ok) throw new Error('transcript ' + res.status);
|
||
const body = await res.json();
|
||
const entries = (body.data || []).slice();
|
||
entries.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||
entries.forEach(upsertEntry);
|
||
}
|
||
|
||
/* ── live stream ────────────────────────────────────────────────── */
|
||
|
||
const SSE_EVENT_NAMES = [
|
||
'transcript', 'transcript.new', 'transcript.updated', 'transcript.update',
|
||
'transcript.completed', 'transcript.complete', 'entry', 'new', 'update',
|
||
'updated', 'complete', 'completed',
|
||
];
|
||
|
||
function connect() {
|
||
const onEvent = (ev) => handleEventData(ev.data);
|
||
const events = {};
|
||
for (const name of SSE_EVENT_NAMES) events[name] = onEvent;
|
||
|
||
stream = moduleApi.sse('/prodcom/api/v1/transcript/stream', {
|
||
open() {
|
||
moduleApi.setStatus('ok', 'Live');
|
||
// refresh channels/groups and backfill entries missed while
|
||
// disconnected (upsertEntry dedupes by id, so this is harmless)
|
||
loadChannels().catch(() => {});
|
||
loadGroups().catch(() => {});
|
||
loadHistory().catch(() => {});
|
||
},
|
||
error() {
|
||
moduleApi.setStatus('error', 'ProdCom unreachable — reconnecting…');
|
||
},
|
||
message: onEvent,
|
||
events,
|
||
});
|
||
}
|
||
|
||
/* ── lifecycle ──────────────────────────────────────────────────── */
|
||
|
||
async function boot() {
|
||
if (stopped) return;
|
||
moduleApi.setStatus('connecting', 'Connecting to ProdCom…');
|
||
try {
|
||
await loadChannels();
|
||
await loadGroups().catch(() => {}); // groups are optional
|
||
await loadHistory();
|
||
} catch {
|
||
moduleApi.setStatus('error', 'ProdCom unreachable — retrying…');
|
||
bootTimer = setTimeout(boot, 5000);
|
||
return;
|
||
}
|
||
scrollToBottom();
|
||
connect();
|
||
}
|
||
|
||
return {
|
||
start() {
|
||
boot();
|
||
},
|
||
stop() {
|
||
stopped = true;
|
||
clearTimeout(bootTimer);
|
||
stream?.close();
|
||
root.innerHTML = ''; // header controls are removed by the shell
|
||
},
|
||
onResize() {
|
||
if (pinnedToBottom) scrollToBottom();
|
||
},
|
||
};
|
||
}
|