hop2 0.11.38 → 0.11.40

package/hay/apps/web/index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <!-- Terminal prompt chevron on a dark tile — reads "terminal app" at 16px. -->
     <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2317181d'/%3E%3Cpath d='M11 9.5 L20.5 16 L11 22.5' fill='none' stroke='%23a78bfa' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
-    <title>Hay</title>
+    <title>hop</title>
+    <meta name="apple-mobile-web-app-title" content="hop" />
   </head>
   <body>
     <div id="root"></div>

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

@@ -14,6 +14,7 @@ import { createOptimisticEcho, hasActiveOtherTypist } from "./utils/optimisticEc
 import { attachScrollFlywheel } from "./utils/scrollFlywheel";
 import { collectTerminalMatches, selectTerminalMatch } from "./utils/terminalSearch";
 import { createVoiceHold, speechRecognitionCtor } from "./utils/voiceHold";
+import { tabTitle } from "./utils/tabTitle";
 import { scanKeyboardProtocol } from "./utils/keyboardProtocol";
 import { originalPathHint, pasteableUploadPaths } from "./utils/fileDrop";
 import { MobileKeyboard } from "./components/MobileKeyboard";
@@ -897,7 +898,14 @@ const App = () => {
       return;
     }
     try {
-      const notification = new Notification(title, { body: "Terminal bell" });
+      // silent: the attention is the notification itself — the dot in the
+      // tab title, the card's badge, the banner. macOS played the system
+      // alert sound for every bell on top of that, and a fleet of agents
+      // ringing for attention turned the laptop into a pinball machine.
+      // tag: a session that rings twice replaces its banner instead of
+      // stacking a second one (Safari ignores both options; its sound
+      // follows System Settings › Notifications).
+      const notification = new Notification(title, { body: "Terminal bell", silent: true, tag: `hop-bell-${title}` });
       notification.onclick = () => {
         window.focus();
         onClick?.();
@@ -3287,13 +3295,15 @@ const App = () => {
     return { bell, output };
   }, [sessions, session?.room]);
 
-  // Tab title: session name, with a dot when the attached session rang a bell
-  // while hidden or another session has an unseen bell.
+  // Tab title: "<session> · hop", or "hop" on the hub, with a dot when the
+  // attached session rang a bell while hidden or another session has an
+  // unseen bell. Keyed on `session`, not the label alone: with no session
+  // open the label still holds the placeholder id minted for a would-be new
+  // room, which is not a name.
   useEffect(() => {
-    const base = sessionLabel || session?.room || "hop";
     const alert = titleAlert || otherAttention.bell;
-    document.title = `${alert ? "● " : ""}${base}`;
-  }, [titleAlert, otherAttention.bell, sessionLabel, session?.room]);
+    document.title = tabTitle(session ? (sessionLabel || session.room) : null, alert);
+  }, [titleAlert, otherAttention.bell, sessionLabel, session]);
 
   // Notify for bells in other sessions: the 5s poll flips bellUnseen false→true
   // when a session rings while unwatched. The seq map dedupes so a session that
@@ -4530,7 +4540,15 @@ const App = () => {
                     e.preventDefault();
                     dragDepthRef.current = 0;
                     setDropActive(false);
+                    // iOS Safari delivers a Files-app drop through items,
+                    // with `files` empty; desktop browsers fill both.
                     const files = Array.from(e.dataTransfer?.files || []);
+                    if (files.length === 0) {
+                      for (const item of Array.from(e.dataTransfer?.items || [])) {
+                        const f = item.kind === "file" ? item.getAsFile() : null;
+                        if (f) files.push(f);
+                      }
+                    }
                     if (files.length > 0) {
                       void uploadDroppedFiles(files);
                       return;

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

@@ -0,0 +1,128 @@
+import { useEffect, useRef, useState } from "react";
+import type { KeyboardEvent } from "react";
+
+// Working-directory input for the create form, with directory completion.
+//
+// Completion comes from the daemon (/api/fs/complete): the browser cannot
+// see the filesystem, and the session is going to start wherever the DAEMON
+// resolves the path, so the daemon is the only honest source of what exists.
+// The field keeps the text as typed — ~ included — and the create API expands
+// it; showing absolute paths here would make every suggestion a screenful.
+//
+// With nothing typed, the directories of recent sessions are offered first:
+// a new session usually joins a project that already has one.
+
+type Entry = { name: string; path: string };
+
+const shorten = (p: string, home: string) =>
+  home && (p === home || p.startsWith(home + "/")) ? "~" + p.slice(home.length) : p;
+
+export const CwdField = ({ value, onChange, recent, id }: {
+  value: string;
+  onChange: (next: string) => void;
+  recent: string[];
+  id?: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState<Array<{ label: string; fill: string }>>([]);
+  const [active, setActive] = useState(-1);
+  const [source, setSource] = useState<"recent" | "fs">("fs");
+  const seq = useRef(0);
+  const timer = useRef<number | null>(null);
+
+  const showRecent = () => {
+    setSource("recent");
+    setItems(recent.map((p) => ({ label: p, fill: p })));
+    setActive(-1);
+    setOpen(recent.length > 0);
+  };
+
+  const complete = (q: string) => {
+    const mine = ++seq.current;
+    fetch(`/api/fs/complete?q=${encodeURIComponent(q)}`)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((data: { home?: string; entries?: Entry[] } | null) => {
+        if (mine !== seq.current) return; // a newer keystroke superseded this
+        const home = data?.home || "";
+        const list = (data?.entries || []).map((e) => {
+          const short = shorten(e.path, home);
+          return { label: short, fill: short + "/" };
+        });
+        setSource("fs");
+        setItems(list);
+        setActive(list.length ? 0 : -1);
+        setOpen(list.length > 0);
+      })
+      .catch(() => { /* completion is a convenience; the field still works */ });
+  };
+
+  useEffect(() => () => { if (timer.current) window.clearTimeout(timer.current); }, []);
+
+  const onInput = (next: string) => {
+    onChange(next);
+    if (timer.current) window.clearTimeout(timer.current);
+    if (!next.trim()) { showRecent(); return; }
+    timer.current = window.setTimeout(() => complete(next), 120);
+  };
+
+  const accept = (i: number) => {
+    const it = items[i];
+    if (!it) return;
+    onChange(it.fill);
+    if (source === "recent") { setOpen(false); return; }
+    // Descend: completing a directory immediately lists what is inside it,
+    // so a path is built one segment per Tab, like a shell.
+    complete(it.fill);
+  };
+
+  const onKey = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (!open) return;
+    if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(items.length - 1, a + 1)); return; }
+    if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(0, a - 1)); return; }
+    if (e.key === "Tab" || e.key === "ArrowRight") {
+      if (active >= 0) { e.preventDefault(); accept(active); }
+      return;
+    }
+    if (e.key === "Enter" && active >= 0) { e.preventDefault(); accept(active); return; }
+    if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); setOpen(false); }
+  };
+
+  return (
+    <div className="switcher-create-cwd">
+      <input
+        id={id}
+        value={value}
+        placeholder="~ (working directory)"
+        aria-label="Working directory"
+        aria-autocomplete="list"
+        aria-expanded={open}
+        autoComplete="off"
+        spellCheck={false}
+        onChange={(e) => onInput(e.target.value)}
+        onFocus={() => { if (!value.trim()) showRecent(); else if (items.length) setOpen(true); }}
+        onBlur={() => setOpen(false)}
+        onKeyDown={onKey}
+      />
+      {open && items.length > 0 && (
+        <div className="cwd-suggest" role="listbox" aria-label={source === "recent" ? "Recent directories" : "Directories"}>
+          {source === "recent" && <div className="cwd-suggest-label">Recent</div>}
+          {items.map((it, i) => (
+            <button
+              key={it.fill}
+              type="button"
+              role="option"
+              aria-selected={i === active}
+              className={i === active ? "on" : ""}
+              // mousedown, not click: the input's blur (which closes the
+              // list) fires between the two, and the click would land on nothing.
+              onMouseDown={(e) => { e.preventDefault(); accept(i); }}
+              onMouseEnter={() => setActive(i)}
+            >
+              {it.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};

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

@@ -14,6 +14,8 @@ import { Terminal } from "@xterm/xterm";
 import { FitAddon } from "@xterm/addon-fit";
 import { attachScrollFlywheel } from "../utils/scrollFlywheel";
 import { ContextMenu, type MenuRequest } from "./ContextMenu";
+import { CwdField } from "./CwdField";
+import { pasteableUploadPaths } from "../utils/fileDrop";
 import { collectTerminalMatches, selectTerminalMatch } from "../utils/terminalSearch";
 import { createVoiceHold, isClaudeSurface } from "../utils/voiceHold";
 import {
@@ -111,7 +113,7 @@ type Props = {
 
 type Sheet = {
   session: SwitcherSession;
-  mode: "menu" | "rename";
+  mode: "menu" | "rename" | "folder";
   // Viewport point the menu anchors to — the ... button or the long-press
   // finger position. A bottom sheet made the thumb travel the whole screen
   // for actions about the element it was already touching.
@@ -347,7 +349,9 @@ 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, onNotice }: {
+const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, activeCols, activeRows, onFullscreen, onUnfocus, onNotice, onSender }: {
+  /** The wall keeps a registry of live tiles' input senders (file drops). */
+  onSender?: (send: ((data: string) => void) | null) => void;
   wsBase: string; room: string; userName: string; theme: object | undefined;
   live: boolean; claudeApp: boolean; claimSize: boolean; activeCols?: number; activeRows?: number;
   onFullscreen: () => void; onUnfocus: () => void; onNotice: (m: string) => void;
@@ -961,6 +965,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       };
     };
     connect();
+    // Registered below, once the sender exists.
     sendInputRef.current = (data: string) => {
       // A keystroke INTO this tile is a genuine user action on it — per the
       // size-ownership model, it should take the size and fit the tile it
@@ -998,6 +1003,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       }
       ws.send(JSON.stringify({ type: "input", data }));
     };
+    onSender?.(sendInputRef.current);
     const hiddenReconnect = { hiddenAt: 0 };
     const onVisibility = () => {
       if (document.hidden) { hiddenReconnect.hiddenAt = Date.now(); return; }
@@ -1031,6 +1037,7 @@ const LiveTile = ({ wsBase, room, userName, theme, live, claudeApp, claimSize, a
       window.removeEventListener("focus", onWindowFocus);
       try { ws?.close(); } catch { /* closing */ }
       sendInputRef.current = null;
+      onSender?.(null);
       term.options.disableStdin = true;
       term.options.cursorBlink = false;
       window.clearTimeout(downChromeTimer);
@@ -1298,6 +1305,55 @@ export const SessionSwitcher = ({
   };
   const [dragKey, setDragKey] = useState<string | null>(null);
   const [dropFolder, setDropFolder] = useState<string | null>(null);
+  // A file dragged over a card: that card is the drop target (upload).
+  const [fileDropKey, setFileDropKey] = useState<string | null>(null);
+  const tileSendersRef = useRef(new Map<string, (data: string) => void>());
+  const isFileDrag = (dt: DataTransfer | null) =>
+    !!dt && (Array.from(dt.types || []).includes("Files") || Array.from(dt.items || []).some((i) => i.kind === "file"));
+  // iOS Safari delivers a Files-app drop through items, with `files` empty;
+  // desktop browsers fill both.
+  const filesFrom = (dt: DataTransfer | null): File[] => {
+    const files = Array.from(dt?.files || []);
+    if (files.length === 0) {
+      for (const item of Array.from(dt?.items || [])) {
+        const f = item.kind === "file" ? item.getAsFile() : null;
+        if (f) files.push(f);
+      }
+    }
+    return files;
+  };
+  // Drop on a card = upload to THAT session, same endpoint the full-screen
+  // terminal uses. The card's reorder handlers used to preventDefault a file
+  // drop and do nothing with it — on a phone, where the wall is the whole
+  // UI, that was "drag and drop does nothing". A live tile gets the paths
+  // typed into it; anything else gets told where the file landed.
+  const uploadFilesTo = async (s: SwitcherSession, files: File[]) => {
+    if (files.length === 0) return;
+    const key = sessionKey(s);
+    onNotice(files.length === 1 ? `Uploading ${files[0].name} to ${s.displayName}…` : `Uploading ${files.length} files to ${s.displayName}…`);
+    const landed: string[] = [];
+    for (const file of files) {
+      try {
+        const res = await fetch(`/api/sessions/upload?name=${encodeURIComponent(key)}&filename=${encodeURIComponent(file.name)}`, { method: "POST", body: file });
+        const data = await res.json().catch(() => null) as { path?: string; error?: string } | null;
+        if (!res.ok) { onNotice(data?.error || `Upload failed (${res.status})`); return; }
+        if (data?.path) landed.push(String(data.path));
+      } catch {
+        onNotice("Upload failed");
+        return;
+      }
+    }
+    if (landed.length === 0) return;
+    const paste = pasteableUploadPaths(landed);
+    const send = tileSendersRef.current.get(key);
+    if (send) {
+      send(paste);
+      onNotice(landed.length === 1 ? `Uploaded to ${landed[0]}` : `Uploaded ${landed.length} files — paths pasted`);
+    } else {
+      try { await navigator.clipboard?.writeText(paste); } catch { /* no clipboard: the notice still names the path */ }
+      onNotice(`Uploaded to ${landed.join(", ")} — path copied; open ${s.displayName} to paste it`);
+    }
+  };
   const [menu, setMenu] = useState<MenuRequest>(null);
 
   // The wall's own background: the actions that create things, plus the view
@@ -1361,10 +1417,31 @@ export const SessionSwitcher = ({
       return false;
     }
   };
+  // Returns the created folder (the daemon mints the id) so "New folder…"
+  // from a session's menu can file the session into it in the same gesture.
+  const createFolderNamed = async (name: string): Promise<SwitcherFolder | null> => {
+    try {
+      const res = await fetch("/api/folders", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name })
+      });
+      const data = await res.json().catch(() => ({} as { error?: string; folder?: SwitcherFolder }));
+      if (!res.ok || !data.folder?.id) {
+        onNotice(data.error || "Could not create folder");
+        return null;
+      }
+      onRefresh();
+      return { id: data.folder.id, name: data.folder.name || name };
+    } catch {
+      onNotice("Could not create folder");
+      return null;
+    }
+  };
   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}`);
+    if (await createFolderNamed(name)) onNotice(`Created ${name}`);
   };
   const renameFolder = async (folder: SwitcherFolder) => {
     const name = window.prompt("Rename folder", folder.name)?.trim();
@@ -1467,6 +1544,19 @@ export const SessionSwitcher = ({
   const [renameDraft, setRenameDraft] = useState("");
   const [creating, setCreating] = useState(false);
   const [createDraft, setCreateDraft] = useState("");
+  // Where the new session starts. Remembered across creates: several
+  // sessions in a row usually belong to the same project.
+  const [createCwd, setCreateCwd] = useState(() => {
+    try { return localStorage.getItem("hay_create_cwd") || ""; } catch { return ""; }
+  });
+  const recentCwds = useMemo(() => {
+    const seen = new Set<string>();
+    return [...sessions]
+      .sort((a, b) => (b.lastActivityAt || 0) - (a.lastActivityAt || 0))
+      .map((s) => (s.cwd || "").replace(/^\/Users\/[^/]+(?=\/|$)/, "~"))
+      .filter((c) => c && !seen.has(c) && seen.add(c))
+      .slice(0, 8);
+  }, [sessions]);
   // What a new session boots into: a plain shell, or straight into an agent.
   // Maps to the create API's `startup` command.
   const [createType, setCreateType] = useState<"terminal" | "claude" | "codex">("terminal");
@@ -2209,6 +2299,38 @@ export const SessionSwitcher = ({
     });
   };
 
+  // Fork (same tool) or hand off (target names the other tool). One call
+  // for both so the two can never disagree about the endpoint.
+  const forkSession = async (s: SwitcherSession, target?: "claude" | "codex") => {
+    setSheet(null);
+    onNotice(target ? `Handing off to ${target === "codex" ? "Codex" : "Claude"}…` : "Forking…");
+    try {
+      const res = await fetch("/api/sessions/fork", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ internalName: sessionKey(s), ...(target ? { target } : {}) })
+      });
+      const data = await res.json().catch(() => ({} as { error?: string; name?: string; kind?: string; extract?: { turns?: number; bytes?: number } }));
+      if (!res.ok) {
+        onNotice(data.error || (target ? "Handoff failed" : "Fork failed"));
+        return;
+      }
+      if (data.kind === "handoff") {
+        const kb = Math.max(1, Math.round((data.extract?.bytes || 0) / 1024));
+        onNotice(`${data.name} — ${data.extract?.turns ?? "?"} turns handed off (${kb} KB); it reads them first`);
+      } else {
+        onNotice(
+          data.kind === "claude" ? `Forked conversation → ${data.name}`
+            : data.kind === "codex" ? `${data.name} opened — resuming the conversation`
+            : `Forked → ${data.name} (new shell, same directory)`
+        );
+      }
+      onRefresh();
+    } catch {
+      onNotice(target ? "Handoff failed" : "Fork failed");
+    }
+  };
+
   const submitRename = async (event: FormEvent) => {
     event.preventDefault();
     if (!sheet) return;
@@ -2383,7 +2505,7 @@ export const SessionSwitcher = ({
       const res = await fetch("/api/sessions", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name: next, type: "terminal", port: null, startup: startupFor(createType) })
+        body: JSON.stringify({ name: next, type: "terminal", port: null, startup: startupFor(createType), cwd: createCwd.trim() || undefined })
       });
       const data = await res.json().catch(() => ({} as { name?: string; displayName?: string; internalName?: string; error?: string }));
       if (!res.ok || !data.name) {
@@ -2443,6 +2565,7 @@ export const SessionSwitcher = ({
       }
       setCreating(false);
       setCreateDraft("");
+      try { localStorage.setItem("hay_create_cwd", createCwd.trim()); } catch { /* per-device convenience only */ }
       if (createInFolder) {
         // File it first: the move endpoint is the one place membership is
         // persisted durably.
@@ -2552,16 +2675,37 @@ export const SessionSwitcher = ({
         tabIndex={0}
         data-nav-index={navIndexByKey.get(key)}
         data-session-key={key}
-        className={`switcher-card${current ? " current" : ""}${activeNow ? " active-now" : ""}${kbdSelected ? " kbd-selected" : ""}${focusedKey === key ? " focused" : ""}${dragKey === key ? " dragging" : ""}${draggable ? " draggable" : ""}`}
+        className={`switcher-card${current ? " current" : ""}${activeNow ? " active-now" : ""}${kbdSelected ? " kbd-selected" : ""}${focusedKey === key ? " focused" : ""}${dragKey === key ? " dragging" : ""}${draggable ? " draggable" : ""}${fileDropKey === key ? " file-drop" : ""}`}
         draggable={draggable}
         onDragStart={draggable ? (e) => { setDragKey(key); e.dataTransfer.effectAllowed = "move"; } : undefined}
         onDragEnter={draggable ? () => { if (dragKey && dragKey !== key) moveManual(dragKey, key); } : undefined}
-        onDragOver={draggable ? (e) => { e.preventDefault(); e.dataTransfer.dropEffect = "move"; } : undefined}
+        onDragOver={(e) => {
+          if (isFileDrag(e.dataTransfer)) {
+            e.preventDefault();
+            e.dataTransfer.dropEffect = "copy";
+            if (fileDropKey !== key) setFileDropKey(key);
+            return;
+          }
+          if (draggable) { e.preventDefault(); e.dataTransfer.dropEffect = "move"; }
+        }}
+        onDragLeave={(e) => {
+          const to = e.relatedTarget;
+          if (fileDropKey === key && !(to instanceof Node && e.currentTarget.contains(to))) setFileDropKey(null);
+        }}
         // Order was already applied live during the drag — drop/end just clean up.
         // The release click after a drag must NEVER act — reordering ending
         // with "you are now inside a terminal" is a drag that went off a
         // cliff. Same suppression the long-press sheet uses.
-        onDrop={draggable ? (e) => { e.preventDefault(); suppressTapRef.current = true; setDragKey(null); } : undefined}
+        onDrop={(e) => {
+          if (isFileDrag(e.dataTransfer)) {
+            e.preventDefault();
+            setFileDropKey(null);
+            suppressTapRef.current = true;
+            void uploadFilesTo(s, filesFrom(e.dataTransfer));
+            return;
+          }
+          if (draggable) { e.preventDefault(); suppressTapRef.current = true; setDragKey(null); }
+        }}
         onDragEnd={draggable ? () => { suppressTapRef.current = true; setDragKey(null); window.setTimeout(() => { suppressTapRef.current = false; }, 250); } : undefined}
         onClick={(e) => {
           // Post-drag / post-long-press release: not a click.
@@ -2662,6 +2806,7 @@ export const SessionSwitcher = ({
               onFullscreen={() => onSwitch(s)}
               onUnfocus={() => setFocusedKey(null)}
               onNotice={onNotice}
+              onSender={(fn) => { if (fn) tileSendersRef.current.set(key, fn); else tileSendersRef.current.delete(key); }}
             />
           </div>
         ) : (
@@ -2948,6 +3093,7 @@ export const SessionSwitcher = ({
             {createTypePicker()}
             <button type="submit">Create</button>
             <button type="button" onClick={() => { setCreating(false); setCreateDraft(""); setCreateInFolder(null); }}>✕</button>
+            <CwdField value={createCwd} onChange={setCreateCwd} recent={recentCwds} />
           </form>
         )}
       </div>
@@ -3050,6 +3196,7 @@ export const SessionSwitcher = ({
                         {createTypePicker()}
                         <button type="submit">Create</button>
                         <button type="button" onClick={() => { setCreating(false); setCreateDraft(""); setCreateInFolder(null); }}>✕</button>
+                        <CwdField value={createCwd} onChange={setCreateCwd} recent={recentCwds} />
                       </form>
                     )}
                     {rows.length === 0 ? (
@@ -3149,7 +3296,9 @@ export const SessionSwitcher = ({
             aria-label={`Actions for ${sheetSession.displayName}`}
             style={(() => {
               const width = 264;
-              const estH = sheet.mode === "rename" ? 150 : 330;
+              const estH = sheet.mode === "rename" ? 150
+                : sheet.mode === "folder" ? 100 + 34 * (folders.length + 3)
+                : 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);
@@ -3176,40 +3325,77 @@ export const SessionSwitcher = ({
                 <button type="submit">Save</button>
                 <button type="button" onClick={() => setSheet({ session: sheetSession, mode: "menu", anchor: sheet.anchor })}>✕</button>
               </form>
+            ) : sheet.mode === "folder" ? (
+              // Filing from the menu: drag-and-drop needs a pointer, a free
+              // hand, and the folder on screen at the same time as the card —
+              // none of which a phone or a long wall reliably has. Same
+              // /api/sessions/move the drop uses, so the two never disagree.
+              <>
+                {(() => {
+                  const key = sessionKey(sheetSession);
+                  const current = sheetSession.folderId || null;
+                  const file = async (folderId: string | null, label: string) => {
+                    setSheet(null);
+                    if (folderId === current) return;
+                    if (await folderApi("/api/sessions/move", { internalName: key, folderId }, "Could not move session")) {
+                      // Folders only render in the Manual layout; filing from
+                      // Recent or Project would otherwise look like a no-op.
+                      const where = sortMode === "manual" ? "" : " — folders show in the Manual layout";
+                      onNotice(folderId ? `Filed under ${label}${where}` : "Moved out of its folder");
+                    }
+                  };
+                  return (
+                    <>
+                      <button type="button" className={current === null ? "on" : ""} onClick={() => { void file(null, ""); }}>
+                        No folder
+                      </button>
+                      {folders.map((f) => (
+                        <button key={f.id} type="button" className={current === f.id ? "on" : ""} onClick={() => { void file(f.id, f.name); }}>
+                          {f.name}
+                        </button>
+                      ))}
+                      <div className="switcher-sheet-sep" aria-hidden="true" />
+                      <button
+                        type="button"
+                        onClick={async () => {
+                          const name = window.prompt("Folder name")?.trim();
+                          if (!name) return;
+                          const created = await createFolderNamed(name);
+                          if (created) await file(created.id, created.name);
+                        }}
+                      >
+                        New folder…
+                      </button>
+                      <button type="button" className="back" onClick={() => setSheet({ session: sheetSession, mode: "menu", anchor: sheet.anchor })}>
+                        ← Back
+                      </button>
+                    </>
+                  );
+                })()}
+              </>
             ) : (
               <>
                 {!isCurrentSession(sheetSession) && (
                   <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");
-                    }
-                  }}
-                >
+                <button type="button" onClick={() => { void forkSession(sheetSession); }}>
                   Fork session
                 </button>
+                {/* Crossing tools: the conversation is extracted to a document
+                    the new agent reads first (context handoff, not a resume).
+                    Offered for every terminal — the daemon knows what a
+                    restored session runs better than the process name here —
+                    minus the tool this one is visibly running already. */}
+                {sheetSession.type !== "port" && appLabel(sheetSession) !== "codex" && (
+                  <button type="button" onClick={() => { void forkSession(sheetSession, "codex"); }}>
+                    Continue in Codex…
+                  </button>
+                )}
+                {sheetSession.type !== "port" && appLabel(sheetSession) !== "claude" && (
+                  <button type="button" onClick={() => { void forkSession(sheetSession, "claude"); }}>
+                    Continue in Claude…
+                  </button>
+                )}
                 <button
                   type="button"
                   onClick={() => {
@@ -3219,6 +3405,12 @@ export const SessionSwitcher = ({
                 >
                   Rename
                 </button>
+                <button
+                  type="button"
+                  onClick={() => setSheet({ session: sheetSession, mode: "folder", anchor: sheet.anchor })}
+                >
+                  Move to folder…
+                </button>
                 {sheetSession.type !== "port" && <div className="switcher-sheet-sep" aria-hidden="true" />}
                 {sheetSession.type !== "port" && (
                   <button type="button" onClick={toggleAgentAccess}>