modelroom 0.0.3 → 0.0.5

package/ui/dashboard.html

@@ -1,332 +1,24 @@
 <!doctype html>
-<!-- modelroom — dashboard: every room, narrowed by what the records say -->
+<!-- modelroom — dashboard: every room, narrowed by what the records say.
+     The shell is static; the app lives in web/ and is built to /ui/assets/app.js. -->
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>modelroom</title>
 <link rel="stylesheet" href="/ui/modelroom.css">
-</head>
-<body class="min-h-dvh bg-base-200 text-base-content font-sans">
-
-<div class="navbar bg-base-100 border-b border-base-300 sticky top-0 z-20 gap-2">
-  <div class="flex-none gap-3">
-    <span class="text-lg font-semibold tracking-tight">modelroom</span>
-    <span class="badge badge-soft badge-neutral" id="count">—</span>
-  </div>
-  <div class="flex-1">
-    <label class="input input-sm w-full max-w-xl flex items-center gap-2">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="h-4 w-4 opacity-50"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"/></svg>
-      <input id="q" type="search" class="grow" placeholder="Search rooms, docs, tags…  ( / )" autocomplete="off">
-    </label>
-  </div>
-  <div class="flex-none gap-2">
-    <span class="badge" id="status" data-phase="idle"><span class="loading loading-dots loading-xs hidden" id="spinner"></span><span id="statusText">ready</span></span>
-    <a class="btn btn-ghost btn-sm" href="/settings">Settings</a>
-    <button class="btn btn-ghost btn-sm" id="refresh">Refresh</button>
-  </div>
-</div>
-
-<main class="mx-auto w-full max-w-[1600px] p-5">
-  <section id="filters" class="mb-4 flex flex-wrap items-start gap-5"></section>
-  <div id="active" class="mb-3 flex flex-wrap items-center gap-2"></div>
-
-  <div id="grid" class="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(240px,1fr))]"></div>
-  <div id="empty" class="hidden">
-    <div class="card bg-base-100 border border-base-300">
-      <div class="card-body">
-        <h2 class="card-title text-base" id="emptyTitle">No rooms yet</h2>
-        <p class="text-sm opacity-70" id="emptyText">A room is one screen: <code>rooms/&lt;name&gt;/</code> with <code>BRIEF.md</code>,
-          <code>SPEC.md</code>, <code>BEHAVIOUR.md</code> and an artifact.</p>
-        <div class="mockup-code mt-2 text-xs" id="emptyHint">
-          <pre data-prefix="$"><code>npx modelroom init my-first-room</code></pre>
-          <pre data-prefix="$"><code>npx modelroom serve</code></pre>
-        </div>
-        <button class="btn btn-sm btn-ghost justify-start hidden" id="clear">Clear search and filters</button>
-      </div>
-    </div>
-  </div>
-</main>
-
-<footer class="mx-auto w-full max-w-[1600px] px-5 pb-8 text-xs opacity-60 mr-prose">
-  Agent-agnostic: modelroom drives the coding agent you configure. Artifacts are served unmodified (no injection).
-</footer>
-
 <script>
-'use strict';
-const $ = (id) => document.getElementById(id);
-const state = { rooms: [], facets: [], q: '', filters: {}, archived: false, hits: null };
-let timer = null;
-let seq = 0;
-
-const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-const when = (ms) => new Date(ms || Date.now()).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
-
-function statusBadge(status) {
-  const s = String(status || '').toLowerCase();
-  if (!s) return '';
-  const cls = /adopt|approv|done|complete|accept/.test(s) ? 'badge-success'
-    : /review/.test(s) ? 'badge-warning'
-    : /draft|wip|todo/.test(s) ? 'badge-ghost' : 'badge-neutral';
-  return `<span class="badge badge-sm ${cls}">${esc(status)}</span>`;
-}
-
-function hitFor(name) {
-  return (state.hits || []).find((h) => h.name === name) || null;
-}
-
-function highlight(text) {
-  const safe = esc(text);
-  const tokens = state.q.trim().split(/\s+/).filter(Boolean);
-  if (!tokens.length) return safe;
-  const re = new RegExp('(' + tokens.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|') + ')', 'gi');
-  return safe.replace(re, '<mark class="bg-warning/40 rounded px-0.5">$1</mark>');
-}
-
-function card(room) {
-  const hit = hitFor(room.name);
-  const thumb = room.hasThumb
-    ? `<img class="mr-card-artifact" src="${room.thumbUrl}?v=${room.updatedAt}" alt="">`
-    : `<div class="mr-card-artifact flex items-center justify-center text-xs opacity-60">${room.hasArtifact ? 'no thumbnail yet' : 'no artifact yet'}</div>`;
-  const tags = (room.tags || []).slice(0, 4)
-    .map((t) => `<span class="badge badge-xs badge-soft">${esc(t)}</span>`).join('');
-  const snippet = hit?.snippets?.[0];
-  return `
-  <a class="card bg-base-100 border border-base-300 shadow-sm transition hover:shadow-md hover:-translate-y-0.5 ${room.deprecated ? 'opacity-60' : ''}" href="/room/${encodeURIComponent(room.name)}">
-    <figure class="bg-base-200">${thumb}</figure>
-    <div class="card-body p-3 gap-1">
-      <div class="flex items-center gap-2">
-        <span class="font-medium truncate">${esc(room.title || room.name)}</span>
-        ${room.version !== null && room.version !== undefined ? `<span class="badge badge-xs badge-ghost font-mono">v${esc(room.version)}</span>` : ''}
-        ${room.running ? '<span class="badge badge-sm badge-info gap-1"><span class="loading loading-ring loading-xs"></span>running</span>' : ''}
-      </div>
-      <div class="text-xs opacity-60 font-mono truncate">rooms/${esc(room.name)}</div>
-      ${room.summary ? `<p class="text-xs opacity-70 [display:-webkit-box] [-webkit-line-clamp:2] [-webkit-box-orient:vertical] overflow-hidden">${esc(room.summary)}</p>` : ''}
-      ${snippet ? `<p class="text-xs opacity-80 bg-base-200/60 rounded px-2 py-1">${highlight(snippet.text)}</p>` : ''}
-      <div class="flex items-center gap-1 flex-wrap mt-1">
-        ${statusBadge(room.status)}
-        ${room.deprecated ? '<span class="badge badge-sm badge-error badge-soft">archived</span>' : ''}
-        ${tags}
-        ${room.behaviourIds?.length ? `<span class="badge badge-sm badge-ghost">${room.behaviourIds.length} behaviour${room.behaviourIds.length > 1 ? 's' : ''}</span>` : ''}
-        <span class="text-xs opacity-50 ml-auto">${when(room.updatedAt)}</span>
-      </div>
-    </div>
-  </a>`;
-}
-
-function matchesFilters(room) {
-  for (const [key, wanted] of Object.entries(state.filters)) {
-    if (!wanted || !wanted.length) continue;
-    const raw = room.fields?.[key];
-    const have = (Array.isArray(raw) ? raw : [raw]).filter((v) => v !== null && v !== undefined).map(String);
-    if (!have.some((v) => wanted.includes(v))) return false;
-  }
-  return true;
-}
-
-function visibleRooms() {
-  let list = state.rooms.filter((r) => state.archived || !r.deprecated);
-  if (state.q) {
-    const order = new Map((state.hits || []).map((h, i) => [h.name, i]));
-    list = list.filter((r) => order.has(r.name)).sort((a, b) => order.get(a.name) - order.get(b.name));
-  } else {
-    list = list.slice().sort((a, b) => b.updatedAt - a.updatedAt);
-  }
-  return list.filter(matchesFilters);
-}
-
-function renderFacet(facet) {
-  const selected = state.filters[facet.key] || [];
-  const name = `f-${facet.key}`;
-  let body = '';
-
-  if (facet.control === 'checkboxes') {
-    body = facet.values.map((v) => `
-      <label class="flex items-center gap-2 cursor-pointer text-sm">
-        <input type="checkbox" class="checkbox checkbox-xs" data-facet="${esc(facet.key)}" value="${esc(v.value)}" ${selected.includes(v.value) ? 'checked' : ''}>
-        <span class="truncate">${esc(v.value)}</span>
-        <span class="text-xs opacity-50 ml-auto">${v.count}</span>
-      </label>`).join('');
-  } else if (facet.control === 'radio') {
-    body = `
-      <label class="flex items-center gap-2 cursor-pointer text-sm">
-        <input type="radio" class="radio radio-xs" name="${esc(name)}" data-facet="${esc(facet.key)}" value="" ${selected.length ? '' : 'checked'}>
-        <span class="opacity-60">any</span>
-      </label>` + facet.values.map((v) => `
-      <label class="flex items-center gap-2 cursor-pointer text-sm">
-        <input type="radio" class="radio radio-xs" name="${esc(name)}" data-facet="${esc(facet.key)}" value="${esc(v.value)}" ${selected.includes(v.value) ? 'checked' : ''}>
-        <span class="truncate">${esc(v.value)}</span>
-        <span class="text-xs opacity-50 ml-auto">${v.count}</span>
-      </label>`).join('');
-  } else {
-    body = `
-      <select class="select select-sm w-full" data-facet="${esc(facet.key)}">
-        <option value="">any</option>
-        ${facet.values.map((v) => `<option value="${esc(v.value)}" ${selected.includes(v.value) ? 'selected' : ''}>${esc(v.value)} (${v.count})</option>`).join('')}
-      </select>`;
-  }
-
-  return `
-    <fieldset class="min-w-[9rem] max-w-[16rem]">
-      <legend class="text-[11px] uppercase tracking-wide opacity-60 mb-1">${esc(facet.key)}</legend>
-      <div class="flex flex-col gap-1">${body}</div>
-    </fieldset>`;
-}
-
-function renderFilters() {
-  const archived = state.rooms.filter((r) => r.deprecated).length;
-  const archivedToggle = archived
-    ? `<label class="flex items-center gap-2 cursor-pointer text-sm ml-auto">
-         <input type="checkbox" class="toggle toggle-xs" id="archived" ${state.archived ? 'checked' : ''}>
-         <span class="opacity-60">archived (${archived})</span>
-       </label>`
-    : '';
-  $('filters').innerHTML = state.facets.map(renderFacet).join('') + archivedToggle;
-}
-
-function renderActive() {
-  const chips = [];
-  for (const [key, values] of Object.entries(state.filters)) {
-    for (const value of values) {
-      chips.push(`<button class="btn btn-xs btn-ghost gap-1" data-clear="${esc(key)}" data-value="${esc(value)}">${esc(key)}: ${esc(value)} <span class="opacity-50">×</span></button>`);
-    }
-  }
-  if (state.q) chips.unshift(`<span class="badge badge-sm badge-soft">search: ${esc(state.q)}</span>`);
-  if (chips.length > 1) chips.push('<button class="btn btn-xs btn-link" id="clearAll">clear all</button>');
-  $('active').innerHTML = chips.join('');
-}
-
-function render() {
-  const rooms = visibleRooms();
-  $('grid').innerHTML = rooms.map(card).join('');
-
-  const total = state.rooms.filter((r) => state.archived || !r.deprecated).length;
-  $('count').textContent = rooms.length === total ? `rooms ${total}` : `${rooms.length} / ${total}`;
-
-  const empty = rooms.length === 0;
-  $('empty').classList.toggle('hidden', !empty);
-  if (empty) {
-    const filtered = Boolean(state.q) || Object.values(state.filters).some((v) => v.length);
-    $('emptyTitle').textContent = filtered ? 'Nothing matches' : 'No rooms yet';
-    $('emptyText').innerHTML = filtered
-      ? 'Loosen a filter, or search for something else.'
-      : 'A room is one screen: <code>rooms/&lt;name&gt;/</code> with <code>BRIEF.md</code>, <code>SPEC.md</code>, <code>BEHAVIOUR.md</code> and an artifact.';
-    $('emptyHint').classList.toggle('hidden', filtered);
-    $('clear').classList.toggle('hidden', !filtered);
-  }
-}
-
-function syncUrl() {
-  const p = new URLSearchParams();
-  if (state.q) p.set('q', state.q);
-  for (const [key, values] of Object.entries(state.filters)) if (values.length) p.set(`f.${key}`, values.join('|'));
-  if (state.archived) p.set('archived', '1');
-  const qs = p.toString();
-  history.replaceState(null, '', qs ? `?${qs}` : location.pathname);
-}
-
-function readUrl() {
-  const p = new URLSearchParams(location.search);
-  state.q = p.get('q') || '';
-  state.archived = p.get('archived') === '1';
-  state.filters = {};
-  for (const [key, value] of p) {
-    if (!key.startsWith('f.') || !value) continue;
-    state.filters[key.slice(2)] = value.split('|').filter(Boolean);
-  }
-  $('q').value = state.q;
-}
-
-async function runSearch() {
-  const my = ++seq;
-  if (!state.q.trim()) { state.hits = null; render(); return; }
-  const data = await (await fetch(`/api/search?q=${encodeURIComponent(state.q)}`)).json();
-  if (my !== seq) return;
-  state.hits = data.hits || [];
-  render();
-}
-
-async function load() {
-  const data = await (await fetch('/api/rooms')).json();
-  state.rooms = data.rooms || [];
-  state.facets = data.facets || [];
-  renderFilters();
-  renderActive();
-  if (state.q.trim()) await runSearch(); else render();
-}
-
-$('q').addEventListener('input', (e) => {
-  state.q = e.target.value;
-  clearTimeout(timer);
-  timer = setTimeout(() => { syncUrl(); runSearch(); }, 220);
-});
-
-$('filters').addEventListener('change', (e) => {
-  const input = e.target.closest('[data-facet]');
-  if (input) {
-    const key = input.dataset.facet;
-    if (input.type === 'checkbox') {
-      const set = new Set(state.filters[key] || []);
-      if (input.checked) set.add(input.value); else set.delete(input.value);
-      state.filters[key] = [...set];
-    } else {
-      state.filters[key] = input.value ? [input.value] : [];
-    }
-    if (!state.filters[key].length) delete state.filters[key];
-    syncUrl();
-    renderActive();
-    render();
-  }
-  if (e.target.id === 'archived') {
-    state.archived = e.target.checked;
-    syncUrl();
-    renderActive();
-    render();
-  }
-});
-
-$('active').addEventListener('click', (e) => {
-  const chip = e.target.closest('[data-clear]');
-  if (chip) {
-    const key = chip.dataset.clear;
-    state.filters[key] = (state.filters[key] || []).filter((v) => v !== chip.dataset.value);
-    if (!state.filters[key].length) delete state.filters[key];
-    renderFilters(); syncUrl(); renderActive(); render();
-    return;
-  }
-  if (e.target.id === 'clearAll') {
-    state.filters = {}; state.q = ''; $('q').value = '';
-    state.hits = null; renderFilters(); syncUrl(); renderActive(); render();
-  }
-});
-
-$('clear').addEventListener('click', () => {
-  state.filters = {}; state.q = ''; $('q').value = '';
-  state.hits = null; renderFilters(); syncUrl(); renderActive(); render();
-});
-
-$('refresh').addEventListener('click', load);
-
-document.addEventListener('keydown', (e) => {
-  if (e.key === '/' && document.activeElement !== $('q')) { e.preventDefault(); $('q').focus(); }
-  if (e.key === 'Escape' && document.activeElement === $('q')) { $('q').blur(); }
-});
-
-function setStatus(phase, message) {
-  $('status').dataset.phase = phase;
-  $('statusText').textContent = message;
-  const busy = phase === 'chat' || phase === 'rendering';
-  $('spinner').classList.toggle('hidden', !busy);
-}
-
-const es = new EventSource('/events');
-const refreshSoon = () => { clearTimeout(timer); timer = setTimeout(load, 350); };
-es.addEventListener('status', (e) => { const d = JSON.parse(e.data); setStatus(d.phase, d.message); });
-['change', 'chat-start', 'chat-done', 'render-done', 'doc-saved'].forEach((ev) => es.addEventListener(ev, refreshSoon));
-es.addEventListener('error', () => setStatus('error', 'disconnected — retrying'));
-
-readUrl();
-load();
+// Theme before paint: the bundle is React, but the first frame should not flash.
+try {
+  var stored = localStorage.getItem('modelroom.theme');
+  document.documentElement.dataset.theme = stored
+    ? JSON.parse(stored)
+    : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+} catch (error) { /* the default is light */ }
 </script>
+</head>
+<body class="bg-background text-foreground font-sans">
+<div id="root" data-app="dashboard"></div>
+<script type="module" src="/ui/assets/app.js"></script>
 </body>
 </html>

package/ui/kit.html

@@ -8,8 +8,17 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Workshop — modelroom</title>
 <link rel="stylesheet" href="/ui/modelroom.css">
+<script>
+// Theme before paint: the bundle is React, but the first frame should not flash.
+try {
+  var stored = localStorage.getItem('modelroom.theme');
+  document.documentElement.dataset.theme = stored
+    ? JSON.parse(stored)
+    : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+} catch (error) { /* the default is light */ }
+</script>
 </head>
-<body class="min-h-dvh bg-muted/30 text-foreground font-sans">
+<body class="bg-muted/30 text-foreground font-sans">
 <div id="root" data-app="kit"></div>
 <script type="module" src="/ui/assets/app.js"></script>
 </body>