shadok-ai 0.2.9 → 0.2.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "main": "dist/session.js",
   "scripts": {
     "test": "node --import tsx --test test/*.ts .claude/skills/shadok-ai-agents/test/*.test.mjs",

package/public/index.html

@@ -258,10 +258,8 @@
   .tab {
     position: relative;
     display: flex;
-    /* Aligné en haut : led + icônes se posent sur la ligne du NOM (ligne 1),
-       pas au centre des deux lignes. */
-    align-items: flex-start;
-    gap: 8px;
+    flex-direction: column;   /* ligne 1 (led+nom+icônes) puis ligne 2 (infos) */
+    gap: 1px;
     font-family: var(--mono);
     font-size: 12px;
     color: var(--text-dim);
@@ -271,8 +269,7 @@
     cursor: pointer;
     user-select: none;
   }
-  /* Recentre le point d'état sur la ligne du nom (sinon collé tout en haut). */
-  .tab .led { margin-top: 4px; }
+  .tab-row1 { display: flex; align-items: center; gap: 8px; }
   /* Context-window usage: tiny number + thin bar at the bottom of the tab. */
   .tab .ctxnum { font-size: 9px; color: var(--text-dim); flex: none; }
   /* Heure du dernier message, discrète (le nom en flex:1 la pousse à droite). */
@@ -310,14 +307,12 @@
     border-radius: 0 4px 4px 0;
     box-shadow: inset 3px 0 0 var(--phosphor);
   }
-  /* Nom + heure empilés : le titre sur sa ligne (jamais tronqué par l'heure),
-     l'heure en dessous en tout petit. */
-  .tab-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
-  /* Ligne 2 : « xxx ago » + % de contexte, ensemble sous le nom. */
-  .tab-info { display: flex; align-items: baseline; gap: 6px; }
-  /* Le % de contexte poussé à droite de la ligne (« xxx ago » reste à gauche). */
-  .tab-info .ctxnum { margin-left: auto; }
+  /* Ligne 2 pleine largeur : « xxx ago » à gauche, % de contexte tout à droite. */
+  .tab-row2 { display: flex; align-items: baseline; gap: 6px; }
+  .tab-row2 .ctxnum { margin-left: auto; }
   .tab .name {
+    flex: 1;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -1533,14 +1528,15 @@
     tg.innerHTML = '<svg viewBox="0 0 24 24" width="12" height="12" style="vertical-align:-1px" aria-hidden="true"><path fill="#26A5E4" d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/></svg>';
     tg.title = "Mirrored to Telegram";
     // Nom + heure empilés (l'heure SOUS le titre, pour ne pas le tronquer).
-    const mainCol = document.createElement("div");
-    mainCol.className = "tab-main";
-    // Ligne 2 sous le nom : heure relative « xxx ago » + % de contexte, ensemble.
-    const infoRow = document.createElement("div");
-    infoRow.className = "tab-info";
-    infoRow.append(lastAt, ctxNum);
-    mainCol.append(name, infoRow);
-    btn.append(led, mainCol, timer, mute, cron, tg, close);
+    // Deux lignes : ligne 1 = led + nom + icônes ; ligne 2 PLEINE LARGEUR =
+    // « xxx ago » à gauche, % de contexte tout à droite (plus caché par les icônes).
+    const row1 = document.createElement("div");
+    row1.className = "tab-row1";
+    row1.append(led, name, timer, mute, cron, tg, close);
+    const row2 = document.createElement("div");
+    row2.className = "tab-row2";
+    row2.append(lastAt, ctxNum);
+    btn.append(row1, row2);
     // Context-window usage: a thin progress bar at the bottom of the tab.
     const ctxBar = document.createElement("div");
     ctxBar.className = "ctxbar";
@@ -1609,15 +1605,37 @@
 
   // Composer drafts, one per channel, remembered by session id.
   const savedDrafts = JSON.parse(localStorage.getItem("cp.drafts") || "{}");
+  /** Écrit MAINTENANT le brouillon de cet onglet, sans attendre le débounce. */
+  function writeDraft(tab) {
+    if (!tab.sessionId) return;
+    clearTimeout(tab.draftTimer);
+    if (tab.draft) savedDrafts[tab.sessionId] = tab.draft;
+    else delete savedDrafts[tab.sessionId];
+    localStorage.setItem("cp.drafts", JSON.stringify(savedDrafts));
+  }
   function persistDraft(tab) {
     if (!tab.sessionId) return;
     clearTimeout(tab.draftTimer);
-    tab.draftTimer = setTimeout(() => {
-      if (tab.draft) savedDrafts[tab.sessionId] = tab.draft;
-      else delete savedDrafts[tab.sessionId];
-      localStorage.setItem("cp.drafts", JSON.stringify(savedDrafts));
-    }, 300);
+    tab.draftTimer = setTimeout(() => writeDraft(tab), 300);
   }
+  /**
+   * Vide les écritures en attente de TOUS les onglets.
+   *
+   * Le débounce se réarme à chaque frappe : tant qu'on écrit sans marquer 300 ms
+   * de pause, rien n'était jamais écrit — un rechargement en plein élan (typique
+   * de l'auto-update, qui tombe quand il tombe) emportait tout le message. On
+   * force donc l'écriture au moment où la page s'en va.
+   */
+  function flushDrafts() {
+    for (const t of tabs) writeDraft(t);
+  }
+  // `pagehide` couvre le rechargement, la navigation et la mise en bfcache ;
+  // `visibilitychange` rattrape le mobile, où l'onglet peut être tué sans que
+  // `pagehide` ne parte. localStorage étant synchrone, l'écriture aboutit.
+  window.addEventListener("pagehide", flushDrafts);
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState === "hidden") flushDrafts();
+  });
   function dropDraft(tab) {
     clearTimeout(tab.draftTimer);
     tab.draft = "";
@@ -2160,6 +2178,7 @@
       } else if (!dismissedChannels.has(c.sessionId)) {
         const nt = createTab(c.group);
         nt.sessionId = c.sessionId;
+        nt.draft = savedDrafts[c.sessionId] || "";
         if (c.branch) nt.branch = c.branch;
         nt.profile = c.profile || null;
         setCrons(nt, c.crons);
@@ -3119,7 +3138,14 @@
 
   function handleVersion(msg) {
     if (bootVersion === null) bootVersion = msg.current;
-    else if (msg.current && msg.current !== bootVersion) { location.reload(); return; }
+    else if (msg.current && msg.current !== bootVersion) {
+      // Mise à jour : la page part maintenant. On écrit d'abord — c'est LE cas
+      // où l'on perdait un message en cours de frappe, puisque le rechargement
+      // n'est pas déclenché par l'utilisateur.
+      flushDrafts();
+      location.reload();
+      return;
+    }
     lastVersion = msg;
     if (!verView) return;
     const ahead = msg.latest && verIsNewer(msg.latest, msg.current);
@@ -3242,6 +3268,10 @@
               promptInput.value = t.draft;
               autosizePrompt();
             }
+          } else if (t.draft) {
+            // Tapé AVANT que la session ne soit connue : `persistDraft` refuse
+            // d'écrire sans id, ce texte n'était donc dans aucun stockage.
+            writeDraft(t);
           }
         }
         // launchTab reuses the tab object, so a bubble armed before the session
@@ -4398,6 +4428,11 @@
         // Know the session id from the start, so a slow or failed reattach never
         // drops the channel from a persist (which eroded the list to one).
         t.sessionId = s.sessionId;
+        // Le brouillon revient DÈS la création de l'onglet, sans attendre le
+        // `ready` : après une mise à jour le serveur redémarre, la reconnexion
+        // prend plusieurs secondes, et l'utilisateur retrouvait un champ vide —
+        // de quoi croire que son message était perdu et le retaper.
+        t.draft = savedDrafts[s.sessionId] || "";
         if (s.branch) t.branch = s.branch;
         t.profile = s.profile || null;
         setCrons(t, s.crons);