shadok-ai 0.2.60 → 0.2.62

package/package.json

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

package/public/index.html

@@ -335,6 +335,11 @@
   /* The star lives in the header pill on desktop; its menu twin appears only on
      a phone (see the mobile query). */
   #starMenuItem { display: none; }
+  /* Overflowed header icons, shown as a compact row at the top of the menu.
+     Hidden entirely when nothing overflowed. */
+  .mm-tools { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
+  .mm-tools:empty { display: none; }
+  #moreMenu .mm-tools button { width: auto; }  /* override #moreMenu button width:100% */
   #moreMenu .mm-sep { height: 1px; background: var(--line); margin: 4px 2px; }
   #moreMenu .mm-label { padding: 2px 4px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
   .mm-themes { display: flex; gap: 6px; padding: 2px 4px 4px; }
@@ -1087,10 +1092,11 @@
     #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; }
-    /* Row 1: brand + dials. Row 2: every icon, left-aligned. They used to spread
-       across the two rows as space allowed, and the first of them (🔑) ended up
-       flush against the right edge. */
-    .hdr-tools { display: flex; flex: 1 0 100%; align-items: center; gap: 6px; }
+    /* 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. */
+    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
        phone it moves into the ⋯ menu (#starMenuItem) instead. */
@@ -1451,6 +1457,10 @@
   <div class="more-wrap">
     <button id="moreBtn" class="icon" title="More">⋯</button>
     <div id="moreMenu" hidden>
+      <!-- Header tool icons that didn't fit the row are moved here by
+           reflowHeaderTools (the real buttons, so their handlers come along).
+           Empty — and hidden — whenever everything fits. -->
+      <div id="overflowTools" class="mm-tools"></div>
       <button id="toggleDiff">Diff</button>
       <button id="tourReplay">Guided tour</button>
       <!-- On a phone the header star pill is dropped (it's the widest tool, and
@@ -2903,6 +2913,7 @@
     if (brandName && !brandName.isContentEditable) brandName.textContent = cockpitTitle || "shadok-ai";
     titleBase = cockpitTitle || BASE_TITLE;
     paint(); // re-stamp document.title (with any notification badge)
+    if (typeof scheduleReflow === "function") scheduleReflow(); // name width changed
   }
 
   // ── Colour palette: per instance, persisted server-side (like the name) ──
@@ -4821,6 +4832,46 @@
     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.
+  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.
+    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
+    }
+  }
+  let reflowPending = false;
+  function scheduleReflow() {
+    if (reflowPending) return;
+    reflowPending = true;
+    requestAnimationFrame(() => { reflowPending = false; reflowHeaderTools(); });
+  }
+  window.addEventListener("resize", scheduleReflow);
+  document.addEventListener("DOMContentLoaded", reflowHeaderTools);
+  reflowHeaderTools();
+
   // ── Diff panel ──────────────────────────────────────────
   function colorDiff(text) {
     const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -5596,6 +5647,11 @@
     }
     if (r && r.ok) {
       $("authCode").value = "";
+      // The login just wrote the OAuth credentials the usage gauges read from
+      // (src/usage.ts, live-first). Repaint them now — otherwise a freshly
+      // signed-in instance shows blank dials until the next 60s poll, which
+      // reads as "usage is broken" right after onboarding.
+      refreshUsage();
       // Name the account: a machine can serve several people, and "signed in"
       // without saying as whom is the kind of detail that costs an hour later.
       let who = "";