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>

README.md

@@ -1,21 +1,38 @@
 # Labstream OS — App de escritorio (Windows + macOS)
 
-Envoltorio de escritorio para **Labstream OS**. Es un cliente delgado hecho con
+Cliente de escritorio para **Labstream OS**, hecho con [Tauri 2](https://tauri.app).
-[Tauri 2](https://tauri.app): abre una ventana propia (sin barra de navegador)
+Desde la v1.1.0 no es un envoltorio de una sola vista: es un **shell con pestañas**
-que carga el servidor de Labstream OS que corre en el NAS
+(multiwebview) sobre el servidor del NAS (`https://os.labstreamsas.com`).
-(`https://os.labstreamsas.com`).
 
 No contiene la app: el backend, la base de datos, OnlyOffice, etc. siguen en el
-NAS. Esto solo le da al equipo un ícono y una ventana propia en Windows y Mac.
+NAS. Esto le da al equipo un cliente nativo de verdad en Windows y Mac:
 
-Además del ícono y la ventana, el envoltorio añade comportamiento de cliente nativo:
+- **Pestañas** como en un navegador: los enlaces internos con `target="_blank"`
-
+  (documentos, entregables, exportaciones, OnlyOffice…) abren **pestaña dentro de
-- **Enlaces externos** (Drive, documentos ajenos…) abren en el **navegador del sistema**;
+  la app** — antes morían en silencio. También ⌘/Ctrl+clic y clic central.
-  la navegación del propio servidor y el **login por Authentik** se quedan dentro.
+  Atajos: ⌘/Ctrl+T nueva, ⌘/Ctrl+W cerrar, Ctrl+Tab rotar, ⌘/Ctrl+1…9 ir a la n.
+  La sesión (pestañas abiertas, activa) **se restaura** al reabrir.
+- **Zoom de interfaz**: ⌘/Ctrl `+` / `−` / `0` y Ctrl+rueda, con indicador en la
+  barra y **persistencia** entre sesiones (50%–250%).
+- **Documentos dentro de la app**: los visores/editores del propio servidor
+  (OnlyOffice, PDFs, reproductor de revisión) abren en pestañas; solo lo de OTRO
+  origen (Drive…) sale al **navegador del sistema**. El **login por Authentik**
+  sigue funcionando dentro.
 - **Notas de voz / cámara**: pide permiso de micrófono y cámara (entitlements de macOS).
 - **Descargas** (entregables, exportaciones) con el diálogo nativo de guardado.
 - **Bandeja del sistema**: cerrar la ventana la oculta; la app sigue notificando.
+  En macOS, el clic en el **Dock** también reabre la ventana, y hay **menú nativo**
+  en español (Edición/Vista/Archivo) con los atajos.
 - **Arranque automático** al iniciar sesión y **sesión persistente** (no re-loguea).
+- **Una sola instancia** (release): abrirla de nuevo enfoca la ventana existente.
+- **Menú de opciones ⋮** (v1.2.0) en la barra — también con clic derecho sobre ella:
+  pestañas, zoom, recargar, abrir la página en el navegador, **Iniciar con el
+  sistema** (elección recordada) y **Buscar actualización…** con aviso del
+  resultado. Es un popup nativo del sistema, igual en Windows y macOS, y vive
+  solo en el shell (la web app no se toca).
+
+La barra de pestañas vive en `dist/index.html` (webview local «chrome»); las
+pestañas son webviews hijos `tab-*`. Shell ↔ Rust se hablan por eventos `ls-*`.
 
 El servidor objetivo se configura en `src-tauri/src/lib.rs` → constante `SERVER_URL`.
 

dist/index.html

@@ -4,41 +4,329 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Labstream OS</title>
+    <!--
+      Barra de pestañas del shell de escritorio (webview "chrome", local).
+      Habla con Rust por eventos (__TAURI__.event):
+        recibe  ls-tabs      {tabs:[{label,title,active}], zoom}
+        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: #dee1e6;          /* franja de pestañas (Chrome claro) */
+        --fg: #45474a;
+        --muted: #5f6368;
+        --tab-active-bg: #ffffff;
+        --tab-active-fg: #202124;
+        --accent: #6366f1;      /* indigo-500, color de Labstream */
+        --border: #c9ccd1;      /* línea bajo la barra (la tapa la pestaña activa) */
+        --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: #202124;        /* franja (Chrome oscuro) */
+          --fg: #bdc1c6;
+          --muted: #80868b;
+          --tab-active-bg: #18181b;  /* mismo fondo que la app → pestaña fundida con el contenido */
+          --tab-active-fg: #e8eaed;
+          --border: #101013;
+          --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; }
       html, body {
         margin: 0;
         height: 100%;
-        background: #6366f1;
+        overflow: hidden;
-        color: #fff;
+        background: var(--bg);
+        color: var(--fg);
         font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+        font-size: 12.5px;
+        user-select: none;
+        -webkit-user-select: none;
+        cursor: default;
+      }
+      #bar {
         display: flex;
         align-items: center;
-        justify-content: center;
+        gap: 2px;
-        text-align: center;
+        height: 40px;
+        padding: 0 6px 0 8px;
+        border-bottom: 1px solid var(--border);
       }
-      .box { max-width: 420px; padding: 24px; }
+      #tabs {
-      h1 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
+        display: flex;
-      p { opacity: 0.85; font-size: 14px; line-height: 1.5; margin: 0; }
+        align-items: flex-end;
-      .spinner {
+        flex: 1 1 auto;
-        width: 28px; height: 28px; margin: 0 auto 20px;
+        min-width: 0;
-        border: 3px solid rgba(255,255,255,0.35);
+        /* Se extiende 1px sobre el borde inferior de la barra para que la pestaña ACTIVA
-        border-top-color: #fff; border-radius: 50%;
+           lo tape con su propio fondo y quede FUNDIDA con el contenido (look Chrome). */
-        animation: spin 0.8s linear infinite;
+        align-self: stretch;
+        margin-bottom: -1px;
+        padding: 0 4px;
+        overflow-x: auto;
+        scrollbar-width: none;
       }
-      @keyframes spin { to { transform: rotate(360deg); } }
+      #tabs::-webkit-scrollbar { display: none; }
+      .tab {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+        flex: 0 1 220px;
+        min-width: 100px;
+        height: 30px;
+        margin-bottom: 5px;
+        padding: 0 6px 0 10px;
+        border-radius: 9px;         /* inactiva: píldora redondeada (hover) */
+        position: relative;
+        overflow: visible;          /* deja asomar las curvas de la base de la activa */
+      }
+      .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);
+        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;
+      }
+      /* 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;
+        bottom: 0;
+        width: 8px;
+        height: 8px;
+      }
+      .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;
+        min-width: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .tab .cerrar {
+        flex: 0 0 auto;
+        width: 18px;
+        height: 18px;
+        display: grid;
+        place-items: center;
+        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(--btn-hover); color: var(--tab-active-fg); }
+      button {
+        appearance: none;
+        border: 0;
+        background: transparent;
+        color: var(--fg);
+        font: inherit;
+        border-radius: 50%;
+        cursor: default;
+        display: grid;
+        place-items: center;
+      }
+      button:hover { background: var(--btn-hover); }
+      .icono {
+        flex: 0 0 auto;
+        width: 30px;
+        margin: 2px 0 7px;
+        font-size: 15px;
+      }
+      #zoom {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 1px;
+        margin: 2px 0 7px;
+      }
+      #zoom button { height: 100%; }
+      #z-menos, #z-mas { width: 26px; font-size: 14px; }
+      #z-pct {
+        min-width: 44px;
+        padding: 0 4px;
+        font-variant-numeric: tabular-nums;
+        color: var(--muted);
+        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">
-      Pantalla de respaldo. En condiciones normales la ventana carga directamente
+      <button class="icono" id="atras" title="Atrás (⌘/Ctrl+[)">←</button>
-      el servidor del NAS (app.windows[].url en tauri.conf.json), así que este
+      <button class="icono" id="adelante" title="Adelante (⌘/Ctrl+])">→</button>
-      archivo casi nunca se ve. Solo aparece si se cambia la config para arrancar
+      <div id="tabs" title=""></div>
-      en local. Es obligatorio porque Tauri exige un frontendDist existente.
+      <button class="icono" id="nueva" title="Nueva pestaña (⌘/Ctrl+T)">+</button>
-    -->
+      <button class="icono" id="recargar" title="Recargar (⌘/Ctrl+R)">⟳</button>
-    <div class="box">
+      <div id="zoom">
-      <div class="spinner"></div>
+        <button id="z-menos" title="Alejar (⌘/Ctrl+−)">−</button>
-      <h1>Labstream OS</h1>
+        <button id="z-pct" title="Restablecer zoom (⌘/Ctrl+0)">100%</button>
-      <p>Conectando con el espacio de trabajo…</p>
+        <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>
+      const T = window.__TAURI__;
+      const E = T && T.event;
+      let estado = { tabs: [], zoom: 100 };
+
+      function emitir(nombre, datos) {
+        try { E.emit(nombre, datos || {}); } catch (e) {}
+      }
+
+      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 = "";
+        for (const t of estado.tabs) {
+          const el = document.createElement("div");
+          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";
+          el.appendChild(titulo);
+
+          const x = document.createElement("button");
+          x.className = "cerrar";
+          x.textContent = "×";
+          x.title = "Cerrar pestaña (⌘/Ctrl+W)";
+          x.addEventListener("click", (e) => {
+            e.stopPropagation();
+            emitir("ls-close-tab", { label: t.label });
+          });
+          el.appendChild(x);
+
+          el.addEventListener("click", () => emitir("ls-activate", { label: t.label }));
+          // Clic central sobre la pestaña = cerrarla (como en el navegador).
+          el.addEventListener("auxclick", (e) => {
+            if (e.button === 1) emitir("ls-close-tab", { label: t.label });
+          });
+          $tabs.appendChild(el);
+        }
+        const activa = $tabs.querySelector(".tab.active");
+        if (activa) activa.scrollIntoView({ block: "nearest", inline: "nearest" });
+
+        $pct.textContent = estado.zoom + "%";
+        $pct.classList.toggle("activo", estado.zoom !== 100);
+        $ver.textContent = estado.version ? "v" + estado.version : "";
+      }
+
+      if (E) {
+        E.listen("ls-tabs", (ev) => {
+          estado = ev.payload || estado;
+          render();
+        });
+      }
+
+      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", {});
+      });
+      document.getElementById("z-menos").addEventListener("click", () => emitir("ls-zoom", { dir: -1 }));
+      document.getElementById("z-mas").addEventListener("click", () => emitir("ls-zoom", { dir: 1 }));
+      $pct.addEventListener("click", () => emitir("ls-zoom", { dir: 0 }));
+      // Doble clic en el hueco libre de la barra = pestaña nueva.
+      $tabs.addEventListener("dblclick", (e) => {
+        if (e.target === $tabs) emitir("ls-new-tab", {});
+      });
+
+      // Atajos también cuando el foco está en la barra.
+      addEventListener("keydown", (e) => {
+        const mod = e.metaKey || e.ctrlKey;
+        if (!mod) return;
+        const k = e.key;
+        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 }); }
+        else if (k === "Tab") { e.preventDefault(); emitir("ls-cycle", { dir: e.shiftKey ? -1 : 1 }); }
+        else if (k >= "1" && k <= "9") { e.preventDefault(); emitir("ls-activate-n", { n: +k }); }
+      });
+
+      emitir("ls-ready", {});
+    </script>
   </body>
 </html>

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.0.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.0.0"
+version = "1.4.2"
 dependencies = [
  "serde",
  "serde_json",
@@ -1955,6 +1955,7 @@ dependencies = [
  "tauri-plugin-autostart",
  "tauri-plugin-notification",
  "tauri-plugin-opener",
+ "tauri-plugin-single-instance",
  "tauri-plugin-updater",
 ]
 
@@ -3841,6 +3842,22 @@ dependencies = [
  "zbus",
 ]
 
+[[package]]
+name = "tauri-plugin-single-instance"
+version = "2.4.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b3214becf9ef5783c0ae99a3bb25adf5353a7a16ebf53e74b909e29205735c6c"
+dependencies = [
+ "serde",
+ "serde_json",
+ "tauri",
+ "thiserror 2.0.18",
+ "tokio",
+ "tracing",
+ "windows-sys 0.60.2",
+ "zbus",
+]
+
 [[package]]
 name = "tauri-plugin-updater"
 version = "2.10.1"

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "labstream-desktop"
-version = "1.0.0"
+version = "1.4.2"
 description = "Cliente de escritorio de Labstream OS"
 authors = ["Labstream SAS"]
 edition = "2021"
@@ -14,10 +14,12 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = ["tray-icon"] }
+# `unstable` habilita multiwebview: varios webviews (pestañas) dentro de UNA ventana.
+tauri = { version = "2", features = ["tray-icon", "unstable"] }
 tauri-plugin-opener = "2"
 tauri-plugin-notification = "2"
 tauri-plugin-autostart = "2"
 tauri-plugin-updater = "2"
+tauri-plugin-single-instance = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"

src-tauri/capabilities/default.json

@@ -1,8 +1,9 @@
 {
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
-  "description": "Permisos por defecto del envoltorio de escritorio.",
+  "description": "Permisos del shell de escritorio: la barra local (chrome) y las pestañas remotas (tab-*).",
   "windows": ["main"],
+  "webviews": ["chrome", "tab-*"],
   "remote": {
     "urls": ["https://os.labstreamsas.com"]
   },

src-tauri/tauri.conf.json

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