@bakapiano/ccsm 0.18.3 → 0.18.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bakapiano/ccsm",
-  "version": "0.18.3",
+  "version": "0.18.4",
   "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/responsive.css

@@ -87,11 +87,13 @@
   select { font-size: 16px !important; }
 }
 
-/* FAB + backdrop · sit above page content but BELOW dialogs. */
+/* FAB + backdrop · sit above page content but BELOW dialogs. The
+   `left` and `bottom` inline styles come from MobileNavFab.js (drag-
+   persisted), so we don't set defaults here — the component seeds
+   them on mount. `touch-action: none` stops the browser from also
+   scrolling the page while the user is dragging the FAB. */
 .mobile-nav-fab {
   position: fixed;
-  bottom: max(16px, env(safe-area-inset-bottom));
-  left:   max(16px, env(safe-area-inset-left));
   z-index: 210;
   width: 52px;
   height: 52px;
@@ -105,12 +107,18 @@
   box-shadow:
     0 10px 24px -6px rgba(0,0,0,.28),
     0 2px 4px rgba(0,0,0,.10);
-  cursor: pointer;
-  transition: transform .15s, box-shadow .15s, background .15s;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  transition: box-shadow .15s, background .15s;
 }
-.mobile-nav-fab:hover  { transform: translateY(-1px); background: var(--bg); }
-.mobile-nav-fab:active { transform: translateY(0); }
-.mobile-nav-fab svg { width: 22px; height: 22px; stroke-width: 2; }
+/* 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
+   pointers; touch never matches :hover. */
+.mobile-nav-fab:hover  { background: var(--bg); }
+.mobile-nav-fab:active { cursor: grabbing; }
+.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
    mode" instead of two different controls. */

package/public/css/sidebar.css

@@ -1,6 +1,11 @@
 /* Left collapsible sidebar nav · brand mark · util items · collapse toggle */
 
 .sidebar {
+  /* One value drives all three "section break" gaps in the sidebar
+     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);
   position: sticky;
   top: 0;
   height: 100vh;
@@ -262,7 +267,9 @@
   align-items: center;
   padding: 0;
   min-height: 40px;
-  margin-bottom: var(--s-2);
+  /* Sit flush above the first nav item — no extra breathing room
+     between the brand strip and the nav list. */
+  margin-bottom: 0;
 }
 .collapse-toggle {
   appearance: none;
@@ -337,12 +344,18 @@ body.is-resizing-sidebar * {
 
 /* Compact top nav: smaller height + smaller font, so the folder tree
    below dominates. */
+/* Match the dimensions of .tree-folder-head + .tree-session below so
+   the top nav, the folder head, and the session rows form one visually
+   continuous column: same left padding (icon at x=8), same icon-label
+   gap, same row height, same corner radius. Without this the nav
+   icons sit 2px further right than the folder icons and the rows are
+   noticeably taller. */
 .sidebar-nav.compact .nav-item {
   font-size: 13px;
-  padding: 4px 10px;
-  min-height: 30px;
-  gap: 10px;
-  border-radius: 6px;
+  padding: 4px 8px;
+  min-height: 28px;
+  gap: 8px;
+  border-radius: 4px;
   position: relative;
   letter-spacing: -0.005em;
   transition: background .14s ease, color .14s ease;
@@ -367,7 +380,7 @@ body.is-resizing-sidebar * {
 /* Tree section header. Looks like codex: uppercase label, small +
    button on hover. */
 .tree {
-  margin-top: var(--s-3);
+  margin-top: var(--sidebar-section-gap);
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -394,6 +407,9 @@ body.is-resizing-sidebar * {
   font-weight: 500;
   letter-spacing: 0;
   color: var(--ink-mid);
+  /* No margin-bottom — let the parent .tree's `gap: 2px` carry the
+     space below, matching what sits between folder rows. The big gap
+     above "Sessions" still comes from .tree margin-top. */
 }
 .tree-head-action {
   appearance: none;
@@ -485,7 +501,11 @@ body.is-resizing-sidebar * {
   display: none;
   gap: 2px;
 }
-.tree-folder-head:hover .tree-folder-actions { display: inline-flex; }
+/* Same touch carve-out as session-actions above — don't reveal folder
+   rename/delete on a tap-emulated hover. */
+@media (hover: hover) and (pointer: fine) {
+  .tree-folder-head:hover .tree-folder-actions { display: inline-flex; }
+}
 .tree-folder-action {
   appearance: none;
   background: transparent;
@@ -643,8 +663,18 @@ body.is-resizing-sidebar * {
   gap: 2px;
   flex-shrink: 0;
 }
-.tree-session:hover .tree-session-actions { display: inline-flex; }
-.tree-session:hover .tree-meta { display: none; }
+/* Hover-only on real-pointer devices. On touch devices the first tap
+   emulates :hover (revealing rename/delete), which means the user has
+   to tap a second time to actually open the session. (hover: hover)
+   matches a real mouse / trackpad; (pointer: fine) further requires
+   precise cursor (so hybrid touch+mouse laptops with a stylus get
+   hover but pure-touch phones / tablets do not.) Phones keep the
+   timestamp visible and never reveal the action buttons here — they
+   can use the kebab in the session pane's top bar instead. */
+@media (hover: hover) and (pointer: fine) {
+  .tree-session:hover .tree-session-actions { display: inline-flex; }
+  .tree-session:hover .tree-meta { display: none; }
+}
 .tree-session-action {
   appearance: none;
   background: transparent;

package/public/js/components/MobileNavFab.js

@@ -6,24 +6,111 @@
 // full-screen overlay. A backdrop captures taps outside the sidebar
 // and dismisses.
 //
-// Visible only when isMobile signal is true — saves a render branch
-// elsewhere.
+// The FAB is draggable — long-press-and-move lets the user reposition
+// it (the default bottom-left can cover page content). A short tap with
+// no drag still toggles the drawer. Position persists in localStorage
+// so the user doesn't have to re-place it each session.
 
 import { html } from '../html.js';
+import { useRef, useState, useEffect } from 'preact/hooks';
 import { isMobile, mobileDrawerOpen } from '../state.js';
 import { IconSidebarToggle, IconClose } from '../icons.js';
 
+const LS_POS = 'ccsm.fab.pos';
+const FAB_SIZE = 52;
+const SAFE_MARGIN = 8;
+// Movement threshold (px) before pointermove counts as a drag instead
+// of a tap. Below this, pointerup fires the toggle and the FAB stays
+// put — matches what a user expects when they meant to "press" the
+// button, not move it.
+const DRAG_HYST_PX = 6;
+
+function loadPos() {
+  try {
+    const raw = localStorage.getItem(LS_POS);
+    if (!raw) return null;
+    const p = JSON.parse(raw);
+    if (typeof p.left === 'number' && typeof p.bottom === 'number') return p;
+  } catch {}
+  return null;
+}
+function savePos(p) {
+  try { localStorage.setItem(LS_POS, JSON.stringify(p)); } catch {}
+}
+function clampPos(p) {
+  // Re-clamp on every render so a position saved at one viewport size
+  // doesn't trap the FAB off-screen at a smaller size (rotation,
+  // resize, etc.).
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  return {
+    left:   Math.max(SAFE_MARGIN, Math.min(vw - FAB_SIZE - SAFE_MARGIN, p.left)),
+    bottom: Math.max(SAFE_MARGIN, Math.min(vh - FAB_SIZE - SAFE_MARGIN, p.bottom)),
+  };
+}
+
 export function MobileNavFab() {
   if (!isMobile.value) return null;
   const open = mobileDrawerOpen.value;
+  const [pos, setPos] = useState(() => loadPos() || { left: 16, bottom: 24 });
+  const dragRef = useRef({ start: null, moved: false });
+
+  // Re-clamp on viewport changes so a rotation doesn't strand the FAB
+  // beyond the new edge.
+  useEffect(() => {
+    const onResize = () => setPos((p) => clampPos(p));
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  const onPointerDown = (ev) => {
+    ev.currentTarget.setPointerCapture(ev.pointerId);
+    dragRef.current = {
+      start: { x: ev.clientX, y: ev.clientY, fromPos: pos },
+      moved: false,
+    };
+  };
+  const onPointerMove = (ev) => {
+    const d = dragRef.current;
+    if (!d.start) return;
+    const dx = ev.clientX - d.start.x;
+    const dy = ev.clientY - d.start.y;
+    if (!d.moved && Math.hypot(dx, dy) < DRAG_HYST_PX) return;
+    d.moved = true;
+    // Stop the page from also scrolling while we drag.
+    ev.preventDefault();
+    setPos(clampPos({
+      // bottom = distance from bottom edge to the FAB's bottom edge.
+      // Pointer moved DOWN (+dy) → FAB moves down → bottom decreases.
+      left:   d.start.fromPos.left + dx,
+      bottom: d.start.fromPos.bottom - dy,
+    }));
+  };
+  const onPointerUp = (ev) => {
+    const d = dragRef.current;
+    try { ev.currentTarget.releasePointerCapture(ev.pointerId); } catch {}
+    dragRef.current = { start: null, moved: false };
+    if (d.moved) {
+      // Drag finished — persist the new resting spot.
+      savePos(pos);
+      return;
+    }
+    // No appreciable movement → treat as tap.
+    mobileDrawerOpen.value = !open;
+  };
+
   return html`
     ${open ? html`
       <div class="mobile-nav-backdrop"
            onClick=${() => { mobileDrawerOpen.value = false; }} />
     ` : null}
     <button class=${`mobile-nav-fab${open ? ' is-open' : ''}`}
+            style=${`left: ${pos.left}px; bottom: ${pos.bottom}px;`}
             aria-label=${open ? 'close navigation' : 'open navigation'}
-            onClick=${() => { mobileDrawerOpen.value = !open; }}>
+            onPointerDown=${onPointerDown}
+            onPointerMove=${onPointerMove}
+            onPointerUp=${onPointerUp}
+            onPointerCancel=${onPointerUp}>
       ${open ? html`<${IconClose} />` : html`<${IconSidebarToggle} />`}
     </button>`;
 }

package/public/js/components/Sidebar.js

@@ -140,9 +140,16 @@ function SessionRow({ s, folderId, siblingIds }) {
       .catch((e) => setToast(e.message, 'error'));
   };
 
+  // Skip the HTML5 drag affordance on touch devices — `draggable=true`
+  // makes mobile browsers interpret the first tap as a drag-start
+  // gesture, swallowing the click event entirely. The user then needs
+  // a second tap to navigate. Touch users don't reorder sessions by
+  // drag anyway; we'd add a dedicated "move to folder" affordance if
+  // anyone asked.
+  const touchDevice = isMobile.value || (typeof matchMedia === 'function' && matchMedia('(pointer: coarse)').matches);
   return html`
     <div class=${`tree-session${isActive ? ' is-active' : ''}${running ? ' is-running' : ' is-stopped'}${running && s.activity === 'working' ? ' is-working' : ''}${showInsertLine ? ' is-reorder-target' : ''}`}
-         draggable=${true}
+         draggable=${!touchDevice}
          onDragStart=${onDragStart}
          onDragEnd=${onDragEnd}
          onDragOver=${onRowDragOver}

package/public/js/components/TerminalView.js

@@ -32,7 +32,7 @@ const THEME = {
   white:   '#e8e3d5', brightWhite:   '#faf9f5',
 };
 
-export function TerminalView({ terminalId }) {
+export function TerminalView({ terminalId, cliType }) {
   const hostRef = useRef(null);
   const termRef = useRef(null);
   const wsRef = useRef(null);
@@ -280,12 +280,18 @@ export function TerminalView({ terminalId }) {
     // Shift+Enter / Ctrl+Enter → insert literal newline, don't submit.
     // Background: xterm.js encodes BOTH plain Enter and Shift+Enter and
     // Ctrl+Enter as \r (0x0D / CR). The kitty keyboard / win32 input
-    // protocols (enabled in vtExtensions above) WOULD distinguish them,
-    // but they're opt-in by the running app — claude code doesn't enable
-    // either, so we never get the distinction "for free".
+    // protocols WOULD distinguish them, but they're opt-in by the
+    // running app and most CLIs don't enable them, so we never get the
+    // distinction "for free". Each CLI handles modified-Enter differently:
+    //
+    //   claude   · expects a literal LF (0x0A) — its prompt treats \n
+    //              as "insert newline", \r as "submit". Workaround = '\n'.
+    //   codex / others · use ratatui or similar TUI libs that decode
+    //              the kitty keyboard CSI u sequence. We synthesise it
+    //              explicitly: `CSI 13 ; <mod> u` where mod = 2 for
+    //              Shift, 5 for Ctrl. That maps to the exact key+mod
+    //              the user pressed and ratatui inserts a newline.
     //
-    // Send the LF (0x0A) explicitly. Claude code (and most modern TUIs)
-    // treat \n inside a prompt as a literal newline insert, \r as submit.
     // Alt+Enter already works (xterm sends \x1b\r → meta-enter) so we
     // leave that alone.
     const onShiftEnter = (ev) => {
@@ -293,11 +299,21 @@ export function TerminalView({ terminalId }) {
       if (!(ev.shiftKey || ev.ctrlKey)) return;
       if (ev.metaKey || ev.altKey) return;
       if (!isOurs()) return;
+      // claude  → LF (its prompt parses \n as insert-newline).
+      // others  → ESC+CR i.e. Alt+Enter. crossterm (codex/copilot
+      //   TUI libs) decodes ESC-prefixed sequences as Alt-modified
+      //   without needing the kitty keyboard protocol enabled — and
+      //   codex's default keymap binds Alt+Enter to insert_newline
+      //   alongside Shift+Enter (see openai/codex
+      //   codex-rs/tui/src/keymap.rs L904-909). The kitty CSI u
+      //   sequence we tried first only works after the app has
+      //   negotiated kitty mode, which codex doesn't do by default.
+      const data = cliType === 'claude' ? '\n' : '\x1b\r';
       ev.preventDefault();
       ev.stopPropagation();
       ev.stopImmediatePropagation();
       if (ws.readyState === 1) {
-        ws.send(JSON.stringify({ type: 'input', data: '\n' }));
+        ws.send(JSON.stringify({ type: 'input', data }));
       }
     };
     document.addEventListener('keydown', onShiftEnter, true);

package/public/js/pages/SessionsPage.js

@@ -150,7 +150,7 @@ export function SessionsPage() {
     <div class="session-pane">
       <div class="session-pane-body">
         ${running
-          ? html`<${TerminalView} terminalId=${session.id} />`
+          ? html`<${TerminalView} terminalId=${session.id} cliType=${cli?.type} />`
           : html`
             <div class="terminal-empty">
               ${resumeError ? html`