hop2 0.11.46 → 0.11.47

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

@@ -123,6 +123,27 @@ const formatBytes = (n?: number) => {
 const hrefFor = (item: ViewItem) =>
   item.kind === "server" && item.target ? item.target : item.path;
 
+// The stored file itself, as an attachment: the daemon's /download mode
+// serves the markdown an agent wrote rather than the page it renders into.
+// Only files — a server is live, there is nothing to save.
+const downloadHrefFor = (item: ViewItem) =>
+  item.kind === "server" ? null : item.path.replace(/\/inline$/, "") + "/download";
+
+// A hidden same-origin anchor with `download`: the row is already an <a>
+// (anchors cannot nest), and window.open would show the file, not save it.
+const triggerDownload = (item: ViewItem) => {
+  const href = downloadHrefFor(item);
+  if (!href) return;
+  const a = document.createElement("a");
+  a.href = href;
+  a.download = item.name;
+  a.rel = "noopener";
+  a.style.display = "none";
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+};
+
 const extOf = (name: string) => (name.split(".").pop() || "").toLowerCase();
 const isVideo = (name: string) => ["mp4", "mov", "webm", "m4v", "ogv"].includes(extOf(name));
 const isAudio = (name: string) => ["mp3", "m4a", "wav", "flac", "aac", "ogg", "oga", "opus"].includes(extOf(name));
@@ -427,10 +448,25 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
           <button type="button" className="views-act"
                   title="Open in a new tab" aria-label="Open in a new tab"
                   onClick={() => window.open(hrefFor(item), "_blank", "noopener")}>↗</button>
+          {!isServer && (
+            <button type="button" className="views-act"
+                    title="Download" aria-label={`Download ${item.name}`}
+                    onClick={() => triggerDownload(item)}>⤓</button>
+          )}
           <button type="button" className="views-act"
                   title={copied === item.path ? "Copied" : "Copy link"}
                   aria-label="Copy link"
                   onClick={() => copyLink(item)}>{copied === item.path ? "✓" : "⧉"}</button>
+          {!isServer && (
+            /* The FILE, not the page: ?download=1 serves the published bytes as
+               an attachment under their real name (md/csv/json raw, not the
+               rendered view). A window.open, not an anchor: anchors can't nest
+               in the row's own link, and the attachment header keeps the tab
+               from navigating. */
+            <button type="button" className="views-act"
+                    title="Download" aria-label="Download"
+                    onClick={() => window.open(item.path + "?download=1", "_blank", "noopener")}>⤓</button>
+          )}
           {!isServer && (
             <button type="button"
                     className={"views-act danger" + (armedDelete === item.path ? " armed" : "")}
@@ -484,6 +520,11 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
           {preview.title || preview.name}
         </span>
         <span className="views-head-spacer" />
+        {preview.kind !== "server" && (
+          <button type="button" className="views-act"
+                  title="Download" aria-label={`Download ${preview.name}`}
+                  onClick={() => triggerDownload(preview)}>⤓</button>
+        )}
         <button type="button" className="views-act"
                 title="Open in a new tab" aria-label="Open preview in a new tab"
                 onClick={() => window.open(hrefFor(preview), "_blank", "noopener")}>↗</button>

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

@@ -28,6 +28,31 @@ beforeEach(() => {
 afterEach(() => { cleanup(); vi.clearAllMocks(); vi.unstubAllGlobals(); });
 
 describe("ViewsPanel", () => {
+  it("Download saves the stored file itself through a same-origin anchor, in the list and in the preview", async () => {
+    // The row is an <a>, so the button clicks a hidden anchor of its own;
+    // capture what that anchor asked the browser to do.
+    const clicked: Array<{ href: string; download: string }> = [];
+    const origClick = HTMLAnchorElement.prototype.click;
+    HTMLAnchorElement.prototype.click = function (this: HTMLAnchorElement) {
+      clicked.push({ href: this.getAttribute("href") || "", download: this.download });
+    };
+    try {
+      render(<ViewsPanel onClose={() => {}} />);
+      await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());
+      fireEvent.click(screen.getByRole("button", { name: "Download agent-result.md" }));
+      expect(clicked).toEqual([{ href: "/view/Orion/agent-result.md/download", download: "agent-result.md" }]);
+      // Open the preview: its header offers the same download.
+      fireEvent.click(screen.getByText("Views end-to-end").closest("a") as HTMLAnchorElement);
+      const inPreview = screen.getAllByRole("button", { name: "Download agent-result.md" });
+      expect(inPreview.length).toBeGreaterThanOrEqual(2);
+      fireEvent.click(inPreview[inPreview.length - 1]);
+      expect(clicked.length).toBe(2);
+      expect(clicked[1].href).toBe("/view/Orion/agent-result.md/download");
+    } finally {
+      HTMLAnchorElement.prototype.click = origClick;
+    }
+  });
+
   it("a plain click previews IN PLACE; the row stays a real link for modified clicks", async () => {
     render(<ViewsPanel onClose={() => {}} />);
     await waitFor(() => expect(screen.getByText("Views end-to-end")).toBeTruthy());

package/hop

@@ -10793,8 +10793,12 @@ happens until someone clicks it.
         // file name. The legacy /assets/view/<s>/<f> form redirects here, so
         // an edge-cached response is at worst a redirect, never the bytes.
         const viewMatch = (req.method === 'GET' || req.method === 'HEAD')
-            && parsedUrl.pathname.match(/^\/view\/([^/]+)\/([^/]+?)(\/inline)?$/);
+            && parsedUrl.pathname.match(/^\/view\/([^/]+)\/([^/]+?)(\/inline|\/download)?$/);
         if (viewMatch) {
+            // /download: the stored file itself, as an attachment — the
+            // markdown an agent wrote rather than the page it renders into,
+            // the PDF rather than the viewer. Same bytes `hop view` copied in.
+            const wantDownload = viewMatch[3] === '/download';
             const viewRoot = path.resolve(VIEWS_DIR);
             const target = path.resolve(path.join(
                 viewRoot, decodeURIComponent(viewMatch[1]), decodeURIComponent(viewMatch[2])));
@@ -10805,11 +10809,31 @@ happens until someone clicks it.
                 return;
             }
             const viewExt = path.extname(target).toLowerCase();
+            // ?download=1 — the FILE, not the page: the bytes the agent
+            // published, under their real name, as an attachment. Rendered
+            // kinds (md/csv/json) come back raw here, not as the HTML the
+            // viewer shows (Jian: "I should be able to download a hop view
+            // item from the UI, right?").
+            if (parsedUrl.query.download === '1') {
+                const rawTypes = { '.md': 'text/markdown; charset=utf-8', '.markdown': 'text/markdown; charset=utf-8',
+                                   '.csv': 'text/csv; charset=utf-8', '.tsv': 'text/tab-separated-values; charset=utf-8',
+                                   '.json': 'application/json; charset=utf-8', '.txt': 'text/plain; charset=utf-8' };
+                const dlName = path.basename(target).replace(/["\r\n]/g, '_');
+                res.writeHead(200, {
+                    'Content-Type': rawTypes[viewExt] || STATIC_CONTENT_TYPES[viewExt] || 'application/octet-stream',
+                    'Content-Length': fs.statSync(target).size,
+                    'Content-Disposition': `attachment; filename="${dlName}"; filename*=UTF-8''${encodeURIComponent(dlName)}`,
+                    'Cache-Control': 'no-store'
+                });
+                if (req.method === 'HEAD') { res.end(); return; }
+                fs.createReadStream(target).pipe(res);
+                return;
+            }
             // Markdown is rendered, not dumped: an agent's write-up is a
             // RESULT, and handing over a wall of raw asterisks is the "just
             // text" outcome this feature exists to avoid. The stored file
             // stays the markdown the agent wrote.
-            if (VIEW_RENDERED.has(viewExt)) {
+            if (VIEW_RENDERED.has(viewExt) && !wantDownload) {
                 const sess = decodeURIComponent(viewMatch[1]);
                 const file = decodeURIComponent(viewMatch[2]);
                 const caption = readViewMeta(sess)[file]?.title || file;
@@ -10867,7 +10891,15 @@ happens until someone clicks it.
                 fs.createReadStream(target, { start, end }).pipe(res);
                 return;
             }
+            // RFC 6266: an ASCII fallback plus the UTF-8 form for names with
+            // anything else in them.
+            const downloadName = path.basename(target);
+            const asciiName = downloadName.replace(/[^\x20-\x7e]/g, '_').replace(/["\\]/g, '_');
+            const disposition = wantDownload
+                ? { 'Content-Disposition': `attachment; filename="${asciiName}"; filename*=UTF-8''${encodeURIComponent(downloadName)}` }
+                : {};
             res.writeHead(200, {
+                ...disposition,
                 'Content-Type': viewType,
                 'Content-Length': viewSize,
                 'Accept-Ranges': 'bytes'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hop2",
-  "version": "0.11.46",
+  "version": "0.11.47",
   "description": "🐰 Hop into your terminal from anywhere. Secure remote shell access with 2FA via Cloudflare Tunnel. Next-gen rewrite with native terminal sharing.",
   "main": "hop",
   "bin": {