@jossuealcala/madre 0.7.2 → 1.0.0

package/public/salas.css

@@ -0,0 +1,85 @@
+/* ROOMS, on the phone (salas.html). The tokens are the room's (styles.css, loaded first); this only
+   lays out one column for a thumb: the rooms as AJUSTES-style blocks, the one that asks for you in
+   the accent, and the edges of the screen kept clear of the notch and the home bar. */
+body.salas {
+  --s-acc: var(--acc, var(--phosphor));
+  --s-acc-ink: var(--acc-ink, var(--phosphor-ink, #0a1405));
+  min-height: 100dvh; margin: 0; background: var(--bg); color: var(--text);
+  font-family: var(--read); font-size: 15px; line-height: 1.45;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+.salas button { font: inherit; color: inherit; }
+.salas-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 14px 18px 12px; background: color-mix(in srgb, var(--bg) 92%, transparent); }
+/* The brand as the bar draws it on the Mac, drawn once and then still. */
+.salas-brand { display: inline-flex; align-items: center; flex: none; }
+.salas-brand .brand-logo { height: 15px; }
+.salas-mac { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-2); }
+.salas-stop { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--terror, #ff4d4d) 14%, transparent); color: var(--terror, #ff4d4d); font-size: 13px !important; font-weight: 600; cursor: pointer; }
+.salas-stop svg { width: 15px; height: 15px; }
+.salas-stop.armed { background: var(--terror, #ff4d4d); color: #fff; }
+.salas-stop[hidden] { display: none; }
+
+.salas-main { max-width: 560px; margin: 0 auto; padding: 4px 16px 32px; }
+.salas-title { margin: 14px 2px 10px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
+.salas-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
+.salas-room {
+  display: grid; gap: 3px; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; text-align: left; cursor: pointer;
+  background: var(--panel); box-shadow: var(--raise, 0 1px 2px rgba(0, 0, 0, .12), 0 8px 20px -14px rgba(0, 0, 0, .4));
+  transition: transform var(--motion-fast, 140ms) var(--ease-out, ease);
+}
+.salas-room:active:not(:disabled) { transform: scale(.985); }
+.salas-room:disabled { cursor: default; opacity: .72; }
+.salas-room-head { display: flex; align-items: baseline; gap: 10px; }
+.salas-room-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16.5px; font-weight: 650; }
+.salas-room-head time { flex: none; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
+.salas-room-chat { font-size: 13.5px; font-weight: 500; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.salas-room-preview { font-size: 13.5px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.salas-room-note { font-size: 13px; color: var(--text-2); }
+/* The archive, in NOSTROMO's colours: one line per room, as long as each kind is large. */
+.salas-room-strip { display: flex; gap: 2px; height: 5px; margin-top: 8px; border-radius: 3px; overflow: hidden; }
+.salas-room-strip i { min-width: 3px; }
+.salas-room-strip .k-decision { background: var(--mem-decision); }
+.salas-room-strip .k-fact { background: var(--mem-fact); }
+.salas-room-strip .k-preference { background: var(--mem-preference); }
+.salas-room-strip .k-question { background: var(--mem-question); }
+.salas-room-strip .k-aberration { background: var(--mem-aberration); }
+:root[data-scheme="light"] .salas-room-strip .k-fact { background: #b9c6d6; }
+.salas-room-count { margin-top: 3px; font-size: 12px; color: var(--text-3); }
+/* A room that waits for you wears the accent: a ring and the line that says what it waits for. */
+.salas-room.waiting { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--s-acc) 70%, transparent), var(--raise, 0 1px 2px rgba(0, 0, 0, .12)); }
+.salas-room-wait { display: grid; gap: 2px; margin: 4px 0 2px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--s-acc) 16%, transparent); }
+.salas-room-wait b { font-size: 12.5px; font-weight: 700; color: color-mix(in srgb, var(--s-acc) 62%, var(--text)); }
+.salas-room-wait span { font-size: 13.5px; color: var(--text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.salas-room-busy { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; justify-self: start; padding: 3px 10px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--s-acc) 16%, transparent); font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--s-acc) 60%, var(--text)); }
+.salas-room-busy i { width: 7px; height: 7px; border-radius: 50%; background: var(--s-acc); animation: salas-beat 1.4s ease-in-out infinite; }
+@keyframes salas-beat { 50% { opacity: .35; transform: scale(.8); } }
+
+.salas-continue { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 4px; padding: 14px 16px; border: 0; border-radius: 18px; text-align: left; cursor: pointer; background: color-mix(in srgb, var(--s-acc) 15%, var(--panel)); box-shadow: var(--raise, 0 1px 2px rgba(0, 0, 0, .12)); }
+.salas-continue[hidden] { display: none; }
+.salas-continue-words { flex: 1; min-width: 0; display: grid; gap: 2px; }
+.salas-continue-words b { font-size: 15px; font-weight: 650; }
+.salas-continue-words span { font-size: 13px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.salas-continue-draft { font-style: italic; }
+.salas-continue-go { flex: none; font-size: 26px; line-height: 1; color: color-mix(in srgb, var(--s-acc) 70%, var(--text)); }
+
+.salas-empty, .salas-foot { margin: 18px 4px 0; font-size: 13px; color: var(--text-2); text-align: center; }
+.salas-foot { color: var(--text-3); font-size: 12px; }
+
+.salas-welcome { position: fixed; inset: 0; z-index: 10; display: grid; align-items: end; background: color-mix(in srgb, #000 40%, transparent); padding: 0 10px calc(10px + env(safe-area-inset-bottom)); }
+.salas-welcome[hidden] { display: none; }
+.salas-sheet { justify-self: center; width: min(460px, 100%); padding: 22px 20px 18px; border-radius: 24px; background: var(--panel); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .5); text-align: center; animation: salas-up 240ms var(--ease-out, ease-out); }
+@keyframes salas-up { from { transform: translateY(24px); opacity: 0; } }
+.salas-check { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--s-acc); color: var(--s-acc-ink); }
+.salas-check svg { width: 28px; height: 28px; }
+.salas-sheet h2 { margin: 12px 0 6px; font-size: 20px; font-weight: 700; }
+.salas-sheet p { margin: 0; color: var(--text-2); font-size: 14.5px; }
+.salas-steps { margin: 12px 0 16px; padding: 12px 14px 12px 34px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); text-align: left; font-size: 14.5px; display: grid; gap: 6px; }
+.salas-primary { width: 100%; height: 46px; border: 0; border-radius: 14px; background: var(--s-acc); color: var(--s-acc-ink) !important; font-weight: 650; font-size: 15.5px !important; cursor: pointer; }
+
+/* A page of one sentence: a phone that is not paired, or a code that no longer works. */
+body.salas.note main { max-width: 420px; margin: 0 auto; padding: 22vh 24px 0; text-align: center; }
+body.salas.note h1 { font-size: 22px; margin: 0 0 10px; }
+body.salas.note p { color: var(--text-2); }
+@media (prefers-reduced-motion: reduce) { .salas-room-busy i, .salas-sheet { animation: none; } .salas-room { transition: none; } }
+/* The ground under Safari's bars is the page's own. */
+html:has(body.salas) { background: var(--bg); }

package/public/salas.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#050605">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="MADRE">
+    <meta name="apple-mobile-web-app-status-bar-style" content="default">
+    <title>MADRE</title>
+    <link rel="manifest" href="/bridge/manifest.webmanifest">
+    <link rel="icon" type="image/svg+xml" href="/assets/brand/madre-favicon.svg">
+    <link rel="apple-touch-icon" href="/assets/brand/madre-app-180.png">
+    <link rel="stylesheet" href="/bridge/styles.css">
+    <link rel="stylesheet" href="/bridge/salas.css">
+  </head>
+  <body class="salas">
+    <header class="salas-top">
+      <span class="salas-brand" aria-label="MADRE">
+        <svg class="brand-logo" viewBox="-4.8 -4.8 377.1 49.6" aria-hidden="true"><g fill="none" stroke-linecap="round" stroke-linejoin="round"><g class="pulse" transform="translate(0 0) scale(2.5) translate(0 -2)"><path class="beat" d="M1 10H16L20 10L23.5 2L28 18L32 10L35 10L37 6L39 10H52" stroke-width="1.92" pathLength="100"/><circle class="beat-dot" cx="60" cy="10" r="3" stroke="none"/></g><g class="word" transform="translate(193.5 7)" stroke-width="4.8"><path d="M0 26V0L14 14.3L28 0V26"/><path transform="translate(36.5 0)" d="M0 26V7.8A7.8 7.8 0 0 1 7.8 0H17.2A7.8 7.8 0 0 1 25 7.8V26M0 15.6H25"/><path transform="translate(71.5 0)" d="M0 0H16A12 12 0 0 1 28 12V14A12 12 0 0 1 16 26H0Z"/><path transform="translate(110.5 0)" d="M0 26V0H20.85A7.15 7.15 0 0 1 28 7.15V7.15A7.15 7.15 0 0 1 20.85 14.3H0M15.12 14.3L28 26"/><path transform="translate(146 0)" d="M28 0H0V26H28M0 13H21"/></g></g></svg>
+      </span>
+      <span id="salas-mac" class="salas-mac"></span>
+      <button id="salas-stop" class="salas-stop" type="button" hidden>
+        <svg viewBox="0 0 20 20" aria-hidden="true"><rect x="5" y="5" width="10" height="10" rx="2.6" fill="currentColor"/></svg>
+        <span>Stop all</span>
+      </button>
+    </header>
+    <main class="salas-main">
+      <button id="salas-continue" class="salas-continue" type="button" hidden></button>
+      <h1 class="salas-title">Home</h1>
+      <ul id="salas-list" class="salas-list" aria-live="polite"></ul>
+      <p id="salas-empty" class="salas-empty" hidden></p>
+      <p id="salas-foot" class="salas-foot"></p>
+    </main>
+    <div id="salas-welcome" class="salas-welcome" hidden role="dialog" aria-modal="true" aria-labelledby="salas-welcome-title">
+      <section class="salas-sheet">
+        <span class="salas-check" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M6 12.5l4 4 8-9" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+        <h2 id="salas-welcome-title"></h2>
+        <p id="salas-welcome-text"></p>
+        <ol id="salas-welcome-steps" class="salas-steps"></ol>
+        <button id="salas-welcome-ok" class="salas-primary" type="button"></button>
+      </section>
+    </div>
+    <script type="module" src="/bridge/salas.js"></script>
+  </body>
+</html>

package/public/salas.js

@@ -0,0 +1,200 @@
+// ROOMS, on the phone: every room open on the Mac, in one list (docs/MOBILE.md, MOV-004).
+//
+// The bridge serves this page and answers what it asks: which rooms are open, what each one is
+// doing, and where the person was on the Mac. A row opens its room; the room's own page takes it
+// from there, behind the same address. STOP ALL halts every agent in every room, after a second
+// touch, because a phone in a pocket touches things.
+
+import { setLanguage, t } from './i18n.js';
+import { dropStickyHover } from './touch.js';
+
+// A tapped card does not stay lit on the phone (public/touch.js).
+dropStickyHover();
+
+const $ = (id) => document.getElementById(id);
+const root = document.documentElement;
+const ui = { list: $('salas-list'), empty: $('salas-empty'), foot: $('salas-foot'), mac: $('salas-mac'), stop: $('salas-stop'), carry: $('salas-continue'), welcome: $('salas-welcome') };
+let language = 'es';
+let timer = 0;
+let arming = 0;
+
+// The room's looks, from this browser: the same keys the room's own page keeps.
+(() => {
+  let theme = 'auto';
+  let accent = null;
+  try { theme = localStorage.getItem('pulse.theme') ?? 'auto'; accent = localStorage.getItem('pulse.accent'); } catch { /* no storage */ }
+  const light = window.matchMedia?.('(prefers-color-scheme: light)').matches;
+  if (theme === 'light' || theme === 'dark') root.dataset.theme = theme;
+  root.dataset.scheme = theme === 'auto' ? (light ? 'light' : 'dark') : theme;
+  if (accent && accent !== 'madre') root.dataset.accent = accent;
+})();
+
+const el = (tag, className, text) => {
+  const node = document.createElement(tag);
+  if (className) node.className = className;
+  if (text !== undefined && text !== null) node.textContent = text;
+  return node;
+};
+
+const chatName = (title) => (title === 'First conversation' ? t('First conversation') : title === 'Untitled' ? t('Untitled') : title === 'Coordinator' ? t('Coordinator') : title);
+
+function ago(iso) {
+  const at = Date.parse(iso ?? '');
+  if (!Number.isFinite(at)) return '';
+  const seconds = (at - Date.now()) / 1000;
+  const away = Math.abs(seconds);
+  const words = new Intl.RelativeTimeFormat(language, { numeric: 'auto', style: 'short' });
+  if (away < 60) return t('now');
+  if (away < 3600) return words.format(Math.round(seconds / 60), 'minute');
+  if (away < 86400) return words.format(Math.round(seconds / 3600), 'hour');
+  if (away < 604800) return words.format(Math.round(seconds / 86400), 'day');
+  return new Date(at).toLocaleDateString(language, { day: 'numeric', month: 'short' });
+}
+
+async function openRoom(id, { carry = false, chat = null } = {}) {
+  const answer = await fetch('/bridge/open', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ room: id }) });
+  if (!answer.ok) { await refresh(); return; }
+  // A conversation by its own address: the phone never moves the one the room has open on the Mac.
+  location.href = carry ? '/?continuar=mac' : chat ? `/?en=${encodeURIComponent(chat)}` : '/';
+}
+
+// The modes as the room names them (app.js, MODES): asked when shown, so the language is the page's.
+const modeName = (n) => [t('INCOGNITO'), t('CHAT ONLY'), t('CREATE'), t('EDIT'), t('FULL ACCESS')][n] ?? '';
+// What an agent is waiting for, in one line.
+function askLine(ask) {
+  if (ask.kind === 'mode') return t('@{agent} asks for #{n} {label}', { agent: ask.agent, n: ask.mode, label: modeName(ask.mode) });
+  if (ask.kind === 'run') return ask.text ? t('@{agent} wants to run {line}', { agent: ask.agent, line: ask.text }) : t('@{agent} wants to run a command', { agent: ask.agent });
+  if (ask.kind === 'bishop') return t('The Coordinator proposes #{n} to @{agent}: unlock it with your key', { n: ask.mode, agent: ask.agent });
+  if (ask.kind === 'plan') return ask.text ? t('The Coordinator waits for your press: {reason}', { reason: ask.text }) : t('The Coordinator waits for your press');
+  return ask.text ? t('@{agent} asks you: {question}', { agent: ask.agent, question: ask.text }) : t('@{agent} asks you to choose', { agent: ask.agent });
+}
+
+function drawRoom(room) {
+  const item = el('li');
+  const row = el('button', 'salas-room');
+  row.type = 'button';
+  const head = el('span', 'salas-room-head');
+  head.append(el('b', null, room.coordinator ? t('Coordinator') : room.project), el('time', null, ago(room.chat?.at)));
+  row.append(head);
+  if (room.waitingCount) row.classList.add('waiting');
+  if (room.outdated || room.unreachable) {
+    row.disabled = true;
+    row.append(el('span', 'salas-room-note', room.outdated ? t('Update MADRE in this project on your Mac to use it from here.') : t('This project is not answering.')));
+  } else {
+    const ask = room.waiting?.[0];
+    if (ask) {
+      // What waits comes first, in the accent: it is the one thing on this screen that needs you.
+      const mark = el('span', 'salas-room-wait');
+      mark.append(el('b', null, room.waitingCount > 1 ? t('Waiting for you · {n}', { n: room.waitingCount }) : t('Waiting for you')), el('span', null, askLine(ask)));
+      row.append(mark);
+      if (ask.chatTitle) row.append(el('span', 'salas-room-chat', chatName(ask.chatTitle)));
+    } else {
+      if (room.chat) row.append(el('span', 'salas-room-chat', chatName(room.chat.title)));
+      if (room.chat?.preview) row.append(el('span', 'salas-room-preview', room.chat.preview));
+    }
+    // The macroverse on a phone (docs/MACROVERSO.md): no map, the archive of each room as one line
+    // in NOSTROMO's colours, and how much it holds.
+    if (room.census?.memories) {
+      const strip = el('span', 'salas-room-strip');
+      for (const kind of ['decision', 'fact', 'preference', 'question', 'aberration']) {
+        const count = room.census.kinds?.[kind] ?? 0;
+        if (!count) continue;
+        const part = el('i', `k-${kind}`);
+        part.style.flexGrow = String(count);
+        strip.append(part);
+      }
+      row.append(strip, el('span', 'salas-room-count', t('{n} memories', { n: room.census.memories })));
+    }
+    if (room.working?.length) {
+      const busy = el('span', 'salas-room-busy');
+      busy.append(el('i', null), document.createTextNode(t('{agents} working', { agents: room.working.map((id) => `@${id}`).join(', ') })));
+      row.append(busy);
+    }
+    row.addEventListener('click', () => { void openRoom(room.id, { chat: ask?.chat ?? null }); });
+  }
+  item.append(row);
+  return item;
+}
+
+function drawCarry(entry, rooms) {
+  const open = entry && rooms.some((room) => room.id === entry.room && !room.outdated && !room.unreachable);
+  ui.carry.hidden = !open;
+  if (!open) return;
+  ui.carry.replaceChildren();
+  const words = el('span', 'salas-continue-words');
+  words.append(el('b', null, t('Pick up where you were')), el('span', null, [entry.project, entry.chatTitle ? chatName(entry.chatTitle) : null].filter(Boolean).join(' · ')));
+  if (entry.draft) words.append(el('span', 'salas-continue-draft', `“${entry.draft.slice(0, 80)}${entry.draft.length > 80 ? '…' : ''}”`));
+  ui.carry.append(words, el('span', 'salas-continue-go', '›'));
+  ui.carry.onclick = () => { void openRoom(entry.room, { carry: true }); };
+}
+
+async function refresh() {
+  let data;
+  try {
+    const answer = await fetch('/bridge/rooms', { cache: 'no-store' });
+    if (answer.status === 401) { location.reload(); return; }
+    data = await answer.json();
+  } catch {
+    ui.foot.textContent = t('Your Mac is not answering. Check that it is awake and on the same Wi-Fi.');
+    return;
+  }
+  if (data.language && data.language !== language) { language = setLanguage(data.language); root.lang = language; translateStatic(); }
+  ui.mac.textContent = t('On {mac}', { mac: data.mac });
+  // What waits for you first, then what is working, then the rest as the Mac lists them, and last
+  // the rooms this phone cannot use yet.
+  const weight = (room) => (room.outdated || room.unreachable ? -1 : (room.waitingCount ? 2 : 0) + (room.working?.length ? 1 : 0));
+  const ordered = [...data.rooms].sort((a, b) => weight(b) - weight(a));
+  ui.list.replaceChildren(...ordered.map(drawRoom));
+  ui.empty.hidden = data.rooms.length > 0;
+  ui.empty.textContent = t('No project is open on your Mac. Open MADRE in a project there and it appears here.');
+  ui.stop.hidden = !data.rooms.some((room) => room.working?.length);
+  ui.foot.textContent = t('Your projects run on your Mac. This phone reaches them over your Wi-Fi.');
+  drawCarry(data.handoff, data.rooms);
+}
+
+function translateStatic() {
+  document.querySelector('.salas-title').textContent = t('Home');
+  ui.stop.querySelector('span').textContent = arming ? t('Touch again to stop') : t('Stop all');
+}
+
+ui.stop.addEventListener('click', async () => {
+  if (!arming) {
+    ui.stop.classList.add('armed');
+    arming = setTimeout(() => { arming = 0; ui.stop.classList.remove('armed'); translateStatic(); }, 3000);
+    translateStatic();
+    return;
+  }
+  clearTimeout(arming);
+  arming = 0;
+  ui.stop.classList.remove('armed');
+  ui.stop.disabled = true;
+  try { await fetch('/bridge/stop-all', { method: 'POST', headers: { 'content-type': 'application/json' }, body: '{}' }); } finally { ui.stop.disabled = false; translateStatic(); await refresh(); }
+});
+
+// Right after pairing: it worked, and how to keep MADRE on the home screen.
+function welcome() {
+  if (!new URLSearchParams(location.search).has('listo')) return;
+  history.replaceState(null, '', '/salas');
+  const apple = /iPhone|iPad|Macintosh/i.test(navigator.userAgent);
+  $('salas-welcome-title').textContent = t('Done. Your Mac is on your phone.');
+  $('salas-welcome-text').textContent = t('To open MADRE like an app, add it to your home screen:');
+  const steps = apple
+    ? [t('Touch Share, at the bottom of Safari.'), t('Choose «Add to Home Screen».')]
+    : [t('Touch the ⋮ menu of your browser.'), t('Choose «Add to Home screen».')];
+  $('salas-welcome-steps').replaceChildren(...steps.map((step) => el('li', null, step)));
+  $('salas-welcome-ok').textContent = t('Got it');
+  $('salas-welcome-ok').onclick = () => { ui.welcome.hidden = true; };
+  ui.welcome.hidden = false;
+}
+
+function tick() {
+  clearInterval(timer);
+  if (document.visibilityState !== 'visible') return;
+  timer = setInterval(() => { void refresh(); }, 4000);
+}
+document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') void refresh(); tick(); });
+
+translateStatic();
+await refresh();
+welcome();
+tick();