hop2 0.11.16 → 0.11.18

package/hay/apps/web/src/App.tsx

@@ -283,11 +283,19 @@ const resolveInitialName = () => {
 };
 
 // Stable connection identity: device half persists per browser, tab half per
-// tab. The server evicts a previous connection bearing the same key on
-// attach — a reconnect replaces its own ghost in presence instead of sitting
-// next to it — while two real tabs (different tab halves) coexist.
+// tab — and a PAGE-LOAD nonce on the end, which is the part that actually
+// scopes eviction. The server evicts a previous connection bearing the same
+// key on attach, so a reconnect replaces its own ghost in presence. The
+// ghost is by definition a connection this same page instance made (a
+// network drop sends no close frame; a reload does), so an in-memory nonce
+// matches every ghost that can exist — while "Duplicate Tab" and
+// window.open, which CLONE sessionStorage, get a fresh nonce and coexist.
+// Keying on device.tab alone made two such tabs on one session evict each
+// other on every attach: with immediate reconnect on both sides, that was a
+// full-speed connect-disconnect loop (measured: 557 reconnects in 20s).
 const randomKeyPart = () =>
   (window.crypto?.randomUUID?.() || Math.random().toString(36).slice(2)).replace(/-/g, "").slice(0, 10);
+const surfaceNonce = randomKeyPart();
 const resolveDeviceKey = () => {
   try {
     let device = localStorage.getItem("hop_device_id");
@@ -300,7 +308,7 @@ const resolveDeviceKey = () => {
       tab = randomKeyPart();
       sessionStorage.setItem("hop_tab_id", tab);
     }
-    return `${device}.${tab}`;
+    return `${device}.${tab}.${surfaceNonce}`;
   } catch {
     return ""; // storage unavailable (private mode quota) — no eviction key
   }
@@ -360,6 +368,46 @@ const App = () => {
   const [sessionLabel, setSessionLabel] = useState(() => initialRoom);
   const [liveCwd, setLiveCwd] = useState<string | null>(null);
   const [status, setStatus] = useState<ConnectionStatus>("idle");
+  // What the CHROME shows. Most drops (a tunnel restart, a laptop waking, an
+  // edge blip) are healed by the immediate reconnect before a human could
+  // read a banner — surfacing them bought nothing but flicker. Once a session
+  // has connected, an outage must OUTLIVE the grace window to be seen;
+  // "ended" and the first connect are real events and show at once. All
+  // reconnect logic stays on the real `status`.
+  const OUTAGE_GRACE_MS = 1200;
+  const [visibleStatus, setVisibleStatus] = useState<ConnectionStatus>("idle");
+  const visibleStatusRef = useRef<ConnectionStatus>("idle");
+  visibleStatusRef.current = visibleStatus;
+  const statusForChromeRef = useRef<ConnectionStatus>("idle");
+  statusForChromeRef.current = status;
+  const hadConnectedRef = useRef(false);
+  const outageTimerRef = useRef<number | null>(null);
+  useEffect(() => {
+    const clearOutageTimer = () => {
+      if (outageTimerRef.current !== null) {
+        window.clearTimeout(outageTimerRef.current);
+        outageTimerRef.current = null;
+      }
+    };
+    if (status === "connected" || status === "ended" || status === "idle") {
+      hadConnectedRef.current = status === "connected";
+      clearOutageTimer();
+      setVisibleStatus(status);
+      return;
+    }
+    // connecting / disconnected: the first connect shows honestly; after
+    // that, hold the good face while the immediate retry gets its chance.
+    if (!hadConnectedRef.current) {
+      clearOutageTimer();
+      setVisibleStatus(status);
+      return;
+    }
+    if (outageTimerRef.current !== null) return; // grace runs from OUTAGE start
+    outageTimerRef.current = window.setTimeout(() => {
+      outageTimerRef.current = null;
+      setVisibleStatus(statusForChromeRef.current);
+    }, OUTAGE_GRACE_MS);
+  }, [status]);
   const [presence, setPresence] = useState<PresenceClient[]>([]);
   const [collabMode, setCollabMode] = useState(true);
   const [controllerId, setControllerId] = useState<string | null>(null);
@@ -597,7 +645,7 @@ const App = () => {
   const [shortcutHelpOpen, setShortcutHelpOpen] = useState(false);
   // Published views (`hop view`). `session` scopes the panel to one session;
   // an object with none open it fleet-wide. Null = closed.
-  const [viewsOpen, setViewsOpen] = useState<{ session?: string } | null>(null);
+  const [viewsOpen, setViewsOpen] = useState<{ session?: string; dock?: boolean } | null>(null);
   const sessionsRef = useRef(sessions);
   sessionsRef.current = sessions;
   // Claude Code titles its process with a bare version number; hop's session
@@ -944,8 +992,23 @@ const App = () => {
     }
   };
 
+  // Visit order, most recent first — the alt-tab stack behind ⌘E. Recency of
+  // OUTPUT is the wrong signal here: a session you have never opened can be
+  // the busiest one on the machine, and "go back" must mean where YOU were.
+  // Kept per tab (each tab has its own back-and-forth) and across reloads.
+  const recentRoomsRef = useRef<string[]>((() => {
+    try { return JSON.parse(sessionStorage.getItem("hop_recent_rooms_v1") || "[]"); }
+    catch { return []; }
+  })());
+
   useEffect(() => {
     activeSessionRoomRef.current = session?.room ?? null;
+    const room = session?.room;
+    if (!room) return;
+    const next = [room, ...recentRoomsRef.current.filter((r) => r !== room)].slice(0, 10);
+    recentRoomsRef.current = next;
+    try { sessionStorage.setItem("hop_recent_rooms_v1", JSON.stringify(next)); }
+    catch { /* private mode — the stack just won't survive a reload */ }
   }, [session?.room]);
 
   const shareUrl = useMemo(() => {
@@ -1128,7 +1191,7 @@ const App = () => {
       const now = Date.now();
       if (now - lastDropToastRef.current > 2000) {
         lastDropToastRef.current = now;
-        showToast("Reconnecting — input buffered");
+        if (visibleStatusRef.current !== "connected") showToast("Reconnecting — input buffered");
       }
       return;
     }
@@ -1433,7 +1496,9 @@ const App = () => {
     const delay = attempt === 0 ? 0 : Math.min(1000 * Math.pow(2, attempt - 1), 30000);
     reconnectAttemptRef.current += 1;
 
-    pushNotice(delay === 0 ? "Reconnecting..." : `Reconnecting in ${Math.round(delay / 1000)}s...`);
+    // The immediate retry stays silent — it usually wins before anyone could
+    // read a notice. Only an outage that earned a backoff narrates itself.
+    if (delay > 0) pushNotice(`Reconnecting in ${Math.round(delay / 1000)}s...`);
 
     reconnectTimerRef.current = window.setTimeout(() => {
       reconnectTimerRef.current = null;
@@ -3588,8 +3653,8 @@ const App = () => {
   // Desktop keyboard layer — capture phase so shortcuts win over the focused
   // terminal. ⌘-based (Ctrl+Shift elsewhere) to stay clear of readline/TUI
   // keys, which the terminal must keep receiving untouched.
-  //   ⌘K session palette · ⌘J/⌘⇧J cycle sessions · ⌘, settings ·
-  //   ⌘+/−/0 font size · ⌘/ shortcut help · Esc closes drawer/help
+  //   ⌘K session palette · ⌘E last session (toggles) · ⌘J/⌘⇧J cycle by name ·
+  //   ⌘, settings · ⌘+/−/0 font size · ⌘/ shortcut help · Esc closes drawer/help
   useEffect(() => {
     if (!session || !isEmbeddedInHop()) return;
     const cycleSession = (dir: 1 | -1) => {
@@ -3601,6 +3666,27 @@ const App = () => {
       const next = list[(cur + dir + list.length) % list.length];
       if (next) switchSessionRef.current?.(next);
     };
+    // Back and forth between the two sessions you are actually working in,
+    // without a trip through the palette. MRU, so pressing it twice returns
+    // you — the switch itself pushes the room you left to the top of the
+    // stack, which is what makes it a toggle rather than a walk.
+    const jumpToLastSession = () => {
+      const list = sessionsRef.current.filter((s) => s.type !== "port");
+      const cur = activeSessionRoomRef.current;
+      const keyOf = (s: { internalName?: string; name: string }) => s.internalName || s.name;
+      const visited = recentRoomsRef.current
+        .filter((r) => r !== cur)
+        .map((r) => list.find((s) => keyOf(s) === r))
+        .find((s): s is NonNullable<typeof s> => !!s);
+      // Nothing visited yet this tab (a fresh load lands straight in a
+      // session): fall back to the liveliest other session, so the shortcut
+      // does something sensible the very first time it is pressed.
+      const target = visited
+        || [...list]
+          .filter((s) => keyOf(s) !== cur)
+          .sort((a, b) => (b.lastActivityAt || 0) - (a.lastActivityAt || 0))[0];
+      if (target) switchSessionRef.current?.(target);
+    };
     const onKey = (event: KeyboardEvent) => {
       const mod = isMacPlatform
         ? event.metaKey && !event.ctrlKey && !event.altKey
@@ -3618,15 +3704,32 @@ const App = () => {
       const shifted = event.shiftKey;
       const grab = () => { event.preventDefault(); event.stopPropagation(); };
       if (key === "k" && (isMacPlatform ? !shifted : true)) { grab(); setSwitcherOpen((v) => !v); return; }
+      if (isMacPlatform && shifted && key === "v") {
+        grab();
+        setViewsOpen((v) => v ? null
+          : (activeSessionRoomRef.current
+              ? { session: activeSessionRoomRef.current, dock: true }
+              : {}));
+        return;
+      }
       if (key === "j") { grab(); cycleSession(shifted ? -1 : 1); return; }
       if (key === ",") { grab(); setDrawerOpen((v) => !v); return; }
       if (key === "/" || (shifted && key === "?")) { grab(); setShortcutHelpOpen((v) => !v); return; }
-      if (shifted && key === "e") {
+      if (key === "e") {
         const leaves = paneLeafIds(paneTreeRef.current).filter((id) => id !== "primary");
-        const target = focusedPaneIdRef.current !== "primary"
+        const swapTarget = focusedPaneIdRef.current !== "primary"
           ? focusedPaneIdRef.current
           : (leaves.length === 1 ? leaves[0] : null);
-        if (target) { grab(); paneOpsRef.current.swapPaneWithPrimary(target); }
+        // On a Mac the two are distinct chords (⌘E / ⌘⇧E). Elsewhere the
+        // modifier already includes Shift, so there is only one chord to
+        // give out: panes take it when a pane could actually be swapped.
+        const wantsSwap = isMacPlatform ? shifted : !!swapTarget;
+        if (wantsSwap) {
+          if (swapTarget) { grab(); paneOpsRef.current.swapPaneWithPrimary(swapTarget); }
+          return;
+        }
+        grab();
+        jumpToLastSession();
         return;
       }
       if (key === "]" || key === "[") {
@@ -3722,7 +3825,10 @@ const App = () => {
               type="button"
               className="topbar-sessions-btn"
               title="Files agents published with hop view"
-              onClick={() => setViewsOpen({})}
+              // DOCKED and scoped: in full-screen mode you almost always want
+              // THIS session's results, read beside the live terminal rather
+              // than over it. The panel's own toggle widens to the fleet.
+              onClick={() => setViewsOpen({ session: session.room, dock: true })}
             >
               Views
               {unseenViewSessions > 0 && <span className="views-chip-dot" aria-label="New views" />}
@@ -3803,20 +3909,20 @@ const App = () => {
         >
           {/* Connection state banner — on mobile the footer is hidden, and on
               desktop the footer dot alone is too easy to miss during an outage. */}
-          {status !== "connected" && status !== "idle" && (
+          {visibleStatus !== "connected" && visibleStatus !== "idle" && (
             <div
-              className={`connection-banner${status === "ended" ? " ended" : ""}`}
+              className={`connection-banner${visibleStatus === "ended" ? " ended" : ""}`}
               role="status"
               aria-live="polite"
             >
               <span>
-                {status === "connecting"
+                {visibleStatus === "connecting"
                   ? "Connecting…"
-                  : status === "ended"
+                  : visibleStatus === "ended"
                     ? "Session ended"
                     : "Disconnected — reconnecting…"}
               </span>
-              {(status === "disconnected" || status === "ended") && (
+              {(visibleStatus === "disconnected" || visibleStatus === "ended") && (
                 <button type="button" onClick={() => setReconnectToken((value) => value + 1)}>
                   Reconnect now
                 </button>
@@ -3895,11 +4001,11 @@ const App = () => {
                 <p className="room-cwd" title={liveCwd}>{shortenPath(liveCwd)}</p>
               )}
               <p className="room-meta">
-                {status === "connected"
+                {visibleStatus === "connected"
                   ? "Live"
-                  : status === "connecting"
+                  : visibleStatus === "connecting"
                     ? "Connecting"
-                    : status === "ended"
+                    : visibleStatus === "ended"
                       ? "Ended"
                       : "Offline"}
               </p>
@@ -3959,7 +4065,7 @@ const App = () => {
                 <button type="button" className="quick-btn danger" onClick={handleKillSession}>
                   Kill
                 </button>
-                {(status === "disconnected" || status === "ended") && (
+                {(visibleStatus === "disconnected" || visibleStatus === "ended") && (
                   <button type="button" className="quick-btn primary" onClick={() => setReconnectToken((value) => value + 1)}>
                     Reconnect
                   </button>
@@ -4156,7 +4262,7 @@ const App = () => {
             // evaluated on the hub page (session can be null there), and the
             // pane renderer places it wherever the tree's primary leaf sits.
             const renderPrimarySection = (): ReactElement => (
-              <section inert={switcherOpen} style={switcherOpen ? { visibility: "hidden" } : undefined} className={`terminal${status === "disconnected" || status === "ended" ? " degraded" : ""}`}>
+              <section inert={switcherOpen} style={switcherOpen ? { visibility: "hidden" } : undefined} className={`terminal${visibleStatus === "disconnected" || visibleStatus === "ended" ? " degraded" : ""}`}>
                 <div
                   className="terminal-frame"
                   onClick={() => {
@@ -4218,7 +4324,7 @@ const App = () => {
                       </span>
                     </div>
                   )}
-                  {isMobile && status === "connecting" && (
+                  {isMobile && visibleStatus === "connecting" && (
                     <div className="terminal-loading" role="status" aria-live="polite">
                       <IosSpinner />
                       <span className="terminal-loading-label">Loading session…</span>
@@ -4259,7 +4365,7 @@ const App = () => {
                   <span className="footer-chip">{sessionLabel || session.room}</span>
                   {liveCwd ? <span className="footer-cwd">{liveCwd}</span> : null}
                   <span className="footer-spacer" />
-                  {status === "connected" ? (
+                  {visibleStatus === "connected" ? (
                     <>
                       <button type="button" className="footer-find-toggle" aria-label="Find in terminal" onClick={openSearch}>
                         {isMacPlatform ? "⌘F" : "Ctrl+F"} find
@@ -4289,9 +4395,9 @@ const App = () => {
                         })()}
                       </span>
                     </>
-                  ) : status === "idle" ? (
+                  ) : visibleStatus === "idle" ? (
                     <span>awaiting connection</span>
-                  ) : status === "ended" ? (
+                  ) : visibleStatus === "ended" ? (
                     <>
                       <span className="ended-label">session ended</span>
                       <button
@@ -4305,7 +4411,7 @@ const App = () => {
                   ) : (
                     <>
                       <span className="reconnecting">
-                        ⟳ {status === "connecting" ? "Connecting…" : "Reconnecting…"}
+                        ⟳ {visibleStatus === "connecting" ? "Connecting…" : "Reconnecting…"}
                       </span>
                       <button
                         type="button"
@@ -4480,9 +4586,11 @@ const App = () => {
                 <h3>Keyboard shortcuts</h3>
                 {[
                   [isMacPlatform ? "⌘K" : "Ctrl+Shift+K", "session palette (type to filter, ↑↓, ⏎)"],
-                  [isMacPlatform ? "⌘J / ⌘⇧J" : "Ctrl+Shift+J / +⇧", "next / previous session"],
+                  [isMacPlatform ? "⌘E" : "Ctrl+Shift+E", "back to the last session (press again to return)"],
+                  [isMacPlatform ? "⌘J / ⌘⇧J" : "Ctrl+Shift+J / +⇧", "next / previous session (by name)"],
                   [isMacPlatform ? "⌘," : "Ctrl+Shift+,", "settings drawer"],
                   [isMacPlatform ? "⌘F" : "Ctrl+Shift+F", "find in terminal"],
+                  ...(isMacPlatform ? [["⌘⇧V", "views — results agents published"]] : []),
                   ...(isMacPlatform ? [["⌘+ / ⌘− / ⌘0", "terminal font size"]] : []),
                   ["Ctrl+Shift+C / V", "copy / paste"],
                   ["Shift+PgUp / PgDn", "scrollback"],
@@ -4587,7 +4695,8 @@ const App = () => {
       {/* Outside the mode ternary on purpose: Views opens from the hub, from a
           session, and from over the switcher, and it must outlive a switch. */}
       {viewsOpen && (
-        <ViewsPanel session={viewsOpen.session} sessions={sessions} onClose={() => setViewsOpen(null)} />
+        <ViewsPanel session={viewsOpen.session} sessions={sessions} dock={viewsOpen.dock}
+                    onClose={() => setViewsOpen(null)} />
       )}
     </div>
   );

package/hay/apps/web/src/components/SecondaryPane.tsx

@@ -62,6 +62,16 @@ export const SecondaryPane = ({ sessionName, procLabel, wsUrl, userName, cols, r
     let reconnectTimer: number | null = null;
     let attempt = 0;
 
+    // The "connecting" label waits out a grace window on RECONNECTS, so a
+    // sub-second drop repaints nothing. First connect shows honestly.
+    let chromeTimer = 0;
+    let everConnected = false;
+    const showConnecting = () => {
+      if (!everConnected) { setStatus("connecting"); return; }
+      window.clearTimeout(chromeTimer);
+      chromeTimer = window.setTimeout(() => setStatus("connecting"), 1200);
+    };
+
     const connect = () => {
       const sep = wsUrl.includes("?") ? "&" : "?";
       const ws = new WebSocket(
@@ -69,8 +79,13 @@ export const SecondaryPane = ({ sessionName, procLabel, wsUrl, userName, cols, r
           `&cols=${sizeRef.current.cols}&rows=${sizeRef.current.rows}`
       );
       wsRef.current = ws;
-      setStatus("connecting");
-      ws.onopen = () => setStatus("connected");
+      showConnecting();
+      ws.onopen = () => {
+        everConnected = true;
+        attempt = 0; // a healed link earns a fresh immediate retry next time
+        window.clearTimeout(chromeTimer);
+        setStatus("connected");
+      };
       ws.onmessage = (event) => {
         const message = safeParseServerMessage(String(event.data));
         if (!message) return;
@@ -95,6 +110,7 @@ export const SecondaryPane = ({ sessionName, procLabel, wsUrl, userName, cols, r
           term.write(prelude + message.data + coda, () => term.scrollToBottom());
         } else if (message.type === "session_ended") {
           shouldReconnect = false;
+          window.clearTimeout(chromeTimer);
           setStatus("ended");
         } else if (message.type === "active_size") {
           // Someone else became active — follow the room's elected size. A
@@ -110,9 +126,12 @@ export const SecondaryPane = ({ sessionName, procLabel, wsUrl, userName, cols, r
       };
       ws.onclose = () => {
         if (!shouldReconnect) return;
-        setStatus("connecting");
+        showConnecting();
+        // Immediate first retry: most drops are a tunnel blip that has
+        // already healed; backoff starts once that retry has failed.
+        const delay = attempt === 0 ? 0 : Math.min(1000 * 2 ** (attempt - 1), 15000);
         attempt += 1;
-        reconnectTimer = window.setTimeout(connect, Math.min(1000 * 2 ** attempt, 15000));
+        reconnectTimer = window.setTimeout(connect, delay);
       };
     };
     connect();
@@ -168,6 +187,7 @@ export const SecondaryPane = ({ sessionName, procLabel, wsUrl, userName, cols, r
     return () => {
       shouldReconnect = false;
       if (reconnectTimer) window.clearTimeout(reconnectTimer);
+      window.clearTimeout(chromeTimer);
       window.clearTimeout(fitTimer);
       ro.disconnect();
       dataSub.dispose();

package/hay/apps/web/src/components/SessionSwitcher.tsx

@@ -867,11 +867,25 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     let reconnectTimer = 0;
     let reconnectAttempt = 0;
     const pendingInput: Array<{ data: string; at: number }> = [];
+    // Sub-second drops stay invisible: the "reconnecting…" chrome waits out
+    // a grace window, and the first retry goes immediately — a tunnel
+    // restart or a waking laptop usually reconnects before either fires.
+    let downChromeTimer = 0;
+    const markDown = () => {
+      if (disposed) return;
+      window.clearTimeout(downChromeTimer);
+      downChromeTimer = window.setTimeout(() => { if (!disposed) setConn("down"); }, 1200);
+    };
+    const markLive = () => {
+      window.clearTimeout(downChromeTimer);
+      downChromeTimer = 0;
+      setConn("live");
+    };
     const scheduleReconnect = () => {
       if (disposed) return;
-      setConn("down");
+      markDown();
       window.clearTimeout(reconnectTimer);
-      const delay = Math.min(1000 * 2 ** reconnectAttempt, 15000);
+      const delay = reconnectAttempt === 0 ? 0 : Math.min(1000 * 2 ** (reconnectAttempt - 1), 15000);
       reconnectAttempt += 1;
       reconnectTimer = window.setTimeout(() => connect(), delay);
     };
@@ -884,7 +898,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       sock.onopen = () => {
         if (disposed || ws !== sock) return;
         reconnectAttempt = 0;
-        setConn("live");
+        markLive();
         window.setTimeout(() => rescaleRef.current(), 30);
         const cutoff = Date.now() - 15000;
         for (const pend of pendingInput) {
@@ -975,7 +989,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       if (!ws || ws.readyState !== WebSocket.OPEN) {
         pendingInput.push({ data, at: Date.now() });
         if (pendingInput.length > 200) pendingInput.shift();
-        setConn("down");
+        markDown();
         if (!ws || ws.readyState === WebSocket.CLOSING || ws.readyState === WebSocket.CLOSED) {
           reconnectAttempt = 0;
           connect();
@@ -1019,6 +1033,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       sendInputRef.current = null;
       term.options.disableStdin = true;
       term.options.cursorBlink = false;
+      window.clearTimeout(downChromeTimer);
       setConn(null);
       setViewers([]);
       setDriver(null);
@@ -1735,6 +1750,25 @@ export const SessionSwitcher = ({
       ? [...full.folders.flatMap((f) => f.rows), ...full.rows].map(sessionKey)
       : [];
   }
+  // Manual means manual — including for sessions nobody has dragged yet.
+  // Placed cards were always immune to activity, but UNPLACED ones sorted by
+  // display name at the tail, so the wall still rearranged itself with no
+  // user action: creating a session inserted it alphabetically between
+  // existing cards, and renaming one (an agent may) slid it somewhere else.
+  // Give every newcomer a permanent index the first time the manual wall
+  // sees it; after that only a drag can move anything.
+  useEffect(() => {
+    if (!open || sortMode !== "manual") return;
+    const visual = orderedAllKeysRef.current;          // full wall, filter-independent
+    if (visual.length === 0) return;
+    const placed = new Set(manualOrder);
+    if (visual.every((k) => placed.has(k))) return;    // nothing new to pin
+    // Keep the order the user is looking at right now, then freeze it.
+    const next = [...manualOrder];
+    for (const key of visual) if (!placed.has(key)) next.push(key);
+    persistManualOrder(next);
+  }, [open, sortMode, manualOrder, wallSessions, folders]);
+
   const flatNavRef = useRef(flatNav);
   flatNavRef.current = flatNav;
 
@@ -3040,14 +3074,21 @@ export const SessionSwitcher = ({
             aria-label={`Actions for ${sheetSession.displayName}`}
             style={(() => {
               const width = 264;
-              const estH = sheet.mode === "rename" ? 140 : 340;
+              const estH = sheet.mode === "rename" ? 150 : 330;
               const left = Math.min(Math.max(8, sheet.anchor.x - width), window.innerWidth - width - 8);
               let top = sheet.anchor.y + 8;
               if (top + estH > window.innerHeight - 8) top = Math.max(8, sheet.anchor.y - estH - 8);
               return { left, top };
             })()}
           >
-            <p className="switcher-sheet-title">{sheetSession.displayName}</p>
+            <header className="switcher-sheet-head">
+              <p className="switcher-sheet-title">{sheetSession.displayName}</p>
+              {sheetSession.cwd && (
+                <p className="switcher-sheet-sub" title={sheetSession.cwd}>
+                  {sheetSession.cwd.replace(/^\/Users\/[^/]+/, "~")}
+                </p>
+              )}
+            </header>
             {sheet.mode === "rename" ? (
               <form className="inline-edit" onSubmit={submitRename}>
                 <input
@@ -3103,6 +3144,7 @@ export const SessionSwitcher = ({
                 >
                   Rename
                 </button>
+                {sheetSession.type !== "port" && <div className="switcher-sheet-sep" aria-hidden="true" />}
                 {sheetSession.type !== "port" && (
                   <button type="button" onClick={toggleAgentAccess}>
                     {sheetAgentPermitted ? "Disable agent access" : "Enable agent access"}
@@ -3123,10 +3165,10 @@ export const SessionSwitcher = ({
                     Stop &amp; park (resumable)
                   </button>
                 )}
+                <div className="switcher-sheet-sep" aria-hidden="true" />
                 <button type="button" className="danger" onClick={killSession}>
                   Kill session
                 </button>
-                <button type="button" onClick={() => setSheet(null)}>Cancel</button>
               </>
             )}
           </div>