shadok-ai 0.15.35 → 0.15.37

package/README.md

@@ -255,7 +255,7 @@ Enter to skip; you can add it later from the web UI).
   folds away while you type). Fields are 16px, which is what stops Safari from
   zooming in on focus. The agents column is replaced by a channel selector in
   the channel bar.
-- **Tweak Shadok-AI** — a card pinned at the bottom of the agents column. One
+- **Tweak Shadok-AI** — a card pinned at the bottom of the agents column, with the running version in grey beside its title (the code a tweak starts from). One
   click clones shadok-ai's own source into `~/.shadok-ai/self/shadok-ai` and
   starts an agent on it in its own worktree; that agent delivers its change as a
   **pull request** — a fork under your GitHub account, since you need no rights

package/package.json

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

package/public/index.html

@@ -14,6 +14,10 @@
 <link rel="icon" id="favicon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Crect%20width%3D%2232%22%20height%3D%2232%22%20rx%3D%227%22%20fill%3D%22%2314161d%22%2F%3E%3Cline%20x1%3D%2210.8%22%20y1%3D%2223%22%20x2%3D%2210.4%22%20y2%3D%2230.6%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2216.400000000000002%22%20y1%3D%2223%22%20x2%3D%2216.8%22%20y2%3D%2230.6%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%228.8%22%20y1%3D%2230.7%22%20x2%3D%2211.9%22%20y2%3D%2230.7%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2215.4%22%20y1%3D%2230.7%22%20x2%3D%2218.5%22%20y2%3D%2230.7%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2219.6%22%20y1%3D%2217.2%22%20x2%3D%2224.000000000000004%22%20y2%3D%2220.4%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%221.3%22%20stroke-linecap%3D%22round%22%2F%3E%3Cg%3E%3Cline%20x1%3D%2211.600000000000001%22%20y1%3D%225.399999999999999%22%20x2%3D%229.600000000000001%22%20y2%3D%222.8%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%220.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%229.600000000000001%22%20cy%3D%222.8%22%20r%3D%221%22%20fill%3D%22%23f0a848%22%2F%3E%3Cline%20x1%3D%2216%22%20y1%3D%225.399999999999999%22%20x2%3D%2218%22%20y2%3D%222.8%22%20stroke%3D%22%23f0a848%22%20stroke-width%3D%220.9%22%20stroke-linecap%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%222.8%22%20r%3D%221%22%20fill%3D%22%23f0a848%22%2F%3E%3Ccircle%20cx%3D%2213.8%22%20cy%3D%2216.2%22%20r%3D%228.4%22%20fill%3D%22%23f0a848%22%2F%3E%3Cpath%20d%3D%22M12.200000000000001%2018.2%20L15.4%2018.2%20L13.8%2021.6%20Z%22%20fill%3D%22%23f0a848%22%2F%3E%3Ccircle%20cx%3D%2210.9%22%20cy%3D%227.799999999999999%22%20r%3D%222.6%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2216.7%22%20cy%3D%227.799999999999999%22%20r%3D%222.6%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2211.200000000000001%22%20cy%3D%228.1%22%20r%3D%221.3%22%20fill%3D%22%2314161d%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%228.1%22%20r%3D%221.3%22%20fill%3D%22%2314161d%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E">
 <style>
   :root {
+    /* The page the panels sit on: a shade darker than --bg, so the nav and the
+       conversation read as cards (the "sober" pass, 2026-10-28). */
+    --page: #0d0f14;
+    --radius: 12px;
     --bg: #14161d;
     --bg-raised: #1b1e27;
     --bg-inset: #0e1015;
@@ -32,7 +36,9 @@
     --menu-bg: #14140f;
     --menu-hover: #26261c;
     --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
-    --sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
+    /* One sans for the whole interface; the mono is kept for what IS code —
+       code blocks, session ids, the terminal. */
+    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
   }
   /* Light mode. An ORTHOGONAL axis to the accent palette: only the base surfaces
      and text flip; the instance's accent (--amber/--phosphor) stays its identity.
@@ -42,7 +48,8 @@
      a pale amber on white. Accent-tinted surfaces (--amber-soft) derive from
      --amber and follow on their own. */
   :root[data-mode="light"] {
-    --bg: #eef0f4;
+    --page: #eef0f4;
+    --bg: #f7f8fa;
     --bg-raised: #ffffff;
     --bg-inset: #e5e8ee;
     --line: #d2d7e0;
@@ -69,10 +76,11 @@
   html, body { height: 100%; }
   html { overflow: hidden; }
   body {
-    background: var(--bg);
+    background: var(--page);
     color: var(--text);
     font-family: var(--sans);
-    font-size: 15px;
+    font-size: 14px;
+    -webkit-font-smoothing: antialiased;
     display: flex;
     flex-direction: column;
     /* Fixed chassis: the page never scrolls — only the inner panels (channel
@@ -101,17 +109,16 @@
         reports. Set from `visualViewport` (see `syncViewport`), touch only. */
   body { height: 100dvh; }
   body.vv-sized { height: var(--app-h); }
+  /* Labels read as quiet sentence-case captions, not stamped capitals. */
   .label {
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.18em;
-    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 500;
     color: var(--text-dim);
   }
   /* Message time, hooked onto the speaker's label. Paler and less spaced out
      than the label: there for whoever looks for it, quiet otherwise. */
   .label .time {
-    letter-spacing: 0.06em;
+    font-weight: 400;
     opacity: 0.6;
   }
   .label .time::before {
@@ -126,8 +133,7 @@
     align-items: center;
     gap: 12px;
     padding: 10px 16px;
-    border-bottom: 1px solid var(--line);
-    background: var(--bg-raised);
+    background: var(--page);
     flex-wrap: wrap;
   }
   /* Keep the toolbar buttons together so they never split across lines. */
@@ -156,11 +162,11 @@
   #starBtn:hover { border-color: var(--amber); color: var(--amber); }
   #starBtn:hover .star-count { color: var(--amber); }
   header .brand {
-    font-family: var(--mono);
-    font-size: 14px;
-    color: var(--amber);
-    letter-spacing: 0.06em;
+    font-size: 15px;
+    font-weight: 700;
+    color: var(--text);
   }
+  header .brand::before { color: var(--amber); }
   header .brand::before { content: "◆ "; }
   /* The brand name doubles as the cockpit's editable title: click to rename,
      Enter/blur commits, Escape cancels. A dashed outline + pencil on hover make
@@ -225,7 +231,7 @@
   #verMenu {
     position: fixed; top: 42px; left: 12px; z-index: 1001;
     background: var(--menu-bg); border: 1px solid var(--line); border-radius: 6px;
-    padding: 10px 12px; font-family: var(--mono); font-size: 12px;
+    padding: 10px 12px; font-family: var(--sans); font-size: 12px;
     min-width: 210px; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
   }
   #verMenu .vm-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
@@ -241,7 +247,7 @@
   #tabMenu {
     position: fixed; z-index: 1002;
     background: var(--menu-bg); border: 1px solid var(--line); border-radius: 6px;
-    padding: 4px; font-family: var(--mono); font-size: 12px;
+    padding: 4px; font-family: var(--sans); font-size: 12px;
     min-width: 170px; box-shadow: 0 6px 20px rgba(0,0,0,0.5);
   }
   #tabMenu .tm-item {
@@ -298,7 +304,7 @@
   #updateBanner {
     position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
     background: var(--amber); color: #1a1200;
-    font-family: var(--mono); font-size: 12px; text-align: center;
+    font-family: var(--sans); font-size: 12px; text-align: center;
     padding: 6px 12px;
   }
   /* The re-login reminder (sign-in within 48h / expired). Same top strip as the
@@ -306,7 +312,7 @@
   #expiryBanner {
     position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
     background: var(--amber); color: #1a1200;
-    font-family: var(--mono); font-size: 12px;
+    font-family: var(--sans); font-size: 12px;
     padding: 6px 12px;
     display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap;
   }
@@ -317,7 +323,7 @@
   }
   .gauge { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .gauge .value {
-    font-family: var(--mono);
+    font-family: var(--sans);
     font-size: 12px;
     color: var(--text);
     white-space: nowrap;
@@ -385,23 +391,25 @@
     .dial .needle, .dial .pct { transition: none; }
   }
   button {
-    font-family: var(--mono);
-    font-size: 12px;
-    letter-spacing: 0.06em;
+    font-family: var(--sans);
+    font-size: 13px;
+    font-weight: 500;
     background: transparent;
     color: var(--text);
     border: 1px solid var(--line);
-    border-radius: 4px;
+    border-radius: 8px;
     padding: 6px 12px;
     cursor: pointer;
+    transition: background 0.12s, color 0.12s, border-color 0.12s;
   }
-  /* Compact icon buttons in the header (emoji + tooltip). */
+  /* Icon buttons carry no frame: a soft fill on hover is the whole affordance. */
   header button.icon {
-    padding: 5px 8px;
+    padding: 7px 9px;
     font-size: 14px;
     line-height: 1;
-    letter-spacing: 0;
+    border-color: transparent;
   }
+  header button.icon:hover { background: var(--bg-raised); border-color: transparent; color: var(--text); }
   header button.icon.stop:hover { border-color: var(--err); color: var(--err); }
   /* The bell's diagonal slash shows only when notifications are muted. */
   #muteNotif:not(.muted) .mute-slash { display: none; }
@@ -431,7 +439,7 @@
   .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); }
+  #moreMenu .mm-label { padding: 2px 4px; font-size: 12px; font-weight: 500; color: var(--text-dim); }
   .mm-themes { display: flex; gap: 6px; padding: 2px 4px 4px; }
   /* Swatch buttons must override `#moreMenu button { width:100% }` — hence the
      id-scoped selector so specificity wins. */
@@ -450,9 +458,10 @@
   }
   #moreMenu .mm-mode button:hover { border-color: var(--text-dim); color: var(--text); }
   #moreMenu .mm-mode button.active { border-color: var(--amber); color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
-  button:hover { border-color: var(--amber); color: var(--amber); }
+  button:hover { background: var(--bg-inset); border-color: var(--line); color: var(--text); }
   button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
   button.primary { background: var(--amber); border-color: var(--amber); color: #1a1205; font-weight: 600; }
+  button.primary:hover { background: var(--amber); border-color: var(--amber); color: #1a1205; }
   button.primary:hover { filter: brightness(1.1); }
   button:disabled { opacity: 0.4; cursor: default; }
 
@@ -464,22 +473,22 @@
     flex-direction: column;
     gap: 2px;
     background: var(--bg-raised);
-    border-right: 1px solid var(--line);
+    border: 1px solid var(--line);
+    border-radius: var(--radius);
     padding: 12px 8px;
     overflow-y: auto;
   }
-  #tabbar .side-label { padding: 0 8px 8px; }
+  #tabbar .side-label { padding: 0 8px 8px; font-size: 13px; font-weight: 600; color: var(--text); }
   .tab {
     position: relative;
     display: flex;
     flex-direction: column;   /* row 1 (led+name+icons) then row 2 (info) */
     gap: 1px;
-    font-family: var(--mono);
-    font-size: 12px;
+    font-size: 14px;
     color: var(--text-dim);
     border-left: 2px solid transparent;
-    border-radius: 4px;
-    padding: 9px 10px 11px;
+    border-radius: 8px;
+    padding: 8px 10px 10px;
     cursor: pointer;
     user-select: none;
   }
@@ -497,7 +506,7 @@
     right: 10px;
     bottom: 3px;
     height: 2px;
-    background: var(--line);
+    background: transparent;
     border-radius: 1px;
     overflow: hidden;
   }
@@ -521,7 +530,7 @@
     color: var(--text);
     font-weight: 600;
     border-left-color: var(--phosphor);
-    border-radius: 0 4px 4px 0;
+    border-radius: 0 8px 8px 0;
     box-shadow: inset 3px 0 0 var(--phosphor);
   }
   /* Full-width row 2: "xxx ago" on the left, context % hard right. */
@@ -541,8 +550,7 @@
   .tab input.rename {
     flex: 1;
     min-width: 0;
-    font-family: var(--mono);
-    font-size: 12px;
+    font-size: 13px;
     background: var(--bg-inset);
     border: 1px solid var(--amber);
     border-radius: 3px;
@@ -591,13 +599,14 @@
   }
   @media (prefers-reduced-motion: reduce) { .tab.working, .tab.has-bg { animation: none; } }
   #newTab, #newGroup, #newGroupBare {
-    margin-top: 8px;
-    border: 1px dashed var(--line);
-    font-size: 12px;
+    margin-top: 6px;
+    border-color: transparent;
+    font-size: 13px;
     color: var(--text-dim);
-    padding: 8px;
+    padding: 8px 10px;
+    text-align: left;
   }
-  #newTab:hover, #newGroup:hover, #newGroupBare:hover { color: var(--amber); border-color: var(--amber); }
+  #newTab:hover, #newGroup:hover, #newGroupBare:hover { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
   #newGroup { margin-top: 4px; }
   /* The fallback "new group" entry: only on desktop, only while the rail (which
      has its own) is hidden for want of a group. */
@@ -618,7 +627,7 @@
     padding-top: 8px;
     background: var(--bg-raised);
     /* Separates it from the list scrolling underneath, with no extra rule. */
-    box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, 0.6);
+    box-shadow: 0 -8px 10px -10px rgba(0, 0, 0, 0.35);
   }
   /* The tweak channel's tab keeps its slot's tint, so it is recognisable in the
      same place as before it was started. */
@@ -633,18 +642,22 @@
     gap: 2px;
     text-align: left;
     padding: 8px;
-    border: 1px solid var(--amber);
-    border-radius: 6px;
+    border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
+    border-radius: 10px;
     width: 100%;
     background: linear-gradient(var(--amber-soft), var(--amber-soft)), var(--bg-raised);
   }
   #tweakCta .tweak-title {
-    font-family: var(--mono);
-    font-size: 12px;
+    font-family: var(--sans);
+    font-size: 13px;
     font-weight: 600;
     color: var(--amber);
   }
-  #tweakCta .tweak-sub { font-size: 10px; color: var(--text-dim); }
+  /* The running version beside the title: the code a tweak starts from. Its own
+     span, because the title's text is rewritten while the source is fetched. */
+  #tweakCta .tweak-row { display: flex; align-items: baseline; gap: 8px; }
+  #tweakCta .tweak-ver { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--text-dim); }
+  #tweakCta .tweak-sub { font-size: 11px; color: var(--text-dim); }
   #tweakCta .tweak-arrow { display: inline-block; transition: transform 0.15s ease; }
   /* No permanent animation: an element blinking here would compete with the
      real signals (a waiting tab, the gauges) and would turn into noise. */
@@ -662,12 +675,11 @@
     display: flex;
     align-items: center;
     gap: 6px;
-    font-family: var(--mono);
-    font-size: 10px;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
+    font-family: var(--sans);
+    font-size: 12px;
+    font-weight: 600;
     color: var(--text-dim);
-    border-radius: 4px;
+    border-radius: 6px;
     padding: 5px 8px;
     cursor: pointer;
     user-select: none;
@@ -683,7 +695,7 @@
   .group-head input.rename {
     flex: 1;
     min-width: 0;
-    font-family: var(--mono);
+    font-family: var(--sans);
     font-size: 11px;
     text-transform: none;
     letter-spacing: normal;
@@ -719,13 +731,19 @@
     /* The column only earns its space once a group exists: with none, the
        cockpit is the single agents list it always was (body.has-groups is set
        from groups.length in applyView). */
+    /* The rail and the agents column are ONE card: the rail is its tinted
+       left half, the agents column its right half. */
     body.has-groups #groupRail {
       width: 190px; flex: none;
       display: flex; flex-direction: column; gap: 2px;
       background: var(--bg-inset);
-      border-right: 1px solid var(--line);
+      border: 1px solid var(--line); border-right: none;
+      border-radius: var(--radius) 0 0 var(--radius);
       padding: 12px 8px; overflow-y: auto;
     }
+    body.has-groups #tabbar { border-radius: 0 var(--radius) var(--radius) 0; }
+    /* Cancel <main>'s gap between the two halves of the card. */
+    body.has-groups #groupRail { margin-right: -12px; }
     .rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px 8px; }
     #railMini { border: none; background: none; padding: 2px 6px; color: var(--text-dim); font-size: 13px; }
     #railMini:hover { color: var(--amber); }
@@ -752,7 +770,7 @@
       background: var(--bg-inset); border: 1px solid var(--amber); border-radius: 3px;
       color: var(--text); padding: 2px 5px;
     }
-    .rail-count { flex: none; font-family: var(--mono); font-size: 10px; color: var(--text-dim); }
+    .rail-count { flex: none; font-family: var(--sans); font-size: 10px; color: var(--text-dim); }
     /* What a group that is not on screen asks of you — the single place it shows. */
     .rail-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; display: none; }
     .rail-item.needs-answer .rail-dot { display: block; background: var(--amber); animation: breathe 1.2s ease-in-out infinite; }
@@ -777,8 +795,8 @@
     .rail-add:hover { color: var(--amber); }
     .rail-del:hover { color: var(--err); }
     #groupRail #newGroup {
-      margin-top: 8px; border: 1px dashed var(--line);
-      font-size: 12px; color: var(--text-dim); padding: 8px;
+      margin-top: 6px; border-color: transparent; text-align: left;
+      font-size: 13px; color: var(--text-dim); padding: 8px 10px;
     }
     #groupRail #newGroup:hover { color: var(--amber); border-color: var(--amber); }
     /* Collapsed to icons, like a dock: the names live in the tooltips. */
@@ -827,11 +845,16 @@
   .icon-picker input { width: 100%; font-size: 13px; box-sizing: border-box; }
 
   /* ── Body ────────────────────────────────────────────── */
-  main { flex: 1; display: flex; min-height: 0; }
+  /* The panels are cards on the page: a gap around them, rounded corners.
+     A phone keeps edge-to-edge panels (see the mobile query). */
+  main { flex: 1; display: flex; min-height: 0; padding: 0 12px 12px; gap: 12px; }
   /* min-height:0 so the transcript (flex:1) bounds the height instead of pushing
      the chassis; overflow-y:auto keeps the setup screen reachable when it
      overflows (with a session running the transcript fits exactly → inert). */
-  .chat-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; position: relative; }
+  .chat-pane {
+    flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; position: relative;
+    background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
+  }
   /* File drag-and-drop target: a dashed accent overlay while a file hovers.
      pointer-events:none so the drop still lands on the pane underneath. */
   .chat-pane.dropping::after {
@@ -846,7 +869,7 @@
 
   .field { display: flex; flex-direction: column; gap: 6px; }
   input[type="text"] {
-    font-family: var(--mono);
+    font-family: var(--sans);
     font-size: 13px;
     background: var(--bg-inset);
     border: 1px solid var(--line);
@@ -909,7 +932,7 @@
   .profile-card.selected { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
   .profile-card.selected .pc-name { color: var(--amber); }
   .profile-card:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
-  .pc-name { font-family: var(--mono); font-size: 13px; }
+  .pc-name { font-size: 14px; font-weight: 600; }
   .pc-blurb {
     color: var(--text-dim); font-size: 11.5px; line-height: 1.35;
     display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
@@ -1081,8 +1104,8 @@
   .turn.user { align-self: flex-end; align-items: flex-end; }
   .turn.claude { align-self: flex-start; }
   .bubble {
-    padding: 7px 12px;
-    border-radius: 6px;
+    padding: 9px 14px;
+    border-radius: 14px;
     font-size: 14px;
     line-height: 1.4;
     white-space: pre-wrap;
@@ -1134,10 +1157,11 @@
     color: #fff; border-radius: 50%; width: 16px; height: 16px; font-size: 9px; line-height: 1; cursor: pointer; padding: 0; }
   .cmp-att .cmp-x:hover { background: var(--err); }
   .turn.claude .bubble {
-    background: var(--bg-inset);
+    background: var(--bg-raised);
     border: 1px solid var(--line);
-    font-family: var(--mono);
-    font-size: 13px;
+    font-family: var(--sans);
+    font-size: 14px;
+    line-height: 1.55;
     /* Wrap long prose lines so nothing is clipped; still preserves the
        TUI's own newlines. (Wide tables come through history as real HTML.) */
     white-space: pre-wrap;
@@ -1152,7 +1176,7 @@
   .turn.claude.live-preview .bubble {
     opacity: 0.55;
     white-space: pre-wrap;
-    font-family: var(--mono);
+    font-family: var(--sans);
   }
   .turn.claude.live-preview .bubble::after {
     content: "▍";
@@ -1433,7 +1457,7 @@
   .validate { align-self: flex-end; margin-top: 2px; }
   .freetext-row { display: flex; gap: 8px; width: 100%; }
   .freetext-row input { flex: 1; }
-  #thinking { display: none; align-self: flex-start; color: var(--text-dim); font-family: var(--mono); font-size: 12.5px; padding: 0 22px 6px; }
+  #thinking { display: none; align-self: flex-start; color: var(--text-dim); font-family: var(--sans); font-size: 12.5px; padding: 0 22px 6px; }
   #thinking.visible { display: flex; align-items: center; gap: 6px; }
   /* Shimmering text (an amber sweep) + a little Shadok pumping alongside. */
   #thinking .tw-text {
@@ -1460,9 +1484,8 @@
     gap: 10px;
     /* The bottom padding absorbs the home indicator (viewport-fit=cover): without
        it the field slides under it and half the text becomes unreadable. */
-    padding: 14px 22px calc(18px + env(safe-area-inset-bottom, 0px));
-    border-top: 1px solid var(--line);
-    background: var(--bg-raised);
+    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
+    background: var(--bg);
   }
   #composer textarea {
     flex: 1;
@@ -1471,17 +1494,17 @@
     min-width: 0;
     font-family: var(--sans);
     font-size: 14px;
-    background: var(--bg-inset);
+    background: var(--bg-raised);
     color: var(--text);
     border: 1px solid var(--line);
-    border-radius: 6px;
-    padding: 10px 12px;
+    border-radius: var(--radius);
+    padding: 11px 14px;
     resize: none;
     min-height: 42px;
     max-height: 160px;
     line-height: 1.45;
   }
-  #composer textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
+  #composer textarea:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
 
   /* ── Engine room (live terminal) ─────────────────────── */
   #machine {
@@ -1523,13 +1546,13 @@
      channel's actions only existed in terminal mode; it now sits above both
      views, and `hidden` only removes it while the "New agent" form is up (no
      channel to act on yet). */
-  #chanBar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg-raised); font-family: var(--mono); font-size: 12px; }
+  #chanBar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--bg-raised); font-size: 13px; }
   #chanBar[hidden] { display: none; }
   #chanBar .label { color: var(--text-dim); }
-  #chanBar #chanBarName { color: var(--amber); }
+  #chanBar #chanBarName { color: var(--text); font-size: 14px; font-weight: 600; }
   /* Channel actions on the right of the bar (icons like the header). */
   .chan-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
-  #chanBar button.icon { padding: 4px 8px; font-size: 14px; line-height: 1; letter-spacing: 0; }
+  #chanBar button.icon { padding: 6px 8px; font-size: 14px; line-height: 1; border-color: transparent; }
   #chanBar button.icon.stop:hover { border-color: var(--err); color: var(--err); }
   #chanBar button.icon.on { border-color: var(--amber); color: var(--amber); background: color-mix(in srgb, var(--amber) 15%, transparent); }
   /* Reload-to-apply: a green, pulsing text pill (not a bare icon) so an available
@@ -1549,7 +1572,7 @@
      shown as a compact "● name ▾" pill on a phone. */
   #chanPicker {
     display: none; align-items: center; gap: 6px;
-    font-family: var(--mono); font-size: 13px; cursor: pointer;
+    font-family: var(--sans); font-size: 13px; cursor: pointer;
     background: var(--bg-inset); color: var(--text);
     border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
     max-width: 55vw;
@@ -1559,6 +1582,12 @@
   body.picker-open #chanPicker { border-color: var(--amber); }
   body.picker-open #chanPicker .pk-caret { transform: rotate(180deg); }
   /* ── Mobile: sidebar hidden, navigation via the channel header's selector ── */
+  /* A phone has no room for cards: panels go edge to edge, as before. */
+  @media (max-width: 640px) {
+    main { padding: 0; gap: 0; }
+    .chat-pane { border: none; border-radius: 0; }
+    #tabbar { border-radius: 0; }
+  }
   @media (max-width: 640px) {
     #tabbar { display: none; }
     #chanPicker { display: inline-flex; min-width: 0; }
@@ -1649,8 +1678,7 @@
   }
   #emptyState.visible, #startingState.visible { display: flex; }
   #emptyState .es-title, #startingState .es-title {
-    font-family: var(--mono); font-size: 12px;
-    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
+    font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--text);
   }
   #emptyState .es-hint, #startingState .es-hint { color: var(--text-dim); font-size: 13px; line-height: 1.5; max-width: 44ch; }
   .keys {
@@ -1783,7 +1811,7 @@
   .preprompt { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-raised); }
   .preprompt > summary {
     cursor: pointer; padding: 8px 12px; color: var(--text-dim);
-    font-size: 12px; font-family: var(--mono); list-style: none;
+    font-size: 12px; font-family: var(--sans); list-style: none;
   }
   .preprompt > summary::-webkit-details-marker { display: none; }
   .preprompt > summary::before { content: "▸ "; }
@@ -1878,10 +1906,8 @@
   /* Same treatment as the cockpit's labels (.label, channel bar): the popin
      visibly belongs to the same family. */
   .modal > .sec-head strong {
-    font-family: var(--mono); font-size: 11px; font-weight: normal;
-    letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
+    font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--text);
   }
-  .modal > .sec-head strong .obj { color: var(--amber); }
   .modal-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px; }
   .modal-foot {
     flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end;
@@ -2596,7 +2622,7 @@
     <div id="tweakSlot">
       <button id="tweakCta" type="button"
               title="Change shadok-ai itself — the agent works on a branch and opens a pull request">
-        <span class="tweak-title">🛠 Tweak Shadok-AI <span class="tweak-arrow">›</span></span>
+        <span class="tweak-row"><span class="tweak-title">🛠 Tweak Shadok-AI <span class="tweak-arrow">›</span></span><span class="tweak-ver" id="tweakVer"></span></span>
         <span class="tweak-sub">change the cockpit itself</span>
       </button>
     </div>
@@ -6702,6 +6728,8 @@
       return;
     }
     lastVersion = msg;
+    const tv = document.getElementById("tweakVer");
+    if (tv) tv.textContent = msg.current ? "v" + msg.current : "";
     if (!verView) return;
     const ahead = msg.latest && verIsNewer(msg.latest, msg.current);
     verView.textContent = ahead ? "v" + msg.current + " → " + msg.latest : "v" + (msg.current || "?");