@danieltmn/tamnora 0.20.1 → 0.21.0

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

@@ -72,6 +72,421 @@ html[data-theme='paper'] .tok-selector { color: #8a5a00; }
 html[data-theme='paper'] .tok-punct { color: #7a7669; }
 html[data-theme='paper'] .btn.primary { color: #fbf6ec; }
 
+html[data-theme='midnight'] {
+  color-scheme: dark;
+  --bg: #0b1220;
+  --panel: rgba(17, 24, 39, 0.86);
+  --rail: rgba(13, 19, 33, 0.82);
+  --theirs: #1b2438;
+  --mine: #6ea8fe;
+  --mine-soft: rgba(110, 168, 254, 0.14);
+  --text: #e2e8f0;
+  --muted: #94a3b8;
+  --border: rgba(226, 232, 240, 0.14);
+  --danger: #f87171;
+  --accent: #5b8def;
+  --accent-dark: #3b6fd4;
+  --accent-soft: rgba(91, 141, 239, 0.2);
+  --ok: #4ade80;
+  --warn: #fbbf24;
+  --info: #60a5fa;
+  --danger-soft: rgba(248, 113, 113, 0.16);
+  --ok-soft: rgba(74, 222, 128, 0.16);
+  --warn-soft: rgba(251, 191, 36, 0.16);
+  --info-soft: rgba(96, 165, 250, 0.16);
+  --muted-soft: rgba(148, 163, 184, 0.14);
+  --solid: #0d1524;
+  --primary-fg: #f8fafc;
+  --page-bg: #0b1220;
+}
+html[data-theme='midnight'] .tok-comment { color: #6b7a99; }
+html[data-theme='midnight'] .tok-string { color: #9ecbff; }
+html[data-theme='midnight'] .tok-number { color: #f0b866; }
+html[data-theme='midnight'] .tok-keyword { color: #7aa2f7; }
+html[data-theme='midnight'] .tok-tag { color: #7aa2f7; }
+html[data-theme='midnight'] .tok-attr { color: #7dd3a0; }
+html[data-theme='midnight'] .tok-selector { color: #e0af68; }
+html[data-theme='midnight'] .tok-punct { color: #8294b3; }
+
+html[data-theme='nord'] {
+  color-scheme: dark;
+  --bg: #2e3440;
+  --panel: rgba(46, 52, 64, 0.86);
+  --rail: rgba(59, 66, 82, 0.82);
+  --theirs: #3b4252;
+  --mine: #81a1c1;
+  --mine-soft: rgba(129, 161, 193, 0.16);
+  --text: #eceff4;
+  --muted: #9aa5b5;
+  --border: rgba(216, 222, 233, 0.16);
+  --danger: #bf616a;
+  --accent: #88c0d0;
+  --accent-dark: #5e81ac;
+  --accent-soft: rgba(136, 192, 208, 0.2);
+  --ok: #a3be8c;
+  --warn: #ebcb8b;
+  --info: #81a1c1;
+  --danger-soft: rgba(191, 97, 106, 0.18);
+  --ok-soft: rgba(163, 190, 140, 0.16);
+  --warn-soft: rgba(235, 203, 139, 0.16);
+  --info-soft: rgba(129, 161, 193, 0.16);
+  --muted-soft: rgba(154, 165, 181, 0.14);
+  --solid: #2b313d;
+  --primary-fg: #2e3440;
+  --page-bg: #2e3440;
+}
+html[data-theme='nord'] .tok-comment { color: #7b88a1; }
+html[data-theme='nord'] .tok-string { color: #a3be8c; }
+html[data-theme='nord'] .tok-number { color: #b48ead; }
+html[data-theme='nord'] .tok-keyword { color: #81a1c1; }
+html[data-theme='nord'] .tok-tag { color: #81a1c1; }
+html[data-theme='nord'] .tok-attr { color: #8fbcbb; }
+html[data-theme='nord'] .tok-selector { color: #ebcb8b; }
+html[data-theme='nord'] .tok-punct { color: #9aa5b5; }
+
+html[data-theme='dracula'] {
+  color-scheme: dark;
+  --bg: #282a36;
+  --panel: rgba(40, 42, 54, 0.88);
+  --rail: rgba(33, 34, 44, 0.85);
+  --theirs: #343746;
+  --mine: #ff79c6;
+  --mine-soft: rgba(255, 121, 198, 0.14);
+  --text: #f8f8f2;
+  --muted: #a7a9be;
+  --border: rgba(248, 248, 242, 0.14);
+  --danger: #ff5555;
+  --accent: #bd93f9;
+  --accent-dark: #9b6ef0;
+  --accent-soft: rgba(189, 147, 249, 0.2);
+  --ok: #50fa7b;
+  --warn: #f1fa8c;
+  --info: #8be9fd;
+  --danger-soft: rgba(255, 85, 85, 0.16);
+  --ok-soft: rgba(80, 250, 123, 0.14);
+  --warn-soft: rgba(241, 250, 140, 0.14);
+  --info-soft: rgba(139, 233, 253, 0.16);
+  --muted-soft: rgba(167, 169, 190, 0.14);
+  --solid: #21222c;
+  --primary-fg: #282a36;
+  --page-bg: #282a36;
+}
+html[data-theme='dracula'] .tok-comment { color: #6272a4; }
+html[data-theme='dracula'] .tok-string { color: #f1fa8c; }
+html[data-theme='dracula'] .tok-number { color: #bd93f9; }
+html[data-theme='dracula'] .tok-keyword { color: #ff79c6; }
+html[data-theme='dracula'] .tok-tag { color: #ff79c6; }
+html[data-theme='dracula'] .tok-attr { color: #50fa7b; }
+html[data-theme='dracula'] .tok-selector { color: #8be9fd; }
+html[data-theme='dracula'] .tok-punct { color: #a7a9be; }
+
+html[data-theme='solarized'] {
+  color-scheme: light;
+  --bg: #fdf6e3;
+  --panel: rgba(253, 246, 227, 0.82);
+  --rail: rgba(238, 232, 213, 0.78);
+  --theirs: #eee8d5;
+  --mine: #cb4b16;
+  --mine-soft: rgba(203, 75, 22, 0.1);
+  --text: #073642;
+  --muted: #657b83;
+  --border: rgba(7, 54, 66, 0.18);
+  --danger: #dc322f;
+  --accent: #b58900;
+  --accent-dark: #cb4b16;
+  --accent-soft: rgba(181, 137, 0, 0.14);
+  --ok: #859900;
+  --warn: #b58900;
+  --info: #268bd2;
+  --danger-soft: rgba(220, 50, 47, 0.12);
+  --ok-soft: rgba(133, 153, 0, 0.14);
+  --warn-soft: rgba(181, 137, 0, 0.14);
+  --info-soft: rgba(38, 139, 210, 0.12);
+  --muted-soft: rgba(101, 123, 131, 0.12);
+  --solid: #fdf6e3;
+  --primary-fg: #fdf6e3;
+  --page-bg: #fdf6e3;
+}
+html[data-theme='solarized'] .tok-comment { color: #93a1a1; }
+html[data-theme='solarized'] .tok-string { color: #2aa198; }
+html[data-theme='solarized'] .tok-number { color: #d33682; }
+html[data-theme='solarized'] .tok-keyword { color: #859900; }
+html[data-theme='solarized'] .tok-tag { color: #268bd2; }
+html[data-theme='solarized'] .tok-attr { color: #b58900; }
+html[data-theme='solarized'] .tok-selector { color: #cb4b16; }
+html[data-theme='solarized'] .tok-punct { color: #657b83; }
+
+html[data-theme='solarized-dark'] {
+  color-scheme: dark;
+  --bg: #002b36;
+  --panel: rgba(0, 43, 54, 0.88);
+  --rail: rgba(7, 54, 66, 0.82);
+  --theirs: #073642;
+  --mine: #cb4b16;
+  --mine-soft: rgba(203, 75, 22, 0.16);
+  --text: #eee8d5;
+  --muted: #93a1a1;
+  --border: rgba(238, 232, 213, 0.16);
+  --danger: #dc322f;
+  --accent: #b58900;
+  --accent-dark: #cb4b16;
+  --accent-soft: rgba(181, 137, 0, 0.2);
+  --ok: #859900;
+  --warn: #b58900;
+  --info: #268bd2;
+  --danger-soft: rgba(220, 50, 47, 0.18);
+  --ok-soft: rgba(133, 153, 0, 0.16);
+  --warn-soft: rgba(181, 137, 0, 0.16);
+  --info-soft: rgba(38, 139, 210, 0.16);
+  --muted-soft: rgba(147, 161, 161, 0.14);
+  --solid: #00252e;
+  --primary-fg: #002b36;
+  --page-bg: #002b36;
+}
+html[data-theme='solarized-dark'] .tok-comment { color: #586e75; }
+html[data-theme='solarized-dark'] .tok-string { color: #2aa198; }
+html[data-theme='solarized-dark'] .tok-number { color: #d33682; }
+html[data-theme='solarized-dark'] .tok-keyword { color: #859900; }
+html[data-theme='solarized-dark'] .tok-tag { color: #268bd2; }
+html[data-theme='solarized-dark'] .tok-attr { color: #b58900; }
+html[data-theme='solarized-dark'] .tok-selector { color: #cb4b16; }
+html[data-theme='solarized-dark'] .tok-punct { color: #93a1a1; }
+
+html[data-theme='bosque'] {
+  color-scheme: light;
+  --bg: #f2f4ec;
+  --panel: rgba(244, 246, 238, 0.8);
+  --rail: rgba(231, 235, 223, 0.75);
+  --theirs: #e7ebdf;
+  --mine: #4f8a4a;
+  --mine-soft: rgba(79, 138, 74, 0.1);
+  --text: #1e241c;
+  --muted: #5f6b59;
+  --border: rgba(30, 36, 28, 0.16);
+  --danger: #a33a2a;
+  --accent: #4f8a4a;
+  --accent-dark: #3d6f39;
+  --accent-soft: rgba(79, 138, 74, 0.12);
+  --ok: #4f8a4a;
+  --warn: #8a5a00;
+  --info: #3f6ea6;
+  --danger-soft: rgba(163, 58, 42, 0.1);
+  --ok-soft: rgba(79, 138, 74, 0.12);
+  --warn-soft: rgba(138, 90, 0, 0.12);
+  --info-soft: rgba(63, 110, 166, 0.12);
+  --muted-soft: rgba(95, 107, 89, 0.12);
+  --solid: #f4f6ee;
+  --primary-fg: #f8faf4;
+  --page-bg: #f2f4ec;
+}
+html[data-theme='bosque'] .tok-comment { color: #77836f; }
+html[data-theme='bosque'] .tok-string { color: #3f6b46; }
+html[data-theme='bosque'] .tok-number { color: #8a5a00; }
+html[data-theme='bosque'] .tok-keyword { color: #a3341f; }
+html[data-theme='bosque'] .tok-tag { color: #a3341f; }
+html[data-theme='bosque'] .tok-attr { color: #4f6b46; }
+html[data-theme='bosque'] .tok-selector { color: #8a5a00; }
+html[data-theme='bosque'] .tok-punct { color: #5f6b59; }
+
+html[data-theme='vino'] {
+  color-scheme: light;
+  --bg: #f7eeee;
+  --panel: rgba(248, 240, 240, 0.8);
+  --rail: rgba(238, 227, 228, 0.75);
+  --theirs: #eedfdf;
+  --mine: #a3344a;
+  --mine-soft: rgba(163, 52, 74, 0.1);
+  --text: #26181a;
+  --muted: #6d5a5d;
+  --border: rgba(38, 24, 26, 0.16);
+  --danger: #934022;
+  --accent: #a3344a;
+  --accent-dark: #82273a;
+  --accent-soft: rgba(163, 52, 74, 0.12);
+  --ok: #66865d;
+  --warn: #8a5a00;
+  --info: #3f6ea6;
+  --danger-soft: rgba(147, 64, 34, 0.1);
+  --ok-soft: rgba(102, 134, 93, 0.14);
+  --warn-soft: rgba(138, 90, 0, 0.12);
+  --info-soft: rgba(63, 110, 166, 0.12);
+  --muted-soft: rgba(109, 90, 93, 0.12);
+  --solid: #f8f0f0;
+  --primary-fg: #fbf5f5;
+  --page-bg: #f7eeee;
+}
+html[data-theme='vino'] .tok-comment { color: #837276; }
+html[data-theme='vino'] .tok-string { color: #7a4a2c; }
+html[data-theme='vino'] .tok-number { color: #8a5a00; }
+html[data-theme='vino'] .tok-keyword { color: #a3341f; }
+html[data-theme='vino'] .tok-tag { color: #a3341f; }
+html[data-theme='vino'] .tok-attr { color: #4f6b46; }
+html[data-theme='vino'] .tok-selector { color: #8a5a00; }
+html[data-theme='vino'] .tok-punct { color: #6d5a5d; }
+
+html[data-theme='vercel'] {
+  color-scheme: dark;
+  --bg: #000000;
+  --panel: rgba(10, 10, 10, 0.86);
+  --rail: rgba(8, 8, 8, 0.85);
+  --theirs: #111111;
+  --mine: #0070f3;
+  --mine-soft: rgba(0, 112, 243, 0.14);
+  --text: #ededed;
+  --muted: #8f8f8f;
+  --border: rgba(255, 255, 255, 0.14);
+  --danger: #ff5c5c;
+  --accent: #0070f3;
+  --accent-dark: #3291ff;
+  --accent-soft: rgba(0, 112, 243, 0.18);
+  --ok: #50e3c2;
+  --warn: #f5a623;
+  --info: #3291ff;
+  --danger-soft: rgba(255, 92, 92, 0.16);
+  --ok-soft: rgba(80, 227, 194, 0.16);
+  --warn-soft: rgba(245, 166, 35, 0.16);
+  --info-soft: rgba(50, 145, 255, 0.16);
+  --muted-soft: rgba(143, 143, 143, 0.14);
+  --solid: #0a0a0a;
+  --primary-fg: #ffffff;
+  --page-bg: #000000;
+}
+html[data-theme='vercel'] .tok-comment { color: #6f6f6f; }
+html[data-theme='vercel'] .tok-string { color: #50e3c2; }
+html[data-theme='vercel'] .tok-number { color: #f5a623; }
+html[data-theme='vercel'] .tok-keyword { color: #3291ff; }
+html[data-theme='vercel'] .tok-tag { color: #3291ff; }
+html[data-theme='vercel'] .tok-attr { color: #50e3c2; }
+html[data-theme='vercel'] .tok-selector { color: #f5a623; }
+html[data-theme='vercel'] .tok-punct { color: #8f8f8f; }
+
+html[data-theme='dark-plus'] {
+  color-scheme: dark;
+  --bg: #1e1e1e;
+  --panel: rgba(37, 37, 38, 0.87);
+  --rail: rgba(30, 30, 30, 0.86);
+  --theirs: #2d2d2d;
+  --mine: #569cd6;
+  --mine-soft: rgba(86, 156, 214, 0.14);
+  --text: #d4d4d4;
+  --muted: #9a9a9a;
+  --border: rgba(255, 255, 255, 0.12);
+  --danger: #f14c4c;
+  --accent: #0e639c;
+  --accent-dark: #1177bb;
+  --accent-soft: rgba(14, 99, 156, 0.28);
+  --ok: #89d185;
+  --warn: #cca700;
+  --info: #3794ff;
+  --danger-soft: rgba(241, 76, 76, 0.16);
+  --ok-soft: rgba(137, 209, 133, 0.16);
+  --warn-soft: rgba(204, 167, 0, 0.16);
+  --info-soft: rgba(55, 148, 255, 0.16);
+  --muted-soft: rgba(154, 154, 154, 0.14);
+  --solid: #252526;
+  --primary-fg: #ffffff;
+  --page-bg: #1e1e1e;
+}
+html[data-theme='dark-plus'] .tok-comment { color: #6a9955; }
+html[data-theme='dark-plus'] .tok-string { color: #ce9178; }
+html[data-theme='dark-plus'] .tok-number { color: #b5cea8; }
+html[data-theme='dark-plus'] .tok-keyword { color: #569cd6; }
+html[data-theme='dark-plus'] .tok-tag { color: #569cd6; }
+html[data-theme='dark-plus'] .tok-attr { color: #9cdcfe; }
+html[data-theme='dark-plus'] .tok-selector { color: #d7ba7d; }
+html[data-theme='dark-plus'] .tok-punct { color: #d4d4d4; }
+
+html[data-theme='github'] {
+  color-scheme: light;
+  --bg: #ffffff;
+  --panel: rgba(246, 248, 250, 0.85);
+  --rail: rgba(246, 248, 250, 0.85);
+  --theirs: #f6f8fa;
+  --mine: #0969da;
+  --mine-soft: rgba(9, 105, 218, 0.08);
+  --text: #1f2328;
+  --muted: #656d76;
+  --border: rgba(31, 35, 40, 0.16);
+  --danger: #cf222e;
+  --accent: #0969da;
+  --accent-dark: #0757ba;
+  --accent-soft: rgba(9, 105, 218, 0.1);
+  --ok: #1a7f37;
+  --warn: #9a6700;
+  --info: #0969da;
+  --danger-soft: rgba(207, 34, 46, 0.1);
+  --ok-soft: rgba(26, 127, 55, 0.12);
+  --warn-soft: rgba(154, 103, 0, 0.12);
+  --info-soft: rgba(9, 105, 218, 0.1);
+  --muted-soft: rgba(101, 109, 118, 0.12);
+  --solid: #ffffff;
+  --primary-fg: #ffffff;
+  --page-bg: #ffffff;
+}
+html[data-theme='github'] .tok-comment { color: #6e7781; }
+html[data-theme='github'] .tok-string { color: #0a3069; }
+html[data-theme='github'] .tok-number { color: #0550ae; }
+html[data-theme='github'] .tok-keyword { color: #cf222e; }
+html[data-theme='github'] .tok-tag { color: #116329; }
+html[data-theme='github'] .tok-attr { color: #0550ae; }
+html[data-theme='github'] .tok-selector { color: #0550ae; }
+html[data-theme='github'] .tok-punct { color: #1f2328; }
+
+html[data-theme='github-dark'] {
+  color-scheme: dark;
+  --bg: #0d1117;
+  --panel: rgba(22, 27, 34, 0.9);
+  --rail: rgba(13, 17, 23, 0.86);
+  --theirs: #161b22;
+  --mine: #58a6ff;
+  --mine-soft: rgba(88, 166, 255, 0.14);
+  --text: #e6edf3;
+  --muted: #8b949e;
+  --border: rgba(240, 246, 252, 0.14);
+  --danger: #f85149;
+  --accent: #58a6ff;
+  --accent-dark: #79c0ff;
+  --accent-soft: rgba(88, 166, 255, 0.18);
+  --ok: #3fb950;
+  --warn: #d29922;
+  --info: #58a6ff;
+  --danger-soft: rgba(248, 81, 73, 0.16);
+  --ok-soft: rgba(63, 185, 80, 0.16);
+  --warn-soft: rgba(210, 153, 34, 0.16);
+  --info-soft: rgba(88, 166, 255, 0.16);
+  --muted-soft: rgba(139, 148, 158, 0.14);
+  --solid: #161b22;
+  --primary-fg: #0d1117;
+  --page-bg: #0d1117;
+}
+html[data-theme='github-dark'] .tok-comment { color: #8b949e; }
+html[data-theme='github-dark'] .tok-string { color: #a5d6ff; }
+html[data-theme='github-dark'] .tok-number { color: #79c0ff; }
+html[data-theme='github-dark'] .tok-keyword { color: #ff7b72; }
+html[data-theme='github-dark'] .tok-tag { color: #7ee787; }
+html[data-theme='github-dark'] .tok-attr { color: #79c0ff; }
+html[data-theme='github-dark'] .tok-selector { color: #d2a8ff; }
+html[data-theme='github-dark'] .tok-punct { color: #c9d1d9; }
+
+/* ajustes: apariencia (tema + tipografía + tamaño) ------------------------ */
+.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
+.theme-swatch {
+  display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left;
+  border: 1px solid var(--border); border-radius: 10px; background: var(--theirs);
+  color: var(--text); cursor: pointer; font: 600 12px var(--sans);
+}
+.theme-swatch:hover { border-color: var(--accent); }
+.theme-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
+.theme-swatch-dot { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--border); }
+.theme-swatch-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.apariencia-preview {
+  display: flex; flex-direction: column; gap: 5px; padding: 12px 14px;
+  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
+}
+.apariencia-preview strong { font-family: var(--serif); font-size: 20px; letter-spacing: -0.02em; }
+.apariencia-preview span { color: var(--muted); }
+.apariencia-preview code { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
+
 * { box-sizing: border-box; }
 [hidden] { display: none !important; }
 
@@ -159,8 +574,8 @@ pre, code, kbd, samp { font-family: var(--mono); }
 /* El icono muestra el tema al que se va a cambiar: claro -> luna, oscuro -> sol. */
 #theme-toggle .ico-sun { display: none; }
 #theme-toggle .ico-moon { display: block; }
-html[data-theme='dark'] #theme-toggle .ico-sun { display: block; }
-html[data-theme='dark'] #theme-toggle .ico-moon { display: none; }
+html[data-scheme='dark'] #theme-toggle .ico-sun { display: block; }
+html[data-scheme='dark'] #theme-toggle .ico-moon { display: none; }
 .menu-pop {
   position: absolute;
   top: calc(100% + 4px);

package/harness/packages/server/src/lib/appearance.js

@@ -0,0 +1,70 @@
+// Apariencia de la consola (app.json -> appearance): tema, tipografía y tamaño.
+// Los ids deben coincidir con public/appearance.js; acá solo se valida y acota.
+
+export const THEME_IDS = [
+  'paper',
+  'dark',
+  'midnight',
+  'nord',
+  'dracula',
+  'solarized',
+  'solarized-dark',
+  'bosque',
+  'vino',
+  'vercel',
+  'dark-plus',
+  'github',
+  'github-dark',
+];
+
+export const FONT_IDS = ['clasico', 'sistema', 'plex', 'inter', 'jetbrains', 'fira', 'source'];
+
+export const DEFAULT_APPEARANCE = { 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;
+
+export function resolveThemeId(id) {
+  const legacy = id === 'light' ? 'paper' : id;
+  return THEME_IDS.includes(legacy) ? legacy : DEFAULT_APPEARANCE.theme;
+}
+
+export function resolveFontId(id) {
+  return FONT_IDS.includes(id) ? id : DEFAULT_APPEARANCE.font;
+}
+
+export function clampChatFont(value) {
+  const n = Number(value);
+  if (!Number.isFinite(n)) return DEFAULT_APPEARANCE.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 DEFAULT_APPEARANCE.scale;
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, Math.round(n * 100) / 100));
+}
+
+/** Apariencia efectiva: defaults + lo guardado en app.json. */
+export function resolveAppearance(app) {
+  const saved = app?.appearance && typeof app.appearance === 'object' ? app.appearance : {};
+  return {
+    theme: resolveThemeId(saved.theme),
+    font: resolveFontId(saved.font),
+    chatFont: clampChatFont(saved.chatFont),
+    scale: clampScale(saved.scale),
+  };
+}
+
+/** Aplica un body de PUT sobre la apariencia actual. */
+export function sanitizeAppearance(body, current = DEFAULT_APPEARANCE) {
+  const value = body && typeof body === 'object' ? body : {};
+  const next = { ...current };
+  if ('theme' in value) next.theme = resolveThemeId(value.theme);
+  if ('font' in value) next.font = resolveFontId(value.font);
+  if ('chatFont' in value) next.chatFont = clampChatFont(value.chatFont);
+  if ('scale' in value) next.scale = clampScale(value.scale);
+  return next;
+}

package/harness/packages/server/src/routes/providers.js

@@ -1,4 +1,5 @@
-import { MODES, MODE_IDS, resolveMode, PROVIDER_META, testProviderConnection } from '../lib/core.js';
+import { MODES, MODE_IDS, resolveMode, PROVIDER_META, testProviderConnection, readApp, writeApp } from '../lib/core.js';
+import { resolveAppearance, sanitizeAppearance } from '../lib/appearance.js';
 import { readJson, sendJson, sendError } from '../lib/http.js';
 
 const ID_PATTERN = /^[a-z0-9][a-z0-9_-]{0,39}$/i;
@@ -80,6 +81,7 @@ export function registerProviders(route, ctx) {
     strictScope: ctx.effectiveStrictScope(),
     mcpMode: ctx.effectiveMcpMode(),
     mcpPinned: ctx.effectiveMcpPinned(),
+    appearance: resolveAppearance(ctx.app),
   });
 
   route('GET', '/api/settings', ({ res }) => {
@@ -108,6 +110,12 @@ export function registerProviders(route, ctx) {
       const value = Number(body[key]);
       ctx.store.setSetting(key, Number.isFinite(value) && value > 0 ? Math.round(value) : 0);
     }
+    if (body.appearance !== undefined) {
+      const app = readApp();
+      app.appearance = sanitizeAppearance(body.appearance, resolveAppearance(app));
+      writeApp(app);
+      ctx.app = app;
+    }
     sendJson(res, 200, { settings: settingsView() });
   });
 

package/harness/packages/server/test/appearance-route.test.js

@@ -0,0 +1,74 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { mkdtemp } from 'node:fs/promises';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { createTamnoraServer } from '../src/index.js';
+import { setHome, readApp } from '../../core/src/index.js';
+
+const fakeProvider = {
+  id: 'fake',
+  async streamChat(_config, { onEvent }) {
+    onEvent?.({ type: 'text', delta: 'hola', full: 'hola' });
+    return { content: 'hola', reasoning: '', toolCalls: [] };
+  },
+};
+
+async function startServer(overrides = {}) {
+  const cwd = overrides.cwd ?? (await mkdtemp(path.join(tmpdir(), 'tamnora-app-')));
+  setHome(cwd);
+  const instance = await createTamnoraServer({
+    cwd,
+    dbPath: path.join(cwd, 'tamnora.db'),
+    loadMcp: false,
+    resolveProvider: () => ({ provider: fakeProvider, config: {} }),
+    ...overrides,
+  });
+  const info = await instance.listen({ port: 0 });
+  return { instance, base: info.url, cwd };
+}
+
+test('la apariencia arranca con los defaults', async () => {
+  const { instance, base } = await startServer();
+  try {
+    const { settings } = await (await fetch(`${base}/api/settings`)).json();
+    assert.deepEqual(settings.appearance, { theme: 'paper', font: 'clasico', chatFont: 14.5, scale: 1 });
+  } finally {
+    await instance.close();
+  }
+});
+
+test('la apariencia se guarda en app.json y se valida', async () => {
+  const { instance, base } = await startServer();
+  try {
+    const put = await fetch(`${base}/api/settings`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ appearance: { theme: 'nord', font: 'plex', chatFont: 18, scale: 1.1 } }),
+    });
+    assert.equal(put.status, 200);
+    const saved = (await put.json()).settings.appearance;
+    assert.deepEqual(saved, { theme: 'nord', font: 'plex', chatFont: 18, scale: 1.1 });
+    assert.equal(readApp().appearance.theme, 'nord');
+
+    const reloaded = (await (await fetch(`${base}/api/settings`)).json()).settings.appearance;
+    assert.deepEqual(reloaded, saved);
+  } finally {
+    await instance.close();
+  }
+});
+
+test('la apariencia rechaza valores fuera de rango', async () => {
+  const { instance, base } = await startServer();
+  try {
+    const put = await fetch(`${base}/api/settings`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ appearance: { theme: 'inventado', font: 'raro', chatFont: 99, scale: 5 } }),
+    });
+    const saved = (await put.json()).settings.appearance;
+    assert.deepEqual(saved, { theme: 'paper', font: 'clasico', chatFont: 20, scale: 1.3 });
+  } finally {
+    await instance.close();
+  }
+});