@danieltmn/tamnora 0.7.0 → 0.7.1

package/CHANGELOG.md

@@ -5,6 +5,32 @@ Todos los cambios relevantes de este proyecto se documentan en este archivo.
 El formato sigue [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/)
 y el proyecto usa [Versionado Semantico](https://semver.org/lang/es/).
 
+## [0.7.1] - 2026-10-06
+
+### Agregado
+
+- **Tablas markdown**: la consola renderiza tablas con `|` (encabezado, alineación
+  `:--`/`:-:`/`--:`, celdas con `inline` y escape de HTML y de `\|`).
+- **Saltos de scroll**: botones flotantes para ir al inicio o al final de la
+  conversación, visibles solo cuando hay scroll.
+
+### Corregido
+
+- **Vista previa maximizada**: cubre toda la pantalla. El `backdrop-filter` del
+  panel creaba un *containing block* que dejaba el `position: fixed` encerrado en
+  la barra; ahora el contenedor se mueve a `body` al maximizar y vuelve a su lugar
+  al restaurar (también al cerrar el explorador).
+- **Arranque de la consola**: `scrollNavFrame` se declaraba después de
+  `initLayout()` y disparaba un `ReferenceError` (TDZ) al cargar.
+
+### Cambiado
+
+- **Indicador de actividad en el footer**: la animación de "pensando/trabajando"
+  deja de quedar pegada en cada respuesta; ahora hay una sola en el footer
+  (`#sb-activity`) para la sesión activa.
+- **Acciones del mensaje**: *copiar / regenerar / editar / borrar desde acá* se
+  agrupan en un menú de **tres puntos** (`⋮`) en vez de mostrarse siempre.
+
 ## [0.7.0] - 2026-10-05
 
 ### Seguridad

package/harness/packages/server/public/app.js

@@ -58,6 +58,7 @@ const ICON_PATHS = {
   file: ['M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z', 'M14 2v4a2 2 0 0 0 2 2h4'],
   'refresh-cw': ['M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8', 'M21 3v5h-5', 'M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16', 'M8 16H3v5'],
   trash: ['M3 6h18', 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6', 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', 'M10 11v6', 'M14 11v6'],
+  'dots-vertical': ['M12 5h.01', 'M12 12h.01', 'M12 19h.01'],
 };
 
 function icon(name, size = 16, className = '') {
@@ -523,11 +524,13 @@ function persistLayout() {
   } catch {
     // storage unavailable
   }
+  scheduleScrollNav();
 }
 
 function applyPanelWidths() {
   panels.sidebar.el.style.width = `${panels.sidebar.width}px`;
   panels.explorer.el.style.width = `${panels.explorer.width}px`;
+  scheduleScrollNav();
 }
 
 function attachResizer(panel) {
@@ -609,6 +612,10 @@ function initLayout() {
   mobileQuery.addEventListener('change', () => setSidebarOpen(isMobile() ? false : readSidebarPref()));
 }
 
+// `scrollNavFrame` debe existir antes de `initLayout()`: `applyPanelWidths`
+// llama a `scheduleScrollNav()` durante el arranque (evita el TDZ).
+let scrollNavFrame = 0;
+
 initLayout();
 
 function formatK(n) {
@@ -733,12 +740,50 @@ const controllers = new Map();
 const sessionsEl = $('#sessions');
 
 let activePane = blankPane;
+let restorePreviewMax = null;
 const paneOf = (message) => message?.bubble?.closest('.messages') ?? activePane;
 
 const scrollMessages = (pane = activePane) => {
   if (pane) pane.scrollTop = pane.scrollHeight;
 };
 
+const scrollNav = $('#scroll-nav');
+const scrollTopBtn = $('#scroll-top');
+const scrollDownBtn = $('#scroll-down');
+
+/** Muestra/oculta los saltos de scroll según el pane activo. */
+function updateScrollNav() {
+  const pane = activePane;
+  if (!pane) return;
+  const max = pane.scrollHeight - pane.clientHeight;
+  const visible = max > 40;
+  scrollNav.hidden = !visible;
+  if (!visible) return;
+  scrollTopBtn.disabled = pane.scrollTop < 40;
+  scrollDownBtn.disabled = max - pane.scrollTop < 40;
+}
+
+function scheduleScrollNav() {
+  if (scrollNavFrame) return;
+  scrollNavFrame = requestAnimationFrame(() => {
+    scrollNavFrame = 0;
+    updateScrollNav();
+  });
+}
+
+scrollTopBtn.addEventListener('click', () => activePane?.scrollTo({ top: 0, behavior: 'smooth' }));
+scrollDownBtn.addEventListener('click', () =>
+  activePane?.scrollTo({ top: activePane.scrollHeight, behavior: 'smooth' })
+);
+// `scroll` no burbujea: se escucha en captura desde el contenedor de los panes.
+panesEl.addEventListener('scroll', scheduleScrollNav, true);
+window.addEventListener('resize', scheduleScrollNav);
+new MutationObserver(scheduleScrollNav).observe(panesEl, {
+  childList: true,
+  characterData: true,
+  subtree: true,
+});
+
 function addMessage(role, text = '', pane = activePane) {
   pane.querySelector('.empty')?.remove();
   const wrap = el('div', `msg ${role}`);
@@ -755,12 +800,10 @@ function addMessage(role, text = '', pane = activePane) {
   const bubble = el('div', 'bubble');
   const textEl = el('div', 'text');
   const tools = el('div', 'tools');
-  const activity = el('div', 'activity');
-  activity.hidden = true;
-  bubble.append(textEl, tools, activity);
+  bubble.append(textEl, tools);
   wrap.append(label, bubble);
   pane.appendChild(wrap);
-  const message = { role, wrap, bubble, label, modeEl, textEl, tools, activity, reasoningEl: null, id: null };
+  const message = { role, wrap, bubble, label, modeEl, textEl, tools, reasoningEl: null, id: null };
   addMessageActions(message);
   if (text) setText(message, text);
   scrollMessages(pane);
@@ -775,18 +818,79 @@ function setMessageMode(message, modeId) {
   message.modeEl.hidden = false;
 }
 
+let openMessageMenu = null;
+
+/** El menu flota (position: fixed) para no quedar recortado por el scroll. */
+function positionMessageMenu() {
+  if (!openMessageMenu) return;
+  const { menu, trigger } = openMessageMenu;
+  const rect = trigger.getBoundingClientRect();
+  const size = menu.getBoundingClientRect();
+  let top = rect.bottom + 4;
+  if (top + size.height > window.innerHeight - 8) top = Math.max(8, rect.top - size.height - 4);
+  let left = rect.left;
+  if (left + size.width > window.innerWidth - 8) left = Math.max(8, window.innerWidth - size.width - 8);
+  menu.style.top = `${top}px`;
+  menu.style.left = `${left}px`;
+}
+
+function closeMessageMenus() {
+  if (!openMessageMenu) return;
+  const current = openMessageMenu;
+  openMessageMenu = null;
+  current.menu.hidden = true;
+  current.trigger.setAttribute('aria-expanded', 'false');
+  current.actions?.appendChild(current.menu);
+}
+
+function toggleMessageMenu(message) {
+  const wasOpen = openMessageMenu === message;
+  closeMessageMenus();
+  if (wasOpen) return;
+  document.body.appendChild(message.menu);
+  message.menu.hidden = false;
+  message.trigger.setAttribute('aria-expanded', 'true');
+  openMessageMenu = message;
+  positionMessageMenu();
+}
+
+document.addEventListener('click', (event) => {
+  if (!openMessageMenu) return;
+  if (event.target.closest('.msg-menu') || event.target.closest('.msg-menu-btn')) return;
+  closeMessageMenus();
+});
+document.addEventListener('keydown', (event) => {
+  if (event.key === 'Escape') closeMessageMenus();
+});
+window.addEventListener('resize', positionMessageMenu);
+document.addEventListener('scroll', positionMessageMenu, true);
+
 function addMessageActions(message) {
   const actions = el('div', 'msg-actions');
-  actions.appendChild(button('copiar', () => copyMessage(message), 'msg-act'));
-  if (message.role === 'assistant') {
-    actions.appendChild(button('regenerar', () => regenerate(message), 'msg-act'));
-  }
-  if (message.role === 'user') {
-    actions.appendChild(button('editar', () => editMessage(message), 'msg-act'));
-  }
-  actions.appendChild(button('borrar desde acá', () => deleteFrom(message), 'msg-act danger'));
+  const trigger = button('Opciones...', () => toggleMessageMenu(message), 'msg-menu-btn');
+  trigger.title = 'opciones';
+  trigger.setAttribute('aria-haspopup', 'menu');
+  trigger.setAttribute('aria-expanded', 'false');
+  trigger.setAttribute('aria-label', 'opciones del mensaje');
+
+  const menu = el('div', 'msg-menu');
+  menu.hidden = true;
+  const addItem = (label, run, cls = 'msg-act') => {
+    menu.appendChild(button(label, () => {
+      closeMessageMenus();
+      run();
+    }, cls));
+  };
+  addItem('copiar', () => copyMessage(message));
+  if (message.role === 'assistant') addItem('regenerar', () => regenerate(message));
+  if (message.role === 'user') addItem('editar', () => editMessage(message));
+  addItem('borrar desde acá', () => deleteFrom(message), 'msg-act danger');
+
+  actions.append(trigger, menu);
   message.bubble.appendChild(actions);
   message.actions = actions;
+  message.menu = menu;
+  message.trigger = trigger;
 }
 
 function messageId(message) {
@@ -857,17 +961,25 @@ const ACTIVITY = {
   waiting: { cls: 'loader-thinking', label: 'esperando aprobación…' },
 };
 
-function setActivity(message, kind) {
-  if (!message.activity) return;
+const footerActivityEl = $('#sb-activity');
+
+/** El indicador de "pensando/trabajando" vive en el footer (una sola vez). */
+function renderFooterActivity(kind) {
+  if (!footerActivityEl) return;
   if (!kind) {
-    message.activity.hidden = true;
-    message.activity.replaceChildren();
+    footerActivityEl.hidden = true;
+    footerActivityEl.replaceChildren();
     return;
   }
-  const def = ACTIVITY[kind];
-  message.activity.hidden = false;
-  message.activity.replaceChildren(el('span', `loader ${def.cls}`), el('span', 'activity-label', def.label));
-  scrollMessages(paneOf(message));
+  const def = ACTIVITY[kind] ?? ACTIVITY.thinking;
+  footerActivityEl.hidden = false;
+  footerActivityEl.replaceChildren(el('span', `loader ${def.cls}`), el('span', 'activity-label', def.label));
+}
+
+function setActivity(message, kind) {
+  // Solo el turno de la sesion activa refleja su actividad en el footer.
+  if (paneOf(message) !== activePane) return;
+  renderFooterActivity(kind);
 }
 
 function setText(message, text) {
@@ -1336,6 +1448,8 @@ function showPane(id) {
   for (const item of state.panes.values()) item.el.hidden = item.id !== id;
   blankPane.hidden = Boolean(record);
   activePane = record ? record.el : blankPane;
+  renderFooterActivity(record?.working ? 'thinking' : null);
+  scheduleScrollNav();
 }
 
 function renderTabs() {
@@ -1395,8 +1509,9 @@ function activateSession(id) {
 
 function auditStatus(record) {
   submitBtn.disabled = record.working;
-  $('#sb-rounds').textContent = record.working ? 'pensando…' : 'listo';
+  $('#sb-rounds').textContent = record.working ? '' : 'listo';
   $('#sb-rounds').classList.toggle('running', record.working);
+  renderFooterActivity(record.working ? 'thinking' : null);
 }
 
 function closeTab(id) {
@@ -1437,8 +1552,9 @@ function setWorking(id, working) {
   if (id === state.sessionId) {
     submitBtn.disabled = working;
     if (stopBtn) stopBtn.hidden = !working;
-    $('#sb-rounds').textContent = working ? 'pensando.' : 'listo';
+    $('#sb-rounds').textContent = working ? '' : 'listo';
     $('#sb-rounds').classList.toggle('running', working);
+    renderFooterActivity(working ? 'thinking' : null);
   }
 }
 
@@ -3096,6 +3212,7 @@ function setExplorerOpen(open) {
   state.explorerOpen = open;
   explorer.hidden = !open;
   panels.explorer.resizer.hidden = !open;
+  if (!open) restorePreviewMax?.();
   const handle = $('#explorer-handle');
   if (handle) {
     handle.hidden = open;
@@ -3363,14 +3480,23 @@ function setPreviewStatus(text, isError = false) {
 }
 
 /* Ancho por dispositivo + maximizar, compartido por preview y visor de archivos. */
-function setupPreviewTools({ container, stage, frame, select, maxButton }) {
+function setupPreviewTools({ container, stage, frame, select, maxButton, teleport = false }) {
   const applyDevice = () => {
     const value = select?.value || 'auto';
     if (stage) stage.dataset.device = value;
     frame.style.width = value === 'auto' ? '100%' : `${value}px`;
   };
   select?.addEventListener('change', applyDevice);
+  // El panel del explorador usa `backdrop-filter`, que crea un containing block
+  // y dejaria el `position: fixed` encerrado en la barra. Al maximizar movemos
+  // el contenedor a `body` y lo devolvemos a su lugar al restaurar.
+  const home = teleport ? container?.parentNode : null;
+  const homeAfter = teleport ? container?.nextSibling : null;
   const setMax = (on) => {
+    if (teleport && container && home) {
+      if (on) document.body.appendChild(container);
+      else if (!home.contains(container)) home.insertBefore(container, homeAfter ?? null);
+    }
     container?.classList.toggle('preview-maximized', on);
     maxButton?.setAttribute('aria-pressed', String(on));
     if (maxButton) maxButton.title = on ? 'restaurar' : 'maximizar';
@@ -3388,7 +3514,9 @@ const previewTools = setupPreviewTools({
   frame: previewFrame,
   select: $('#preview-device'),
   maxButton: $('#preview-max'),
+  teleport: true,
 });
+restorePreviewMax = () => previewTools.setMax(false);
 previewTools.applyDevice();
 
 function loadPreview(url) {

package/harness/packages/server/public/index.html

@@ -33,7 +33,7 @@
   </head>
   <body>
     <header class="topbar">
-      <div class="brand"><span class="logo"><span class="logo-t">T</span><span class="logo-h">H</span></span> <span class="ver">v0.7.0</span></div>
+      <div class="brand"><span class="logo"><span class="logo-t">T</span><span class="logo-h">H</span></span> <span class="ver">v0.7.1</span></div>
       <nav class="tabs">
         <button class="tab active" data-tab="chat">chat</button>
         <button class="tab" data-tab="providers">proveedores</button>
@@ -116,6 +116,18 @@
                 </div>
               </div>
             </div>
+            <div id="scroll-nav" class="scroll-nav" hidden>
+              <button id="scroll-top" type="button" class="scroll-btn" title="ir al inicio" aria-label="ir al inicio de la conversación">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="m18 15-6-6-6 6" />
+                </svg>
+              </button>
+              <button id="scroll-down" type="button" class="scroll-btn" title="ir al final" aria-label="ir al final de la conversación">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                  <path d="m6 9 6 6 6-6" />
+                </svg>
+              </button>
+            </div>
           </div>
           <form id="chat-form" class="composer">
             <div id="slash-menu" class="slash-menu" hidden></div>
@@ -142,6 +154,7 @@
             <span class="dot">·</span>
             <span id="sb-model">—</span>
             <span class="dot">·</span>
+            <span id="sb-activity" class="sb-activity" hidden></span>
             <span id="sb-rounds">listo</span>
             <span class="spacer"></span>
             <span id="sb-context" class="ctx muted" title="uso del contexto del modelo">

package/harness/packages/server/public/markdown.js

@@ -73,6 +73,27 @@ function inline(text) {
   return out.replace(/\uE000(\d+)\uE000/g, (_, idx) => `<code>${codes[Number(idx)]}</code>`);
 }
 
+const CELL_PIPE = '';
+
+function splitRow(line) {
+  const masked = line.trim().replace(/\\\|/g, CELL_PIPE);
+  const inner = masked.replace(/^\s*\|/, '').replace(/\|\s*$/, '');
+  return inner.split('|').map((cell) => cell.trim().split(CELL_PIPE).join('|'));
+}
+
+function isDelimiterRow(line) {
+  if (!line.includes('|')) return false;
+  const cells = splitRow(line);
+  return cells.length > 0 && cells.every((cell) => /^:?-+:?$/.test(cell));
+}
+
+function cellAlign(cell) {
+  if (cell.startsWith(':') && cell.endsWith(':')) return 'center';
+  if (cell.endsWith(':')) return 'right';
+  if (cell.startsWith(':')) return 'left';
+  return '';
+}
+
 /** Render a Markdown string to safe HTML. */
 export function renderMarkdown(text) {
   const lines = String(text ?? '').replace(/\r\n?/g, '\n').split('\n');
@@ -133,6 +154,28 @@ export function renderMarkdown(text) {
       continue;
     }
 
+    if (line.includes('|') && i + 1 < lines.length && isDelimiterRow(lines[i + 1])) {
+      flush();
+      const header = splitRow(line);
+      const aligns = splitRow(lines[i + 1]).map(cellAlign);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && lines[i].trim() && lines[i].includes('|')) {
+        rows.push(splitRow(lines[i]));
+        i += 1;
+      }
+      const cols = Math.max(header.length, aligns.length);
+      const attr = (idx) => (aligns[idx] ? ` style="text-align:${aligns[idx]}"` : '');
+      const cells = (row, tag) =>
+        Array.from({ length: cols }, (_, idx) => `<${tag}${attr(idx)}>${inline(row[idx] ?? '')}</${tag}>`).join('');
+      out.push(
+        `<div class="table-wrap"><table><thead><tr>${cells(header, 'th')}</tr></thead><tbody>` +
+          rows.map((row) => `<tr>${cells(row, 'td')}</tr>`).join('') +
+          '</tbody></table></div>'
+      );
+      continue;
+    }
+
     if (/^\s*>/.test(line)) {
       flush();
       const quote = [];

package/harness/packages/server/public/styles.css

@@ -1,27 +1,28 @@
 /* tamnora console — paper / aguada theme (opencode/codex-like) */
 :root {
-  --bg: #161712;
-  --panel: rgba(28, 29, 23, 0.82);
-  --rail: rgba(24, 25, 19, 0.78);
-  --theirs: #24251d;
+  --bg: #101107;
+  --panel: rgba(21, 22, 16, 0.86);
+  --rail: rgba(17, 18, 12, 0.82);
+  --theirs: #1c1d15;
   --mine: #d9704a;
   --mine-soft: rgba(217, 112, 74, 0.12);
   --text: #e9e4d6;
   --muted: #9c9789;
-  --border: rgba(240, 234, 219, 0.14);
+  --border: rgba(240, 234, 219, 0.13);
   --danger: #e0705c;
   --accent: #d9704a;
   --accent-dark: #b8542f;
   --accent-soft: rgba(217, 112, 74, 0.18);
   --ok: #8fae7f;
   --warn: #d9a441;
-  --solid: #1b1c16;
+  --solid: #12130b;
   --primary-fg: #fff7ef;
   --sans: Manrope, system-ui, "Segoe UI", Arial, sans-serif;
   --serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
   --mono: "DM Mono", ui-monospace, "Cascadia Code", "JetBrains Mono", "SF Mono", Consolas, monospace;
   --font: var(--sans);
-  --page-bg: linear-gradient(rgba(22, 23, 15, 0.94), rgba(22, 23, 15, 0.94)), url("/img/fondo-agentes.webp") center/cover fixed no-repeat;
+  --chat-font: 14.5px;
+  --page-bg: linear-gradient(rgba(11, 12, 8, 0.96), rgba(11, 12, 8, 0.96)), url("/img/fondo-agentes.webp") center/cover fixed no-repeat;
   color-scheme: dark;
 }
 
@@ -214,6 +215,7 @@ main { flex: 1; min-height: 0; min-width: 0; display: flex; }
 /* chat -------------------------------------------------------------------- */
 .sidebar {
   width: 260px;
+  flex: 0 0 auto;
   border-right: 1px solid var(--border);
   background: var(--rail);
   backdrop-filter: blur(14px);
@@ -300,10 +302,9 @@ main { flex: 1; min-height: 0; min-width: 0; display: flex; }
 }
 .rail-exit:hover { color: var(--accent); }
 
-.conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; }
-.panes { flex: 1; min-height: 0; display: flex; min-width: 0; }
+.conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; }.panes { flex: 1; min-height: 0; display: flex; min-width: 0; position: relative; }
 .panes > .messages { flex: 1; min-height: 0; min-width: 0; }
-.messages { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 20px; }
+.messages { flex: 1; overflow-y: auto; overflow-x: hidden; min-width: 0; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 20px; font-size: var(--chat-font); }
 
 /* resizable gutters -------------------------------------------------------- */
 .resizer {
@@ -317,6 +318,36 @@ main { flex: 1; min-height: 0; min-width: 0; display: flex; }
 body.resizing { cursor: col-resize; user-select: none; }
 body.resizing * { cursor: col-resize !important; }
 
+/* scroll rápido de la conversación ---------------------------------------- */
+.scroll-nav {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  z-index: 25;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.scroll-nav[hidden] { display: none; }
+.scroll-btn {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--solid, var(--panel));
+  color: var(--muted);
+  cursor: pointer;
+  backdrop-filter: blur(14px);
+  box-shadow: 0 6px 18px rgb(20 18 12 / 0.22);
+  transition: color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
+}
+.scroll-btn svg { width: 16px; height: 16px; display: block; }
+.scroll-btn:hover { color: var(--accent); border-color: var(--accent); }
+.scroll-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--border); color: var(--muted); }
+
 /* session tabs ------------------------------------------------------------- */
 .tabbar {
   display: flex;
@@ -402,7 +433,6 @@ body.resizing * { cursor: col-resize !important; }
 }
 .msg-mode[data-mode='plan'] { color: var(--warn); }
 .bubble {
-  max-width: 900px;
   min-width: 0;
   padding-left: 12px;
   border-left: 2px solid var(--border);
@@ -411,21 +441,58 @@ body.resizing * { cursor: col-resize !important; }
   overflow-wrap: anywhere;
 }
 .msg.user .bubble { border-left-color: var(--mine); color: var(--text); }
-.msg-actions { display: flex; gap: 6px; margin-top: 7px; opacity: 0.45; transition: opacity 0.12s ease; }
-.msg:hover .msg-actions,
-.msg:focus-within .msg-actions { opacity: 1; }
-.msg-actions button.msg-act {
+.msg-actions { position: relative; display: flex; gap: 6px; margin-top: 7px; }
+.msg-menu-btn {
+  display: inline-grid;
+  place-items: center;
+  width: auto;
+  min-height: 24px;
+  padding: 2px 9px;
   background: transparent;
   border: 1px solid var(--border);
   border-radius: 7px;
   color: var(--muted);
+  cursor: pointer;
+  font: 500 11px var(--mono);
+  opacity: 0.45;
+  transition: opacity 0.12s ease;
+}
+.msg:hover .msg-menu-btn,
+.msg:focus-within .msg-menu-btn,
+.msg-menu-btn[aria-expanded='true'] { opacity: 1; }
+.msg-menu-btn:hover,
+.msg-menu-btn[aria-expanded='true'] { color: var(--text); border-color: var(--accent); }
+.msg-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 60;
+  min-width: 170px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 5px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--panel);
+  box-shadow: 0 12px 30px rgb(0 0 0 / 0.22);
+}
+.msg-menu[hidden] { display: none; }
+.msg-actions button.msg-act {
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  color: var(--muted);
   font: 500 11px var(--mono);
-  padding: 2px 8px;
+  padding: 5px 8px;
   cursor: pointer;
 }
-.msg-actions button.msg-act:hover { color: var(--text); border-color: var(--accent); }
-.msg-actions button.msg-act.danger:hover { color: var(--danger); border-color: var(--danger); }
-.bubble .tools { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
+.msg-actions button.msg-act:hover { color: var(--text); background: var(--theirs); }
+.msg-actions button.msg-act.danger { color: var(--danger); }
+.msg-actions button.msg-act.danger:hover { background: var(--theirs); }
+.bubble .tools { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
 
 .tools-actions { display: flex; align-items: center; gap: 8px; }
 .tools-actions[hidden] { display: none; }
@@ -573,6 +640,11 @@ body.resizing * { cursor: col-resize !important; }
 .activity .loader { color: var(--accent); }
 .activity-label { color: var(--muted); }
 #sb-rounds.running { color: var(--accent); }
+.sb-activity { display: inline-flex; align-items: center; gap: 6px; }
+.sb-activity .loader { color: var(--accent); }
+.sb-activity .loader-thinking { width: 24px; height: 6px; }
+.sb-activity .loader-working { width: 13px; height: 13px; }
+.sb-activity .activity-label { color: var(--muted); }
 
 .loader-thinking {
   width: 32px;
@@ -671,6 +743,16 @@ details.reasoning .body { color: var(--muted); white-space: pre-wrap; margin-top
 .text blockquote { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--border); color: var(--muted); }
 .text a { color: var(--accent); }
 .text hr { border: 0; border-top: 1px solid var(--border); margin: 14px 0; }
+.text .table-wrap, .agent-text .table-wrap { overflow-x: auto; margin: 0 0 10px; }
+.text table, .agent-text table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
+.text th, .text td, .agent-text th, .agent-text td {
+  border: 1px solid var(--border);
+  padding: 5px 10px;
+  text-align: left;
+  vertical-align: top;
+}
+.text th, .agent-text th { background: var(--theirs); font-weight: 600; }
+.text .table-wrap code, .agent-text .table-wrap code { white-space: nowrap; }
 .text code {
   background: var(--theirs);
   border: 1px solid var(--border);
@@ -687,7 +769,7 @@ details.reasoning .body { color: var(--muted); white-space: pre-wrap; margin-top
 .code-copy { background: transparent; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: 11px; }
 .code-copy:hover { color: var(--text); }
 pre.code { margin: 0; padding: 10px 12px; overflow: auto; max-height: 420px; }
-pre.code code { background: none; border: 0; padding: 0; font-size: 12.5px; }
+pre.code code { background: none; border: 0; padding: 0; font-size: 0.92em; }
 .tok-comment { color: #8c8779; font-style: italic; }
 .tok-string { color: #c2a878; }
 .tok-number { color: #e0a05c; }
@@ -1059,6 +1141,14 @@ dialog.file-modal.preview-maximized {
 }
 
 
+/* desktop: los laterales conservan su ancho mínimo (igual que el resizer) */
+@media (min-width: 821px) {
+  .sidebar { min-width: 180px; }
+}
+@media (min-width: 901px) {
+  .explorer { min-width: 200px; }
+}
+
 @media (max-width: 900px) {
   .explorer {
     position: fixed;

package/harness/packages/server/test/markdown.test.js

@@ -31,6 +31,39 @@ test('only allows http(s) links', () => {
   assert.ok(!renderMarkdown('[x](javascript:alert(1))').includes('<a '));
 });
 
+test('renders pipe tables with alignment and stops at the next block', () => {
+  const md = [
+    '| Archivo | Qué es | Centro | Derecha |',
+    '| --- | :-- | :-: | --: |',
+    '| index.html | Landing | x | y |',
+    '| `a.js` | **script** | z | w |',
+    '',
+    'sigue el texto',
+  ].join('\n');
+  const html = renderMarkdown(md);
+  assert.match(html, /<div class="table-wrap"><table>/);
+  assert.match(html, /<th>Archivo<\/th>/);
+  assert.match(html, /<th style="text-align:center">Centro<\/th>/);
+  assert.match(html, /<th style="text-align:right">Derecha<\/th>/);
+  assert.match(html, /<td style="text-align:left">Landing<\/td>/);
+  assert.match(html, /<td><code>a\.js<\/code><\/td>/);
+  assert.match(html, /<td style="text-align:left"><strong>script<\/strong><\/td>/);
+  assert.match(html, /<\/tbody><\/table><\/div>\n<p>sigue el texto<\/p>/);
+});
+
+test('table cells are escaped and escaped pipes stay in one cell', () => {
+  const html = renderMarkdown('| col | col2 |\n| --- | --- |\n| a \\| b | <script> |');
+  assert.match(html, /<td>a \| b<\/td>/);
+  assert.ok(!html.includes('<script>'));
+  assert.match(html, /&lt;script&gt;/);
+});
+
+test('a lone pipe line without a delimiter row stays a paragraph', () => {
+  const html = renderMarkdown('foo | bar');
+  assert.ok(!html.includes('<table'));
+  assert.equal(html, '<p>foo | bar</p>');
+});
+
 test('highlight escapes code content', () => {
   assert.equal(highlight('a < b', 'bash'), 'a &lt; b');
 });

package/harness/packages/server/test/server.test.js

@@ -49,6 +49,7 @@ test('serves health, providers and the console', async () => {
       'id="settings-controls-slot"',
       'id="slash-menu"',
       'id="statusbar"',
+      'id="sb-activity"',
     ]) {
       assert.ok(html.includes(hook), `falta ${hook}`);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danieltmn/tamnora",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Harness local para IAs: agente CLI-first con TUI, consola web y evaluacion. Node puro, sin dependencias.",
   "type": "module",
   "packageManager": "pnpm@11.25.0",