@bakapiano/ccsm 0.20.0 → 0.20.2

package/lib/tunnel.js

@@ -288,13 +288,39 @@ async function probe(force = false) {
   return probeCache;
 }
 
+// Kick a single background probe refresh, deduped so overlapping callers
+// share one shell-out. Never throws.
+let probeRefreshing = null;
+function kickProbeRefresh() {
+  if (!probeRefreshing) {
+    probeRefreshing = probe(true)
+      .catch(() => probeCache)
+      .finally(() => { probeRefreshing = null; });
+  }
+  return probeRefreshing;
+}
+
 // Invalidate the cache when callers know the on-disk state likely changed
-// (post-install, post-login, etc.). Next probe() re-shells.
-function invalidateProbe() { probeCache = null; probeCacheAt = 0; }
+// (post-install, post-login, etc.) and immediately start repopulating it
+// in the background so the next status poll is already fresh.
+function invalidateProbe() { probeCache = null; probeCacheAt = 0; kickProbeRefresh(); }
+
+// Stale-while-revalidate accessor used by status(). NEVER shells out in
+// the request path: returns whatever's cached right now (possibly stale,
+// or null on the very first call before the boot prewarm lands) and kicks
+// off a background refresh when the cache is stale. This is what keeps
+// /api/tunnel/status — and therefore the whole Remote page's live refresh
+// (plus the device list, which the client used to bundle into the same
+// round-trip) — from stalling ~700ms every time the 30s cache expires.
+function probeCachedSWR() {
+  const fresh = probeCache && Date.now() - probeCacheAt < PROBE_TTL_MS;
+  if (!fresh) kickProbeRefresh();
+  return probeCache;
+}
 
 async function status() {
   return {
-    providers: await probe(),
+    providers: probeCachedSWR(),
     running: !!current,
     provider: current?.provider || null,
     url: current?.url || null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "Claude Code Session Manager — Windows web UI to manage many concurrent claude sessions: live list, snapshot/restore, focus existing window, new session in an isolated workspace with repo clones",
   "license": "MIT",
   "main": "server.js",

package/public/assets/copilot-color.svg

@@ -1 +1 @@
-<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>GithubCopilot</title><path d="M19.245 5.364c1.322 1.36 1.877 3.216 2.11 5.817.622 0 1.2.135 1.592.654l.73.964c.21.278.323.61.323.955v2.62c0 .339-.173.669-.453.868C20.239 19.602 16.157 21.5 12 21.5c-4.6 0-9.205-2.583-11.547-4.258-.28-.2-.452-.53-.453-.868v-2.62c0-.345.113-.679.321-.956l.73-.963c.392-.517.974-.654 1.593-.654l.029-.297c.25-2.446.81-4.213 2.082-5.52 2.461-2.54 5.71-2.851 7.146-2.864h.198c1.436.013 4.685.323 7.146 2.864zm-7.244 4.328c-.284 0-.613.016-.962.05-.123.447-.305.85-.57 1.108-1.05 1.023-2.316 1.18-2.994 1.18-.638 0-1.306-.13-1.851-.464-.516.165-1.012.403-1.044.996a65.882 65.882 0 00-.063 2.884l-.002.48c-.002.563-.005 1.126-.013 1.69.002.326.204.63.51.765 2.482 1.102 4.83 1.657 6.99 1.657 2.156 0 4.504-.555 6.985-1.657a.854.854 0 00.51-.766c.03-1.682.006-3.372-.076-5.053-.031-.596-.528-.83-1.046-.996-.546.333-1.212.464-1.85.464-.677 0-1.942-.157-2.993-1.18-.266-.258-.447-.661-.57-1.108-.32-.032-.64-.049-.96-.05zm-2.525 4.013c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zm5 0c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zM7.635 5.087c-1.05.102-1.935.438-2.385.906-.975 1.037-.765 3.668-.21 4.224.405.394 1.17.657 1.995.657h.09c.649-.013 1.785-.176 2.73-1.11.435-.41.705-1.433.675-2.47-.03-.834-.27-1.52-.63-1.813-.39-.336-1.275-.482-2.265-.394zm6.465.394c-.36.292-.6.98-.63 1.813-.03 1.037.24 2.06.675 2.47.968.957 2.136 1.104 2.776 1.11h.044c.825 0 1.59-.263 1.995-.657.555-.556.765-3.187-.21-4.224-.45-.468-1.335-.804-2.385-.906-.99-.088-1.875.058-2.265.394zM12 7.615c-.24 0-.525.015-.84.044.03.16.045.336.06.526l-.001.159a2.94 2.94 0 01-.014.25c.225-.022.425-.027.612-.028h.366c.187 0 .387.006.612.028-.015-.146-.015-.277-.015-.409.015-.19.03-.365.06-.526a9.29 9.29 0 00-.84-.044z"></path></svg>
+<svg fill="#8957e5" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>GithubCopilot</title><path d="M19.245 5.364c1.322 1.36 1.877 3.216 2.11 5.817.622 0 1.2.135 1.592.654l.73.964c.21.278.323.61.323.955v2.62c0 .339-.173.669-.453.868C20.239 19.602 16.157 21.5 12 21.5c-4.6 0-9.205-2.583-11.547-4.258-.28-.2-.452-.53-.453-.868v-2.62c0-.345.113-.679.321-.956l.73-.963c.392-.517.974-.654 1.593-.654l.029-.297c.25-2.446.81-4.213 2.082-5.52 2.461-2.54 5.71-2.851 7.146-2.864h.198c1.436.013 4.685.323 7.146 2.864zm-7.244 4.328c-.284 0-.613.016-.962.05-.123.447-.305.85-.57 1.108-1.05 1.023-2.316 1.18-2.994 1.18-.638 0-1.306-.13-1.851-.464-.516.165-1.012.403-1.044.996a65.882 65.882 0 00-.063 2.884l-.002.48c-.002.563-.005 1.126-.013 1.69.002.326.204.63.51.765 2.482 1.102 4.83 1.657 6.99 1.657 2.156 0 4.504-.555 6.985-1.657a.854.854 0 00.51-.766c.03-1.682.006-3.372-.076-5.053-.031-.596-.528-.83-1.046-.996-.546.333-1.212.464-1.85.464-.677 0-1.942-.157-2.993-1.18-.266-.258-.447-.661-.57-1.108-.32-.032-.64-.049-.96-.05zm-2.525 4.013c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zm5 0c.539 0 .976.426.976.95v1.753c0 .525-.437.95-.976.95a.964.964 0 01-.976-.95v-1.752c0-.525.437-.951.976-.951zM7.635 5.087c-1.05.102-1.935.438-2.385.906-.975 1.037-.765 3.668-.21 4.224.405.394 1.17.657 1.995.657h.09c.649-.013 1.785-.176 2.73-1.11.435-.41.705-1.433.675-2.47-.03-.834-.27-1.52-.63-1.813-.39-.336-1.275-.482-2.265-.394zm6.465.394c-.36.292-.6.98-.63 1.813-.03 1.037.24 2.06.675 2.47.968.957 2.136 1.104 2.776 1.11h.044c.825 0 1.59-.263 1.995-.657.555-.556.765-3.187-.21-4.224-.45-.468-1.335-.804-2.385-.906-.99-.088-1.875.058-2.265.394zM12 7.615c-.24 0-.525.015-.84.044.03.16.045.336.06.526l-.001.159a2.94 2.94 0 01-.014.25c.225-.022.425-.027.612-.028h.366c.187 0 .387.006.612.028-.015-.146-.015-.277-.015-.409.015-.19.03-.365.06-.526a9.29 9.29 0 00-.84-.044z"></path></svg>

package/public/css/dark.css

@@ -14,14 +14,41 @@
  * session tabs, and the mobile key bar — those are dark in both themes. */
 
 /* ── buttons ─────────────────────────────────────────────────────── */
-/* .action.primary is bg:var(--ink)/text:var(--bg-elev) — already inverts
-   correctly (light slab, dark text) when the vars flip. Only its hover
-   hardcoded #000, which would darken the wrong way; send it brighter. */
+/* Primary CTA. In light mode it's the ink slab (near-black bg, light
+   text). The faithful inversion in dark mode is a near-WHITE slab, which
+   reads as a harsh pure-white button floating in the dark popups (the
+   Create / Done / Save buttons). Use the accent instead — that's the
+   conventional dark-UI primary and matches the accent-colored Launch CTA,
+   so every "do this" button in dark mode is one coherent color. */
+[data-theme="dark"] .action.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
 [data-theme="dark"] .action.primary:hover {
-  background: #ffffff;
-  border-color: #ffffff;
+  background: var(--accent-deep);
+  border-color: var(--accent-deep);
   box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.6);
 }
+/* .fab is the same ink-slab pattern (var(--ink) bg) — give it the same
+   accent treatment so it isn't a white circle either. */
+[data-theme="dark"] .fab {
+  background: var(--accent);
+  color: #fff;
+}
+[data-theme="dark"] .fab:hover { background: var(--accent-deep); }
+/* Active "Working directory" mode card (Launch page). Its selected
+   highlight uses var(--ink) for the border + icon chip, which flips to
+   light cream in dark mode → a glaring white frame + white icon square.
+   Use the accent highlight instead, matching the dark primary button. */
+[data-theme="dark"] .workdir-mode-opt.is-active {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 1px var(--accent) inset;
+}
+[data-theme="dark"] .workdir-mode-opt.is-active .workdir-mode-icon {
+  background: var(--accent);
+  color: #fff;
+}
 /* Focus rings / hover shadows used a dark ink wash that vanishes on a dark
    ground — switch to a light wash so the affordance stays visible. */
 [data-theme="dark"] .action:hover { box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.5); }
@@ -32,9 +59,11 @@
 [data-theme="dark"] textarea:focus { box-shadow: 0 0 0 3px rgba(236, 231, 218, 0.12); }
 [data-theme="dark"] .action.danger:hover { background: #c75050; border-color: #c75050; }
 
-/* The select chevron SVG is baked with a mid-gray stroke; lighten it. */
+/* Filled triangle (see forms.css note) tinted to the faint dark-mode ink
+   so the select arrow is a calm solid mark instead of a pair of bright
+   jagged strokes. */
 [data-theme="dark"] select {
-  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b4ab98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1 L5 5 L9 1 Z' fill='%236d6a62'/></svg>");
 }
 
 /* ── brand mark ──────────────────────────────────────────────────── */
@@ -45,6 +74,22 @@
    fill untouched — it's already legible there.) */
 [data-theme="dark"] .brand-rect { fill: #38342f; }
 
+/* ── notifications (toast + restart pill) ────────────────────────── */
+/* Both use var(--ink) as their surface and var(--bg) as their text — a
+   deliberate high-contrast inverted pill in light mode. But var(--ink)
+   flips to light cream in dark mode, so the bottom-right notification
+   showed up as a pale pill that read as "still light / not following the
+   theme". In dark mode, give them a dark elevated surface with light text
+   + a defined border so they sit IN the dark theme like a snackbar. The
+   ::before chip and the spinner already use currentColor, so they invert
+   along with the text for free. */
+[data-theme="dark"] .toast,
+[data-theme="dark"] .restart-banner {
+  background: var(--bg-elev);
+  color: var(--ink);
+  border: 1px solid var(--border-strong);
+}
+
 /* ── paper grain ─────────────────────────────────────────────────── */
 /* The noise texture is a dark-tinted SVG multiplied over the surface —
    invisible (and wrong blend) on a dark ground. Screen-blend it at low

package/public/css/feedback.css

@@ -202,39 +202,50 @@
   text-align: center;
 }
 
-/* RestartOverlay — small top-of-viewport pill (not fullscreen) while
-   a user-initiated backend restart is in flight. Slides down from the
-   top, slides out on dismiss. Pinned center so it survives PWA WCO /
-   standalone window-control overlays without bumping into them. */
+/* RestartOverlay — a transient pill shown while a user-initiated backend
+   restart is in flight. Styled as a toast and pinned to the same
+   bottom-right slot so every floating notification in the app lives in
+   one place and reads the same. (It only ever coexists with a real toast
+   on restart *failure*, by which point the banner has already unmounted,
+   so sharing the slot doesn't collide.) Colors track the theme via
+   var(--ink)/var(--bg) — the old hardcoded #fff text went invisible on
+   the light pill dark mode produces. */
 .restart-banner {
   position: fixed;
-  top: env(titlebar-area-height, 16px);
-  left: 50%;
-  transform: translateX(-50%);
+  bottom: var(--s-5);
+  right: var(--s-5);
   z-index: 1200;
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 8px 16px;
-  border-radius: 999px;
+  gap: 12px;
+  max-width: 380px;
+  padding: 11px 16px 11px 14px;
   background: var(--ink);
-  color: #fff;
+  color: var(--bg);
+  border-radius: 6px;
   font-size: 12.5px;
-  font-weight: 500;
+  font-weight: 400;
   letter-spacing: -0.005em;
-  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
-  animation: restart-banner-in .18s ease-out;
+  line-height: 1.45;
+  box-shadow:
+    0 10px 32px -8px rgba(26, 24, 21, 0.30),
+    0 2px 6px rgba(26, 24, 21, 0.12),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
+  animation: toast-pop-in .28s cubic-bezier(.34, 1.4, .64, 1);
 }
-@keyframes restart-banner-in {
-  from { opacity: 0; transform: translate(-50%, -8px); }
-  to   { opacity: 1; transform: translate(-50%, 0); }
+@keyframes toast-pop-in {
+  from { opacity: 0; transform: translateY(10px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
 }
 .restart-banner-spinner {
-  width: 12px;
-  height: 12px;
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
   border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.25);
-  border-top-color: #fff;
+  /* currentColor = the pill's text color (var(--bg)), so the spinner
+     stays legible in both themes without a hardcoded white. */
+  border: 2px solid color-mix(in srgb, currentColor 28%, transparent);
+  border-top-color: currentColor;
   animation: restart-spin 0.7s linear infinite;
 }
 .restart-banner-text { white-space: nowrap; }
@@ -312,8 +323,11 @@
   font-weight: 500;
   padding: 3px 6px;
   border-radius: 4px;
-  background: rgba(255, 255, 255, 0.10);
-  color: rgba(255, 255, 255, 0.75);
+  /* currentColor = the pill's text (var(--bg)), so the default chip stays
+     visible whether the pill is dark (light theme) or light (dark theme).
+     The .ok / .error variants below override with their own colored bg. */
+  background: color-mix(in srgb, currentColor 14%, transparent);
+  color: currentColor;
   flex-shrink: 0;
   line-height: 1;
 }

package/public/css/forms.css

@@ -63,7 +63,11 @@
 .action.danger {
   background: var(--red);
   border-color: var(--red);
-  color: var(--bg-elev);
+  /* Always light text — the danger red is dark in both themes, so it must
+     NOT follow --bg-elev (which is a dark surface in dark mode and would
+     render black text on red). In light mode --bg-elev was #fff anyway,
+     so this is identical there. */
+  color: #fff;
 }
 .action.danger:hover {
   background: #9a3636;
@@ -72,7 +76,14 @@
 
 .input, input[type="text"], input[type="number"], select, textarea {
   appearance: none;
-  background: var(--bg-elev);
+  /* background-COLOR, not the `background` shorthand — the shorthand resets
+     background-repeat/position/size to their initial values (repeat / 0% 0%
+     / auto), and since this rule matches <select> via the higher-specificity
+     `.input` selector, it was overriding the `select` rule's no-repeat +
+     positioning. Result: the dropdown arrow SVG tiled across the whole
+     select as a grid of little triangles. Setting only the color leaves the
+     select rule's background-* longhands intact. */
+  background-color: var(--bg-elev);
   border: 1px solid var(--border-strong);
   color: var(--ink);
   padding: 8px 12px;
@@ -90,7 +101,10 @@
   box-shadow: 0 0 0 3px rgba(26, 24, 21, 0.08);
 }
 select {
-  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%238a8475' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1,1 6,7 11,1'/></svg>");
+  /* A single FILLED triangle, not a 2-stroke chevron. Thin strokes alias
+     into jagged "teeth" at this ~9px size; a solid shape anti-aliases
+     cleanly and reads as one arrow rather than a pair of serrations. */
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'><path d='M1 1 L5 5 L9 1 Z' fill='%238a8475'/></svg>");
   background-repeat: no-repeat;
   background-position: right 10px center;
   background-size: 10px;
@@ -121,11 +135,15 @@ textarea {
   font-family: var(--body);
   font-size: 12.5px;
   font-weight: 500;
-  padding: 5px 14px;
+  padding: 5px 13px;
   border-radius: 6px;
   cursor: pointer;
   transition: background .14s ease, color .14s ease;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
 }
+.seg-btn svg { width: 14px; height: 14px; opacity: 0.85; }
 .seg-btn:hover { color: var(--ink); }
 .seg-btn.is-active {
   background: var(--bg-elev);

package/public/css/responsive.css

@@ -14,7 +14,15 @@
    layout; a circular floating button bottom-left toggles a full-screen
    drawer that re-mounts the sidebar over everything else. */
 @media (max-width: 640px) {
-  .app.is-mobile { grid-template-columns: 1fr !important; }
+  /* Shrink the whole app to the visible area ABOVE the soft keyboard.
+     --app-vh is the visualViewport height (main.js); the layout-viewport
+     100vh never shrinks for the keyboard, which left the terminal's bottom
+     rows hidden behind it. 100dvh is the fallback before the JS runs. */
+  .app.is-mobile { grid-template-columns: 1fr !important; height: var(--app-vh, 100dvh); }
+  /* Keyboard up: keep the terminal's content above the floating key bar
+     (TerminalKeyBar, ~50px). Only the terminal pane needs this — other
+     pages have their own scroll padding. */
+  body.kb-open .app.is-mobile .session-pane-body { padding-bottom: 50px; }
   .app.is-mobile .sidebar {
     /* Collapsed (drawer closed): out of the flow + invisible. */
     position: fixed;
@@ -96,7 +104,7 @@
    scrolling the page while the user is dragging the FAB. */
 .mobile-nav-fab {
   position: fixed;
-  z-index: 210;
+  z-index: 220;                 /* above the terminal key bar (215) */
   width: 52px;
   height: 52px;
   border-radius: 50%;
@@ -112,8 +120,12 @@
   cursor: grab;
   touch-action: none;
   user-select: none;
-  transition: box-shadow .15s, background .15s;
+  transition: box-shadow .15s, background .15s, transform .18s ease;
 }
+/* When the soft keyboard (and the terminal key bar that floats above it)
+   is up, lift the FAB clear of the key bar so they don't overlap. The
+   key bar is ~50px tall; nudge up a bit more for breathing room. */
+body.kb-open .mobile-nav-fab { transform: translateY(-60px); }
 /* No translateY on hover — would fight the inline left/bottom we set
    on every pointermove during drag, making the FAB jitter under the
    finger as :hover toggles on/off. Background-only hover for desktop
@@ -141,7 +153,7 @@
 .mobile-nav-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 199;     /* below sidebar (200) + fab (210), above content */
+  z-index: 199;     /* below sidebar (200) + fab (220), above content */
   background: rgba(26, 24, 21, 0.45);
   backdrop-filter: blur(2px);
   animation: panel-in .15s ease-out;

package/public/css/widgets.css

@@ -415,15 +415,6 @@
 }
 .workdir-detail .filex-body { height: 320px; }
 
-.workdir-foot {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin: 4px -20px -18px;
-  padding: 12px 20px;
-  border-top: 1px solid var(--border-soft);
-  background: var(--bg);
-}
 
 .icon-radio-sub {
   font-size: 11px;
@@ -981,13 +972,9 @@
   gap: 8px;
   padding: 4px 0;
 }
-.entity-form-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 6px;
-  margin-top: 4px;
-}
-.entity-test-button { margin-right: auto; }
+/* EntityFormModal's actions live in the modal footer (.modal-foot) now;
+   this keeps the Test button pushed to the left of Cancel/Save there. */
+.modal-foot .entity-test-button { margin-right: auto; }
 
 .entity-test-result {
   margin-top: 4px;
@@ -1334,12 +1321,14 @@
 .adopt-tab.is-active {
   background: var(--ink);
   border-color: var(--ink);
-  color: #fff;
+  /* var(--bg-elev), not #fff — the slab is var(--ink), which is LIGHT in
+     dark mode, so white text would be invisible. --bg-elev tracks it. */
+  color: var(--bg-elev);
   font-weight: 500;
 }
 .adopt-tab.is-active .adopt-tab-count {
-  background: rgba(255, 255, 255, 0.22);
-  color: #fff;
+  background: color-mix(in srgb, var(--bg-elev) 22%, transparent);
+  color: var(--bg-elev);
 }
 .adopt-tab-icon { display: inline-flex; width: 16px; height: 16px; }
 .adopt-tab-icon svg { width: 100%; height: 100%; }
@@ -2581,7 +2570,11 @@
   letter-spacing: 0.08em;
   padding: 1px 7px;
   border-radius: 999px;
-  background: var(--ink);
+  /* Brand-accent chip, not the ink slab. var(--ink) flips to a light cream
+     in dark mode, which made this a glaring white pill; the accent is a
+     saturated mid-tone that's distinct (eye lands on it) and identical in
+     both themes. */
+  background: var(--accent);
   color: #fff;
   font-variant-numeric: tabular-nums;
 }

package/public/js/components/EntityFormModal.js

@@ -65,9 +65,21 @@ export function EntityFormModal({
     }
   };
 
+  const footer = html`
+    ${onTest ? html`
+      <button type="button" class="action small subtle entity-test-button"
+              disabled=${testing} onClick=${runTest}>
+        ${testing ? 'Testing…' : testLabel}
+      </button>` : null}
+    <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
+    <button type="submit" form="entity-form-modal" class=${`action small ${danger ? 'danger' : 'primary'}`}
+            disabled=${saving}>
+      ${saving ? 'Saving…' : submitLabel}
+    </button>`;
+
   return html`
-    <${Modal} title=${title} onClose=${onClose} width=${440}>
-      <form class="entity-form" onSubmit=${submit}>
+    <${Modal} title=${title} onClose=${onClose} width=${440} footer=${footer}>
+      <form id="entity-form-modal" class="entity-form" onSubmit=${submit}>
         ${fields.map((f) => html`
           <label class="entity-field" key=${f.key}>
             <span class="entity-field-label">${f.label}</span>
@@ -130,18 +142,6 @@ export function EntityFormModal({
             ${testResult.stdout ? html`<pre class="entity-test-out">${testResult.stdout}</pre>` : null}
             ${testResult.stderr ? html`<pre class="entity-test-out is-stderr">${testResult.stderr}</pre>` : null}
           </div>` : null}
-        <div class="entity-form-actions">
-          ${onTest ? html`
-            <button type="button" class="action small subtle entity-test-button"
-                    disabled=${testing} onClick=${runTest}>
-              ${testing ? 'Testing…' : testLabel}
-            </button>` : null}
-          <button type="button" class="action small subtle" onClick=${onClose}>Cancel</button>
-          <button type="submit" class=${`action small ${danger ? 'danger' : 'primary'}`}
-                  disabled=${saving}>
-            ${saving ? 'Saving…' : submitLabel}
-          </button>
-        </div>
       </form>
     </${Modal}>`;
 }

package/public/js/components/Modal.js

@@ -1,15 +1,20 @@
 // Centered modal dialog with backdrop. Closes via Esc, the corner X,
 // or a click on the backdrop.
 //
-//   <${Modal} onClose=${close} title="Choose CLI" width=${440}>
-//     ...body...
+//   <${Modal} onClose=${close} title="Choose CLI" width=${440}
+//             footer=${html`<button ...>Cancel</button> ...`}>
+//     ...body (scrolls)...
 //   </${Modal}>
+//
+// When `footer` is given it renders in a fixed .modal-foot below the
+// scrollable body — the body grows/scrolls between a pinned head and a
+// pinned footer (the .modal is a flex column capped at 90vh).
 
 import { html } from '../html.js';
 import { useEffect, useRef } from 'preact/hooks';
 import { createPortal } from 'preact/compat';
 
-export function Modal({ title, width = 440, onClose, children }) {
+export function Modal({ title, width = 440, onClose, children, footer }) {
   const panelRef = useRef(null);
 
   useEffect(() => {
@@ -44,6 +49,7 @@ export function Modal({ title, width = 440, onClose, children }) {
             </button>
           </div>` : null}
         <div class="modal-body">${children}</div>
+        ${footer ? html`<div class="modal-foot">${footer}</div>` : null}
       </div>
     </div>`,
     document.body

package/public/js/components/TerminalView.js

@@ -215,50 +215,74 @@ export function TerminalView({ terminalId, cliType }) {
     if (dev) params.set('device', dev);
     const qs = params.toString();
     const wsUrl = `${wsBase()}/ws/terminal/${encodeURIComponent(terminalId)}${qs ? `?${qs}` : ''}`;
-    const ws = new WebSocket(wsUrl);
-    ws.binaryType = 'arraybuffer';
-    wsRef.current = ws;
+    // Auto-reconnect. Mobile networks drop the WS constantly (radio sleep,
+    // cell↔wifi handoff, tab backgrounding) — leaving a dead "[disconnected]"
+    // terminal is the #1 mobile annoyance. We retry with capped backoff and
+    // re-attach to the same PTY. The server replays its FULL history on every
+    // attach (lib/webTerminal.js), so on a reconnect we reset the screen
+    // first, otherwise the replay stacks on top of what's already shown.
+    let closedByUs = false;
+    let reconnectTimer = null;
+    let attempts = 0;
+    let everOpened = false;
 
-    ws.onopen = () => {
-      // Fit synchronously here before reading cols/rows. On localhost the
-      // WS handshake usually completes within a few ms — well before the
-      // rAF-scheduled initial fit runs — so without this we'd ship the
-      // xterm.js default 80x24 to the PTY, claude would print its prompt
-      // wrapped at 80 cols, and the follow-up resize from the rAF fit
-      // wouldn't reflow the already-emitted bytes. Visible as squeezed
-      // text on every session switch.
-      scheduleFit();
-      ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
-    };
-    ws.onmessage = (ev) => {
-      let frame;
-      try { frame = JSON.parse(ev.data); } catch { return; }
-      if (frame.type === 'output') {
-        term.write(frame.data);
-      } else if (frame.type === 'exit') {
-        term.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
-      }
-    };
-    ws.onclose = (ev) => {
-      // Server uses code 4001 + reason "displaced by another client"
-      // when a fresh attach takes over the session (latest-wins policy
-      // in lib/webTerminal.js's attach). We replace the terminal with
-      // a full-pane prompt + Take it back button via setDisplaced(true).
-      // Generic disconnects (network blip, server restart, PTY exit)
-      // get the dim inline notice as before — those usually self-heal
-      // and aren't worth a modal.
-      if (ev && ev.code === 4001) {
-        setDisplaced(true);
-      } else {
-        term.write('\r\n\x1b[2m[disconnected]\x1b[0m\r\n');
-      }
+    const connect = () => {
+      const ws = new WebSocket(wsUrl);
+      ws.binaryType = 'arraybuffer';
+      wsRef.current = ws;
+
+      ws.onopen = () => {
+        if (everOpened) {
+          // Reconnect: clear so the replayed history repopulates cleanly.
+          try { term.reset(); } catch {}
+        }
+        everOpened = true;
+        attempts = 0;
+        // Fit synchronously before sending cols/rows — the handshake often
+        // completes before the rAF-scheduled fit, so without this we'd ship
+        // the default 80x24 and claude would wrap its prompt at 80 cols.
+        scheduleFit();
+        ws.send(JSON.stringify({ type: 'resize', cols: term.cols, rows: term.rows }));
+      };
+      ws.onmessage = (ev) => {
+        let frame;
+        try { frame = JSON.parse(ev.data); } catch { return; }
+        if (frame.type === 'output') {
+          term.write(frame.data);
+        } else if (frame.type === 'exit') {
+          term.write(`\r\n\x1b[2m[process exited · code ${frame.code}]\x1b[0m\r\n`);
+        }
+      };
+      ws.onclose = (ev) => {
+        if (closedByUs) return;
+        // Displaced by another client (latest-wins, code 4001) — reconnecting
+        // would just ping-pong, so show the "Take it back" pane instead.
+        if (ev && ev.code === 4001) { setDisplaced(true); return; }
+        // PTY is gone (server restarted / session ended, code 4404) — a
+        // reconnect can't revive it; the session needs a full resume.
+        if (ev && ev.code === 4404) {
+          term.write('\r\n\x1b[2m[session ended]\x1b[0m\r\n');
+          return;
+        }
+        // Network blip — retry with backoff (0.5/1/2/4/8s cap), indefinitely
+        // until the effect tears down (cleanup flips closedByUs).
+        attempts++;
+        const delay = Math.min(8000, 500 * 2 ** Math.min(attempts - 1, 4));
+        term.write('\r\n\x1b[2m[disconnected · reconnecting…]\x1b[0m\r\n');
+        reconnectTimer = setTimeout(() => { if (!closedByUs) connect(); }, delay);
+      };
     };
+    connect();
 
+    // onData/onResize read wsRef.current (not a captured socket) so they keep
+    // working across reconnects.
     const onData = (data) => {
-      if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data }));
+      const ws = wsRef.current;
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'input', data }));
     };
     const onResize = ({ cols, rows }) => {
-      if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'resize', cols, rows }));
+      const ws = wsRef.current;
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'resize', cols, rows }));
     };
     term.onData(onData);
     term.onResize(onResize);
@@ -458,7 +482,9 @@ export function TerminalView({ terminalId, cliType }) {
       if (panelMo) panelMo.disconnect();
       vv?.removeEventListener?.('resize', onVisualResize);
       vv?.removeEventListener?.('scroll', onVisualResize);
-      try { ws.close(); } catch {}
+      closedByUs = true;
+      if (reconnectTimer) clearTimeout(reconnectTimer);
+      try { wsRef.current?.close(); } catch {}
       try { term.dispose(); } catch {}
       termRef.current = null;
       wsRef.current = null;

package/public/js/icons.js

@@ -113,6 +113,15 @@ export const IconMonitor = ic('0 0 24 24', html`
   <line x1="12" y1="16" x2="12" y2="20"/>
 `, 13);
 
+// Light / dark theme glyphs for the Appearance toggle.
+export const IconSun = ic('0 0 24 24', html`
+  <circle cx="12" cy="12" r="4"/>
+  <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/>
+`, 14);
+export const IconMoon = ic('0 0 24 24', html`
+  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+`, 14);
+
 // "> _" terminal prompt — for the Terminals nav tab
 export const IconTerminal = ic('0 0 24 24', html`
   <polyline points="4 17 10 11 4 5"/>

package/public/js/main.js

@@ -156,6 +156,26 @@ function syncTitlebarHeight() {
 syncTitlebarHeight();
 navigator.windowControlsOverlay?.addEventListener?.('geometrychange', syncTitlebarHeight);
 
+// Mobile soft-keyboard height. The layout viewport (100vh) does NOT shrink
+// when the on-screen keyboard slides up — only `visualViewport` does — so a
+// full-height terminal keeps its bottom rows hidden behind the keyboard. We
+// publish the visible height as --app-vh (used by .app.is-mobile in
+// responsive.css to shrink the whole app to the area above the keyboard)
+// and flag body.kb-open when the keyboard is up (so the terminal can reserve
+// room for the floating key bar). cap at a 120px delta so a browser
+// URL-bar collapse doesn't read as a keyboard.
+function syncViewportHeight() {
+  const vv = window.visualViewport;
+  if (!vv) return;
+  document.documentElement.style.setProperty('--app-vh', `${Math.round(vv.height)}px`);
+  const kbUp = (window.innerHeight - vv.height - vv.offsetTop) > 120;
+  document.body.classList.toggle('kb-open', kbUp);
+}
+syncViewportHeight();
+window.visualViewport?.addEventListener?.('resize', syncViewportHeight);
+window.visualViewport?.addEventListener?.('scroll', syncViewportHeight);
+window.addEventListener('resize', syncViewportHeight);
+
 (async () => {
   // Version-mismatch guard runs FIRST. If the user's backend has been
   // upgraded since this per-version frontend was loaded, bounce back to

package/public/js/pages/ConfigurePage.js

@@ -24,7 +24,7 @@ import { Card } from '../components/Card.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
 import { EntityFormModal } from '../components/EntityFormModal.js';
 import { useDragSort } from '../components/useDragSort.js';
-import { IconPlus, IconPencil, IconClose, IconTerminal, IconFolder, IconBranch, IconRefresh, IconChevronUp, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor } from '../icons.js';
+import { IconPlus, IconPencil, IconClose, IconTerminal, IconFolder, IconBranch, IconRefresh, IconChevronUp, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor, IconSun, IconMoon, IconMonitor } from '../icons.js';
 import { parseArgs, formatArgs } from '../util.js';
 
 // Tokenize the three free-form args fields into string[] before they hit
@@ -584,9 +584,9 @@ function RestartButton() {
 function ThemeToggle() {
   const mode = themeMode.value;
   const opts = [
-    { id: 'light', label: 'Light' },
-    { id: 'dark', label: 'Dark' },
-    { id: 'system', label: 'System' },
+    { id: 'light', label: 'Light', icon: IconSun },
+    { id: 'dark', label: 'Dark', icon: IconMoon },
+    { id: 'system', label: 'System', icon: IconMonitor },
   ];
   return html`
     <div class="seg" role="group" aria-label="Appearance">
@@ -594,7 +594,9 @@ function ThemeToggle() {
         <button key=${o.id} type="button"
                 class=${`seg-btn${mode === o.id ? ' is-active' : ''}`}
                 aria-pressed=${mode === o.id}
-                onClick=${() => setThemeMode(o.id)}>${o.label}</button>`)}
+                onClick=${() => setThemeMode(o.id)}>
+          <${o.icon} /><span>${o.label}</span>
+        </button>`)}
     </div>`;
 }
 

package/public/js/pages/LaunchPage.js

@@ -6,7 +6,7 @@ import { html } from '../html.js';
 import { useState, useEffect } from 'preact/hooks';
 import { signal } from '@preact/signals';
 import { config, folders, selectSession, selectTab } from '../state.js';
-import { createCli, createFolder, createRepo, reorderFolders, refreshAll } from '../api.js';
+import { createCli, createFolder, createRepo, refreshAll } from '../api.js';
 import { setToast } from '../toast.js';
 import { streamNewSession, resetProgress } from '../streaming.js';
 import { PageTitleBar } from '../components/PageTitleBar.js';
@@ -15,7 +15,6 @@ import { Modal } from '../components/Modal.js';
 import { PickerPanel } from '../components/Picker.js';
 import { DirectoryPicker } from '../components/DirectoryPicker.js';
 import { AdoptModal } from '../components/AdoptModal.js';
-import { useDragSort } from '../components/useDragSort.js';
 import { BrandMark, IconTerminal, IconFolder, IconFolderOpen, IconBranch, IconChevronDown, IconForCliType, IconClaudeColor, IconCodexColor, IconCopilotColor, IconSparkle, IconWorkspace, IconArrowRight } from '../icons.js';
 
 const ROOT_ID = 'newSessionProgress';
@@ -95,13 +94,6 @@ function LaunchHero() {
     });
   }, [cliId, folderId, mode, cwd, selectedRepos.value]);
 
-  const folderDnd = useDragSort(
-    folders.value.map((f) => f.id),
-    async (nextIds) => {
-      try { await reorderFolders(nextIds); }
-      catch (e) { setToast(e.message, 'error'); }
-    },
-  );
 
   const sig = repos.map((r) => r.name + ':' + r.defaultSelected).join('|');
   useStateOnce(sig, () => initRepoSelection(repos, saved?.repos));
@@ -205,8 +197,8 @@ function LaunchHero() {
 
   // --- Folder picker config --------------------------------------------
   const folderItems = [
-    { id: '', label: 'Unsorted', meta: 'no folder', undraggable: true },
-    ...folders.value.map((f) => ({ id: f.id, label: f.name })),
+    { id: '', label: 'Unsorted', meta: 'no folder', undraggable: true, icon: html`<${IconFolderOpen} />` },
+    ...folders.value.map((f) => ({ id: f.id, label: f.name, icon: html`<${IconFolder} />` })),
   ];
   const folderCreateFields = [
     { key: 'name', label: 'Folder name', placeholder: 'Work / Personal / ...', autoFocus: true, required: true },
@@ -281,7 +273,14 @@ function LaunchHero() {
           <span class="pill-chev"><${IconChevronDown} /></span>
         </button>
         ${openPicker === 'workdir' ? html`
-          <${Modal} title="Working directory" onClose=${close} width=${640}>
+          <${Modal} title="Working directory" onClose=${close} width=${640}
+                    footer=${html`
+                      <button type="button" class="action subtle" onClick=${close}>Cancel</button>
+                      <button type="button" class="action primary"
+                              disabled=${mode === 'cwd' && !cwd}
+                              onClick=${close}>
+                        ${mode === 'cwd' ? 'Use folder' : 'Done'}
+                      </button>`}>
             <div class="workdir-modal">
               <div class="workdir-mode-grid">
                 <button type="button"
@@ -321,14 +320,6 @@ function LaunchHero() {
                                       onPick=${(p) => { setCwd(p); }} />
                 `}
               </div>
-              <div class="workdir-foot">
-                <button type="button" class="action subtle" onClick=${close}>Cancel</button>
-                <button type="button" class="action primary"
-                        disabled=${mode === 'cwd' && !cwd}
-                        onClick=${close}>
-                  ${mode === 'cwd' ? 'Use folder' : 'Done'}
-                </button>
-              </div>
             </div>
           </${Modal}>` : null}
 
@@ -344,7 +335,6 @@ function LaunchHero() {
           <${Modal} title="Choose folder" onClose=${close} width=${400}>
             <${PickerPanel} items=${folderItems} selectedId=${folderId}
                             showSearch=${false}
-                            dnd=${folderDnd}
                             onSelect=${(id) => setFolderId(id)}
                             onCreate=${async (v) => {
                               try {

package/public/js/pages/RemotePage.js

@@ -311,14 +311,16 @@ export function RemotePage() {
   const [deviceList, setDeviceList] = useState([]);
   const pollRef = useRef(null);
 
-  async function refresh() {
+  // Tunnel status and the device list are fetched INDEPENDENTLY, not as a
+  // bundled Promise.all. /api/tunnel/status can lag behind a cold provider
+  // probe; the device list is cheap. Coupling them made the (fast) device
+  // list wait on the (slow) status round-trip, so the whole page appeared
+  // to refresh in one delayed lump. Now each updates its own state the
+  // moment its own fetch lands.
+  async function refreshStatus() {
     try {
-      const [s, devs] = await Promise.all([
-        api('GET', '/api/tunnel/status'),
-        api('GET', '/api/devices').catch(() => ({ devices: [] })),
-      ]);
+      const s = await api('GET', '/api/tunnel/status');
       setStatus(s);
-      setDeviceList(devs.devices || []);
       setTokenLocal((cur) => cur || s.token || '');
       setProvider((cur) => {
         if (s.running && s.provider) return s.provider;
@@ -336,6 +338,13 @@ export function RemotePage() {
       } catch {}
     } catch (e) { setToast(`status load failed · ${e.message}`, 'error'); }
   }
+  async function refreshDevices() {
+    try {
+      const devs = await api('GET', '/api/devices');
+      setDeviceList(devs.devices || []);
+    } catch { /* non-critical — keep the last good list on a transient error */ }
+  }
+  function refresh() { refreshStatus(); refreshDevices(); }
 
   useEffect(() => {
     refresh();
@@ -344,11 +353,11 @@ export function RemotePage() {
   }, []);
 
   async function onApproveDevice(id) {
-    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/approve`); refresh(); setToast('Device approved', 'ok'); }
+    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/approve`); refreshDevices(); setToast('Device approved', 'ok'); }
     catch (e) { setToast(`approve failed · ${e.message}`, 'error'); }
   }
   async function onRejectDevice(id) {
-    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/reject`); refresh(); setToast('Device rejected', 'ok'); }
+    try { await api('POST', `/api/devices/${encodeURIComponent(id)}/reject`); refreshDevices(); setToast('Device rejected', 'ok'); }
     catch (e) { setToast(`reject failed · ${e.message}`, 'error'); }
   }
   async function onDeleteDevice(d) {
@@ -357,7 +366,7 @@ export function RemotePage() {
       { title: 'Delete device record', okLabel: 'Delete', danger: true },
     );
     if (!ok) return;
-    try { await api('DELETE', `/api/devices/${encodeURIComponent(d.id)}`); refresh(); setToast('Device deleted', 'ok'); }
+    try { await api('DELETE', `/api/devices/${encodeURIComponent(d.id)}`); refreshDevices(); setToast('Device deleted', 'ok'); }
     catch (e) { setToast(`delete failed · ${e.message}`, 'error'); }
   }
   async function onRevokeDevice(d) {
@@ -365,13 +374,13 @@ export function RemotePage() {
       title: 'Revoke device', okLabel: 'Revoke', danger: true,
     });
     if (!ok) return;
-    try { await api('POST', `/api/devices/${encodeURIComponent(d.id)}/revoke`); refresh(); setToast('Access revoked', 'ok'); }
+    try { await api('POST', `/api/devices/${encodeURIComponent(d.id)}/revoke`); refreshDevices(); setToast('Access revoked', 'ok'); }
     catch (e) { setToast(`revoke failed · ${e.message}`, 'error'); }
   }
   async function onRenameDevice(d) {
     const next = await ccsmPrompt('Rename device', d.label || '', { okLabel: 'Save' });
     if (next === null) return;
-    try { await api('PUT', `/api/devices/${encodeURIComponent(d.id)}`, { label: next.trim() }); refresh(); }
+    try { await api('PUT', `/api/devices/${encodeURIComponent(d.id)}`, { label: next.trim() }); refreshDevices(); }
     catch (e) { setToast(`rename failed · ${e.message}`, 'error'); }
   }