@danieltmn/tamnora 0.20.1 → 0.21.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ 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.21.0] - 2026-10-14
+
+### Cambios
+
+- feat(consola): modulo de apariencia con temas, tipografia y tamano
+
 ## [0.20.1] - 2026-10-14
 
 ### Cambiado

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

@@ -3,6 +3,17 @@
 import { renderMarkdown, speechText, highlight } from './markdown.js';
 import { streamSse, followRun } from './runStream.js';
 import { diffState, pollDelayMs, localState, summarizeArgs } from './reconcile.js';
+import {
+  THEMES,
+  FONT_PRESETS,
+  DEFAULTS,
+  normalizeAppearance,
+  nextTheme,
+  readLocalAppearance,
+  applyAppearance,
+  clampChatFont,
+  clampScale,
+} from './appearance.js';
 
 const $ = (sel) => document.querySelector(sel);
 let csrfToken = '';
@@ -297,7 +308,8 @@ const PALETTE_COMMANDS = [
   { id: 'ajustes', label: 'MCP y Skills (ajustes)', run: () => activateTab('ajustes') },
   { id: 'explorer', label: 'Mostrar u ocultar archivos', run: () => setExplorerOpen(!state.explorerOpen) },
   { id: 'sidebar', label: 'Mostrar u ocultar sesiones', run: () => setSidebarOpen(!state.sidebarOpen) },
-  { id: 'theme', label: 'Cambiar tema', run: () => applyTheme(document.documentElement.dataset.theme === 'paper' ? 'dark' : 'paper') },
+  { id: 'theme', label: 'Cambiar tema', run: () => cycleTheme() },
+  { id: 'apariencia', label: 'Apariencia (tema, tipografía, tamaño)', run: () => openAppearance() },
 ];
 
 const palette = {
@@ -459,6 +471,11 @@ async function loadModes() {
     if (legacy) writeDefaultCwd(legacy);
   }
   syncDefaultCwd();
+  if (settings?.settings?.appearance) {
+    appearance = normalizeAppearance(settings.settings.appearance);
+    applyAppearance(appearance, { persist: true });
+    renderAppearanceControls();
+  }
   updateStatus();
 }
 
@@ -582,16 +599,110 @@ function updateStatus(extra = {}) {
   if (extra.running) $('#sb-rounds').textContent = 'pensando…';
 }
 
+/* --- apariencia (tema, tipografía, tamaño) -------------------------------- */
+
+let appearance = normalizeAppearance(readLocalAppearance());
 const themeToggle = $('#theme-toggle');
-function applyTheme(theme) {
-  document.documentElement.dataset.theme = theme;
-  themeToggle.title = theme === 'paper' ? 'cambiar a oscuro' : 'cambiar a papel';
-  storage.set('tamnora-console-theme', theme);
+const themeGrid = $('#apariencia-themes');
+const fontSelect = $('#apariencia-font');
+const chatFontRange = $('#apariencia-chat-font');
+const chatFontOut = $('#apariencia-chat-font-out');
+const scaleRange = $('#apariencia-scale');
+const scaleOut = $('#apariencia-scale-out');
+
+function renderAppearanceControls() {
+  if (themeGrid) {
+    themeGrid
+      .querySelectorAll('.theme-swatch')
+      .forEach((btn) => btn.classList.toggle('active', btn.dataset.themePick === appearance.theme));
+  }
+  if (fontSelect) fontSelect.value = appearance.font;
+  if (chatFontRange) chatFontRange.value = appearance.chatFont;
+  if (chatFontOut) chatFontOut.textContent = `${appearance.chatFont}px`;
+  if (scaleRange) scaleRange.value = Math.round(appearance.scale * 100);
+  if (scaleOut) scaleOut.textContent = `${Math.round(appearance.scale * 100)}%`;
+  if (themeToggle) {
+    const label = THEMES.find((t) => t.id === appearance.theme)?.label ?? appearance.theme;
+    themeToggle.title = `tema: ${label}`;
+  }
+}
+
+function persistAppearance() {
+  applyAppearance(appearance, { persist: true });
+  renderAppearanceControls();
+  api('/api/settings', { method: 'PUT', body: { appearance } }).catch(() => null);
+}
+
+function buildAppearanceControls() {
+  if (themeGrid) {
+    themeGrid.replaceChildren();
+    for (const theme of THEMES) {
+      const swatch = document.createElement('button');
+      swatch.type = 'button';
+      swatch.className = 'theme-swatch';
+      swatch.dataset.themePick = theme.id;
+      swatch.title = theme.label;
+      swatch.setAttribute('aria-label', `tema ${theme.label}`);
+      const dot = document.createElement('span');
+      dot.className = 'theme-swatch-dot';
+      dot.style.background = theme.metaColor;
+      const label = document.createElement('span');
+      label.className = 'theme-swatch-label';
+      label.textContent = theme.label;
+      swatch.append(dot, label);
+      swatch.addEventListener('click', () => {
+        appearance.theme = theme.id;
+        persistAppearance();
+      });
+      themeGrid.appendChild(swatch);
+    }
+  }
+  if (fontSelect) {
+    fontSelect.replaceChildren();
+    for (const font of FONT_PRESETS) {
+      const option = document.createElement('option');
+      option.value = font.id;
+      option.textContent = font.label;
+      fontSelect.appendChild(option);
+    }
+    fontSelect.addEventListener('change', () => {
+      appearance.font = fontSelect.value;
+      persistAppearance();
+    });
+  }
+  chatFontRange?.addEventListener('input', () => {
+    appearance.chatFont = clampChatFont(Number(chatFontRange.value));
+    applyAppearance(appearance, { persist: false });
+    if (chatFontOut) chatFontOut.textContent = `${appearance.chatFont}px`;
+  });
+  chatFontRange?.addEventListener('change', persistAppearance);
+  scaleRange?.addEventListener('input', () => {
+    appearance.scale = clampScale(Number(scaleRange.value) / 100);
+    applyAppearance(appearance, { persist: false });
+    if (scaleOut) scaleOut.textContent = `${Math.round(appearance.scale * 100)}%`;
+  });
+  scaleRange?.addEventListener('change', persistAppearance);
+  $('#apariencia-reset')?.addEventListener('click', () => {
+    appearance = normalizeAppearance(DEFAULTS);
+    persistAppearance();
+    setStatus('#apariencia-msg', 'restablecido', 'ok');
+  });
+  renderAppearanceControls();
 }
-themeToggle.addEventListener('click', () =>
-  applyTheme(document.documentElement.dataset.theme === 'paper' ? 'dark' : 'paper')
-);
-applyTheme(document.documentElement.dataset.theme || 'paper');
+
+function cycleTheme() {
+  appearance.theme = nextTheme(appearance.theme);
+  persistAppearance();
+}
+
+function openAppearance() {
+  activateTab('ajustes');
+  activateAjustesPanel('apariencia');
+}
+
+themeToggle?.addEventListener('click', cycleTheme);
+appearance = applyAppearance(appearance, { persist: false });
+buildAppearanceControls();
 
 const logout = $('#logout');
 if (logout) {
@@ -3379,7 +3490,7 @@ function renderHandsFree() {
   }
   if (handsFree.active && handsFree.phase === 'listening') renderFooterActivity('listening');
   else if (handsFree.active && handsFree.phase === 'thinking') renderFooterActivity('thinking');
-  else if (handsFree.active) renderFooterActivity(null);
+  else renderFooterActivity(null);
 }
 
 function setHandsFreePhase(phase) {

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

@@ -0,0 +1,227 @@
+// Apariencia de la consola: temas (paletas), presets de tipografía y escala.
+// Registro puro + helpers de aplicación. Los ids de tema/fuente deben coincidir
+// con src/lib/appearance.js (validación del server).
+
+export const THEMES = [
+  { id: 'paper', label: 'Papel', scheme: 'light', metaColor: '#f5efe2' },
+  { id: 'dark', label: 'Oscuro', scheme: 'dark', metaColor: '#101107' },
+  { id: 'midnight', label: 'Medianoche', scheme: 'dark', metaColor: '#0b1220' },
+  { id: 'nord', label: 'Nord', scheme: 'dark', metaColor: '#2e3440' },
+  { id: 'dracula', label: 'Dracula', scheme: 'dark', metaColor: '#282a36' },
+  { id: 'solarized', label: 'Solarized', scheme: 'light', metaColor: '#fdf6e3' },
+  { id: 'solarized-dark', label: 'Solarized oscuro', scheme: 'dark', metaColor: '#002b36' },
+  { id: 'bosque', label: 'Bosque', scheme: 'light', metaColor: '#f2f4ec' },
+  { id: 'vino', label: 'Vino', scheme: 'light', metaColor: '#f7eeee' },
+  { id: 'vercel', label: 'Vercel', scheme: 'dark', metaColor: '#000000' },
+  { id: 'dark-plus', label: 'Dark+', scheme: 'dark', metaColor: '#1e1e1e' },
+  { id: 'github', label: 'GitHub', scheme: 'light', metaColor: '#ffffff' },
+  { id: 'github-dark', label: 'GitHub oscuro', scheme: 'dark', metaColor: '#0d1117' },
+];
+
+export const FONT_PRESETS = [
+  {
+    id: 'clasico',
+    label: 'Clásico · Manrope / Libre Baskerville / DM Mono',
+    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',
+    google: 'family=DM+Mono:wght@400;500&family=Libre+Baskerville:wght@400;700&family=Manrope:wght@400;500;600;700',
+  },
+  {
+    id: 'sistema',
+    label: 'Sistema · sin fuentes externas',
+    sans: 'system-ui, "Segoe UI", Arial, sans-serif',
+    serif: 'Georgia, "Times New Roman", serif',
+    mono: 'ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace',
+    google: null,
+  },
+  {
+    id: 'plex',
+    label: 'IBM Plex · Sans / Serif / Mono',
+    sans: '"IBM Plex Sans", system-ui, "Segoe UI", Arial, sans-serif',
+    serif: '"IBM Plex Serif", Georgia, "Times New Roman", serif',
+    mono: '"IBM Plex Mono", ui-monospace, Consolas, monospace',
+    google: 'family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Serif:wght@400;600',
+  },
+  {
+    id: 'inter',
+    label: 'Inter · Inter / Newsreader / JetBrains Mono',
+    sans: 'Inter, system-ui, "Segoe UI", Arial, sans-serif',
+    serif: 'Newsreader, Georgia, "Times New Roman", serif',
+    mono: '"JetBrains Mono", ui-monospace, Consolas, monospace',
+    google: 'family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Newsreader:wght@400;600',
+  },
+  {
+    id: 'jetbrains',
+    label: 'JetBrains Mono · código',
+    sans: '"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace',
+    serif: 'Georgia, "Times New Roman", serif',
+    mono: '"JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace',
+    google: 'family=JetBrains+Mono:wght@400;500;700',
+  },
+  {
+    id: 'fira',
+    label: 'Fira Code · código',
+    sans: '"Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace',
+    serif: 'Georgia, "Times New Roman", serif',
+    mono: '"Fira Code", ui-monospace, "Cascadia Code", Consolas, monospace',
+    google: 'family=Fira+Code:wght@400;500;600;700',
+  },
+  {
+    id: 'source',
+    label: 'Source Code Pro · código',
+    sans: '"Source Code Pro", ui-monospace, "Cascadia Code", Consolas, monospace',
+    serif: 'Georgia, "Times New Roman", serif',
+    mono: '"Source Code Pro", ui-monospace, "Cascadia Code", Consolas, monospace',
+    google: 'family=Source+Code+Pro:wght@400;500;600;700',
+  },
+];
+
+export const DEFAULTS = { theme: 'paper', font: 'clasico', chatFont: 14.5, scale: 1 };
+
+const MIN_CHAT_FONT = 12;
+const MAX_CHAT_FONT = 20;
+const MIN_SCALE = 0.8;
+const MAX_SCALE = 1.3;
+
+const LS_KEY = 'tamnora-console-appearance';
+const THEME_KEY = 'tamnora-console-theme';
+
+function lsGet(key) {
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+
+function lsSet(key, value) {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // storage unavailable
+  }
+}
+
+export function themeIds() {
+  return THEMES.map((t) => t.id);
+}
+
+export function fontIds() {
+  return FONT_PRESETS.map((f) => f.id);
+}
+
+export function resolveTheme(id) {
+  const legacy = id === 'light' ? 'paper' : id;
+  return THEMES.some((t) => t.id === legacy) ? legacy : DEFAULTS.theme;
+}
+
+export function resolveFont(id) {
+  return FONT_PRESETS.some((f) => f.id === id) ? id : DEFAULTS.font;
+}
+
+export function clampChatFont(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return DEFAULTS.chatFont;
+  return Math.min(MAX_CHAT_FONT, Math.max(MIN_CHAT_FONT, Math.round(n * 2) / 2));
+}
+
+export function clampScale(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return DEFAULTS.scale;
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, Math.round(n * 100) / 100));
+}
+
+export function normalizeAppearance(raw) {
+  const value = raw && typeof raw === 'object' ? raw : {};
+  return {
+    theme: resolveTheme(value.theme),
+    font: resolveFont(value.font),
+    chatFont: clampChatFont(value.chatFont),
+    scale: clampScale(value.scale),
+  };
+}
+
+export function nextTheme(id) {
+  const ids = themeIds();
+  const index = ids.indexOf(resolveTheme(id));
+  return ids[(index + 1) % ids.length];
+}
+
+/** Lee la apariencia cacheada en localStorage (para aplicar antes del render). */
+export function readLocalAppearance() {
+  let data = null;
+  try {
+    data = JSON.parse(lsGet(LS_KEY) || 'null');
+  } catch {
+    data = null;
+  }
+  const stored = data && typeof data === 'object' ? data : {};
+  return {
+    theme: stored.theme ?? lsGet(THEME_KEY) ?? undefined,
+    font: stored.font,
+    chatFont: stored.chatFont,
+    scale: stored.scale,
+  };
+}
+
+/** Inyecta (o quita) la hoja de Google Fonts del preset elegido. */
+export function loadFontPreset(preset) {
+  const existing = document.getElementById('tamnora-fonts');
+  if (!preset || !preset.google) {
+    existing?.remove();
+    return;
+  }
+  const href = `https://fonts.googleapis.com/css2?${preset.google}&display=swap`;
+  if (!existing) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.id = 'tamnora-fonts';
+    link.href = href;
+    document.head.appendChild(link);
+    return;
+  }
+  if (existing.getAttribute('href') !== href) existing.setAttribute('href', href);
+}
+
+/** Guarda la apariencia resuelta en localStorage (con la tipografía ya resuelta). */
+export function writeLocalAppearance(raw) {
+  const a = normalizeAppearance(raw);
+  const font = FONT_PRESETS.find((f) => f.id === a.font) ?? FONT_PRESETS[0];
+  lsSet(
+    LS_KEY,
+    JSON.stringify({
+      theme: a.theme,
+      font: a.font,
+      fontCss: { sans: font.sans, serif: font.serif, mono: font.mono },
+      google: font.google,
+      chatFont: a.chatFont,
+      scale: a.scale,
+    })
+  );
+  lsSet(THEME_KEY, a.theme);
+}
+
+/** Aplica tema, tipografía, tamaño de chat y escala al documento. */
+export function applyAppearance(raw, { persist = true } = {}) {
+  const a = normalizeAppearance(raw);
+  const theme = THEMES.find((t) => t.id === a.theme) ?? THEMES[0];
+  const font = FONT_PRESETS.find((f) => f.id === a.font) ?? FONT_PRESETS[0];
+  const root = document.documentElement;
+
+  root.dataset.theme = theme.id;
+  root.dataset.scheme = theme.scheme;
+  loadFontPreset(font);
+  root.style.setProperty('--sans', font.sans);
+  root.style.setProperty('--serif', font.serif);
+  root.style.setProperty('--mono', font.mono);
+  root.style.setProperty('--font', 'var(--sans)');
+  root.style.setProperty('--chat-font', `${a.chatFont}px`);
+  root.style.zoom = String(a.scale);
+
+  const meta = document.querySelector('meta[name="theme-color"]');
+  if (meta) meta.setAttribute('content', theme.metaColor);
+
+  if (persist) writeLocalAppearance(a);
+  return a;
+}

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

@@ -10,14 +10,51 @@
     <meta name="theme-color" content="#231a17" />
     <script>
       (function () {
-        var theme = null;
+        var root = document.documentElement;
+        var THEMES = ['paper', 'dark', 'midnight', 'nord', 'dracula', 'solarized', 'solarized-dark', 'bosque', 'vino', 'vercel', 'dark-plus', 'github', 'github-dark'];
+        var DARK = ['dark', 'midnight', 'nord', 'dracula', 'solarized-dark', 'vercel', 'dark-plus', 'github-dark'];
+        var appearance = null;
         try {
-          theme = localStorage.getItem('tamnora-console-theme');
+          appearance = JSON.parse(localStorage.getItem('tamnora-console-appearance') || 'null');
         } catch {
-          theme = null;
+          appearance = null;
+        }
+        var theme = appearance && appearance.theme;
+        if (!theme) {
+          try {
+            theme = localStorage.getItem('tamnora-console-theme');
+          } catch {
+            theme = null;
+          }
         }
         if (theme === 'light') theme = 'paper';
-        document.documentElement.dataset.theme = theme === 'dark' ? 'dark' : 'paper';
+        if (THEMES.indexOf(theme) < 0) {
+          theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'paper';
+        }
+        root.dataset.theme = theme;
+        root.dataset.scheme = DARK.indexOf(theme) >= 0 ? 'dark' : 'light';
+        if (!appearance) return;
+        if (appearance.fontCss) {
+          root.style.setProperty('--sans', appearance.fontCss.sans);
+          root.style.setProperty('--serif', appearance.fontCss.serif);
+          root.style.setProperty('--mono', appearance.fontCss.mono);
+          root.style.setProperty('--font', 'var(--sans)');
+        }
+        var href = appearance.google ? 'https://fonts.googleapis.com/css2?' + appearance.google + '&display=swap' : null;
+        var flink = document.getElementById('tamnora-fonts');
+        if (!href) {
+          if (flink) flink.remove();
+        } else if (!flink) {
+          flink = document.createElement('link');
+          flink.rel = 'stylesheet';
+          flink.id = 'tamnora-fonts';
+          flink.href = href;
+          document.head.appendChild(flink);
+        } else if (flink.getAttribute('href') !== href) {
+          flink.setAttribute('href', href);
+        }
+        if (appearance.chatFont) root.style.setProperty('--chat-font', appearance.chatFont + 'px');
+        if (appearance.scale) root.style.zoom = String(appearance.scale);
       })();
       (function () {
         // La consola resuelve el acceso con /api/auth/me; mientras tanto, oculta.
@@ -30,6 +67,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
+      id="tamnora-fonts"
       rel="stylesheet"
       href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Baskerville:wght@400;700&family=Manrope:wght@400;500;600;700&display=swap"
     />
@@ -37,7 +75,7 @@
   </head>
   <body>
     <header class="topbar">
-      <div class="brand"><span class="logo"><img src="/icons/logo.png" alt="Tamnora" /></span> <span id="topbar-section" class="topbar-section">chat</span> <span class="ver">v0.20.1</span></div>
+      <div class="brand"><span class="logo"><img src="/icons/logo.png" alt="Tamnora" /></span> <span id="topbar-section" class="topbar-section">chat</span> <span class="ver">v0.21.0</span></div>
       <nav class="tabs">
         <button class="tab active" data-tab="chat">chat</button>
         <button class="tab" data-tab="providers">proveedores</button>
@@ -490,6 +528,7 @@
           <button type="button" class="ajustes-tab" data-panel="asesor" role="tab">Asesor</button>
           <button type="button" class="ajustes-tab" data-panel="transcripcion" role="tab">Transcripción</button>
             <button type="button" class="ajustes-tab" data-panel="limites" role="tab">Límites</button>
+            <button type="button" class="ajustes-tab" data-panel="apariencia" role="tab">Apariencia</button>
           </nav>
 
         <div class="panel ajustes-panel active" data-panel="agente">
@@ -920,6 +959,40 @@
             <span id="limits-msg" class="summary"></span>
           </div>
         </div>
+
+        <div class="panel ajustes-panel" data-panel="apariencia">
+          <div class="row between">
+            <h2>Apariencia</h2>
+          </div>
+          <p class="muted verify-line">
+            Tema, tipografía y tamaño de la consola. Se guardan en tu casa y te siguen entre
+            dispositivos.
+          </p>
+          <label class="field"><span>tema</span></label>
+          <div id="apariencia-themes" class="theme-grid"></div>
+          <label class="field"><span>tipografía</span>
+            <select id="apariencia-font"></select>
+          </label>
+          <div id="apariencia-preview" class="apariencia-preview">
+            <strong>Tamnora Harness</strong>
+            <span>El veloz murciélago hindú comía feliz cardillo y kiwi.</span>
+            <code>const saludo = 'hola';</code>
+          </div>
+          <div class="voz-range">
+            <span class="muted">tamaño del chat</span>
+            <input id="apariencia-chat-font" type="range" min="12" max="20" step="0.5" />
+            <output id="apariencia-chat-font-out">14.5px</output>
+          </div>
+          <div class="voz-range">
+            <span class="muted">escala de la interfaz</span>
+            <input id="apariencia-scale" type="range" min="80" max="130" step="5" />
+            <output id="apariencia-scale-out">100%</output>
+          </div>
+          <div class="row">
+            <button id="apariencia-reset" class="btn" type="button">restablecer</button>
+            <span id="apariencia-msg" class="summary"></span>
+          </div>
+        </div>
         </div>
       </section>