refacil-sdd-ai 2.8.1 → 2.9.0

package/README.md

@@ -679,11 +679,39 @@ refacil-sdd-ai bus start               # Arranca el broker (opcional; las skills
 refacil-sdd-ai bus stop                # Detiene el broker
 refacil-sdd-ai bus status              # Puerto, pid, uptime
 refacil-sdd-ai bus rooms               # Salas activas + miembros
-refacil-sdd-ai bus watch <session>     # Panel en vivo (sin tokens)
+refacil-sdd-ai bus watch <session>     # Panel en vivo en terminal (sin tokens)
+refacil-sdd-ai bus view                # Abre la UI web en el navegador (sin tokens)
 refacil-sdd-ai bus leave               # Salir de la sala (limpieza manual)
 refacil-sdd-ai bus history [--n N]     # Ultimos N mensajes
 ```
 
+### Vista web en vivo — `bus view`
+
+Ademas del panel en terminal (`bus watch`), refacil-bus incluye una UI web minimalista. Se abre con:
+
+```bash
+refacil-sdd-ai bus view
+```
+
+El broker (que ya expone el puerto `127.0.0.1:7821` para WebSocket) tambien sirve HTTP desde ahi — **cero deps nuevas, cero servicios externos**. El comando:
+
+1. Auto-arranca el broker si no estaba corriendo
+2. Abre el navegador por default del OS en `http://127.0.0.1:7821/`
+3. Imprime la URL por stdout por si el navegador no abre solo
+
+**Que muestra la UI**:
+
+- Sidebar con lista de salas activas y sus miembros
+- Feed en vivo con todos los mensajes, coloreados por tipo (`ask` cian, `reply` verde, `say` ambar, `system` gris)
+- Indicador visual de menciones dirigidas (`→ @<session>`)
+- Emparejamiento ask/reply: cada pregunta muestra `pending` hasta que llega la respuesta con su `correlationId`, entonces cambia a `answered`
+- Filtros por tipo (ocultar system, ver solo ask/reply, etc.)
+- Totalizadores fijos abajo: mensajes recibidos, pares cerrados, preguntas pendientes
+- Selector de sala o vista "todas las salas" en la sidebar
+- Auto-scroll al ultimo mensaje; si haces scroll arriba para ver historial, no te interrumpe con los nuevos
+
+**Util para**: presentar la feature al equipo, hacer demos didacticas, supervisar sesiones en paralelo mientras trabajas, ver en tiempo real que pasa cuando dos agentes conversan. **No consume tokens** — es un observador puro vía WebSocket read-only.
+
 ### Presentacion automatica al hacer join
 
 Al unirse a una sala, cada sesion envia un mensaje de presentacion. Para que sea util, la skill `/refacil:join` instruye al LLM a generar un bloque en `AGENTS.md` la primera vez, entre los marcadores:

package/bin/cli.js

@@ -1097,6 +1097,44 @@ async function busWatchCmd(positional, args) {
   }
 }
 
+function openInBrowser(url) {
+  const { spawn } = require('child_process');
+  const platform = process.platform;
+  let cmd;
+  let args;
+  if (platform === 'win32') {
+    cmd = 'cmd';
+    args = ['/c', 'start', '""', url];
+  } else if (platform === 'darwin') {
+    cmd = 'open';
+    args = [url];
+  } else {
+    cmd = 'xdg-open';
+    args = [url];
+  }
+  try {
+    spawn(cmd, args, { detached: true, stdio: 'ignore', windowsHide: true }).unref();
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+async function busView() {
+  try {
+    const { info } = await busSpawn.ensureBroker(packageRoot);
+    const url = `http://127.0.0.1:${info.port}/`;
+    console.log(`  refacil-bus view disponible en: ${url}`);
+    const opened = openInBrowser(url);
+    if (!opened) {
+      console.log('  (no se pudo abrir el navegador automáticamente, abre la URL manualmente)');
+    }
+  } catch (err) {
+    console.error(`  No se pudo iniciar la vista: ${err.message}`);
+    process.exit(1);
+  }
+}
+
 async function busRooms() {
   const { ws } = await connectOrDie();
   const reply = await busClient.sendAndWait(
@@ -1171,8 +1209,11 @@ function handleBusSubcommand(sub) {
     case 'attend':
       busAttend(args);
       break;
+    case 'view':
+      busView();
+      break;
     default:
-      console.log('Uso: refacil-sdd-ai bus <start|stop|status|serve|join|leave|say|ask|reply|history|inbox|rooms|watch|attend>');
+      console.log('Uso: refacil-sdd-ai bus <start|stop|status|serve|join|leave|say|ask|reply|history|inbox|rooms|watch|attend|view>');
   }
 }
 
@@ -1206,6 +1247,7 @@ function help() {
                     bus rooms
                     bus watch <session> [--room <sala>]  (panel en vivo, sin tokens)
                     bus attend [--timeout N]             (escucha preguntas dirigidas)
+                    bus view                             (abre la UI web en el navegador)
     clean         Elimina skills y remueve hooks SDD-AI de .claude/settings.json
     help          Muestra esta ayuda
 

package/lib/bus/broker.js

@@ -139,10 +139,11 @@ function broadcast(state, roomName, msg, exceptSession = null) {
       for (const sockets of s.wss) send(sockets, { type: 'msg', ...msg });
     }
   }
-  // Watchers no están en rooms, pero sí en sessions con watchOnly=true
+  // Watchers no están en rooms, pero sí en sessions con watchOnly=true.
+  // Si watchRoom es null, recibe msgs de TODAS las salas (modo UI / observador global).
   for (const [, s] of state.sessions.entries()) {
     if (!s.watchOnly) continue;
-    if (s.watchRoom && s.watchRoom === roomName) {
+    if (s.watchRoom === null || s.watchRoom === undefined || s.watchRoom === roomName) {
       if (s.ws) send(s.ws, { type: 'msg', ...msg });
     }
   }
@@ -205,6 +206,7 @@ function handleJoin(state, ws, data) {
 
   // Si la sesión ya existe en otra sala, sacarla primero
   const existing = state.sessions.get(session);
+  const isReturningToSameRoom = !!(existing && existing.room === room);
   if (existing && existing.room && existing.room !== room) {
     leaveRoom(state, session);
   }
@@ -212,8 +214,13 @@ function handleJoin(state, ws, data) {
   const meta = existing || {};
   meta.repo = repo || meta.repo || null;
   meta.room = room;
-  meta.lastSeen = nowIso();
   meta.watchOnly = false;
+  // Primer join o cambio de sala → lastSeen = ahora (sin backlog).
+  // Reingreso a la misma sala tras desconectar → preservar lastSeen existente
+  // para que /inbox traiga los mensajes perdidos mientras estuvo fuera.
+  if (!isReturningToSameRoom || !meta.lastSeen) {
+    meta.lastSeen = nowIso();
+  }
   if (!meta.wss) meta.wss = new Set();
   state.sessions.set(session, meta);
   ws._refacilSession = session;
@@ -439,6 +446,39 @@ function onClose(state, ws) {
   // "estar unido" sobrevive entre invocaciones. Solo `leave` explícito saca.
 }
 
+const UI_DIR = path.join(__dirname, 'ui');
+const UI_MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'application/javascript; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.ico': 'image/x-icon',
+};
+
+function serveUi(req, res) {
+  let urlPath = req.url.split('?')[0];
+  if (urlPath === '/' || urlPath === '') urlPath = '/index.html';
+  const safePath = urlPath.replace(/^\/+/, '').replace(/\.\./g, '');
+  const filePath = path.join(UI_DIR, safePath);
+  if (!filePath.startsWith(UI_DIR)) {
+    res.writeHead(403);
+    res.end('forbidden');
+    return;
+  }
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      res.writeHead(404, { 'content-type': 'text/plain; charset=utf-8' });
+      res.end('not found');
+      return;
+    }
+    const ext = path.extname(filePath).toLowerCase();
+    const mime = UI_MIME[ext] || 'application/octet-stream';
+    res.writeHead(200, { 'content-type': mime });
+    res.end(data);
+  });
+}
+
 async function start() {
   if (!WebSocketServer) {
     throw new Error(
@@ -466,7 +506,14 @@ async function start() {
     // sin persistencia previa
   }
 
-  const server = http.createServer();
+  const server = http.createServer((req, res) => {
+    if (req.method === 'GET') {
+      serveUi(req, res);
+      return;
+    }
+    res.writeHead(405, { 'content-type': 'text/plain' });
+    res.end('method not allowed');
+  });
 
   const port = await pickPort(server);
 

package/lib/bus/ui/app.js

@@ -0,0 +1,302 @@
+(function () {
+  const els = {
+    connDot: document.getElementById('conn-dot'),
+    connLabel: document.getElementById('conn-label'),
+    port: document.getElementById('port'),
+    roomsList: document.getElementById('rooms-list'),
+    roomsCount: document.getElementById('rooms-count'),
+    msgCount: document.getElementById('msg-count'),
+    pairCount: document.getElementById('pair-count'),
+    pendingCount: document.getElementById('pending-count'),
+    feedTitle: document.getElementById('feed-title'),
+    feedBody: document.getElementById('feed-body'),
+    feedEmpty: document.getElementById('feed-empty'),
+    clearBtn: document.getElementById('clear-btn'),
+    filters: {
+      ask: document.getElementById('filter-ask'),
+      reply: document.getElementById('filter-reply'),
+      say: document.getElementById('filter-say'),
+      system: document.getElementById('filter-system'),
+    },
+  };
+
+  const state = {
+    ws: null,
+    port: location.port || '7821',
+    messages: [],
+    messageIds: new Set(),
+    rooms: {},
+    knownRooms: new Set(),
+    selectedRoom: '*',
+    askIndex: new Map(),
+    answeredCorrelations: new Set(),
+    msgCount: 0,
+  };
+
+  els.port.textContent = 'puerto ' + state.port;
+
+  function setConn(kind, label) {
+    els.connDot.className = 'dot ' + (kind || '');
+    els.connLabel.textContent = label;
+  }
+
+  function formatTime(ts) {
+    try {
+      const d = new Date(ts);
+      return d.toLocaleTimeString('es', { hour12: false });
+    } catch (_) {
+      return ts || '';
+    }
+  }
+
+  function kindLabel(m) {
+    if (m.kind === 'ask') return 'ask';
+    if (m.kind === 'reply') return 'reply';
+    if (m.kind === 'broadcast') return 'say';
+    return m.kind || 'msg';
+  }
+
+  function filterAllows(m) {
+    if (m.kind === 'ask') return els.filters.ask.checked;
+    if (m.kind === 'reply') return els.filters.reply.checked;
+    if (m.kind === 'broadcast') return els.filters.say.checked;
+    if (m.kind === 'system') return els.filters.system.checked;
+    return true;
+  }
+
+  function roomMatches(m) {
+    return state.selectedRoom === '*' || m.room === state.selectedRoom;
+  }
+
+  function renderMsg(m) {
+    if (!roomMatches(m)) return null;
+    if (!filterAllows(m)) return null;
+    const div = document.createElement('div');
+    const classes = ['msg', m.kind || 'msg'];
+    // mention: lo marcamos si `to` coincide con alguien conocido de la sala
+    // (simple: si hay `to` lo consideramos mention visual).
+    if (m.to) classes.push('mention');
+    div.className = classes.join(' ');
+    div.dataset.corr = m.correlationId || '';
+    div.dataset.kind = m.kind || '';
+
+    const head = document.createElement('div');
+    head.className = 'msg-head';
+    const left = document.createElement('div');
+    left.innerHTML =
+      `<span class="msg-from">${escape(m.from || '?')}</span>` +
+      (m.to ? ` <span class="msg-to">${escape(m.to)}</span>` : '') +
+      ` <span class="msg-kind ${m.kind || ''}">${kindLabel(m)}</span>`;
+    const right = document.createElement('div');
+    right.innerHTML =
+      `<span class="msg-room">${escape(m.room || '')}</span> ` +
+      `<span class="msg-ts">${formatTime(m.ts)}</span>`;
+    head.appendChild(left);
+    head.appendChild(right);
+
+    const body = document.createElement('div');
+    body.className = 'msg-text';
+    body.textContent = m.text || '';
+
+    div.appendChild(head);
+    div.appendChild(body);
+
+    if (m.correlationId) {
+      const corr = document.createElement('div');
+      const isAnswered = state.answeredCorrelations.has(m.correlationId);
+      corr.className = 'msg-corr ' + (m.kind === 'ask' ? (isAnswered ? 'answered' : 'pending') : '');
+      corr.textContent = m.correlationId.slice(0, 8);
+      div.appendChild(corr);
+    }
+    return div;
+  }
+
+  function escape(s) {
+    return String(s).replace(/[&<>"']/g, (c) => ({
+      '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;',
+    }[c]));
+  }
+
+  function removeEmptyPlaceholder() {
+    const emp = els.feedBody.querySelector('.empty');
+    if (emp) emp.remove();
+  }
+
+  function isNearBottom(el, slack = 150) {
+    return el.scrollHeight - el.scrollTop - el.clientHeight < slack;
+  }
+
+  function scrollToBottom(el) {
+    el.scrollTop = el.scrollHeight;
+  }
+
+  function ingestMsg(m) {
+    if (!m || !m.id) return false;
+    if (state.messageIds.has(m.id)) return false;
+    state.messageIds.add(m.id);
+    state.messages.push(m);
+    state.msgCount++;
+    if (m.kind === 'ask' && m.correlationId) {
+      state.askIndex.set(m.correlationId, m);
+    }
+    if (m.kind === 'reply' && m.correlationId) {
+      state.answeredCorrelations.add(m.correlationId);
+    }
+    return true;
+  }
+
+  function appendMsg(m) {
+    if (!ingestMsg(m)) return; // dedup
+    if (m.kind === 'reply' && m.correlationId) {
+      const prev = els.feedBody.querySelector(`.msg.ask[data-corr="${m.correlationId}"] .msg-corr`);
+      if (prev) { prev.className = 'msg-corr answered'; prev.textContent = m.correlationId.slice(0, 8); }
+    }
+    const node = renderMsg(m);
+    if (node) {
+      const pinnedBottom = isNearBottom(els.feedBody);
+      removeEmptyPlaceholder();
+      els.feedBody.appendChild(node);
+      if (pinnedBottom) scrollToBottom(els.feedBody);
+    }
+    updateStats();
+  }
+
+  function ingestHistory(messages) {
+    if (!Array.isArray(messages) || messages.length === 0) return;
+    let added = 0;
+    for (const m of messages) {
+      if (ingestMsg(m)) added++;
+    }
+    if (!added) return;
+    // Re-ordenar por ts (los históricos pueden llegar mezclados con el live).
+    state.messages.sort((a, b) => (a.ts || '').localeCompare(b.ts || ''));
+    rerenderFeed();
+    updateStats();
+  }
+
+  function updateStats() {
+    els.msgCount.textContent = state.msgCount;
+    els.pairCount.textContent = state.answeredCorrelations.size;
+    let pending = 0;
+    for (const [cid] of state.askIndex) {
+      if (!state.answeredCorrelations.has(cid)) pending++;
+    }
+    els.pendingCount.textContent = pending;
+  }
+
+  function renderRooms() {
+    const names = Object.keys(state.rooms);
+    els.roomsCount.textContent = names.length;
+    els.roomsList.innerHTML = '';
+
+    const liAll = document.createElement('li');
+    liAll.className = 'all' + (state.selectedRoom === '*' ? ' active' : '');
+    liAll.innerHTML = `<div class="room-name">★ todas las salas</div><div class="members">${state.msgCount} mensajes totales</div>`;
+    liAll.addEventListener('click', () => selectRoom('*'));
+    els.roomsList.appendChild(liAll);
+
+    for (const name of names.sort()) {
+      const members = state.rooms[name] || [];
+      const li = document.createElement('li');
+      li.className = state.selectedRoom === name ? 'active' : '';
+      li.innerHTML = `<div class="room-name">${escape(name)}</div>` +
+        `<div class="members">${members.map((m) => `<span class="member">${escape(m)}</span>`).join('')}</div>`;
+      li.addEventListener('click', () => selectRoom(name));
+      els.roomsList.appendChild(li);
+    }
+  }
+
+  function selectRoom(room) {
+    state.selectedRoom = room;
+    els.feedTitle.textContent = room === '*' ? 'Todas las salas' : `Sala: ${room}`;
+    renderRooms();
+    rerenderFeed();
+  }
+
+  function rerenderFeed() {
+    els.feedBody.innerHTML = '';
+    let any = false;
+    for (const m of state.messages) {
+      const node = renderMsg(m);
+      if (node) { els.feedBody.appendChild(node); any = true; }
+    }
+    if (!any) {
+      const e = document.createElement('div');
+      e.className = 'empty';
+      e.textContent = state.selectedRoom === '*'
+        ? 'Esperando mensajes...'
+        : `Sin mensajes en la sala "${state.selectedRoom}".`;
+      els.feedBody.appendChild(e);
+    }
+    // Tras un rerender (cambio de sala o ingest de history) siempre al último.
+    scrollToBottom(els.feedBody);
+  }
+
+  function wireFilters() {
+    Object.values(els.filters).forEach((el) => {
+      el.addEventListener('change', rerenderFeed);
+    });
+    els.clearBtn.addEventListener('click', () => {
+      state.messages = [];
+      state.askIndex.clear();
+      state.answeredCorrelations.clear();
+      state.msgCount = 0;
+      rerenderFeed();
+      updateStats();
+    });
+  }
+
+  async function pollStatus() {
+    if (!state.ws || state.ws.readyState !== 1) return;
+    state.ws.send(JSON.stringify({ op: 'status' }));
+  }
+
+  function connect() {
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const url = `${proto}//${location.host}`;
+    setConn('', 'conectando...');
+    const ws = new WebSocket(url);
+    state.ws = ws;
+
+    ws.addEventListener('open', () => {
+      setConn('ok', 'en vivo');
+      // Suscribirse a todas las salas
+      ws.send(JSON.stringify({ op: 'watch', room: null }));
+      ws.send(JSON.stringify({ op: 'status' }));
+    });
+
+    ws.addEventListener('message', (ev) => {
+      let data;
+      try { data = JSON.parse(ev.data); } catch (_) { return; }
+      if (data.type === 'msg') {
+        appendMsg(data);
+      } else if (data.type === 'system' && data.event === 'status') {
+        const detail = data.detail || {};
+        state.rooms = detail.rooms || {};
+        renderRooms();
+        // Pedir history de cada sala nueva detectada
+        for (const room of Object.keys(state.rooms)) {
+          if (!state.knownRooms.has(room)) {
+            state.knownRooms.add(room);
+            ws.send(JSON.stringify({ op: 'history', room, n: 100 }));
+          }
+        }
+      } else if (data.type === 'history') {
+        ingestHistory(data.messages || []);
+      }
+    });
+
+    ws.addEventListener('close', () => {
+      setConn('err', 'desconectado · reintentando...');
+      setTimeout(connect, 1500);
+    });
+
+    ws.addEventListener('error', () => {
+      setConn('err', 'error de conexión');
+    });
+  }
+
+  wireFilters();
+  connect();
+  setInterval(pollStatus, 3000);
+})();

package/lib/bus/ui/index.html

@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>refacil-bus · vista en vivo</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+  <header>
+    <div class="brand">
+      <span class="logo">●</span>
+      <h1>refacil-bus</h1>
+      <span class="tag">vista en vivo</span>
+    </div>
+    <div class="status">
+      <span id="conn-dot" class="dot"></span>
+      <span id="conn-label">conectando...</span>
+      <span id="port" class="muted"></span>
+    </div>
+  </header>
+
+  <main>
+    <aside id="sidebar">
+      <div class="side-head">
+        <h2>Salas activas</h2>
+        <span id="rooms-count" class="pill">0</span>
+      </div>
+      <ul id="rooms-list"></ul>
+      <div class="side-foot">
+        <div class="stat"><span class="label">Mensajes recibidos</span><span id="msg-count" class="val">0</span></div>
+        <div class="stat"><span class="label">Pares ask/reply</span><span id="pair-count" class="val">0</span></div>
+        <div class="stat"><span class="label">Pendientes</span><span id="pending-count" class="val">0</span></div>
+      </div>
+    </aside>
+
+    <section id="feed">
+      <div class="feed-head">
+        <h2 id="feed-title">Todas las salas</h2>
+        <div class="feed-controls">
+          <label><input type="checkbox" id="filter-ask" checked> ask</label>
+          <label><input type="checkbox" id="filter-reply" checked> reply</label>
+          <label><input type="checkbox" id="filter-say" checked> say</label>
+          <label><input type="checkbox" id="filter-system" checked> system</label>
+          <button id="clear-btn" title="limpiar vista (no borra el historial)">limpiar</button>
+        </div>
+      </div>
+      <div id="feed-body">
+        <div id="feed-empty" class="empty">
+          Esperando mensajes... si tus sesiones están en una sala, deberían aparecer aquí cuando alguien envíe algo.
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <script src="/app.js"></script>
+</body>
+</html>

package/lib/bus/ui/style.css

@@ -0,0 +1,122 @@
+:root {
+  --bg: #0f1419;
+  --panel: #151c23;
+  --border: #242c35;
+  --muted: #6b7a88;
+  --text: #d7dde4;
+  --head: #ffffff;
+  --accent: #4fc3f7;
+  --ask: #4fc3f7;
+  --reply: #81c784;
+  --say: #ffb74d;
+  --system: #78909c;
+  --mention: #ffd54f;
+  --danger: #ef5350;
+  --ok: #66bb6a;
+  --pending: #ffa726;
+  font-family: -apple-system, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+  font-size: 14px;
+  color: var(--text);
+  background: var(--bg);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100vh; overflow: hidden; }
+body { display: flex; flex-direction: column; }
+header {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 10px 20px; border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+.brand { display: flex; align-items: center; gap: 10px; }
+.brand .logo { color: var(--accent); font-size: 22px; }
+.brand h1 { font-size: 16px; font-weight: 600; color: var(--head); }
+.brand .tag { color: var(--muted); font-size: 12px; }
+.status { display: flex; align-items: center; gap: 8px; font-size: 12px; }
+.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); transition: background .3s; }
+.status .dot.ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
+.status .dot.err { background: var(--danger); }
+.muted { color: var(--muted); }
+
+main { flex: 1; display: flex; overflow: hidden; }
+#sidebar {
+  width: 280px; min-width: 280px;
+  border-right: 1px solid var(--border);
+  background: var(--panel);
+  display: flex; flex-direction: column;
+}
+.side-head, .side-foot {
+  padding: 12px 16px; border-bottom: 1px solid var(--border);
+  display: flex; justify-content: space-between; align-items: center;
+}
+.side-foot {
+  border-bottom: none; border-top: 1px solid var(--border); margin-top: auto;
+  flex-direction: column; gap: 6px; align-items: stretch;
+}
+.side-head h2 { font-size: 13px; font-weight: 600; color: var(--head); text-transform: uppercase; letter-spacing: .5px; }
+.pill { background: var(--border); color: var(--muted); padding: 2px 8px; border-radius: 10px; font-size: 11px; }
+.stat { display: flex; justify-content: space-between; font-size: 12px; }
+.stat .label { color: var(--muted); }
+.stat .val { color: var(--head); font-weight: 600; }
+
+#rooms-list { list-style: none; overflow-y: auto; flex: 1; }
+#rooms-list li {
+  padding: 10px 16px; border-bottom: 1px solid var(--border);
+  cursor: pointer; transition: background .15s;
+}
+#rooms-list li:hover { background: rgba(255,255,255,.02); }
+#rooms-list li.active { background: rgba(79,195,247,.08); border-left: 2px solid var(--accent); padding-left: 14px; }
+#rooms-list li.all { background: rgba(255,255,255,.03); }
+#rooms-list .room-name { color: var(--head); font-weight: 500; font-size: 13px; margin-bottom: 4px; }
+#rooms-list .members { color: var(--muted); font-size: 11px; line-height: 1.6; }
+#rooms-list .member { display: inline-block; margin-right: 6px; }
+#rooms-list .member::before { content: '● '; color: var(--ok); font-size: 8px; vertical-align: middle; }
+
+#feed { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
+.feed-head {
+  padding: 12px 20px; border-bottom: 1px solid var(--border);
+  display: flex; justify-content: space-between; align-items: center;
+  background: var(--panel);
+}
+.feed-head h2 { font-size: 14px; color: var(--head); font-weight: 600; }
+.feed-controls { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); }
+.feed-controls label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
+.feed-controls input { cursor: pointer; }
+#clear-btn {
+  background: var(--border); color: var(--muted); border: none;
+  padding: 4px 10px; border-radius: 4px; font-size: 11px; cursor: pointer;
+}
+#clear-btn:hover { background: rgba(255,255,255,.06); color: var(--text); }
+
+#feed-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; }
+.empty { color: var(--muted); text-align: center; padding: 40px 20px; font-size: 13px; }
+
+.msg {
+  background: var(--panel); border-left: 3px solid var(--system);
+  padding: 10px 14px; border-radius: 0 6px 6px 0;
+  animation: slide-in .25s ease-out;
+}
+@keyframes slide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
+.msg.ask { border-left-color: var(--ask); }
+.msg.reply { border-left-color: var(--reply); margin-left: 30px; }
+.msg.broadcast { border-left-color: var(--say); }
+.msg.system { border-left-color: var(--system); opacity: .65; font-style: italic; }
+.msg.mention { box-shadow: inset 3px 0 0 var(--mention), 0 0 0 1px rgba(255,213,79,.3); }
+
+.msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 4px; }
+.msg-from { color: var(--head); font-weight: 600; font-size: 13px; }
+.msg-to { color: var(--mention); font-weight: 500; font-size: 12px; }
+.msg-to::before { content: '→ @'; color: var(--muted); font-weight: 400; }
+.msg-kind { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
+.msg-kind.ask { color: var(--ask); }
+.msg-kind.reply { color: var(--reply); }
+.msg-kind.broadcast { color: var(--say); }
+.msg-ts { color: var(--text); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 600; }
+.msg-room { color: var(--text); font-size: 11px; font-family: monospace; font-weight: 600; }
+.msg-text { color: var(--text); white-space: pre-wrap; line-height: 1.4; font-size: 13px; }
+.msg-corr {
+  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border);
+  font-family: monospace; font-size: 10px; color: var(--muted);
+}
+.msg-corr.pending { color: var(--pending); }
+.msg-corr.pending::before { content: '⏳ pending · '; }
+.msg-corr.answered::before { content: '✓ answered · '; color: var(--ok); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "refacil-sdd-ai",
-  "version": "2.8.1",
+  "version": "2.9.0",
   "description": "SDD-AI: Specification-Driven Development with AI — metodologia de desarrollo con IA usando OpenSpec, Claude Code y Cursor",
   "bin": {
     "refacil-sdd-ai": "./bin/cli.js"