shadok-ai 0.15.34 → 0.15.36

package/README.md

@@ -76,9 +76,11 @@ Enter to skip; you can add it later from the web UI).
 - **Channels** — one `claude` process each, running in parallel. Renaming,
   grouping, and closing all sync live between the browser and Telegram: it's
   one list, server-owned, not two copies.
-- **Groups column** — on a desktop the groups get a column of their own, left
-  of the agents: pick a group and the agents column shows only its agents
-  (*Ungrouped* holds the rest, the home agent included unless you file it). Each
+- **Groups column** — once you create a group, on a desktop the groups get a
+  column of their own, left of the agents (with no group there is no column, just
+  the single agents list): pick a group and the agents column shows only its
+  agents (*Ungrouped* holds the rest, the home agent included unless you file
+  it). Each
   group has an icon — drawn at random, double-click it to pick another: choose
   from the grid, type any emoji, or **type a word** (`rocket`, `bug`, `money`…)
   to search for a matching one — and a **＋** that creates the new agent straight
@@ -86,9 +88,10 @@ Enter to skip; you can add it later from the web UI).
   A single click on a group (its icon or its row) selects it; this matters once
   **«** folds the column to its icons, where the icon is the whole row.
   Dragging an agent onto a group still files it there, and dragging groups
-  reorders them. Double-click a name to rename it. A dot on a group you are not looking at says one of its agents
-  is waiting for you, has an unread answer, or is working. On a phone nothing
-  changes: the agents sheet still lists every group.
+  reorders them. Double-click a name to rename it. A group you are not looking at
+  carries the same signal its agents do — the row lights up (and breathes) when
+  one is working, waiting for you, or has an unread answer, the way a channel
+  does. On a phone nothing changes: the agents sheet still lists every group.
 - **Worktree isolation** — spawned agents get their own git worktree and branch
   by default, so parallel agents never collide. Work is never auto-discarded:
   an empty worktree is reclaimed on close, anything with changes or commits

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shadok-ai",
-  "version": "0.15.34",
+  "version": "0.15.36",
   "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;
@@ -590,15 +598,20 @@
     animation: breathe 1.8s ease-in-out infinite;
   }
   @media (prefers-reduced-motion: reduce) { .tab.working, .tab.has-bg { animation: none; } }
-  #newTab, #newGroup {
-    margin-top: 8px;
-    border: 1px dashed var(--line);
-    font-size: 12px;
+  #newTab, #newGroup, #newGroupBare {
+    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 { 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. */
+  #newGroupBare { display: none; margin-top: 4px; }
+  @media (min-width: 641px) { body:not(.has-groups) #newGroupBare { display: block; } }
   /* The column's only coloured element: tabs are borderless rows and the ＋ are
      ghost buttons, so a solid card reads as an action rather than as a session.
      Pinned to the bottom (margin-top:auto + sticky) so it stays reachable while
@@ -614,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. */
@@ -629,18 +642,18 @@
     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); }
+  #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. */
@@ -658,12 +671,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;
@@ -679,7 +691,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;
@@ -712,13 +724,22 @@
   #groupRail { display: none; }
   .icon-picker[hidden] { display: none; }
   @media (min-width: 641px) {
-    #groupRail {
+    /* 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); }
@@ -745,13 +766,22 @@
       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; }
     .rail-item.unread .rail-dot { display: block; background: var(--phosphor); }
     .rail-item.working .rail-dot { display: block; background: var(--text-dim); animation: breathe 1.8s ease-in-out infinite; }
     @media (prefers-reduced-motion: reduce) { .rail-dot { animation: none !important; } }
+    /* A group carries the SAME effect its channels do — a working or finished
+       agent makes the whole group row read like that agent, not just a dot.
+       Mirrors .tab.working / .needs-answer / .unread. Shown for a group you are
+       NOT viewing (the active one shows its state on each agent in the column).
+       Placed after :hover so the state colour wins over the hover background. */
+    .rail-item.working { background: var(--amber-soft); animation: breathe 1.6s ease-in-out infinite; }
+    .rail-item.needs-answer { background: color-mix(in srgb, var(--amber) 28%, transparent); color: var(--text); }
+    .rail-item.unread { background: rgba(127, 201, 127, 0.14); border-left-color: var(--ok); color: var(--text); }
+    @media (prefers-reduced-motion: reduce) { .rail-item.working { animation: none !important; } }
     .rail-add, .rail-del {
       flex: none; display: none; border: none; background: none;
       padding: 0 3px; font-size: 13px; line-height: 1; color: var(--text-dim);
@@ -761,8 +791,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. */
@@ -780,7 +810,11 @@
     body.rail-mini .rail-dot { position: absolute; top: 4px; right: 4px; }
 
     /* The agents column, narrowed to the selected group. */
-    #tabbar .side-label .sl-all { display: none; }
+    /* With a column the list header is the selected group's name; with no
+       column it is just "Agents" again (the "Ungrouped" view label would read
+       oddly when there is nothing to be ungrouped from). */
+    body.has-groups #tabbar .side-label .sl-all { display: none; }
+    body:not(.has-groups) #tabbar .side-label .sl-view { display: none; }
     #tabbar .group-head { display: none; }
     #tabbar .group { margin-top: 0; }
     #tabbar .group-body { padding-left: 0; }
@@ -807,11 +841,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 {
@@ -826,7 +865,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);
@@ -889,7 +928,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;
@@ -1061,8 +1100,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;
@@ -1114,10 +1153,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;
@@ -1132,7 +1172,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: "▍";
@@ -1413,7 +1453,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 {
@@ -1440,9 +1480,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;
@@ -1451,17 +1490,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 {
@@ -1503,13 +1542,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
@@ -1529,7 +1568,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;
@@ -1539,6 +1578,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; }
@@ -1629,8 +1674,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 {
@@ -1763,7 +1807,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: "▸ "; }
@@ -1858,10 +1902,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;
@@ -2568,6 +2610,11 @@
     <div id="groups"></div>
     <p id="viewEmpty" class="check-hint" hidden>No agent in this group yet — create one, or drag one onto the group.</p>
     <button id="newTab" title="New agent">＋ new agent</button>
+    <!-- The rail carries "+ new group" at its foot, but the rail is gone until a
+         group exists — so this is the way to create the FIRST one. Desktop-only
+         and only while there are no groups (CSS); it hands off to the rail's
+         button once the column appears. -->
+    <button id="newGroupBare" type="button" title="New agent group">＋ new group</button>
     <div id="tweakSlot">
       <button id="tweakCta" type="button"
               title="Change shadok-ai itself — the agent works on a branch and opens a pull request">
@@ -4188,6 +4235,8 @@
 
   function applyView() {
     const v = currentView();
+    // No group → no column (invariant: the rail earns its space, see the CSS).
+    document.body.classList.toggle("has-groups", groups.length > 0);
     tabbar.dataset.view = v;
     for (const g of groups) g.el.classList.toggle("in-view", String(g.id) === v);
     const g = groups.find((x) => String(x.id) === v);
@@ -9786,12 +9835,18 @@
     markTweakTab(t);
     launchTab(t, { cwd: data.cwd, worktree: true, profile: "Shadok-Tweak" });
   });
-  newGroupBtn.addEventListener("click", () => {
+  function addGroup() {
     const g = createGroup();
     persistGroups();
+    // applyView first, so has-groups is set and the column is shown SYNCHRONOUSLY
+    // — otherwise railShown() below is still false on the first group (created
+    // from the bare button, while the rail was hidden) and it would not select.
+    applyView();
     // A new group is where you are going next: select it (it starts empty).
     if (railShown()) setView(g.id, { follow: false });
-  });
+  }
+  newGroupBtn.addEventListener("click", addGroup);
+  $("newGroupBare").addEventListener("click", addGroup);
 
   // ── Quota gauges (5h / 7d) ──────────────────────────────
   function fmtReset(sec) {