@bakapiano/ccsm 0.18.6 → 0.19.0

package/lib/devices.js

@@ -89,7 +89,7 @@ async function pruneStale(map) {
 
 // Upsert. Returns the (possibly newly-created) device record. Caller
 // uses .status to decide whether to gate further work.
-async function record(id, { userAgent, ip } = {}) {
+async function record(id, { userAgent, ip, code } = {}) {
   if (!id) throw new Error('device id required');
   return withFileLock(store.filePath, async () => {
     const map = await store.load();
@@ -100,12 +100,20 @@ async function record(id, { userAgent, ip } = {}) {
       // is lastSeen and we flushed for this id within MIN_FLUSH_MS,
       // return the in-memory copy without touching disk. Saves a
       // disk write per request when remote pages poll at 2.5s.
-      const onlyLastSeen = (!userAgent || existing.userAgent) && (!ip || existing.ip === ip);
       const recentlyFlushed = (now - (lastFlushAt.get(id) || 0)) < MIN_FLUSH_MS;
+      let nonLastSeenChange = false;
       existing.lastSeen = now;
-      if (userAgent && !existing.userAgent) existing.userAgent = userAgent;
-      if (ip) existing.ip = ip;
-      if (onlyLastSeen && recentlyFlushed) return existing;
+      if (userAgent && !existing.userAgent) { existing.userAgent = userAgent; nonLastSeenChange = true; }
+      if (ip && existing.ip !== ip)         { existing.ip = ip; nonLastSeenChange = true; }
+      // Backfill code on existing records that pre-date the field, but
+      // never overwrite a code we've already stored — a device's code
+      // is its identifier across the approval flow and changing it
+      // mid-request would defeat the disambiguation it exists for.
+      if (code && !existing.code) {
+        existing.code = String(code).slice(0, 8);
+        nonLastSeenChange = true;
+      }
+      if (!nonLastSeenChange && recentlyFlushed) return existing;
       await store.save(map);
       lastFlushAt.set(id, now);
       return existing;
@@ -115,6 +123,12 @@ async function record(id, { userAgent, ip } = {}) {
       status: 'pending',
       userAgent: userAgent || null,
       ip: ip || null,
+      // 4-digit identification code the requesting browser generated
+      // and stashed in its own localStorage. Purely human-facing;
+      // the Remote page renders it next to each pending device so the
+      // operator can match against what the user reads off their
+      // screen before clicking Approve. Not a credential.
+      code: code ? String(code).slice(0, 8) : null,
       firstSeen: now,
       lastSeen: now,
       approvedAt: null,

package/lib/tunnel.js

@@ -69,6 +69,10 @@ let token = null;     // Remote-access bearer token. Null = no remote
                       // access enforced. Set via setToken() or by the
                       // start() call. Server.js middleware reads via
                       // getToken().
+let login = null;     // Pending interactive `devtunnel user login -d`
+                      // flow · { child, mode, lines, url, code, status,
+                      // startedAt, finishedAt, error, user }. Single
+                      // flow at a time. See startDevtunnelLogin().
 
 function getToken() { return token; }
 function setToken(t) { token = t ? String(t) : null; return token; }
@@ -178,9 +182,152 @@ async function status() {
     // pre-built share URL. The route itself is token-protected
     // (the middleware blocks non-loopback callers without it), so
     // anyone reaching this endpoint already knows the token.
+    login: loginSnapshot(),
   };
 }
 
+// ---- devtunnel interactive login (device-code flow) ----
+//
+// `devtunnel user login -d` prints a Microsoft device-code line then
+// polls Azure until the user authenticates in a browser (or until it
+// times out). We spawn it as a child, parse the URL + code out of the
+// first informational lines, and expose progress via /api/tunnel/status
+// so the Remote page can render a one-click sign-in panel instead of
+// asking the user to paste a command into a terminal.
+//
+// Two modes: 'microsoft' (default, -d) and 'github' (-g -d). GitHub is
+// only worth offering if the user explicitly picks it — Microsoft
+// device code works for Entra ID / personal MS accounts and is what
+// most people land on.
+//
+// State machine:
+//   running  → child alive, waiting for user
+//   done     → child exited 0; probe cache is invalidated so the next
+//              providers map shows `loggedIn: true`
+//   error    → child exited non-zero or crashed
+//   canceled → cancelDevtunnelLogin() killed the child
+function loginSnapshot() {
+  if (!login) return null;
+  return {
+    mode: login.mode,
+    status: login.status,
+    url: login.url,
+    code: login.code,
+    error: login.error || null,
+    user: login.user || null,
+    startedAt: login.startedAt,
+    finishedAt: login.finishedAt || null,
+    lines: login.lines.slice(-40),
+  };
+}
+
+async function startDevtunnelLogin({ mode = 'microsoft' } = {}) {
+  if (login && login.status === 'running') {
+    // Already in flight · return the snapshot rather than throwing so
+    // a double-click on Sign in doesn't error out.
+    return loginSnapshot();
+  }
+  const exe = await findBinary('devtunnel');
+  if (!exe) throw new Error('Microsoft Dev Tunnel is not installed');
+  // Starting a fresh login drops any existing credentials from disk
+  // before the new flow finishes — so the cached probe ("signed in as
+  // old-user") is now lying. Invalidate so the next /status round-
+  // trip re-shells `devtunnel user show` and the provider line flips
+  // to "not signed in" while the device-code panel is up.
+  invalidateProbe();
+
+  // -d picks the Microsoft device-code flow; -g switches it to GitHub.
+  // We deliberately stay on device code (no `--use-browser`) — the user
+  // may be driving the Remote page from a phone where opening a local
+  // browser on the host machine doesn't help.
+  const args = mode === 'github' ? ['user', 'login', '-g', '-d'] : ['user', 'login', '-d'];
+  const child = spawn(exe, args, { stdio: ['ignore', 'pipe', 'pipe'], windowsHide: true });
+  const entry = {
+    child,
+    mode,
+    lines: [],
+    url: null,
+    code: null,
+    status: 'running',
+    error: null,
+    user: null,
+    startedAt: Date.now(),
+    finishedAt: null,
+  };
+  login = entry;
+
+  const URL_RE  = /https?:\/\/\S+/i;
+  // Microsoft device-code prompt examples (have varied over CLI
+  // versions): "...enter the code ABCD-1234 to authenticate"
+  //            "...code XXXXXXXXX..."
+  // GitHub device flow uses 8 chars with a dash, e.g. `XXXX-XXXX`.
+  const CODE_RE = /\b([A-Z0-9]{4,}-?[A-Z0-9]{3,})\b/;
+  const LOGGED  = /Logged in as (\S+)/i;
+
+  const ingest = (line) => {
+    if (!line) return;
+    entry.lines.push(line);
+    if (entry.lines.length > 100) entry.lines.shift();
+    if (!entry.url) {
+      const m = line.match(URL_RE);
+      if (m) entry.url = m[0].replace(/[.,)]+$/, '');
+    }
+    if (!entry.code && /code/i.test(line)) {
+      // Skip URL-bearing fragments before extracting the code so we
+      // don't grab a uuid-ish segment out of the device login URL.
+      const sans = line.replace(URL_RE, '');
+      const m = sans.match(CODE_RE);
+      if (m) entry.code = m[1];
+    }
+    const u = line.match(LOGGED);
+    if (u) entry.user = u[1];
+  };
+
+  child.stdout.setEncoding('utf8');
+  child.stderr.setEncoding('utf8');
+  child.stdout.on('data', (c) => c.split(/\r?\n/).forEach(ingest));
+  child.stderr.on('data', (c) => c.split(/\r?\n/).forEach(ingest));
+
+  child.on('exit', (code, signal) => {
+    entry.finishedAt = Date.now();
+    if (entry.status === 'canceled') {
+      // already terminal; leave as-is
+    } else if (code === 0) {
+      entry.status = 'done';
+      // The just-completed login means the probe cache is now lying
+      // about `loggedIn: false`. Drop it so the next status() call
+      // re-shells `devtunnel user show` and the UI flips to signed-in.
+      invalidateProbe();
+    } else {
+      entry.status = 'error';
+      entry.error = `devtunnel exited code=${code}${signal ? ` signal=${signal}` : ''}`;
+    }
+  });
+  child.on('error', (err) => {
+    entry.status = 'error';
+    entry.error = String(err && err.message || err);
+    entry.finishedAt = Date.now();
+  });
+
+  return loginSnapshot();
+}
+
+function cancelDevtunnelLogin() {
+  if (!login || login.status !== 'running') return loginSnapshot();
+  login.status = 'canceled';
+  login.finishedAt = Date.now();
+  try { login.child.kill(); } catch {}
+  return loginSnapshot();
+}
+
+function clearDevtunnelLogin() {
+  if (login && login.status === 'running') {
+    try { login.child.kill(); } catch {}
+  }
+  login = null;
+  return null;
+}
+
 // Spawn the tunnel CLI. Resolves once we've parsed the public URL out
 // of stdout (with a timeout safety net). Throws if the CLI isn't
 // installed, the provider is unknown, or another tunnel is running.
@@ -269,4 +416,8 @@ module.exports = {
   installViaWinget,
   getToken,
   setToken,
+  startDevtunnelLogin,
+  cancelDevtunnelLogin,
+  clearDevtunnelLogin,
+  invalidateProbe,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.18.6",
+  "version": "0.19.0",
   "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/css/feedback.css

@@ -167,6 +167,78 @@
   font-size: 14px;
   font-weight: 500;
 }
+/* 4-digit identification code block on the pending-approval overlay.
+   The code matches what the host operator sees in the Remote page
+   alongside this pending request — visual confirmation they're
+   approving the right device. */
+.offline-code-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  margin-top: var(--s-3);
+  padding: var(--s-3) var(--s-5);
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+.offline-code-label {
+  font-size: 10.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.offline-code {
+  font-family: var(--mono);
+  font-size: 32px;
+  font-weight: 600;
+  letter-spacing: 0.18em;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.offline-code-hint {
+  font-size: 11.5px;
+  color: var(--ink-muted);
+  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. */
+.restart-banner {
+  position: fixed;
+  top: env(titlebar-area-height, 16px);
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1200;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  border-radius: 999px;
+  background: var(--ink);
+  color: #fff;
+  font-size: 12.5px;
+  font-weight: 500;
+  letter-spacing: -0.005em;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
+  animation: restart-banner-in .18s ease-out;
+}
+@keyframes restart-banner-in {
+  from { opacity: 0; transform: translate(-50%, -8px); }
+  to   { opacity: 1; transform: translate(-50%, 0); }
+}
+.restart-banner-spinner {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.25);
+  border-top-color: #fff;
+  animation: restart-spin 0.7s linear infinite;
+}
+.restart-banner-text { white-space: nowrap; }
+@keyframes restart-spin { to { transform: rotate(360deg); } }
 .offline-fallback {
   margin-top: var(--s-3);
   width: 100%;

package/public/css/responsive.css

@@ -120,6 +120,14 @@
    pointers; touch never matches :hover. */
 .mobile-nav-fab:hover  { background: var(--bg); }
 .mobile-nav-fab:active { cursor: grabbing; }
+/* Suppress the browser's default focus ring + tap highlight — on touch
+   the ring lingers after every tap and reads as a stuck "selected"
+   state on the FAB. We're not removing all affordance: the icon swap
+   (hamburger ↔ X) + the is-open border change still communicate state.
+   :focus-visible is also dropped here since the FAB is touch-first. */
+.mobile-nav-fab:focus,
+.mobile-nav-fab:focus-visible { outline: none; }
+.mobile-nav-fab { -webkit-tap-highlight-color: transparent; }
 .mobile-nav-fab svg { width: 22px; height: 22px; stroke-width: 2; pointer-events: none; }
 /* Open state stays the same paper white — only the icon swaps to X.
    Keeping the colour consistent reads as "same button, different
@@ -127,7 +135,7 @@
 .mobile-nav-fab.is-open {
   background: var(--bg-elev);
   color: var(--ink);
-  border-color: var(--ink);
+  border-color: var(--border-strong);
 }
 
 .mobile-nav-backdrop {

package/public/css/sidebar.css

@@ -5,7 +5,7 @@
      column: brand-strip → first nav item, last nav item → "Sessions"
      header, and "Sessions" header → first folder. Bump or shrink to
      adjust how breathy the rail feels. */
-  --sidebar-section-gap: var(--s-3);
+  --sidebar-section-gap: var(--s-2);
   position: sticky;
   top: 0;
   height: 100vh;
@@ -400,7 +400,9 @@ body.is-resizing-sidebar * {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0 10px;
+  /* Right padding matches .tree-session so the +-button glyph
+     right-aligns with the per-row tree-meta timestamp below. */
+  padding: 0 8px;
   min-height: 24px;
   height: 24px;
   font-size: 12px;
@@ -415,7 +417,10 @@ body.is-resizing-sidebar * {
   appearance: none;
   background: transparent;
   border: 0;
-  padding: 2px 4px;
+  /* Zero right padding so the glyph itself lands flush against the
+     row's 8px right inset — same column as the tree-meta text on
+     each session row. */
+  padding: 2px 0 2px 4px;
   border-radius: 4px;
   cursor: pointer;
   color: var(--ink);
@@ -693,9 +698,10 @@ body.is-resizing-sidebar * {
 .tree-session-action:hover { opacity: 1; background: var(--sidebar-hover); }
 .tree-session-action svg { width: 12px; height: 12px; }
 .tree-meta {
-  font-size: 13px;
+  font-size: 12px;
   color: var(--ink);
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
-  opacity: 0.5;
+  opacity: 0.55;
+  letter-spacing: 0.01em;
 }