hop2 0.11.1 → 0.11.2

package/hay/apps/web/src/styles.css

@@ -2895,52 +2895,24 @@ button.primary {
 }
 
 /* Tap-a-URL prompt (mobile: remote apps can't open the phone's browser) */
-.link-prompt {
-  position: fixed;
-  left: 12px;
-  right: 12px;
-  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mobile-keyboard-height, 0px) + 14px);
-  z-index: 650;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
-  background: var(--panel);
-  border: 1px solid var(--accent);
-  border-radius: 12px;
-  box-shadow: var(--shadow);
+/* Link menu: the terminal's tap-a-URL menu, on the shared context-menu look.
+   Anchored at the link like every other menu, not docked to the viewport. */
+.context-menu.link-menu {
+  max-width: min(340px, calc(100vw - 16px));
 }
-
-.link-prompt-url {
-  flex: 1;
-  min-width: 0;
+.context-menu-title {
+  display: block;
+  padding: 6px 10px 7px;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-muted);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-family: var(--font-mono);
-  font-size: 12px;
-  color: var(--ink);
-}
-
-.link-prompt button {
-  flex-shrink: 0;
-  padding: 7px 12px;
-  font-size: 12.5px;
-}
-
-.link-prompt .link-prompt-open {
-  background: var(--accent);
-  color: var(--accent-fg);
+  border-bottom: 1px solid var(--line);
+  margin-bottom: 3px;
 }
 
-@media (min-width: 769px) {
-  .link-prompt {
-    left: auto;
-    right: 20px;
-    bottom: 44px;
-    max-width: 520px;
-  }
-}
 
 /* ── Tile-zoom control (− level +): bigger tiles show more terminal. The
    ladder itself (widths, heights, font sizes, how many levels this viewport
@@ -3691,9 +3663,17 @@ button.primary {
    scrollbar wide), and entering full screen (which has no such reservation)
    visibly re-flowed. Hidden bar → width-true fits on both surfaces. */
 .switcher-live-tile .xterm-viewport {
-  overflow-y: auto !important;
+  /* A WATCH tile is a snapshot of the live screen — there is nothing to
+     scroll through, and letting it scroll produced a bar that moved the view
+     off the newest output with no way to tell you were adrift. Only the tile
+     you have clicked into (is-live) scrolls, because only that one has a
+     real session's scrollback behind it. */
+  overflow: hidden !important;
   scrollbar-width: none;
 }
+.switcher-live-tile.is-live .xterm-viewport {
+  overflow-y: auto !important;
+}
 .switcher-live-tile .xterm-viewport::-webkit-scrollbar {
   width: 0;
   height: 0;
@@ -3715,3 +3695,200 @@ button.primary {
   opacity: 0.72;
   border-style: dashed;
 }
+
+/* Manual-mode folders: user-authored grouping, distinct from Project mode's
+   automatic directory sections. */
+.switcher-folder-new {
+  margin-left: 10px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  border: 1px dashed var(--line);
+  background: transparent;
+  color: var(--ink-muted);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  cursor: pointer;
+}
+.switcher-folder-new:hover {
+  border-color: var(--accent);
+  color: var(--ink);
+}
+.switcher-folder {
+  border: 1px solid transparent;
+  border-radius: 12px;
+  padding: 2px 6px 6px;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.switcher-folder.drop-target,
+.switcher-unfiled.drop-target {
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 7%, transparent);
+}
+.switcher-folder-count {
+  margin-left: 8px;
+  font-size: 10.5px;
+  color: var(--ink-muted);
+}
+.switcher-folder .switcher-group-label button,
+.switcher-unfiled button {
+  margin-left: 2px;
+  border: none;
+  background: transparent;
+  color: var(--ink-muted);
+  cursor: pointer;
+  font-size: 10.5px;
+  line-height: 1;
+  padding: 2px 4px;
+  border-radius: 4px;
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.switcher-folder .switcher-group-label button:hover {
+  color: var(--ink);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
+}
+/* The + CREATES — primary affordance, always visible; edit/delete are
+   maintenance and stay hover-revealed. */
+.switcher-folder .switcher-group-label .switcher-folder-add {
+  opacity: 1;
+  font-size: 12.5px;
+  margin-left: 6px;
+}
+.switcher-folder:hover .switcher-group-label button {
+  opacity: 1;
+}
+.switcher-folder-empty {
+  margin: 4px 0 8px;
+  font-family: var(--font-mono);
+  font-size: 11.5px;
+  color: var(--ink-muted);
+}
+.switcher-unfiled {
+  border: 1px solid transparent;
+  border-radius: 10px;
+  padding: 2px 6px;
+}
+
+/* Context menus. One look everywhere: same panel, line, and radius as the
+   session sheet, so a right-click never feels like a different application. */
+.context-menu {
+  position: fixed;
+  z-index: 120;
+  min-width: 190px;
+  padding: 5px;
+  border-radius: 11px;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.context-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  padding: 7px 10px;
+  border: none;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--ink);
+  font-family: var(--font-ui, inherit);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.context-menu-item.active:not(:disabled) {
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
+}
+.context-menu-item:disabled {
+  color: var(--ink-muted);
+  cursor: default;
+}
+.context-menu-item.danger {
+  color: #e5484d;
+}
+.context-menu-item.danger.active {
+  background: color-mix(in srgb, #e5484d 14%, transparent);
+}
+.context-menu-item kbd {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-muted);
+}
+.context-menu-separator {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--line);
+}
+
+
+/* ── Mobile switcher: a phone toolbar, not a desktop toolbar squeezed. The
+   top bar had NO narrow-screen rules — ten header items and seven tab
+   buttons on two nowrap rows shoved the right-edge actions (keyboard!)
+   against the bezel and overflowed the tab row. ── */
+@media (max-width: 767px) {
+  .switcher-header {
+    gap: 6px;
+    padding: calc(env(safe-area-inset-top, 0px) + 8px)
+      calc(env(safe-area-inset-right, 0px) + 10px)
+      8px
+      calc(env(safe-area-inset-left, 0px) + 10px);
+  }
+  .switcher-header h2 {
+    font-size: 15px;
+  }
+  /* ＋ alone — the word is desktop chrome. */
+  .switcher-new-label {
+    display: none;
+  }
+  /* Explained by a tooltip, and touch has no tooltips: the chip is noise
+     here. Interactivity is discovered by tapping a tile, which is the
+     gesture anyway. */
+  .switcher-chip.live {
+    display: none;
+  }
+  .switcher-zoom-readout {
+    display: none;
+  }
+  .switcher-tilesize button {
+    padding: 5px 10px; /* finger-sized, was mouse-sized */
+  }
+  /* Real tap targets for the header actions, clear of the screen edge
+     (the ✕ keeps them off the bezel on notched phones via header padding). */
+  .switcher-action,
+  .switcher-close {
+    width: 38px;
+    height: 38px;
+  }
+  /* Tabs wrap onto tidy lines; the filter takes a full row of its own —
+     a text input sharing a squeezed line with seven buttons helped nobody. */
+  .switcher-filter-row {
+    flex-wrap: wrap;
+    row-gap: 8px;
+    padding: 0 calc(env(safe-area-inset-right, 0px) + 10px) 10px
+      calc(env(safe-area-inset-left, 0px) + 10px);
+  }
+  .switcher-filter,
+  .switcher-filter.compact {
+    flex: 1 1 100%;
+    order: 2;
+    opacity: 1;
+    min-height: 38px;
+  }
+  .switcher-origin button {
+    padding: 6px 10px;
+    font-size: 11px;
+  }
+}
+
+/* Touch devices: hover-revealed controls do not exist. Folder rename/delete
+   were literally unreachable on a phone. */
+@media (hover: none) {
+  .switcher-folder .switcher-group-label button,
+  .switcher-unfiled button {
+    opacity: 1;
+  }
+}

package/hay/apps/web/src/utils/switcherModel.ts

@@ -35,6 +35,8 @@ export type SwitcherSession = {
   parked?: boolean;
   // Archived: process stopped, but reopening resumes the conversation.
   archived?: boolean;
+  // Folder the user filed this session under (Manual mode). Null = loose.
+  folderId?: string | null;
   // A hop CLI is attached in a real terminal window on the host. The wall
   // must never resize such a session — that window's size is physical truth.
   hasLocalCli?: boolean;
@@ -53,11 +55,13 @@ export type SwitcherGroup = {
   rows: SwitcherSession[];
 };
 
+export type SwitcherFolder = { id: string; name: string };
+
 export type SwitcherModel =
   | { mode: "tiers"; hero: SwitcherSession[]; groups: SwitcherGroup[]; currentInHero: boolean }
   | { mode: "filter"; rows: SwitcherSession[] }
   | { mode: "project"; groups: SwitcherGroup[] }
-  | { mode: "manual"; rows: SwitcherSession[] };
+  | { mode: "manual"; rows: SwitcherSession[]; folders: Array<{ folder: SwitcherFolder; rows: SwitcherSession[] }> };
 
 // Minimum hero-card count (including the current session). All attention
 // sessions are always hero cards — attention must never be buried in the tail.
@@ -188,12 +192,41 @@ const orderManually = (sessions: SwitcherSession[], manualOrder: string[]): Swit
   });
 };
 
+/**
+ * Split sessions into the user's folders plus everything still loose.
+ * Folders belong to MANUAL mode only: Recent is ordered by the machine and
+ * Project by the filesystem, so a hand-authored grouping would contradict
+ * both. Empty folders are kept — a folder you made is a place you intend to
+ * put things, and silently hiding it would make new folders look broken.
+ */
+const splitIntoFolders = (
+  sessions: SwitcherSession[],
+  folders: SwitcherFolder[],
+  manualOrder: string[]
+) => {
+  const byId = new Map(folders.map((f) => [f.id, [] as SwitcherSession[]]));
+  const loose: SwitcherSession[] = [];
+  for (const s of sessions) {
+    const bucket = s.folderId ? byId.get(s.folderId) : undefined;
+    if (bucket) bucket.push(s);
+    else loose.push(s);
+  }
+  return {
+    folders: folders.map((folder) => ({
+      folder,
+      rows: orderManually(byId.get(folder.id) || [], manualOrder)
+    })),
+    loose: orderManually(loose, manualOrder)
+  };
+};
+
 export const buildSwitcherModel = (
   sessions: SwitcherSession[],
   currentRoom: string | null,
   filter: string,
   sortMode: SwitcherSortMode = "recent",
-  manualOrder: string[] = []
+  manualOrder: string[] = [],
+  folders: SwitcherFolder[] = []
 ): SwitcherModel => {
   const query = filter.trim();
   if (query) {
@@ -207,7 +240,10 @@ export const buildSwitcherModel = (
     // are hidden. Score-ranking here would reorder the wall under the user's
     // hands at the exact moment they were trying to arrange it.
     if (sortMode === "manual") {
-      return { mode: "manual", rows: orderManually(matches, manualOrder) };
+      // Filtering narrows within folders too, so a search never pretends a
+      // session left the folder you filed it in.
+      const split = splitIntoFolders(matches, folders, manualOrder);
+      return { mode: "manual", rows: split.loose, folders: split.folders };
     }
     const rows = matches
       .map((s) => ({ s, score: filterScore(s, q) }))
@@ -221,7 +257,8 @@ export const buildSwitcherModel = (
     return { mode: "project", groups: groupByProject(sessions, true) };
   }
   if (sortMode === "manual") {
-    return { mode: "manual", rows: orderManually(sessions, manualOrder) };
+    const split = splitIntoFolders(sessions, folders, manualOrder);
+    return { mode: "manual", rows: split.loose, folders: split.folders };
   }
 
   const current = sessions.find((s) => isCurrent(s, currentRoom)) ?? null;

package/hay/apps/web/test/SessionSwitcher.test.tsx

@@ -271,3 +271,54 @@ describe("focus rules", () => {
     expect(document.querySelectorAll(".switcher-live-tile.is-live").length).toBe(0);
   });
 });
+
+describe("context menus", () => {
+  afterEach(() => { document.body.innerHTML = ""; });
+
+  it("right-clicking the wall offers create + view actions, not session actions", () => {
+    render(<SessionSwitcher {...props} open />);
+    const scroll = document.querySelector(".switcher-scroll")!;
+    fireEvent.contextMenu(scroll, { clientX: 40, clientY: 40 });
+    const labels = Array.from(document.querySelectorAll(".context-menu-item")).map((b) => b.textContent);
+    expect(labels.some((l) => l?.includes("New session"))).toBe(true);
+    expect(labels.some((l) => l?.includes("Group by project"))).toBe(true);
+    // Session-specific verbs belong to a card's menu, never the background.
+    expect(labels.some((l) => l?.includes("Rename"))).toBe(false);
+  });
+
+  it("a right-click on a card does not open the wall menu", () => {
+    render(<SessionSwitcher {...props} open />);
+    const card = document.querySelector(".switcher-card")!;
+    fireEvent.contextMenu(card, { clientX: 10, clientY: 10 });
+    const labels = Array.from(document.querySelectorAll(".context-menu-item")).map((b) => b.textContent);
+    expect(labels.some((l) => l?.includes("New session"))).toBe(false);
+  });
+
+  it("Escape closes the menu", () => {
+    render(<SessionSwitcher {...props} open />);
+    fireEvent.contextMenu(document.querySelector(".switcher-scroll")!, { clientX: 30, clientY: 30 });
+    expect(document.querySelector(".context-menu")).toBeTruthy();
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(document.querySelector(".context-menu")).toBeNull();
+  });
+});
+
+describe("manual folders in the wall", () => {
+  afterEach(() => { document.body.innerHTML = ""; });
+  const folders = [{ id: "f1", name: "Filed" }];
+  const withFolder: SwitcherSession[] = [
+    { name: "inside", displayName: "inside", internalName: "inside", active: true, starting: false, createdBy: "user", folderId: "f1" },
+    { name: "outside", displayName: "outside", internalName: "outside", active: true, starting: false, createdBy: "user" }
+  ];
+
+  it("a filter matching only a foldered session shows it, not an empty wall", () => {
+    render(<SessionSwitcher {...props} sessions={withFolder} folders={folders} open />);
+    fireEvent.click(screen.getByRole("button", { name: "Manual" }));
+    const input = document.querySelector(".switcher-top input") as HTMLInputElement
+      || document.querySelector("input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "insid" } });
+    expect(screen.queryByText("No matches")).toBeNull();
+    expect(screen.getByText("inside")).toBeTruthy();
+    expect(screen.getByText("Filed")).toBeTruthy();
+  });
+});

package/hay/apps/web/test/switcherModel.test.ts

@@ -310,3 +310,68 @@ describe("manual mode stability", () => {
     expect(after.rows.map((r) => r.name)).toEqual(["c", "a", "b"]);
   });
 });
+
+describe("manual mode folders", () => {
+  const folders = [{ id: "f1", name: "Experiments" }, { id: "f2", name: "Infra" }];
+
+  it("files sessions into their folders and leaves the rest loose", () => {
+    const sessions = [
+      mk({ name: "alpha", folderId: "f1" }),
+      mk({ name: "beta" }),
+      mk({ name: "gamma", folderId: "f2" })
+    ];
+    const model = buildSwitcherModel(sessions, null, "", "manual", [], folders);
+    if (model.mode !== "manual") throw new Error("expected manual");
+    expect(model.folders.map((f) => f.folder.name)).toEqual(["Experiments", "Infra"]);
+    expect(model.folders[0].rows.map((r) => r.name)).toEqual(["alpha"]);
+    expect(model.rows.map((r) => r.name)).toEqual(["beta"]);
+  });
+
+  it("keeps an empty folder visible — a folder is a place you intend to fill", () => {
+    const model = buildSwitcherModel([mk({ name: "solo" })], null, "", "manual", [], folders);
+    if (model.mode !== "manual") throw new Error("expected manual");
+    expect(model.folders.map((f) => f.rows.length)).toEqual([0, 0]);
+    expect(model.rows.map((r) => r.name)).toEqual(["solo"]);
+  });
+
+  it("a session in a deleted folder falls back to loose rather than vanishing", () => {
+    const sessions = [mk({ name: "orphan", folderId: "f_gone" })];
+    const model = buildSwitcherModel(sessions, null, "", "manual", [], folders);
+    if (model.mode !== "manual") throw new Error("expected manual");
+    expect(model.rows.map((r) => r.name)).toEqual(["orphan"]);
+  });
+
+  it("filtering narrows inside folders instead of pulling sessions out of them", () => {
+    const sessions = [
+      mk({ name: "alpha", folderId: "f1" }),
+      mk({ name: "alpine", folderId: "f1" }),
+      mk({ name: "beta" })
+    ];
+    const model = buildSwitcherModel(sessions, null, "alp", "manual", [], folders);
+    if (model.mode !== "manual") throw new Error("expected manual");
+    expect(model.folders[0].rows.map((r) => r.name)).toEqual(["alpha", "alpine"]);
+    expect(model.rows).toEqual([]);
+  });
+
+  it("folders do not leak into Recent or Project", () => {
+    const sessions = [mk({ name: "alpha", folderId: "f1" }), mk({ name: "beta" })];
+    const recent = buildSwitcherModel(sessions, null, "", "recent", [], folders);
+    const project = buildSwitcherModel(sessions, null, "", "project", [], folders);
+    expect(recent.mode).toBe("tiers");
+    expect(project.mode).toBe("project");
+    if (project.mode !== "project") throw new Error("expected project");
+    expect(project.groups.some((g) => g.label === "Experiments")).toBe(false);
+  });
+});
+
+describe("manual mode folders under filter", () => {
+  const folders = [{ id: "f1", name: "Experiments" }];
+
+  it("matches inside folders are found and stay filed", () => {
+    const sessions = [mk({ name: "alpha", folderId: "f1" }), mk({ name: "beta" })];
+    const model = buildSwitcherModel(sessions, null, "alph", "manual", [], folders);
+    if (model.mode !== "manual") throw new Error("expected manual");
+    expect(model.folders[0].rows.map((r) => r.name)).toEqual(["alpha"]);
+    expect(model.rows).toEqual([]); // loose list empty ≠ no results
+  });
+});