hop2 0.11.13 → 0.11.15

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

@@ -4019,3 +4019,112 @@ button.primary {
 .digest-headline { font-size: 12.5px; font-weight: 600; color: var(--ink); }
 .digest-item.read .digest-headline { color: var(--ink-muted); font-weight: 500; }
 .digest-why { font-size: 11.5px; color: var(--ink-muted); }
+
+/* ── Views: the index of what agents published with `hop view`. Layered above
+   the switcher (600) and its sheets (620) because it opens FROM them. ── */
+.views-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 720;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+.views-panel {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 730;
+  width: min(460px, 92vw);
+  /* Bounded, not sized to content: a fleet that has been publishing for a week
+     otherwise grows a dialog taller than the screen with no way to scroll it. */
+  max-height: min(74vh, 620px);
+  display: flex;
+  flex-direction: column;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
+  padding: 14px 16px;
+}
+.views-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.views-head-spacer { flex: 1; }
+.views-badge {
+  font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
+  color: var(--accent, #7c5cff);
+}
+.views-scope {
+  font-family: var(--font-mono);
+  font-size: 10.5px; color: var(--ink-muted);
+}
+.views-close {
+  border: none; background: none; cursor: pointer;
+  color: var(--ink-muted); font-size: 16px; line-height: 1; padding: 2px 4px;
+}
+.views-empty { margin: 6px 2px 4px; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); }
+.views-empty code { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
+.views-list { overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
+.views-group + .views-group { margin-top: 10px; }
+.views-dateline {
+  font-family: var(--font-mono);
+  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--ink-muted);
+  padding-bottom: 3px;
+}
+.views-row {
+  display: flex; align-items: center; gap: 9px;
+  text-decoration: none; color: inherit;
+  padding: 6px; margin: 0 -6px; border-radius: 8px;
+}
+.views-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
+.views-kind {
+  flex: 0 0 34px;
+  font-family: var(--font-mono);
+  font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em;
+  text-align: center;
+  padding: 3px 0; border-radius: 4px;
+  background: var(--bg-alt); color: var(--ink-muted);
+}
+.views-row.fresh .views-kind {
+  background: color-mix(in srgb, var(--accent, #7c5cff) 20%, transparent);
+  color: var(--accent, #7c5cff);
+}
+.views-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
+/* Titles are agent-written prose of arbitrary length; without the clamp one
+   sentence reflowed the row to four lines and pushed the rest off-screen. */
+.views-title {
+  font-size: 12.5px; font-weight: 600; color: var(--ink);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.views-meta {
+  font-size: 11px; color: var(--ink-muted);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.views-dot {
+  flex-shrink: 0;
+  width: 6px; height: 6px; border-radius: 3px;
+  background: var(--accent, #7c5cff);
+}
+
+/* The affordances that open it: a topbar/switcher button and a card chip,
+   each carrying the same unseen dot. */
+.views-chip-dot {
+  flex-shrink: 0;
+  width: 5px; height: 5px; border-radius: 3px;
+  background: var(--accent, #7c5cff);
+}
+/* The switcher's header action is a fixed 32px square with a centred glyph —
+   an inline dot would shove the icon off-centre, so it rides the corner. */
+.switcher-action { position: relative; }
+.switcher-action .views-chip-dot { position: absolute; top: 5px; right: 5px; }
+.switcher-chip.views {
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  line-height: 1.2;
+}
+.switcher-chip.views.fresh {
+  background: color-mix(in srgb, var(--accent, #7c5cff) 22%, transparent);
+  color: var(--accent, #7c5cff);
+}

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

@@ -1,6 +1,22 @@
-// Drag-and-drop helper. Browsers deliberately never expose a dropped file's
-// real filesystem path, so hop can't paste it — instead the drop is caught
-// and the user is pointed at the OS gesture that DOES yield the path.
+// Drag-and-drop helpers. Browsers deliberately never expose a dropped file's
+// real filesystem path — so hop uploads the BYTES to the host instead and
+// pastes the path the file landed on. The path hint below survives as the
+// fallback for when that upload cannot happen (old daemon, offline).
+
+/** Quote a path for a shell only when it needs it. A bare path stays bare —
+ *  most drops land somewhere boring, and gratuitous quotes read as noise in
+ *  an agent's composer. Single-quote style, with the standard '\'' escape. */
+export const shellQuotePath = (filePath: string): string => {
+  if (filePath === "") return "''";
+  if (/^[A-Za-z0-9_@%+=:,./-]+$/.test(filePath)) return filePath;
+  return `'${filePath.replace(/'/g, `'\\''`)}'`;
+};
+
+/** Join uploaded paths into one paste: space-separated, each quoted only if
+ *  it must be. Reads as a command argument list, which is what it usually
+ *  becomes. */
+export const pasteableUploadPaths = (paths: string[]): string =>
+  paths.map(shellQuotePath).join(" ");
 
 /** OS-specific "copy the file's path" hotkey hint. Pass a platform string
  *  (navigator.platform + userAgent); pure so it's unit-testable. */

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

@@ -6,6 +6,16 @@
 // long tail becomes compact rows auto-grouped by project directory. A filter
 // query collapses everything into one flat ranked list.
 
+// Per-session rollup of what `hop view` / `hop port` published, as
+// /api/sessions reports it. latestAt is epoch SECONDS, matching the manifest.
+export type ViewsSummary = {
+  count: number;
+  latestAt: number;
+  latestName?: string;
+  latestTitle?: string;
+  latestPath?: string;
+};
+
 export type SwitcherSession = {
   name: string;
   displayName: string;
@@ -40,6 +50,8 @@ export type SwitcherSession = {
   // 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;
+  // Absent unless this session has published something.
+  views?: ViewsSummary;
 };
 
 export type SessionOriginScope = "user" | "agent" | "all";

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

@@ -326,6 +326,25 @@ describe("manual folders in the wall", () => {
     expect(screen.getByText("Filed")).toBeTruthy();
   });
 
+  it("Escape clears a typed filter before it dismisses the wall", () => {
+    const onClose = vi.fn();
+    render(<SessionSwitcher {...props} onClose={onClose} sessions={withFolder} folders={folders} open />);
+    const input = document.querySelector(".switcher-top input") as HTMLInputElement
+      || document.querySelector("input") as HTMLInputElement;
+    fireEvent.change(input, { target: { value: "outsid" } });
+    expect(input.value).toBe("outsid");
+
+    // First Escape: the query is the innermost layer — it goes, the wall stays.
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(input.value).toBe("");
+    expect(onClose).not.toHaveBeenCalled();
+    expect(screen.getByText("inside")).toBeTruthy(); // full wall is back
+
+    // Second Escape: nothing left to unwind, so the wall dismisses.
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(onClose).toHaveBeenCalled();
+  });
+
   it("a query in manual mode still offers the full-history search", () => {
     // Manual keeps its own render branch under a query (narrow-in-place), so
     // the search tail — content hits + the deep button — must ride along or

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

@@ -0,0 +1,118 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ViewsPanel, hasUnseenViews, loadViewsSeen } from "../src/components/ViewsPanel";
+import { SessionSwitcher } from "../src/components/SessionSwitcher";
+import type { SwitcherSession } from "../src/utils/switcherModel";
+
+// A slice of the real /api/views manifest: newest first, one empty title (the
+// common case — `hop view` without --title), two sessions.
+const items = [
+  { session: "Orion", name: "agent-result.md", title: "Views end-to-end", path: "/view/Orion/agent-result.md/inline", bytes: 437, mtime: 1786303213 },
+  { session: "Orion", name: "views-test.html", title: "", path: "/view/Orion/views-test.html/inline", bytes: 2062, mtime: 1786299563 },
+  { session: "Nebula", name: "shot.png", title: "", path: "/view/Nebula/shot.png/inline", bytes: 999999, mtime: 1786299000 }
+];
+
+let store: Record<string, string> = {};
+beforeEach(() => {
+  // jsdom's own localStorage is only partially implemented here, and the
+  // seen-markers are the whole point of these cases.
+  store = {};
+  vi.stubGlobal("localStorage", {
+    getItem: (key: string) => (key in store ? store[key] : null),
+    setItem: (key: string, value: string) => { store[key] = value; },
+    removeItem: (key: string) => { delete store[key]; },
+    clear: () => { store = {}; }
+  });
+  vi.stubGlobal("fetch", vi.fn(async () => ({ ok: true, json: async () => ({ items }) })));
+});
+afterEach(() => { cleanup(); vi.clearAllMocks(); vi.unstubAllGlobals(); });
+
+describe("ViewsPanel", () => {
+  it("groups by session, leads with the title, falls back to the filename", async () => {
+    render(<ViewsPanel sessions={[{ name: "Orion", displayName: "orion-worker", internalName: "Orion" }]} onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
+    // The manifest only knows internalNames; the dateline shows the rename.
+    expect(screen.getByText("orion-worker")).toBeTruthy();
+    expect(screen.getByText("Nebula")).toBeTruthy();
+    expect(screen.getByText("views-test.html")).toBeTruthy();
+    expect(screen.getByText("MD")).toBeTruthy();
+    expect(screen.getByText("IMG")).toBeTruthy();
+
+    const link = screen.getByText("Views end-to-end").closest("a") as HTMLAnchorElement;
+    expect(link.getAttribute("href")).toBe("/view/Orion/agent-result.md/inline");
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.className).toContain("fresh");
+
+    // Opening IS seeing: every session on screen gets its high-water mark.
+    await waitFor(() => expect(loadViewsSeen()).toEqual({ Orion: 1786303213, Nebula: 1786299000 }));
+    expect(hasUnseenViews("Orion", 1786303213, loadViewsSeen())).toBe(false);
+    expect(hasUnseenViews("Orion", 1786303300, loadViewsSeen())).toBe(true);
+  });
+
+  it("scopes to one session without pruning the others' markers", async () => {
+    store["hop_views_seen"] = JSON.stringify({ Nebula: 1 });
+    render(<ViewsPanel session="orion" onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
+    expect(screen.queryByText("shot.png")).toBeNull();
+    await waitFor(() => expect(loadViewsSeen().Orion).toBe(1786303213));
+    expect(loadViewsSeen().Nebula).toBe(1);
+  });
+
+  it("explains the feature when nothing is published", async () => {
+    vi.stubGlobal("fetch", vi.fn(async () => ({ ok: true, json: async () => ({ items: [] }) })));
+    render(<ViewsPanel onClose={() => {}} />);
+    await waitFor(() => expect(screen.getByText(/Nothing published yet/)).toBeTruthy());
+  });
+
+  it("closes on Escape and on the backdrop", async () => {
+    const onClose = vi.fn();
+    const { container } = render(<ViewsPanel onClose={onClose} />);
+    await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
+    fireEvent.keyDown(window, { key: "Escape" });
+    expect(onClose).toHaveBeenCalled();
+    fireEvent.click(container.querySelector(".views-backdrop")!);
+    expect(onClose.mock.calls.length).toBe(2);
+  });
+});
+
+const switcherSessions: SwitcherSession[] = [
+  {
+    name: "Orion", displayName: "Orion", internalName: "Orion",
+    active: true, starting: false, createdBy: "user",
+    views: { count: 3, latestAt: 1786303213, latestName: "agent-result.md", latestTitle: "Views end-to-end", latestPath: "/view/Orion/agent-result.md/inline" }
+  },
+  { name: "Nebula", displayName: "Nebula", internalName: "Nebula", active: true, starting: false, createdBy: "user" }
+];
+
+describe("switcher views affordances", () => {
+  const onOpenViews = vi.fn();
+  const props = {
+    sessions: switcherSessions, currentRoom: null,
+    onClose: vi.fn(), onSwitch: vi.fn(), onRefresh: vi.fn(), onNotice: vi.fn(), onOpenViews
+  };
+
+  beforeEach(() => {
+    sessionStorage.clear();
+    Object.defineProperty(HTMLElement.prototype, "scrollTo", { configurable: true, value: vi.fn() });
+  });
+
+  it("opens scoped from a card chip and fleet-wide from the header", () => {
+    render(<SessionSwitcher {...props} open />);
+    const chip = screen.getByRole("button", { name: "3 published views in Orion" });
+    expect(chip.className).toContain("fresh");          // no marker yet = unseen
+    fireEvent.click(chip);
+    expect(onOpenViews).toHaveBeenCalledWith("Orion");
+
+    fireEvent.click(screen.getByRole("button", { name: "Published views" }));
+    expect(onOpenViews).toHaveBeenLastCalledWith();     // no argument = the fleet
+    expect(screen.queryByRole("button", { name: /published views in Nebula/ })).toBeNull();
+    expect(screen.getByLabelText("New views")).toBeTruthy();
+  });
+
+  it("goes quiet once the marker covers the newest view", () => {
+    store["hop_views_seen"] = JSON.stringify({ Orion: 1786303213 });
+    render(<SessionSwitcher {...props} open />);
+    expect(screen.getByRole("button", { name: "3 published views in Orion" }).className).not.toContain("fresh");
+    expect(screen.queryByLabelText("New views")).toBeNull();
+  });
+});

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

@@ -1,5 +1,29 @@
 import { describe, expect, it } from "vitest";
-import { originalPathHint } from "../src/utils/fileDrop";
+import { originalPathHint, pasteableUploadPaths, shellQuotePath } from "../src/utils/fileDrop";
+
+describe("shellQuotePath", () => {
+  it("leaves an ordinary path bare", () => {
+    expect(shellQuotePath("/Users/me/.hop2/uploads/room/shot.png")).toBe("/Users/me/.hop2/uploads/room/shot.png");
+  });
+
+  it("quotes a path containing spaces", () => {
+    expect(shellQuotePath("/tmp/my file.txt")).toBe("'/tmp/my file.txt'");
+  });
+
+  it("survives an apostrophe in the filename", () => {
+    // The classic shell-quoting trap: 'it's' must close, escape, reopen.
+    expect(shellQuotePath("/tmp/it's here.txt")).toBe(`'/tmp/it'\\''s here.txt'`);
+  });
+
+  it("quotes shell metacharacters that would otherwise execute", () => {
+    expect(shellQuotePath("/tmp/$(whoami).txt")).toBe("'/tmp/$(whoami).txt'");
+    expect(shellQuotePath("/tmp/a;rm -rf b")).toBe("'/tmp/a;rm -rf b'");
+  });
+
+  it("joins several uploads into one argument list", () => {
+    expect(pasteableUploadPaths(["/tmp/a.png", "/tmp/b c.png"])).toBe("/tmp/a.png '/tmp/b c.png'");
+  });
+});
 
 describe("originalPathHint", () => {
   it("names ⌘⌥C and Finder on Apple platforms", () => {