fix(frontend): single-click tabs, smart session naming, push reliability (#169)

## Summary

### UX Improvements
- **Single-click tab switching** — Tabs now activate on pointer-up
(bypasses dnd-kit click interference), cursor changed to pointer
- **Clickable session cards** — Entire SessionsHub card is clickable, no
need to find the Connect button
- **Smart session naming** — New sessions default to folder name (e.g.
`termbeam`) with `(X)` dedup for duplicates
- **Stable Create button** — No more size shift when submitting

### Push Notification Fixes
- **Auto-recovery** — `isPushSubscribed()` now re-subscribes when
subscription is lost but permission is granted
- **Page-load re-init** — `ensurePushSubscription()` always tries
re-init when permission exists (recovers from server restarts)
- **No more duplicates** — Local `new Notification()` is skipped when
push is active (service worker handles it)

### Test Coverage
- **82.6% → 93.4%** line coverage
- 120+ new tests across routes, sessions, websocket, push, resume,
update-executor, update-check, bin/termbeam
- Fixed pre-existing resume.test.js crash (TERMBEAM_SESSION env var
interference)
- Excluded `bin/` from coverage (entry point, not logic code)

### Files Changed
- `SortableTab.tsx` — onPointerUp click detection
- `SessionCard.tsx` — full card onClick + swipe prevention
- `NewSessionModal.tsx` — folder-name default + dedup
- `pushSubscription.ts` — auto-recovery logic
- `audio.ts` — skip local notification when push active
- 10 test files added/updated

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: dorlugasigal

package-lock.json

@@ -157,6 +157,7 @@
 }
 
 .submitBtn {
+  min-width: 100px;
   padding: 0.55rem 1.25rem;
   background: var(--accent);
   color: var(--bg);

src/frontend/src/components/SessionsHub/NewSessionModal.module.css

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { toast } from 'sonner';
 import { createSession, fetchShells } from '@/services/api';
@@ -13,9 +13,22 @@ interface NewSessionModalProps {
   onCreated: (id: string) => void;
 }
 
+function folderName(dir: string): string {
+  const parts = dir.replace(/[/\\]+$/, '').split(/[/\\]/);
+  return parts[parts.length - 1] || dir;
+}
+
+function uniqueName(base: string, existing: Set<string>): string {
+  if (!existing.has(base)) return base;
+  let i = 2;
+  while (existing.has(`${base} (${i})`)) i++;
+  return `${base} (${i})`;
+}
+
 export default function NewSessionModal({ onCreated }: NewSessionModalProps) {
   const { newSessionModalOpen, closeNewSessionModal } = useUIStore();
   const [name, setName] = useState('');
+  const [nameManuallyEdited, setNameManuallyEdited] = useState(false);
   const [shell, setShell] = useState('');
   const [shells, setShells] = useState<ShellInfo[]>([]);
   const [cwd, setCwd] = useState('');
@@ -24,6 +37,17 @@ export default function NewSessionModal({ onCreated }: NewSessionModalProps) {
   const [submitting, setSubmitting] = useState(false);
   const [browsing, setBrowsing] = useState(false);
 
+  const deriveNameFromCwd = useCallback(
+    (dir: string) => {
+      if (nameManuallyEdited) return;
+      const sessions = useSessionStore.getState().sessions;
+      const existingNames = new Set<string>();
+      for (const s of sessions.values()) existingNames.add(s.name);
+      setName(uniqueName(folderName(dir), existingNames));
+    },
+    [nameManuallyEdited],
+  );
+
   useEffect(() => {
     if (newSessionModalOpen) {
       fetchShells()
@@ -34,14 +58,18 @@ export default function NewSessionModal({ onCreated }: NewSessionModalProps) {
               list.find((s) => s.cmd === defaultShell) || list.find((s) => s.path === defaultShell);
             setShell(def?.cmd ?? list[0]?.cmd ?? '');
           }
-          if (!cwd && serverCwd) setCwd(serverCwd);
+          if (!cwd && serverCwd) {
+            setCwd(serverCwd);
+            deriveNameFromCwd(serverCwd);
+          }
         })
         .catch(() => setShells([]));
     }
   }, [newSessionModalOpen]);
 
   function resetForm() {
     setName('');
+    setNameManuallyEdited(false);
     setShell('');
     setCwd('');
     setInitialCommand('');
@@ -99,6 +127,7 @@ export default function NewSessionModal({ onCreated }: NewSessionModalProps) {
               currentDir={cwd || '/'}
               onSelect={(dir: string) => {
                 setCwd(dir);
+                deriveNameFromCwd(dir);
                 setBrowsing(false);
               }}
               onCancel={() => setBrowsing(false)}
@@ -110,9 +139,12 @@ export default function NewSessionModal({ onCreated }: NewSessionModalProps) {
                 <input
                   className={styles.input}
                   type="text"
-                  placeholder="my-session"
+                  placeholder={folderName(cwd || '/')}
                   value={name}
-                  onChange={(e) => setName(e.target.value)}
+                  onChange={(e) => {
+                    setName(e.target.value);
+                    setNameManuallyEdited(true);
+                  }}
                   data-testid="ns-name"
                 />
               </div>
@@ -199,7 +231,7 @@ export default function NewSessionModal({ onCreated }: NewSessionModalProps) {
                   data-testid="ns-create"
                   onClick={handleSubmit}
                 >
-                  {submitting ? 'Creating…' : 'Create'}
+                  Create
                 </button>
               </div>
             </div>

src/frontend/src/components/SessionsHub/NewSessionModal.tsx

@@ -42,6 +42,7 @@
   border-radius: 12px;
   touch-action: pan-y;
   user-select: none;
+  cursor: pointer;
   z-index: 1;
   transition: border-color 0.15s;
 }
@@ -142,32 +143,16 @@
   color: var(--danger);
 }
 
-/* Connect button */
-.connectBtn {
+/* Connect hint */
+.connectHint {
   align-self: flex-end;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 8px 20px;
-  font-size: 14px;
+  font-size: 13px;
   font-weight: 600;
-  cursor: pointer;
-  transition:
-    opacity 0.15s,
-    transform 0.15s;
-}
-
-.connectBtn:hover {
-  opacity: 0.9;
-}
-
-.connectBtn:active {
-  transform: scale(0.97);
+  color: var(--accent);
 }
 
 @media (pointer: coarse) {
-  .connectBtn {
-    padding: 10px 24px;
+  .connectHint {
+    font-size: 14px;
   }
 }

src/frontend/src/components/SessionsHub/SessionCard.module.css

@@ -165,6 +165,7 @@ export default function SessionCard({
   const handleTouchEnd = useCallback(
     (e: React.TouchEvent) => {
       if (!isSwiping.current) return;
+      e.preventDefault(); // prevent click after swipe
 
       const touch = e.changedTouches[0];
       if (!touch) return;
@@ -222,6 +223,7 @@ export default function SessionCard({
         ref={cardRef}
         className={styles.card}
         data-testid="session-card"
+        onClick={() => onSelect(session.id)}
         onTouchStart={handleTouchStart}
         onTouchMove={handleTouchMove}
         onTouchEnd={handleTouchEnd}
@@ -277,17 +279,7 @@ export default function SessionCard({
           </div>
         )}
 
-        {/* Connect button */}
-        <button
-          className={styles.connectBtn}
-          data-testid="connect-btn"
-          onClick={(e) => {
-            e.stopPropagation();
-            onSelect(session.id);
-          }}
-        >
-          Connect →
-        </button>
+        <span className={styles.connectHint}>Connect →</span>
       </div>
     </div>
   );

src/frontend/src/components/SessionsHub/SessionCard.tsx

@@ -1,3 +1,4 @@
+import { useRef } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import type { ManagedSession } from '@/stores/sessionStore';
@@ -13,6 +14,8 @@ interface SortableTabProps {
   onMouseLeave?: () => void;
 }
 
+const TAP_THRESHOLD = 5;
+
 function formatTabActivity(lastActivity: string | number): string {
   const ts = typeof lastActivity === 'number' ? lastActivity : new Date(lastActivity).getTime();
   const diff = Date.now() - ts;
@@ -34,6 +37,7 @@ export function SortableTab({
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: session.id,
   });
+  const pointerStart = useRef<{ x: number; y: number } | null>(null);
 
   const style: React.CSSProperties = {
     transform: CSS.Transform.toString(transform),
@@ -50,7 +54,21 @@ export function SortableTab({
       className={`${styles.tab} ${isActive ? styles.tabActive : ''} ${isSplit ? styles.tabSplit : ''}`}
       data-testid="session-tab"
       {...(isActive ? { 'data-active': 'true' } : {})}
-      onClick={onActivate}
+      {...attributes}
+      {...listeners}
+      onPointerDown={(e) => {
+        pointerStart.current = { x: e.clientX, y: e.clientY };
+        // Chain with dnd-kit's handler
+        (listeners as Record<string, Function>)?.onPointerDown?.(e);
+      }}
+      onPointerUp={(e) => {
+        if (pointerStart.current && e.button === 0) {
+          const dx = Math.abs(e.clientX - pointerStart.current.x);
+          const dy = Math.abs(e.clientY - pointerStart.current.y);
+          if (dx < TAP_THRESHOLD && dy < TAP_THRESHOLD) onActivate();
+        }
+        pointerStart.current = null;
+      }}
       onAuxClick={(e) => {
         if (e.button === 1) {
           e.preventDefault();
@@ -59,8 +77,6 @@ export function SortableTab({
       }}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
-      {...attributes}
-      {...listeners}
     >
       <span className={styles.colorDot} style={{ backgroundColor: session.color }} />
       <span className={styles.tabName} data-testid="tab-name">

src/frontend/src/components/TabBar/SortableTab.tsx

@@ -61,7 +61,7 @@
   gap: 6px;
   padding: 4px 10px;
   border-radius: 6px;
-  cursor: grab;
+  cursor: pointer;
   white-space: nowrap;
   user-select: none;
   font-size: 12px;

src/frontend/src/components/TabBar/TabBar.module.css

@@ -46,9 +46,13 @@ export function setNotificationsEnabled(enabled: boolean): void {
   }
 }
 
+import { isPushSubscribedSync } from './pushSubscription';
+
 export function sendCommandNotification(sessionName: string): void {
   if (!isNotificationsEnabled()) return;
   if (Notification.permission !== 'granted') return;
+  // Skip local notification when push is active — the service worker handles it
+  if (isPushSubscribedSync()) return;
   try {
     new Notification('Command finished in ' + sessionName, {
       icon: '/icons/icon-192.png',

src/frontend/src/services/audio.ts

@@ -106,15 +106,28 @@ export function isPushSubscribedSync(): boolean {
   }
 }
 
-/** Async check — queries the actual PushManager. */
+/**
+ * Async check — queries the actual PushManager.
+ * If a subscription was lost but permission is still granted,
+ * attempts to re-subscribe automatically.
+ */
 export async function isPushSubscribed(): Promise<boolean> {
   try {
     if (!('serviceWorker' in navigator) || !('PushManager' in window)) return false;
     const registration = await navigator.serviceWorker.ready;
     const subscription = await registration.pushManager?.getSubscription();
-    const active = !!subscription;
-    setPushState(active);
-    return active;
+    if (subscription) {
+      setPushState(true);
+      return true;
+    }
+
+    // Subscription lost — try to recover if we had it before and still have permission
+    if (isPushSubscribedSync() && Notification.permission === 'granted') {
+      return initPushSubscription();
+    }
+
+    setPushState(false);
+    return false;
   } catch {
     return false;
   }
@@ -127,7 +140,6 @@ export async function isPushSubscribed(): Promise<boolean> {
  */
 export async function ensurePushSubscription(): Promise<void> {
   try {
-    if (!isPushSubscribedSync()) return;
     if (Notification.permission !== 'granted') return;
     await initPushSubscription();
   } catch {

src/frontend/src/services/pushSubscription.ts

@@ -9,8 +9,13 @@ describe('resume', () => {
   let resume;
   let tempDir;
   let CONNECTION_FILE;
+  let savedTermbeamSession;
 
   beforeEach(() => {
+    // Save and clear TERMBEAM_SESSION so resume() doesn't bail out
+    savedTermbeamSession = process.env.TERMBEAM_SESSION;
+    delete process.env.TERMBEAM_SESSION;
+
     tempDir = fs.mkdtempSync(path.join(os.tmpdir(), 'termbeam-test-'));
     process.env.TERMBEAM_CONFIG_DIR = tempDir;
     CONNECTION_FILE = path.join(tempDir, 'connection.json');
@@ -22,6 +27,12 @@ describe('resume', () => {
   });
 
   afterEach(() => {
+    // Restore TERMBEAM_SESSION
+    if (savedTermbeamSession !== undefined) {
+      process.env.TERMBEAM_SESSION = savedTermbeamSession;
+    } else {
+      delete process.env.TERMBEAM_SESSION;
+    }
     delete process.env.TERMBEAM_CONFIG_DIR;
     try {
       fs.rmSync(tempDir, { recursive: true, force: true });