hop2 0.11.1 → 0.11.3

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

@@ -13,13 +13,16 @@ import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { attachScrollFlywheel } from "../utils/scrollFlywheel";
+import { ContextMenu, type MenuRequest } from "./ContextMenu";
 import { collectTerminalMatches, selectTerminalMatch } from "../utils/terminalSearch";
+import { bufferLooksLikeClaude, createVoiceHold } from "../utils/voiceHold";
 import {
   buildSwitcherModel,
   filterSessionsByOrigin,
   projectKey,
   relativeTime,
   type SessionOriginScope,
+  type SwitcherFolder,
   type SwitcherSession,
   type SwitcherSortMode
 } from "../utils/switcherModel";
@@ -79,6 +82,9 @@ type Props = {
   // Interacting with a tile makes THAT session current: the chip moves, and
   // closing the wall lands full-screen in the terminal you were typing in.
   onFocusSession?: (session: SwitcherSession) => void;
+  // User-authored folders (Manual mode only). Server-owned, so they follow
+  // you across devices — unlike the drag ORDER, which is per-client taste.
+  folders?: SwitcherFolder[];
   tileWsBase?: string;
   userName?: string;
   terminalTheme?: object;
@@ -103,7 +109,9 @@ type Sheet = {
 //   → the filter box:     clicking it, ⌘K (open), ⌘F (unless a live tile
 //                         owns the keyboard — then ⌘F is find-in-that-tile,
 //                         scope follows focus), or ↑ from the top row
-//   → the full screen:    opening a session (the wall closes)
+//   → the full screen:    ⌘⏎, the tile's ⛶, or the sheet's "Open full
+//                         screen" — DELIBERATE only. Bare clicks and Enter
+//                         engage the tile in place; full screen is a mode.
 // Enforcement, not convention: a terminal REFUSES to take focus while any
 // text input holds it (stealOk below), and editing the filter drops any live
 // tile back to watch — so re-renders, remounts, reconnects, and polls can
@@ -263,10 +271,10 @@ const runningApp = (s: SwitcherSession) => {
 // responsiveness and whether keystrokes are accepted. The old design — an
 // HTML preview swapped for a fresh xterm + socket behind a veil — is gone.
 const LIVETILE_POLL_MS = 5000;
-const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, activeCols, activeRows, onFullscreen, onUnfocus }: {
+const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, activeCols, activeRows, onFullscreen, onUnfocus, onNotice }: {
   wsBase: string; room: string; userName: string; theme: object | undefined;
   live: boolean; claudeApp: boolean; claimSize: boolean; activeCols?: number; activeRows?: number;
-  onFullscreen: () => void; onUnfocus: () => void;
+  onFullscreen: () => void; onUnfocus: () => void; onNotice: (m: string) => void;
 }) => {
   const boxRef = useRef<HTMLDivElement | null>(null);
   const termRef = useRef<Terminal | null>(null);
@@ -277,6 +285,24 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
   const kbdEnhancedRef = useRef(false);
   // null = watching; "live"/"down" = connected state for the chrome.
   const [conn, setConn] = useState<"live" | "down" | null>(null);
+  // Hold-space voice, same controller as the full screen — the tile is where
+  // typing mostly happens now, and dictation not existing here was most of
+  // "voice doesn't always work".
+  const [voiceInterim, setVoiceInterim] = useState<string | null>(null);
+  const voiceHoldRef = useRef<ReturnType<typeof createVoiceHold> | null>(null);
+  if (!voiceHoldRef.current) {
+    voiceHoldRef.current = createVoiceHold({
+      send: (data) => sendInputRef.current?.(data),
+      notify: (m) => onNoticeRef.current?.(m),
+      setOverlay: setVoiceInterim,
+      eligible: () => {
+        if (claudeAppRef.current) return true;
+        const t = termRef.current;
+        return !!t && bufferLooksLikeClaude(t as never);
+      }
+    });
+  }
+
   // In-tile find (⌘F while the tile is live): same engine as the full-screen
   // find bar. Scope follows focus — ⌘F in a live tile searches THIS session;
   // ⌘F anywhere else is the wall filter, which finds sessions.
@@ -312,6 +338,8 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
   const myIdRef = useRef<string | null>(null);
   const [viewers, setViewers] = useState<Array<{ name: string }>>([]);
   const [driver, setDriver] = useState<{ name: string; color: string } | null>(null);
+  const onNoticeRef = useRef(onNotice);
+  onNoticeRef.current = onNotice;
   const claudeAppRef = useRef(claudeApp);
   claudeAppRef.current = claudeApp;
   const liveRef = useRef(live);
@@ -400,6 +428,10 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     // Keys route through refs so the handler survives mode flips untouched.
     term.attachCustomKeyEventHandler((ev) => {
       if (!liveRef.current) return false; // watching: the terminal takes no keys
+      {
+        const verdict = voiceHoldRef.current?.handleKey(ev);
+        if (verdict !== undefined) return verdict;
+      }
       if ((ev.metaKey || ev.ctrlKey) && !ev.altKey && !ev.shiftKey && ev.key.toLowerCase() === "f") {
         // Scope follows focus: find in THIS terminal. (The wall filter stays
         // one ⌘K away; ⌘. still unfocuses the tile.)
@@ -534,7 +566,14 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
         }
         term.write("\x1bc" + data.data, () => {
           const t = termRef.current;
-          if (t) t.refresh(0, t.rows - 1);
+          if (!t) return;
+          // Pin to the newest line. A repaint can leave the viewport parked
+          // where it was, so the tile showed older rows and the live part of
+          // the session — a Claude composer, a running command — sat below
+          // the fold with nothing indicating it. A preview is a window on
+          // NOW; scrollback belongs to the focused terminal.
+          t.scrollToBottom();
+          t.refresh(0, t.rows - 1);
           rescaleRef.current();
         });
       } catch { /* keep the last frame */ }
@@ -588,19 +627,28 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
     // less responsive than full screen. Only the live tile: browsers cap
     // concurrent WebGL contexts (~16) and a wall can hold more tiles.
     let webgl: WebglAddon | null = null;
-    try {
-      webgl = new WebglAddon();
-      webgl.onContextLoss(() => { webgl?.dispose(); webgl = null; });
-      term.loadAddon(webgl);
-    } catch {
-      webgl?.dispose();
-      webgl = null;
-    }
+    let webglWanted = true;
+    const loadGpu = () => {
+      // Deferred until the first live snapshot has painted: the renderer
+      // swap is itself a visible flash, so it happens once the tile already
+      // shows the same pixels it will re-render — invisible in practice.
+      if (!webglWanted || webgl) return;
+      try {
+        webgl = new WebglAddon();
+        webgl.onContextLoss(() => { webgl?.dispose(); webgl = null; });
+        term.loadAddon(webgl);
+        term.refresh(0, term.rows - 1);
+      } catch {
+        try { webgl?.dispose(); } catch { /* half-constructed */ }
+        webgl = null;
+        webglWanted = false;
+      }
+    };
     setConn("live");
     const sep = wsBase.includes("?") ? "&" : "?";
     const wsUrl = () =>
       wsBase + sep + "room=" + encodeURIComponent(room) + "&name=" + encodeURIComponent(userName || "user")
-      + "&replay=65536&cols=" + term.cols + "&rows=" + term.rows;
+      + "&replay=65536&nudge=0&cols=" + term.cols + "&rows=" + term.rows;
     let ws: WebSocket | null = null;
     let disposed = false;
     let reconnectTimer = 0;
@@ -635,8 +683,15 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
         try {
           const m = JSON.parse(String(ev.data));
           if (m.type === "snapshot") {
-            term.reset();
-            term.write(m.data, () => rescaleRef.current());
+            // In-band RIS: clear and repaint in one parse pass. A separate
+            // reset() painted an empty frame before the snapshot landed —
+            // the blink that made preview → terminal feel like a switch.
+            term.write("\x1bc" + m.data, () => {
+              term.scrollToBottom();
+              term.refresh(0, term.rows - 1);
+              rescaleRef.current();
+              requestAnimationFrame(loadGpu);
+            });
             kbdEnhancedRef.current = typeof m.keyboardEnhanced === "boolean"
               ? m.keyboardEnhanced
               : scanKeyboardProtocol(String(m.data || ""), false);
@@ -722,6 +777,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       setConn(null);
       setViewers([]);
       setDriver(null);
+      voiceHoldRef.current?.dispose();
       setFind(null);
       findIndexRef.current = -1;
       term.blur();
@@ -740,6 +796,14 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       onPointerDown={live ? (e) => e.stopPropagation() : undefined}
     >
       <div className="switcher-focus-term" ref={boxRef} />
+      {voiceInterim !== null && (
+        <div className="voice-overlay" aria-hidden="true">
+          <span className="voice-dot" />
+          <span className={voiceInterim ? "voice-text" : "voice-text muted"}>
+            {voiceInterim || "Listening… release Space to insert"}
+          </span>
+        </div>
+      )}
       {live && (
         <div className="switcher-live-chrome" onClick={(e) => e.stopPropagation()}>
           <span className={"switcher-focus-label" + (conn === "down" ? " down" : "")}>
@@ -778,7 +842,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
               <button type="button" aria-label="Close find" onClick={closeTileFind}>✕</button>
             </span>
           )}
-          <button type="button" title="Open full screen" aria-label="Open session full screen" onClick={onFullscreen}>⛶</button>
+          <button type="button" title="Full screen (⌘⏎)" aria-label="Open session full screen" onClick={onFullscreen}>⛶</button>
           <button type="button" title="Unfocus" aria-label="Unfocus tile" onClick={onUnfocus}>✕</button>
         </div>
       )}
@@ -798,6 +862,7 @@ export const SessionSwitcher = ({
   onNotice,
   tileWsBase,
   onFocusSession,
+  folders = [],
   userName,
   terminalTheme,
   onOpenSettings,
@@ -905,6 +970,89 @@ export const SessionSwitcher = ({
     }
   };
   const [dragKey, setDragKey] = useState<string | null>(null);
+  const [dropFolder, setDropFolder] = useState<string | null>(null);
+  const [menu, setMenu] = useState<MenuRequest>(null);
+
+  // The wall's own background: the actions that create things, plus the view
+  // controls that otherwise live only in the header. Same words as the
+  // buttons — right-click is a shortcut, never a second vocabulary.
+  const openWallMenu = (e: ReactMouseEvent) => {
+    // Only the empty wall — a right-click on a card belongs to that card.
+    if ((e.target as HTMLElement)?.closest?.(".switcher-card, .switcher-group-label, .switcher-top")) return;
+    e.preventDefault();
+    setMenu({
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        { label: "New session", onSelect: () => setCreating(true) },
+        ...(sortMode === "manual" ? [{ label: "New folder", onSelect: () => { void createFolder(); } }] : []),
+        { kind: "separator" as const },
+        { label: "Sort by recent", onSelect: () => changeSortMode("recent"), disabled: sortMode === "recent" },
+        { label: "Group by project", onSelect: () => changeSortMode("project"), disabled: sortMode === "project" },
+        { label: "Manual order", onSelect: () => changeSortMode("manual"), disabled: sortMode === "manual" },
+        { kind: "separator" as const },
+        { label: "Zoom in", onSelect: () => changeZoom(effectiveZoom + 1), hint: "+", disabled: effectiveZoom >= maxZoom },
+        { label: "Zoom out", onSelect: () => changeZoom(effectiveZoom - 1), hint: "−", disabled: effectiveZoom <= 0 }
+      ]
+    });
+  };
+
+  const openFolderMenu = (e: ReactMouseEvent, folder: SwitcherFolder) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenu({
+      x: e.clientX,
+      y: e.clientY,
+      items: [
+        { label: "Rename folder…", onSelect: () => { void renameFolder(folder); } },
+        { label: "Delete folder", danger: true, onSelect: () => { void deleteFolder(folder); } },
+        { kind: "separator" as const },
+        { label: "New folder", onSelect: () => { void createFolder(); } }
+      ]
+    });
+  };
+
+  // Folder mutations go straight to the daemon: folders are shared structure,
+  // not client preference, so they must not live in localStorage the way the
+  // manual ORDER does.
+  const folderApi = async (path: string, body: unknown, failure: string) => {
+    try {
+      const res = await fetch(path, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({} as { error?: string }));
+        onNotice(data.error || failure);
+        return false;
+      }
+      onRefresh();
+      return true;
+    } catch {
+      onNotice(failure);
+      return false;
+    }
+  };
+  const createFolder = async () => {
+    const name = window.prompt("Folder name")?.trim();
+    if (!name) return;
+    if (await folderApi("/api/folders", { name }, "Could not create folder")) onNotice(`Created ${name}`);
+  };
+  const renameFolder = async (folder: SwitcherFolder) => {
+    const name = window.prompt("Rename folder", folder.name)?.trim();
+    if (!name || name === folder.name) return;
+    await folderApi("/api/folders/rename", { id: folder.id, name }, "Could not rename folder");
+  };
+  const deleteFolder = async (folder: SwitcherFolder) => {
+    // Deleting a folder releases its sessions; it never kills them, so this
+    // needs no scarier confirmation than the sentence itself.
+    if (!window.confirm(`Delete folder "${folder.name}"? Its sessions move back to unfiled.`)) return;
+    await folderApi("/api/folders/delete", { id: folder.id }, "Could not delete folder");
+  };
+  const fileSession = async (key: string, folderId: string | null) => {
+    await folderApi("/api/sessions/move", { internalName: key, folderId }, "Could not move session");
+  };
 
   // Drag auto-scroll: a manual reorder often has to travel past a screenful
   // of tiles, and HTML5 drag blocks normal scrolling — so while a drag is
@@ -984,6 +1132,8 @@ export const SessionSwitcher = ({
   const [renameDraft, setRenameDraft] = useState("");
   const [creating, setCreating] = useState(false);
   const [createDraft, setCreateDraft] = useState("");
+  // When set, the next created session is filed here (the folder header's +).
+  const [createInFolder, setCreateInFolder] = useState<SwitcherFolder | null>(null);
   const [, setTick] = useState(0);
   // Preview cache survives page reloads via sessionStorage: a freshly loaded
   // page paints last-known screens instantly instead of a wall of blanks.
@@ -1035,7 +1185,7 @@ export const SessionSwitcher = ({
     // A filter query searches EVERYTHING (parked included); the browsing
     // wall shows only unparked sessions.
     const pool = filter.trim() ? visibleSessions : wallSessions;
-    const live = buildSwitcherModel(pool, currentRoom, filter, sortMode, manualOrder);
+    const live = buildSwitcherModel(pool, currentRoom, filter, sortMode, manualOrder, folders);
     if (!open || (live.mode !== "tiers" && live.mode !== "project")) return live;
     let frozen = frozenOrderRef.current;
     if (!frozen || frozen.mode !== live.mode) {
@@ -1122,17 +1272,33 @@ export const SessionSwitcher = ({
 
   // Content matches the name filter didn't already surface.
   const extraContentMatches = useMemo(() => {
-    if (model.mode !== "filter") return [];
-    const seen = new Set(model.rows.map(sessionKey));
+    // Content hits surface in EVERY mode under a query. They were rendered
+    // only by the score-ranked filter branch — which Manual mode never uses
+    // (its filter narrows in place) — so anyone living in Manual simply
+    // never saw the terminal-output search they were promised.
+    if (!filter.trim()) return [];
+    const seen = new Set<string>();
+    if (model.mode === "filter") model.rows.forEach((r) => seen.add(sessionKey(r)));
+    else if (model.mode === "manual") {
+      model.rows.forEach((r) => seen.add(sessionKey(r)));
+      model.folders.forEach((f) => f.rows.forEach((r) => seen.add(sessionKey(r))));
+    } else if (model.mode === "project") {
+      model.groups.forEach((g) => g.rows.forEach((r) => seen.add(sessionKey(r))));
+    } else {
+      model.hero.forEach((r) => seen.add(sessionKey(r)));
+      model.groups.forEach((g) => g.rows.forEach((r) => seen.add(sessionKey(r))));
+    }
     return contentMatches.filter((m) => !seen.has(sessionKey(m.session)));
-  }, [model, contentMatches]);
+  }, [model, contentMatches, filter]);
 
   // Flat navigation order = exactly the visual order: heroes, then group rows
   // (and under a filter: name matches, then on-screen content matches).
   const flatNav = useMemo<SwitcherSession[]>(
     () => {
       if (model.mode === "filter") return [...model.rows, ...extraContentMatches.map((m) => m.session)];
-      if (model.mode === "manual") return model.rows;
+      // Folder rows come first because that is their visual order; keyboard
+      // ↑/↓ and Enter must traverse what the eye sees, foldered included.
+      if (model.mode === "manual") return [...model.folders.flatMap((f) => f.rows), ...model.rows, ...extraContentMatches.map((m) => m.session)];
       if (model.mode === "project") return model.groups.flatMap((g) => g.rows);
       return [...model.hero, ...model.groups.flatMap((g) => g.rows)];
     },
@@ -1148,8 +1314,10 @@ export const SessionSwitcher = ({
   // reordering works against, regardless of what the filter is showing.
   const orderedAllKeysRef = useRef<string[]>([]);
   {
-    const full = buildSwitcherModel(wallSessions, currentRoom, "", "manual", manualOrder);
-    orderedAllKeysRef.current = full.mode === "manual" ? full.rows.map(sessionKey) : [];
+    const full = buildSwitcherModel(wallSessions, currentRoom, "", "manual", manualOrder, folders);
+    orderedAllKeysRef.current = full.mode === "manual"
+      ? [...full.folders.flatMap((f) => f.rows), ...full.rows].map(sessionKey)
+      : [];
   }
   const flatNavRef = useRef(flatNav);
   flatNavRef.current = flatNav;
@@ -1325,7 +1493,24 @@ export const SessionSwitcher = ({
     }
   };
 
+  // Engage a session IN PLACE — the wall's default action. Full screen is a
+  // mode you enter on purpose (⌘⏎, the ⛶ button, or the sheet), never a side
+  // effect of clicking around or pressing Enter.
+  const focusInPlace = (session: SwitcherSession) => {
+    const key = sessionKey(session);
+    filterInputRef.current?.blur();
+    setFocusedKey(key);
+    onFocusSession?.(session);
+    const idx = flatNav.findIndex((x) => sessionKey(x) === key);
+    if (idx >= 0) setKbdIndex(idx);
+  };
+  const canFocusInPlace = (session: SwitcherSession) =>
+    interactiveTiles && session.active && session.type !== "port";
+
   const handleTap = (session: SwitcherSession) => {
+    // Same immediacy when the tap switches sessions: focus leaves the filter
+    // at the moment of intent, not when the terminal finishes connecting.
+    filterInputRef.current?.blur();
     cancelLongPress();
     if (suppressTapRef.current) {
       suppressTapRef.current = false;
@@ -1344,6 +1529,30 @@ export const SessionSwitcher = ({
         body: JSON.stringify({ internalName: sessionKey(session), parked: false })
       }).catch(() => { /* daemon will still show it parked; harmless */ });
     }
+    // A DEAD terminal session starts IN PLACE instead of falling through to
+    // full screen — the last accidental door into the mode. Attaching is what
+    // starts a known session, so a claim-free throwaway socket kicks it
+    // alive; the tile is pre-focused and goes live the moment the session
+    // reports active. Ports still open full screen (they are web pages), and
+    // without live tiles (no wsBase / small zoom) the old switch stands.
+    if (session.type !== "port" && !session.active && interactiveTiles && tileWsBase) {
+      const key = sessionKey(session);
+      try {
+        const sep = tileWsBase.includes("?") ? "&" : "?";
+        const kick = new WebSocket(
+          tileWsBase + sep + "room=" + encodeURIComponent(key)
+          + "&name=" + encodeURIComponent((userName || "user") + " (start)")
+          + "&replay=0&nudge=0&cols=80&rows=24"
+        );
+        kick.onopen = () => { window.setTimeout(() => { try { kick.close(); } catch { /* done */ } }, 400); };
+        kick.onerror = () => { try { kick.close(); } catch { /* refused */ } };
+      } catch { /* daemon will surface it as starting on the next poll */ }
+      onNotice("Starting " + (session.displayName || session.name) + "…");
+      setFocusedKey(key);
+      onFocusSession?.(session);
+      onRefresh();
+      return;
+    }
     onSwitch(session);
   };
 
@@ -1364,15 +1573,15 @@ export const SessionSwitcher = ({
         return;
       }
       if (document.activeElement?.closest?.(".switcher-live-tile, .switcher-focus-tile")) return;
-      // ⌘⏎ (Ctrl⏎): focus the selected tile for in-place interaction.
-      // Plain Enter stays "switch to session" — the muscle-memory action.
+      // ⌘⏎ (Ctrl⏎): enter FULL SCREEN on the selected session — the one
+      // deliberate keyboard route into the mode. Plain Enter engages the
+      // tile in place; full screen never happens by accident.
       if (event.key === "Enter" && (event.metaKey || event.ctrlKey) && !event.altKey && !event.shiftKey) {
         const target = flatNav[kbdIndex];
-        if (target && interactiveTiles && target.active && target.type !== "port") {
+        if (target) {
           event.preventDefault();
           filterInputRef.current?.blur();
-          setFocusedKey(sessionKey(target));
-          onFocusSession?.(target);
+          onSwitch(target);
         }
         return;
       }
@@ -1476,7 +1685,8 @@ export const SessionSwitcher = ({
         const target = flatNav[kbdIndex];
         if (target) {
           event.preventDefault();
-          handleTap(target);
+          if (canFocusInPlace(target)) focusInPlace(target);
+          else handleTap(target); // ports, dead sessions, non-interactive zoom
         }
         return;
       }
@@ -1687,7 +1897,23 @@ export const SessionSwitcher = ({
       }
       setCreating(false);
       setCreateDraft("");
-      onSwitch({ name: data.name, displayName: data.name, active: false, starting: true, internalName: data.name });
+      if (createInFolder) {
+        // File it first: the move endpoint is the one place membership is
+        // persisted durably.
+        await fetch("/api/sessions/move", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ internalName: data.name, folderId: createInFolder.id })
+        }).catch(() => { /* filing is best-effort; the session exists */ });
+        setCreateInFolder(null);
+      }
+      // Stay on the wall. Creating used to jump straight to full screen —
+      // the exact accidental mode-entry the hotkey inversion removed from
+      // clicks. The new tile becomes current and goes live in place as soon
+      // as the session reports active.
+      onFocusSession?.({ name: data.name, displayName: data.name, active: false, starting: true, internalName: data.name });
+      setFocusedKey(data.name);
+      onRefresh();
     } catch {
       onNotice("Failed to create session");
     }
@@ -1791,26 +2017,19 @@ export const SessionSwitcher = ({
           // any stray click at interactive zoom silently rerouted the
           // keyboard into that session ("typing goes to a terminal").
           const el = e.target as HTMLElement | null;
-          const onTerminalArea = !!el?.closest?.(".switcher-preview, .switcher-live-tile");
-          if (interactiveTiles && s.active && s.type !== "port" && onTerminalArea) {
-            setFocusedKey(key);
-            onFocusSession?.(s);
-            // The keyboard selection (accent outline + tinted background)
-            // follows explicit interaction — otherwise it lingers on the
-            // previous current card, reading as a stale current-marker.
-            const idx = flatNav.findIndex((x) => sessionKey(x) === key);
-            if (idx >= 0) setKbdIndex(idx);
-          } else handleTap(s);
+          if (el?.closest?.("button, a, input")) return; // controls own their clicks
+          // The WHOLE card engages in place — clicking the header used to
+          // switch to full screen, which made the mode trivially easy to
+          // enter by accident. Full screen is ⌘⏎ / ⛶ / the sheet, only.
+          if (canFocusInPlace(s)) focusInPlace(s);
+          else handleTap(s);
         }}
         onKeyDown={(e) => {
           if (e.key === "Enter" && !e.shiftKey) {
-            // ⌘⏎ focuses the tile; plain Enter switches (mirrors onNavKey).
-            if ((e.metaKey || e.ctrlKey) && interactiveTiles && s.active && s.type !== "port") {
-              setFocusedKey(key);
-              onFocusSession?.(s);
-              const idx = flatNav.findIndex((x) => sessionKey(x) === key);
-              if (idx >= 0) setKbdIndex(idx);
-            } else handleTap(s);
+            // ⌘⏎ = full screen (deliberate); plain Enter engages in place.
+            if (e.metaKey || e.ctrlKey) { onSwitch(s); return; }
+            if (canFocusInPlace(s)) focusInPlace(s);
+            else handleTap(s);
           }
         }}
         {...pressHandlers(s)}
@@ -1861,6 +2080,7 @@ export const SessionSwitcher = ({
               activeRows={preview?.rows}
               onFullscreen={() => onSwitch(s)}
               onUnfocus={() => setFocusedKey(null)}
+              onNotice={onNotice}
             />
           </div>
         ) : (
@@ -1944,7 +2164,7 @@ export const SessionSwitcher = ({
               aria-label="New session"
               onClick={() => setCreating(true)}
             >
-              ＋ New
+              ＋<span className="switcher-new-label"> New</span>
             </button>
           )}
           <div className="switcher-tilesize" role="group" aria-label="Tile zoom">
@@ -2080,7 +2300,7 @@ export const SessionSwitcher = ({
         </div>
         {/* Create form lives in the top bar so the header ＋ works from EVERY
             mode — the dashed grid card only exists in recent mode. */}
-        {creating && (
+        {creating && !createInFolder && (
           <form className="switcher-create-row inline-edit" onSubmit={submitCreate}>
             <input
               placeholder="session-name"
@@ -2091,11 +2311,11 @@ export const SessionSwitcher = ({
               aria-label="New session name"
             />
             <button type="submit">Create</button>
-            <button type="button" onClick={() => { setCreating(false); setCreateDraft(""); }}>✕</button>
+            <button type="button" onClick={() => { setCreating(false); setCreateDraft(""); setCreateInFolder(null); }}>✕</button>
           </form>
         )}
       </div>
-      <div className="switcher-scroll" ref={scrollRef}>
+      <div className="switcher-scroll" ref={scrollRef} onContextMenu={openWallMenu}>
         {model.mode === "filter" ? (
           // Matches keep their terminal previews: search results are preview
           // cards at the current zoom, same as the wall — the screen content
@@ -2138,15 +2358,81 @@ export const SessionSwitcher = ({
           </>
         ) : model.mode === "manual" ? (
           <>
-            {model.rows.length === 0 ? (
-              <div className="switcher-empty">No sessions</div>
+            {model.rows.length === 0 && model.folders.every((f) => f.rows.length === 0) ? (
+              <div className="switcher-empty">{filter.trim() ? "No matches" : "No sessions"}</div>
             ) : (
               <>
                 <p className="switcher-hint">
                   {filter.trim()
                     ? "Showing matches in your order — drag one next to another (or ⌥↑/⌥↓); the move applies to the full list"
-                    : "Drag tiles to reorder, or ⌥↑/⌥↓ to move the selected one"}
+                    : "Drag tiles to reorder, or onto a folder to file them"}
+                  <button type="button" className="switcher-folder-new" onClick={createFolder}>+ New folder</button>
                 </p>
+                {model.folders.map(({ folder, rows }) => (
+                  <section
+                    key={folder.id}
+                    className={"switcher-group switcher-folder" + (dropFolder === folder.id ? " drop-target" : "")}
+                    onDragOver={(e) => { e.preventDefault(); setDropFolder(folder.id); }}
+                    onDragLeave={() => setDropFolder((cur) => (cur === folder.id ? null : cur))}
+                    onDrop={(e) => {
+                      e.preventDefault();
+                      setDropFolder(null);
+                      suppressTapRef.current = true;
+                      if (dragKey) fileSession(dragKey, folder.id);
+                      setDragKey(null);
+                    }}
+                  >
+                    <h3 className="switcher-group-label" onContextMenu={(e) => openFolderMenu(e, folder)}>
+                      {folder.name}
+                      <span className="switcher-folder-count">{rows.length}</span>
+                      <button
+                        type="button"
+                        className="switcher-folder-add"
+                        title={"New session in " + folder.name}
+                        onClick={() => { setCreateInFolder(folder); setCreating(true); }}
+                      >
+                        +
+                      </button>
+                      <button type="button" onClick={() => renameFolder(folder)} title="Rename folder">✎</button>
+                      <button type="button" onClick={() => deleteFolder(folder)} title="Delete folder">🗑</button>
+                    </h3>
+                    {creating && createInFolder?.id === folder.id && (
+                      <form className="switcher-create-row inline-edit switcher-create-infolder" onSubmit={submitCreate}>
+                        <input
+                          placeholder={"new session in " + folder.name}
+                          value={createDraft}
+                          onChange={(e) => setCreateDraft(e.target.value)}
+                          maxLength={64}
+                          autoFocus
+                          aria-label={"New session name in " + folder.name}
+                        />
+                        <button type="submit">Create</button>
+                        <button type="button" onClick={() => { setCreating(false); setCreateDraft(""); setCreateInFolder(null); }}>✕</button>
+                      </form>
+                    )}
+                    {rows.length === 0 ? (
+                      creating && createInFolder?.id === folder.id ? null : <p className="switcher-folder-empty">Drag a session here, or ＋ to create one</p>
+                    ) : (
+                      <div className="switcher-grid">{rows.map((s) => renderCard(s))}</div>
+                    )}
+                  </section>
+                ))}
+                {model.folders.length > 0 && model.rows.length > 0 && (
+                  <h3
+                    className={"switcher-group-label switcher-unfiled" + (dropFolder === "" ? " drop-target" : "")}
+                    onDragOver={(e) => { e.preventDefault(); setDropFolder(""); }}
+                    onDragLeave={() => setDropFolder((cur) => (cur === "" ? null : cur))}
+                    onDrop={(e) => {
+                      e.preventDefault();
+                      setDropFolder(null);
+                      suppressTapRef.current = true;
+                      if (dragKey) fileSession(dragKey, null); // drop here to unfile
+                      setDragKey(null);
+                    }}
+                  >
+                    Unfiled
+                  </h3>
+                )}
                 <div className="switcher-grid">{model.rows.map((s) => renderCard(s))}</div>
               </>
             )}
@@ -2243,8 +2529,37 @@ export const SessionSwitcher = ({
             ) : (
               <>
                 {!isCurrentSession(sheetSession) && (
-                  <button type="button" onClick={() => handleTap(sheetSession)}>Switch to</button>
+                  <button type="button" onClick={() => { setSheet(null); onSwitch(sheetSession); }}>Open full screen</button>
                 )}
+                <button
+                  type="button"
+                  onClick={async () => {
+                      setSheet(null);
+                      onNotice("Forking…");
+                      try {
+                        const res = await fetch("/api/sessions/fork", {
+                          method: "POST",
+                          headers: { "Content-Type": "application/json" },
+                          body: JSON.stringify({ internalName: sessionKey(sheetSession) })
+                        });
+                        const data = await res.json().catch(() => ({} as { error?: string; name?: string; kind?: string }));
+                        if (!res.ok) {
+                          onNotice(data.error || "Fork failed");
+                          return;
+                        }
+                        onNotice(
+                          data.kind === "claude" ? `Forked conversation → ${data.name}`
+                            : data.kind === "codex" ? `${data.name} opened — pick the conversation to resume`
+                            : `Forked → ${data.name} (new shell, same directory)`
+                        );
+                        onRefresh();
+                    } catch {
+                      onNotice("Fork failed");
+                    }
+                  }}
+                >
+                  Fork session
+                </button>
                 <button
                   type="button"
                   onClick={() => {
@@ -2283,6 +2598,7 @@ export const SessionSwitcher = ({
           </div>
         </>
       )}
+      <ContextMenu request={menu} onClose={() => setMenu(null)} />
     </div>
   );
 };