La barra de pestanas ya no queda debajo del titulo nativo (macOS)

La barra existia pero estaba DIBUJADA DETRAS de la barra de titulo de macOS:
solo asomaban ~12 px por debajo, y como el titulo nativo es translucido hasta
se tenia del color de la barra. Con el rediseno estilo Chrome el sintoma se
volvio evidente (no se veian ni las pestanas ni los controles), pero el fallo
venia de antes: no lo causo el CSS.

Causa (medida en vivo con instrumentacion): en macOS las coordenadas de los
webviews HIJOS son relativas al MARCO de la ventana (incluye el titulo) y
ademas `inner_size()` devuelve el marco, no el area de contenido
(inner_size == outer_size e inner_position == outer_position). Al colocar la
barra en y=0 quedaba bajo el titulo, y el contenido en y=40 arrancaba 12 px
por debajo, tapando el resto.

Arreglo: `top_offset()` compensa el alto del titulo (28 pt) SOLO cuando hace
falta. La deteccion es en caliente -- si el marco y el interior miden lo mismo
hay que compensar; el dia que Tauri lo corrija la resta dejara de ser 0 y no se
compensara nada -- y en Windows/Linux devuelve 0 (ahi las coordenadas ya son
del area de cliente). Se aplica en los tres sitios que colocan webviews:
layout_all, la creacion de la barra y la creacion de cada pestana.

Verificado en el Mac con la app real: barra completa y alineada bajo el
titulo, redimensionado, pestana nueva, cierre de pestana y cambio de pestana.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

dist/index.html

@@ -11,26 +11,31 @@
         emite   ls-ready, ls-new-tab, ls-activate, ls-close-tab, ls-reload, ls-zoom, ls-cycle, ls-activate-n
     -->
     <style>
+      /* Paleta estilo Chrome: la barra es una FRANJA más oscura y la pestaña activa es una
+         tarjeta del color del contenido que se funde con él (sin línea debajo). */
       :root {
-        --bg: #f4f4f5;          /* zinc-100 */
+        --bg: #dee1e6;          /* franja de pestañas (Chrome claro) */
-        --fg: #3f3f46;          /* zinc-700 */
+        --fg: #45474a;
-        --muted: #a1a1aa;       /* zinc-400 */
+        --muted: #5f6368;
-        --tab-bg: transparent;
         --tab-active-bg: #ffffff;
-        --tab-active-fg: #18181b;
+        --tab-active-fg: #202124;
         --accent: #6366f1;      /* indigo-500, color de Labstream */
-        --border: #e4e4e7;      /* zinc-200 */
+        --border: #c9ccd1;      /* línea bajo la barra (la tapa la pestaña activa) */
-        --hover: rgba(0, 0, 0, 0.05);
+        --hover: rgba(255, 255, 255, 0.55);  /* píldora de hover en pestañas inactivas */
+        --btn-hover: rgba(0, 0, 0, 0.08);
+        --sep: rgba(0, 0, 0, 0.22);          /* separador fino entre pestañas inactivas */
       }
       @media (prefers-color-scheme: dark) {
         :root {
-          --bg: #18181b;
+          --bg: #202124;        /* franja (Chrome oscuro) */
-          --fg: #d4d4d8;
+          --fg: #bdc1c6;
-          --muted: #71717a;
+          --muted: #80868b;
-          --tab-active-bg: #27272a;
+          --tab-active-bg: #18181b;  /* mismo fondo que la app → pestaña fundida con el contenido */
-          --tab-active-fg: #fafafa;
+          --tab-active-fg: #e8eaed;
-          --border: #27272a;
+          --border: #101013;
-          --hover: rgba(255, 255, 255, 0.07);
+          --hover: rgba(255, 255, 255, 0.08);
+          --btn-hover: rgba(255, 255, 255, 0.1);
+          --sep: rgba(255, 255, 255, 0.25);
         }
       }
       * { box-sizing: border-box; }
@@ -48,18 +53,22 @@
       }
       #bar {
         display: flex;
-        align-items: stretch;
+        align-items: center;
-        gap: 4px;
+        gap: 2px;
         height: 40px;
-        padding: 5px 8px 0;
+        padding: 0 6px 0 8px;
         border-bottom: 1px solid var(--border);
       }
       #tabs {
         display: flex;
-        align-items: stretch;
+        align-items: flex-end;
-        gap: 2px;
         flex: 1 1 auto;
         min-width: 0;
+        /* Se extiende 1px sobre el borde inferior de la barra para que la pestaña ACTIVA
+           lo tape con su propio fondo y quede FUNDIDA con el contenido (look Chrome). */
+        align-self: stretch;
+        margin-bottom: -1px;
+        padding: 0 4px;
         overflow-x: auto;
         scrollbar-width: none;
       }
@@ -67,28 +76,64 @@
       .tab {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 7px;
-        flex: 0 1 200px;
+        flex: 0 1 220px;
-        min-width: 96px;
+        min-width: 100px;
-        padding: 0 6px 0 12px;
+        height: 30px;
-        border-radius: 8px 8px 0 0;
+        margin-bottom: 5px;
-        background: var(--tab-bg);
+        padding: 0 6px 0 10px;
+        border-radius: 9px;         /* inactiva: píldora redondeada (hover) */
         position: relative;
-        overflow: hidden;
+        overflow: visible;          /* deja asomar las curvas de la base de la activa */
       }
-      .tab:hover { background: var(--hover); }
+      .tab:not(.active):hover { background: var(--hover); }
+      /* Separador fino a la IZQUIERDA de cada inactiva; se oculta pegado a la activa,
+         al hover y en la primera (igual que Chrome). */
+      .tab:not(.active)::before {
+        content: "";
+        position: absolute;
+        left: -1px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 16px;
+        background: var(--sep);
+      }
+      .tab:first-child::before,
+      .tab:hover::before,
+      .tab.active + .tab::before,
+      .tab:hover + .tab::before { display: none; }
       .tab.active {
         background: var(--tab-active-bg);
         color: var(--tab-active-fg);
-        box-shadow: 0 -1px 0 var(--border), 1px 0 0 var(--border), -1px 0 0 var(--border);
+        height: 35px;
+        margin-bottom: 0;           /* su base cae 1px SOBRE el borde de la barra y lo tapa */
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
       }
-      .tab.active::before {
+      /* Curvas cóncavas de Chrome en la base de la pestaña activa: dos piezas de 8px con
+         un cuarto de círculo transparente que "derrama" el fondo hacia los lados. */
+      .tab.active::before,
+      .tab.active::after {
         content: "";
         position: absolute;
-        top: 0; left: 0; right: 0;
+        bottom: 0;
-        height: 2px;
+        width: 8px;
-        background: var(--accent);
+        height: 8px;
-        border-radius: 2px 2px 0 0;
+      }
+      .tab.active::before {
+        left: -8px;
+        background: radial-gradient(circle at 0 0, transparent 8px, var(--tab-active-bg) 8.5px);
+      }
+      .tab.active::after {
+        right: -8px;
+        background: radial-gradient(circle at 8px 0, transparent 8px, var(--tab-active-bg) 8.5px);
+      }
+      .tab .favicon {
+        flex: 0 0 auto;
+        width: 14px;
+        height: 14px;
+        border-radius: 3px;
       }
       .tab .titulo {
         flex: 1 1 auto;
@@ -103,26 +148,26 @@
         height: 18px;
         display: grid;
         place-items: center;
-        border-radius: 5px;
+        border-radius: 50%;         /* circulito, como el × de Chrome */
         color: var(--muted);
         font-size: 13px;
         line-height: 1;
         visibility: hidden;
       }
       .tab:hover .cerrar, .tab.active .cerrar { visibility: visible; }
-      .tab .cerrar:hover { background: var(--hover); color: var(--tab-active-fg); }
+      .tab .cerrar:hover { background: var(--btn-hover); color: var(--tab-active-fg); }
       button {
         appearance: none;
         border: 0;
         background: transparent;
         color: var(--fg);
         font: inherit;
-        border-radius: 7px;
+        border-radius: 50%;
         cursor: default;
         display: grid;
         place-items: center;
       }
-      button:hover { background: var(--hover); }
+      button:hover { background: var(--btn-hover); }
       .icono {
         flex: 0 0 auto;
         width: 30px;
@@ -146,10 +191,22 @@
         font-size: 11.5px;
       }
       #z-pct.activo { color: var(--accent); font-weight: 600; }
+      #version {
+        flex: 0 0 auto;
+        margin: 2px 0 7px;
+        padding: 0 7px;
+        color: var(--muted);
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+      #version:hover { color: var(--accent); }
     </style>
   </head>
   <body>
     <div id="bar">
+      <button class="icono" id="atras" title="Atrás (⌘/Ctrl+[)">←</button>
+      <button class="icono" id="adelante" title="Adelante (⌘/Ctrl+])">→</button>
       <div id="tabs" title=""></div>
       <button class="icono" id="nueva" title="Nueva pestaña (⌘/Ctrl+T)">+</button>
       <button class="icono" id="recargar" title="Recargar (⌘/Ctrl+R)">⟳</button>
@@ -158,6 +215,7 @@
         <button id="z-pct" title="Restablecer zoom (⌘/Ctrl+0)">100%</button>
         <button id="z-mas" title="Acercar (⌘/Ctrl++)">+</button>
       </div>
+      <button id="version" title="Versión de la app · clic: buscar actualización"></button>
       <button class="icono" id="menu" title="Opciones de la app">⋮</button>
     </div>
     <script>
@@ -171,6 +229,16 @@
 
       const $tabs = document.getElementById("tabs");
       const $pct = document.getElementById("z-pct");
+      const $ver = document.getElementById("version");
+
+      // Favicon de las pestañas (look Chrome): mini logo Labstream en SVG inline —
+      // cuadrado indigo con la "L" — para no depender de archivos ni de la red.
+      const FAVICON = "data:image/svg+xml," + encodeURIComponent(
+        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>" +
+        "<rect width='16' height='16' rx='4' fill='#6366f1'/>" +
+        "<path d='M5.2 3.8v7h5.6' stroke='#fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/>" +
+        "</svg>",
+      );
 
       function render() {
         $tabs.textContent = "";
@@ -179,6 +247,12 @@
           el.className = "tab" + (t.active ? " active" : "");
           el.title = t.title;
 
+          const fav = document.createElement("img");
+          fav.className = "favicon";
+          fav.src = FAVICON;
+          fav.alt = "";
+          el.appendChild(fav);
+
           const titulo = document.createElement("span");
           titulo.className = "titulo";
           titulo.textContent = t.title || "Labstream OS";
@@ -206,6 +280,7 @@
 
         $pct.textContent = estado.zoom + "%";
         $pct.classList.toggle("activo", estado.zoom !== 100);
+        $ver.textContent = estado.version ? "v" + estado.version : "";
       }
 
       if (E) {
@@ -215,10 +290,13 @@
         });
       }
 
+      document.getElementById("atras").addEventListener("click", () => emitir("ls-nav", { dir: -1 }));
+      document.getElementById("adelante").addEventListener("click", () => emitir("ls-nav", { dir: 1 }));
       document.getElementById("nueva").addEventListener("click", () => emitir("ls-new-tab", {}));
       document.getElementById("recargar").addEventListener("click", () => emitir("ls-reload", {}));
       // Menú de OPCIONES de la app (nativo, lo pinta Rust): botón ⋮ o clic derecho en la barra.
       document.getElementById("menu").addEventListener("click", () => emitir("ls-menu", {}));
+      $ver.addEventListener("click", () => emitir("ls-check-update", {}));
       document.getElementById("bar").addEventListener("contextmenu", (e) => {
         e.preventDefault();
         emitir("ls-menu", {});
@@ -236,9 +314,11 @@
         const mod = e.metaKey || e.ctrlKey;
         if (!mod) return;
         const k = e.key;
-        if (k === "t" || k === "T") { e.preventDefault(); emitir("ls-new-tab", {}); }
+        if (k === "t" || k === "T") { e.preventDefault(); emitir(e.shiftKey ? "ls-reopen" : "ls-new-tab", {}); }
         else if (k === "w" || k === "W") { e.preventDefault(); emitir("ls-close-tab", {}); }
         else if ((k === "r" || k === "R") && !e.shiftKey) { e.preventDefault(); emitir("ls-reload", {}); }
+        else if (k === "[") { e.preventDefault(); emitir("ls-nav", { dir: -1 }); }
+        else if (k === "]") { e.preventDefault(); emitir("ls-nav", { dir: 1 }); }
         else if (k === "=" || k === "+") { e.preventDefault(); emitir("ls-zoom", { dir: 1 }); }
         else if (k === "-") { e.preventDefault(); emitir("ls-zoom", { dir: -1 }); }
         else if (k === "0") { e.preventDefault(); emitir("ls-zoom", { dir: 0 }); }

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "labstream-desktop",
-  "version": "1.0.0",
+  "version": "1.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "labstream-desktop",
-      "version": "1.0.0",
+      "version": "1.4.0",
       "devDependencies": {
         "@tauri-apps/cli": "^2"
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "labstream-desktop",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "private": true,
   "description": "App de escritorio (Windows) que envuelve Labstream OS — cliente del servidor del NAS.",
   "scripts": {

src-tauri/Cargo.lock

@@ -1946,7 +1946,7 @@ dependencies = [
 
 [[package]]
 name = "labstream-desktop"
-version = "1.2.0"
+version = "1.4.2"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "labstream-desktop"
-version = "1.2.0"
+version = "1.4.2"
 description = "Cliente de escritorio de Labstream OS"
 authors = ["Labstream SAS"]
 edition = "2021"

src-tauri/src/lib.rs

@@ -17,6 +17,11 @@
 //   - plugin `updater`: busca versión nueva en los Releases de GitHub y se actualiza sola.
 //   - bandeja (tray) + "cerrar = ocultar": sigue corriendo y notificando en segundo plano.
 // Y lo nuevo:
+//   - ATRÁS/ADELANTE: botones ← → en la barra, ⌘[ / ⌘] (Alt+←/→ en Windows) y menú
+//     Historial (macOS). Antes una página sin menú propio era un callejón sin salida.
+//   - «Reabrir pestaña cerrada» (⌘/Ctrl+Shift+T), como en el navegador.
+//   - Globo de NO-LEÍDOS en el icono (evento `ls-badge` desde la web app): número en el
+//     Dock (macOS), punto rojo en la barra de tareas (Windows) y tooltip de la bandeja.
 //   - ZOOM de interfaz (Cmd/Ctrl +/−/0 y Ctrl+rueda) con persistencia entre sesiones.
 //   - Sesión restaurada: al reabrir vuelve con las mismas pestañas y tamaño de ventana.
 //   - single-instance (solo release): abrir la app de nuevo enfoca la ventana existente.
@@ -46,6 +51,9 @@ use tauri_plugin_opener::OpenerExt;
 const SERVER_URL: &str = "https://os.labstreamsas.com";
 const TAB_BAR_H: f64 = 40.0; // alto lógico de la barra de pestañas (chrome)
 const CHROME: &str = "chrome";
+// Alto de la barra de título nativa de macOS (ventana estándar). Ver `top_offset`.
+#[cfg(target_os = "macos")]
+const MACOS_TITLEBAR_H: f64 = 28.0;
 
 // Escalones de zoom (como un navegador). 1.0 = 100%.
 const ZOOM_STEPS: &[f64] = &[0.5, 0.67, 0.75, 0.8, 0.9, 1.0, 1.1, 1.25, 1.5, 1.75, 2.0, 2.5];
@@ -66,11 +74,12 @@ struct Shell {
     next_id: u64,
     win: Option<WinRect>,
     autostart: Option<bool>, // elección del usuario en el menú ⋮ (None = por defecto, activado)
+    closed: Vec<String>,     // URLs de pestañas cerradas (para «Reabrir pestaña cerrada», ⌘⇧T)
 }
 
 impl Default for Shell {
     fn default() -> Self {
-        Self { tabs: Vec::new(), active: 0, zoom_idx: ZOOM_100, next_id: 1, win: None, autostart: None }
+        Self { tabs: Vec::new(), active: 0, zoom_idx: ZOOM_100, next_id: 1, win: None, autostart: None, closed: Vec::new() }
     }
 }
 
@@ -216,9 +225,14 @@ const INIT_JS_TPL: &str = r#"
     var mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
     var k = e.key;
-    if (k === 't' || k === 'T') { e.preventDefault(); newTab(null); }
+    if (k === 't' || k === 'T') {
+      e.preventDefault();
+      if (e.shiftKey) emit('ls-reopen', {}); else newTab(null);
+    }
     else if (k === 'w' || k === 'W') { e.preventDefault(); emit('ls-close-tab', { label: LABEL }); }
     else if ((k === 'r' || k === 'R') && !e.shiftKey) { e.preventDefault(); location.reload(); }
+    else if (k === '[') { e.preventDefault(); history.back(); }
+    else if (k === ']') { e.preventDefault(); history.forward(); }
     else if (k === '=' || k === '+') { e.preventDefault(); emit('ls-zoom', { dir: 1 }); }
     else if (k === '-') { e.preventDefault(); emit('ls-zoom', { dir: -1 }); }
     else if (k === '0') { e.preventDefault(); emit('ls-zoom', { dir: 0 }); }
@@ -226,6 +240,18 @@ const INIT_JS_TPL: &str = r#"
     else if (k >= '1' && k <= '9') { e.preventDefault(); emit('ls-activate-n', { n: +k }); }
   }, true);
 
+  // Alt+←/→ = atrás/adelante (convención de Windows/Linux; en Mac es ⌘[ / ⌘] y Alt+flecha
+  // se respeta para saltar palabras al escribir). Fuera de campos de texto solamente.
+  var MAC = /Mac/i.test(navigator.platform || '');
+  function editable(el) {
+    return !!el && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName || ''));
+  }
+  addEventListener('keydown', function (e) {
+    if (MAC || !e.altKey || e.metaKey || e.ctrlKey || e.shiftKey || editable(e.target)) return;
+    if (e.key === 'ArrowLeft') { e.preventDefault(); history.back(); }
+    else if (e.key === 'ArrowRight') { e.preventDefault(); history.forward(); }
+  }, true);
+
   // Ctrl+rueda = zoom (convención de navegador; en Mac también con Ctrl).
   addEventListener('wheel', function (e) {
     if (!e.ctrlKey) return;
@@ -245,19 +271,40 @@ fn get_webview<R: Runtime>(app: &AppHandle<R>, label: &str) -> Option<Webview<R>
     main_window(app).and_then(|w| w.webviews().into_iter().find(|v| v.label() == label))
 }
 
+// En macOS las coordenadas de los webviews HIJOS son relativas al MARCO de la ventana
+// (incluye la barra de título) y `inner_size()` devuelve también el marco. Sin compensar,
+// la barra de pestañas se dibuja DEBAJO del título nativo y solo asoman ~12 px (además el
+// título translúcido se teñía del color de la barra). Se detecta en caliente: si el marco y
+// el interior miden lo mismo hay que compensar; si Tauri lo corrige, la resta deja de ser 0
+// y no se compensa nada. En Windows/Linux siempre es 0 (ahí las coordenadas ya son del área
+// de cliente).
+fn top_offset<R: Runtime>(win: &Window<R>, scale: f64) -> f64 {
+    #[cfg(target_os = "macos")]
+    if let (Ok(outer), Ok(inner)) = (win.outer_size(), win.inner_size()) {
+        let o = outer.to_logical::<f64>(scale).height;
+        let i = inner.to_logical::<f64>(scale).height;
+        if (o - i).abs() < 1.0 {
+            return MACOS_TITLEBAR_H;
+        }
+    }
+    let _ = (win, scale);
+    0.0
+}
+
 // Geometría: barra arriba (alto fijo), contenido debajo ocupando el resto.
 fn layout_all<R: Runtime>(app: &AppHandle<R>) {
     let Some(win) = main_window(app) else { return };
     let scale = win.scale_factor().unwrap_or(1.0);
     let Ok(size) = win.inner_size() else { return };
     let size = size.to_logical::<f64>(scale);
-    let content_h = (size.height - TAB_BAR_H).max(0.0);
+    let top = top_offset(&win, scale);
+    let content_h = (size.height - top - TAB_BAR_H).max(0.0);
     for wv in win.webviews() {
         if wv.label() == CHROME {
-            let _ = wv.set_position(LogicalPosition::new(0.0, 0.0));
+            let _ = wv.set_position(LogicalPosition::new(0.0, top));
             let _ = wv.set_size(LogicalSize::new(size.width, TAB_BAR_H));
         } else {
-            let _ = wv.set_position(LogicalPosition::new(0.0, TAB_BAR_H));
+            let _ = wv.set_position(LogicalPosition::new(0.0, top + TAB_BAR_H));
             let _ = wv.set_size(LogicalSize::new(size.width, content_h));
         }
     }
@@ -269,7 +316,7 @@ fn current_zoom<R: Runtime>(app: &AppHandle<R>) -> f64 {
     ZOOM_STEPS[s.zoom_idx.min(ZOOM_STEPS.len() - 1)]
 }
 
-// Manda el estado de pestañas + zoom a la barra (webview "chrome").
+// Manda el estado de pestañas + zoom + versión a la barra (webview "chrome").
 fn broadcast<R: Runtime>(app: &AppHandle<R>) {
     let payload = {
         let shell = app.state::<ShellState>();
@@ -280,7 +327,11 @@ fn broadcast<R: Runtime>(app: &AppHandle<R>) {
             .enumerate()
             .map(|(i, t)| json!({ "label": t.label, "title": t.title, "active": i == s.active }))
             .collect();
-        json!({ "tabs": tabs, "zoom": (ZOOM_STEPS[s.zoom_idx.min(ZOOM_STEPS.len()-1)] * 100.0).round() as u32 })
+        json!({
+            "tabs": tabs,
+            "zoom": (ZOOM_STEPS[s.zoom_idx.min(ZOOM_STEPS.len()-1)] * 100.0).round() as u32,
+            "version": app.package_info().version.to_string(),
+        })
     };
     let _ = app.emit_to(EventTarget::webview(CHROME), "ls-tabs", payload);
 }
@@ -348,10 +399,11 @@ fn create_tab<R: Runtime>(app: &AppHandle<R>, url: Option<String>, activate: boo
             }
         });
 
+    let top = top_offset(&win, scale);
     let created = win.add_child(
         builder,
-        LogicalPosition::new(0.0, TAB_BAR_H),
+        LogicalPosition::new(0.0, top + TAB_BAR_H),
-        LogicalSize::new(size.width, (size.height - TAB_BAR_H).max(0.0)),
+        LogicalSize::new(size.width, (size.height - top - TAB_BAR_H).max(0.0)),
     );
 
     match created {
@@ -379,6 +431,12 @@ fn close_tab<R: Runtime>(app: &AppHandle<R>, label: &str) {
         let mut s = shell.lock().unwrap();
         let Some(i) = s.tabs.iter().position(|t| t.label == label) else { return };
         let was_active = i == s.active;
+        // Recuerda la URL para «Reabrir pestaña cerrada» (tope de 20, las más recientes).
+        let url = s.tabs[i].url.clone();
+        s.closed.push(url);
+        if s.closed.len() > 20 {
+            s.closed.remove(0);
+        }
         s.tabs.remove(i);
         if s.tabs.is_empty() {
             s.active = 0;
@@ -485,6 +543,67 @@ fn active_url<R: Runtime>(app: &AppHandle<R>) -> Option<String> {
     s.tabs.get(s.active).map(|t| t.url.clone())
 }
 
+// Atrás/adelante en el HISTORIAL de la pestaña activa. Antes no existía por ningún lado y
+// una página sin menú propio (p. ej. el portal de revisión) era un callejón sin salida.
+fn nav_tab<R: Runtime>(app: &AppHandle<R>, dir: i32) {
+    if let Some(l) = active_label(app) {
+        if let Some(wv) = get_webview(app, &l) {
+            let _ = wv.eval(if dir < 0 { "history.back()" } else { "history.forward()" });
+        }
+    }
+}
+
+// «Reabrir pestaña cerrada» (⌘/Ctrl+Shift+T): la más reciente primero, como en el navegador.
+fn reopen_tab<R: Runtime>(app: &AppHandle<R>) {
+    let url = {
+        let shell = app.state::<ShellState>();
+        let mut s = shell.lock().unwrap();
+        s.closed.pop()
+    };
+    if let Some(u) = url {
+        create_tab(app, Some(u), true);
+    }
+}
+
+// Punto rojo para el icono de la barra de tareas de Windows (dibujado a mano: sin assets).
+#[cfg(target_os = "windows")]
+fn red_dot() -> tauri::image::Image<'static> {
+    const S: usize = 16;
+    let mut px = vec![0u8; S * S * 4];
+    let c = (S as f64 - 1.0) / 2.0;
+    for y in 0..S {
+        for x in 0..S {
+            let (dx, dy) = (x as f64 - c, y as f64 - c);
+            if (dx * dx + dy * dy).sqrt() <= c {
+                let i = (y * S + x) * 4;
+                px[i] = 225;
+                px[i + 1] = 29;
+                px[i + 2] = 72;
+                px[i + 3] = 255;
+            }
+        }
+    }
+    tauri::image::Image::new_owned(px, S as u32, S as u32)
+}
+
+// Globo de NO-LEÍDOS en el icono, alimentado por la web app (evento `ls-badge {count}`):
+// macOS = número en el icono del Dock; Windows = punto rojo sobre el icono de la barra de
+// tareas; y en ambos, el tooltip de la bandeja dice cuántos hay.
+fn set_badge<R: Runtime>(app: &AppHandle<R>, count: i64) {
+    if let Some(win) = main_window(app) {
+        #[cfg(target_os = "macos")]
+        let _ = win.set_badge_count(if count > 0 { Some(count) } else { None });
+        #[cfg(target_os = "windows")]
+        let _ = win.set_overlay_icon(if count > 0 { Some(red_dot()) } else { None });
+        #[cfg(not(any(target_os = "macos", target_os = "windows")))]
+        let _ = &win;
+    }
+    if let Some(tray) = app.tray_by_id("main-tray") {
+        let tip = if count > 0 { format!("Labstream OS — {count} sin leer") } else { "Labstream OS".to_string() };
+        let _ = tray.set_tooltip(Some(tip));
+    }
+}
+
 // Menú de OPCIONES de la app (botón ⋮ / clic derecho en la barra): un popup NATIVO del sistema,
 // igual en Windows y macOS. Se construye fresco en cada apertura para que el check de
 // "Iniciar con el sistema" y la versión estén siempre al día. Solo opciones del SHELL — la web
@@ -497,8 +616,12 @@ fn show_app_menu<R: Runtime>(app: &AppHandle<R>) {
         Ok(Menu::with_items(
             app,
             &[
+                &MenuItem::with_id(app, "nav-back", "Atrás", true, Some("CmdOrCtrl+["))?,
+                &MenuItem::with_id(app, "nav-forward", "Adelante", true, Some("CmdOrCtrl+]"))?,
+                &PredefinedMenuItem::separator(app)?,
                 &MenuItem::with_id(app, "new-tab", "Nueva pestaña", true, Some("CmdOrCtrl+T"))?,
                 &MenuItem::with_id(app, "close-tab", "Cerrar pestaña", true, Some("CmdOrCtrl+W"))?,
+                &MenuItem::with_id(app, "reopen-tab", "Reabrir pestaña cerrada", true, Some("CmdOrCtrl+Shift+T"))?,
                 &MenuItem::with_id(app, "reload", "Recargar", true, Some("CmdOrCtrl+R"))?,
                 &PredefinedMenuItem::separator(app)?,
                 &MenuItem::with_id(app, "zoom-in", "Acercar", true, Some("CmdOrCtrl+="))?,
@@ -702,6 +825,7 @@ pub fn run() {
                     &[
                         &MenuItem::with_id(h, "new-tab", "Nueva pestaña", true, Some("CmdOrCtrl+T"))?,
                         &MenuItem::with_id(h, "close-tab", "Cerrar pestaña", true, Some("CmdOrCtrl+W"))?,
+                        &MenuItem::with_id(h, "reopen-tab", "Reabrir pestaña cerrada", true, Some("CmdOrCtrl+Shift+T"))?,
                         &PredefinedMenuItem::separator(h)?,
                         &MenuItem::with_id(h, "open-browser", "Abrir esta página en el navegador", true, None::<&str>)?,
                     ],
@@ -734,6 +858,15 @@ pub fn run() {
                         &PredefinedMenuItem::fullscreen(h, Some("Pantalla completa"))?,
                     ],
                 )?;
+                let historial = Submenu::with_items(
+                    h,
+                    "Historial",
+                    true,
+                    &[
+                        &MenuItem::with_id(h, "nav-back", "Atrás", true, Some("CmdOrCtrl+["))?,
+                        &MenuItem::with_id(h, "nav-forward", "Adelante", true, Some("CmdOrCtrl+]"))?,
+                    ],
+                )?;
                 let ventana = Submenu::with_items(
                     h,
                     "Ventana",
@@ -743,18 +876,21 @@ pub fn run() {
                         &PredefinedMenuItem::maximize(h, Some("Zoom"))?,
                     ],
                 )?;
-                let menu = Menu::with_items(h, &[&app_menu, &archivo, &edicion, &vista, &ventana])?;
+                let menu = Menu::with_items(h, &[&app_menu, &archivo, &edicion, &vista, &historial, &ventana])?;
                 app.set_menu(menu)?;
             }
 
             // Manejador de TODOS los menús (el de macOS y el popup ⋮ de ambas plataformas).
             app.on_menu_event(|app, event| match event.id().as_ref() {
+                "nav-back" => nav_tab(app, -1),
+                "nav-forward" => nav_tab(app, 1),
                 "new-tab" => create_tab(app, None, true),
                 "close-tab" => {
                     if let Some(l) = active_label(app) {
                         close_tab(app, &l);
                     }
                 }
+                "reopen-tab" => reopen_tab(app),
                 "reload" => reload_tab(app, None),
                 "zoom-in" => zoom_step(app, 1),
                 "zoom-out" => zoom_step(app, -1),
@@ -781,7 +917,7 @@ pub fn run() {
             let size = win.inner_size()?.to_logical::<f64>(scale);
             win.add_child(
                 WebviewBuilder::new(CHROME, WebviewUrl::App("index.html".into())),
-                LogicalPosition::new(0.0, 0.0),
+                LogicalPosition::new(0.0, top_offset(&win, scale)),
                 LogicalSize::new(size.width, TAB_BAR_H),
             )?;
 
@@ -858,9 +994,30 @@ pub fn run() {
                 }
             });
             let h = handle.clone();
+            handle.listen_any("ls-nav", move |e| {
+                let dir = field_i64(e.payload(), "dir").unwrap_or(-1) as i32;
+                nav_tab(&h, dir);
+            });
+            let h = handle.clone();
+            handle.listen_any("ls-reopen", move |_| {
+                reopen_tab(&h);
+            });
+            // Globo de no-leídos: lo emite la web app cuando cambia el conteo del chat.
+            let h = handle.clone();
+            handle.listen_any("ls-badge", move |e| {
+                let n = field_i64(e.payload(), "count").unwrap_or(0);
+                set_badge(&h, n);
+            });
+            let h = handle.clone();
             handle.listen_any("ls-menu", move |_| {
                 show_app_menu(&h);
             });
+            // Clic en la etiqueta de versión de la barra → buscar actualización (con aviso).
+            let h = handle.clone();
+            handle.listen_any("ls-check-update", move |_| {
+                #[cfg(desktop)]
+                tauri::async_runtime::spawn(check_update_manual(h.clone()));
+            });
             let h = handle.clone();
             handle.listen_any("ls-title", move |e| {
                 let (label, title, url) = (

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Labstream OS",
-  "version": "1.2.0",
+  "version": "1.4.2",
   "identifier": "co.labstream.os",
   "build": {
     "frontendDist": "../dist"