shadok-ai 0.11.8 → 0.11.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.11.8",
+  "version": "0.11.10",
   "main": "dist/session.js",
   "scripts": {
     "test": "node --import tsx --test test/*.ts context/*/test/*.test.mjs",

package/public/index.html

@@ -1146,12 +1146,24 @@
     #chanBar #dirGauge, #chanBar #branchGauge { display: none !important; }
     #chanBar .gauge .label { display: none; }   /* values only, more compact */
     #chanBar { gap: 6px; padding: 6px 10px; }
-    header { flex-wrap: wrap; row-gap: 6px; gap: 8px; padding: 8px 12px; }
     /* 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`. */
+       icons into the ⋯ menu, and `nowrap` makes the brand — the one elastic item
+       — ABSORB the squeeze instead of shoving a dial onto a second line. Before
+       this, a long instance title (e.g. a full hostname) pushed the 7d gauge to
+       wrap, leaving the header a broken two-row mess that also peeked, dimmed,
+       behind every open modal. The spacer that right-aligns the tools on desktop
+       is dropped so what remains packs left. */
+    header { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; }
     header .spacer { display: none; }
+    /* The brand becomes a flex row of its own so ONLY the name ellipsizes: the
+       ◆ and the version badge keep their size, the title yields. The pencil cue
+       is hover-only, so it is of no use on a phone and just eats width. */
+    header .brand { display: flex; align-items: baseline; gap: 4px; min-width: 0; flex: 0 1 auto; }
+    header .brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    header .brand-edit { display: none; }
+    /* While renaming, show the whole field — a transient nudge of the dials is
+       fine, the ellipsis returns the moment the edit commits. */
+    header .brand.editing .brand-name, header .brand-name:focus { overflow: visible; text-overflow: clip; }
     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. */
@@ -1526,6 +1538,8 @@
   #secretsAdd .sec-add-row { display: flex; gap: 8px; }
   #secretsAdd input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.25); color: inherit; font-size: 16px; }
   #secretsAdd #secretSubmit { flex: none; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.08); color: inherit; cursor: pointer; }
+  #secretsAdd #secretEditCancel { flex: none; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); background: none; color: var(--text-dim); cursor: pointer; font-size: 14px; line-height: 1; }
+  #secretsAdd #secretEditCancel:hover { border-color: var(--err); color: var(--err); }
   #secretKey[readonly] { opacity: .65; }
   .sec-attach { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
   .sec-attach-label { font-size: 12px; color: var(--text-dim); }
@@ -1650,11 +1664,11 @@
           <input id="secretKey" placeholder="NAME" autocomplete="off" spellcheck="false" />
           <input id="secretVal" placeholder="value" autocomplete="off" spellcheck="false" />
           <button type="submit" id="secretSubmit">Add</button>
+          <button type="button" id="secretEditCancel" title="Cancel — back to adding a secret" aria-label="Cancel edit" hidden>✕</button>
         </div>
         <div id="secretAttach" class="sec-attach" hidden>
           <span class="sec-attach-label">Inject into profiles:</span>
           <div id="secretProfiles" class="sec-profiles"></div>
-          <button type="button" id="secretEditCancel" class="linkish" hidden>cancel edit</button>
         </div>
       </form>
       <div id="secretsReload" class="sec-reload" hidden></div>