shadok-ai 0.2.64 → 0.2.66

package/package.json

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

package/public/index.html

@@ -1092,10 +1092,10 @@
     #chanBar .gauge .label { display: none; }   /* valeurs seules, plus compact */
     #chanBar { gap: 6px; padding: 6px 10px; }
     header { flex-wrap: wrap; row-gap: 6px; gap: 8px; padding: 8px 12px; }
-    /* One header row: brand + dials + as many tool icons as fit. The spacer that
-       right-aligns them on desktop is dropped so they pack left; whatever doesn't
-       fit is moved into the ⋯ menu by reflowHeaderTools (JS). .hdr-tools keeps
-       its base `display: contents`, so the icons stay direct header flex items. */
+    /* One header row: brand + dials + ⋯. reflowHeaderTools (JS) moves ALL tool
+       icons into the ⋯ menu on a phone, so nothing wraps to a second line. The
+       spacer that right-aligns them on desktop is dropped so what remains packs
+       left. .hdr-tools keeps its base `display: contents`. */
     header .spacer { display: none; }
     header button.icon { padding: 5px 7px; }
     /* The star pill is the widest tool and would push an icon off the row; on a
@@ -2895,7 +2895,7 @@
     }
   }
 
-  // ── Window title: tokens consumed ───────────────────────
+  // ── Window title: instance name, then tokens consumed ───────────────────
   const BASE_TITLE = document.title;
 
   // ── Notifications: favicon badge + title badge + sound ──────────────
@@ -2904,6 +2904,20 @@
   // channel you're not already looking at. All driven off setTabMood.
   const favicon = $("favicon");
   let titleBase = BASE_TITLE; // current title without the notification badge
+  let titleTokens = 0; // summed tokens across open channels (0 = none yet)
+
+  // The tab title is: INSTANCE NAME first, then the tokens consumed —
+  // "Prod — 12.3k tok". Name alone when there are no tokens yet; the default
+  // "shadok-ai — cockpit" only when neither a custom name nor tokens exist.
+  // Both the name change and the token tick funnel through here, so one no
+  // longer clobbers the other (they used to fight over titleBase).
+  function recomposeTitle() {
+    const name = cockpitTitle || "shadok-ai";
+    titleBase = titleTokens
+      ? name + " — " + fmtTokens(titleTokens) + " tok"
+      : (cockpitTitle || BASE_TITLE);
+    paint(); // re-stamp document.title (with any notification badge)
+  }
 
   // ── Cockpit name: editable header brand, persisted server-side ──────────
   // Several cockpits (one per launch directory) are easy to confuse; a custom
@@ -2914,8 +2928,7 @@
     cockpitTitle = title && title.trim() ? title.trim() : null;
     const brandName = $("brandName");
     if (brandName && !brandName.isContentEditable) brandName.textContent = cockpitTitle || "shadok-ai";
-    titleBase = cockpitTitle || BASE_TITLE;
-    paint(); // re-stamp document.title (with any notification badge)
+    recomposeTitle(); // name goes first in the tab title, tokens after
     if (typeof scheduleReflow === "function") scheduleReflow(); // name width changed
   }
 
@@ -3125,17 +3138,18 @@
   }
 
   /**
-   * Shows the tokens consumed by the open channels in the tab title.
-   * Counts fresh input + cache writes + output; cache READS are excluded —
-   * they re-bill the whole context on every turn and would drown the number.
+   * The tokens consumed by the open channels, shown AFTER the instance name in
+   * the tab title. Counts fresh input + cache writes + output; cache READS are
+   * excluded — they re-bill the whole context on every turn and would drown the
+   * number. The name/tokens composition lives in recomposeTitle.
    */
   function refreshTitle() {
     let sum = 0;
     for (const t of tabs) {
       if (t.tokens) sum += t.tokens.input + t.tokens.cacheCreation + t.tokens.output;
     }
-    titleBase = sum ? fmtTokens(sum) + " tok — shadok-ai" : BASE_TITLE;
-    refreshBadge();
+    titleTokens = sum;
+    recomposeTitle();
   }
 
   /**
@@ -4835,34 +4849,23 @@
     window.open("https://github.com/shadok-ai/shadok-ai", "_blank", "noopener");
   });
 
-  // ── Header tool overflow ─────────────────────────────────────────────
-  // The header is one row: brand + dials + as many tool icons as fit. Any icon
-  // that would push the ⋯ button onto a second line is moved INTO the ⋯ menu —
-  // the real button element, so its click handler travels with it. Desktop has
-  // room for them all. Recomputed on load, on resize, and when the name changes.
+  // ── Header tools placement ───────────────────────────────────────────
+  // Desktop keeps every tool icon in the header. A phone keeps the header to a
+  // SINGLE row (brand + dials + ⋯) by moving EVERY tool icon into the ⋯ menu —
+  // the real button elements, so their click handlers travel with them.
+  // Recomputed on load, on resize, and when the instance name changes.
   const OVERFLOW_TOOLS = ["secretsBtn", "profilesBtn", "telegramBtn", "muteNotif"];
   function reflowHeaderTools() {
     const hdrTools = document.querySelector(".hdr-tools");
     const moreWrap = document.querySelector(".more-wrap");
-    const moreBtn = $("moreBtn");
     const overflow = $("overflowTools");
-    const brand = $("brandName");
-    if (!hdrTools || !moreWrap || !moreBtn || !overflow || !brand) return;
-    // 1. Reset: every tool back in the header, in the declared order.
+    if (!hdrTools || !moreWrap || !overflow) return;
+    const mobile = matchMedia("(max-width: 640px)").matches;
     for (const id of OVERFLOW_TOOLS) {
       const el = $(id);
-      if (el) hdrTools.insertBefore(el, moreWrap);
-    }
-    // 2. Only a narrow screen needs to shed icons.
-    if (!matchMedia("(max-width: 640px)").matches) return;
-    // 3. Move icons from the end into the menu until ⋯ is back on the first row.
-    //    Two rows → ⋯ sits a line-height below the brand; the 8px threshold
-    //    ignores sub-pixel jitter.
-    const rowTop = () => brand.getBoundingClientRect().top;
-    for (let i = OVERFLOW_TOOLS.length - 1; i >= 0; i--) {
-      if (moreBtn.getBoundingClientRect().top - rowTop() < 8) break; // it fits now
-      const el = $(OVERFLOW_TOOLS[i]);
-      if (el) overflow.insertBefore(el, overflow.firstChild); // keep original order
+      if (!el) continue;
+      if (mobile) overflow.appendChild(el);          // all into the ⋯ menu
+      else hdrTools.insertBefore(el, moreWrap);       // back in the header, in order
     }
   }
   let reflowPending = false;