fix(downloads): automatic really is automatic, and a selection downloads all of it

Two bugs in what shipped last, and both were mine.

Automatic mode still opened Save As, because with no folder granted the
code fell through to the file picker — while the documentation said it
would use the browser's own download folder. It does that now. Over
512 MB it still asks, since getting there means holding the file in
memory and a tab will not survive a 40 GB blob; Settings is where to stop
it asking again.

Selecting two files downloaded one. They were started without awaiting,
so each asked the browser for a save dialog at once, and a browser allows
exactly one — the rest were rejected and the errors went nowhere. They
are awaited one at a time now, which serializes the dialogs and not the
transfers: each call returns as soon as its transfer is registered.

Then the adjustments. The transfers widget offers Open on a finished
download that went into a granted folder — the bytes go to a new tab, and
that is the whole of what a page can do: no browser lets one start a
desktop application or show a file manager, so the folder half of that
request cannot be built and the guide says so.

The Files toolbar was four controls of three different heights in a row.
It is three groups now — what you can add, where you are, what you can do
with what is here — on one baseline, with icons from the set and a gap
between the dots and the word Actions. Chat comes first among the tabs
and is the one you land on. The three Discover entries in the sidebar
have icons. And a link in a chat message becomes a link: built as an
element and never as markup, http and https only, so `javascript:` is not
one message away from running here.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

7 files changed, 282 insertions, 63 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index b84b7b1..c8fb694 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -261,6 +261,13 @@ const ICON_PATHS = {
   upload:   ['M12 20.5v-12', 'M7.5 13l4.5-4.5 4.5 4.5', 'M4.5 4h15'],
   transfer: ['M6.5 3.5v11', 'M3.5 11l3 3.5 3-3.5',
              'M17.5 20.5v-11', 'M14.5 13l3-3.5 3 3.5'],
+  search:   ['M11 4.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13', 'M15.8 15.8L20.5 20.5'],
+  dots:     ['M12 5.6h.01', 'M12 12h.01', 'M12 18.4h.01'],
+  checkbox: ['M5.5 4h13a1.5 1.5 0 0 1 1.5 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18.5v-13A1.5 1.5 0 0 1 5.5 4z'],
+  home:     ['M4 11.2L12 4.5l8 6.7', 'M6.2 9.8V19a1 1 0 0 0 1 1h9.6a1 1 0 0 0 1-1V9.8'],
+  'folder-plus': ['M3.5 6.6a1 1 0 0 1 1-1h4.2l2 2.4h7.8a1 1 0 0 1 1 1v9.4a1 1 0 0 1-1 1h-14a1 1 0 0 1-1-1z',
+                  'M12 11.4v5', 'M9.5 13.9h5'],
+  plus:     ['M12 5v14', 'M5 12h14'],
   clip:     ['M20.5 11.8l-8.4 8.4a5.4 5.4 0 0 1-7.6-7.6l8.8-8.8a3.6 3.6 0 0 1 5.1 5.1l-8.8 8.8a1.8 1.8 0 0 1-2.5-2.5l8.1-8.1'],
   pencil:   ['M4 20h4l10.5-10.5a2.1 2.1 0 0 0-3-3L5 17v3',
              'M14.5 6.5l3 3'],
@@ -418,6 +425,11 @@ function TransferWidget() {
                         : it.status === 'cancelled' ? t('transfers.cancelled')
                         : it.error || t('transfers.failed')}
                     </span>
+                    ${it.canOpen && html`
+                      <button class="link-btn" onClick=${() => transfers.open(it.id)}>
+                        ${t('transfers.open')}
+                      </button>
+                    `}
                   </div>
                 `}
             </div>
@@ -475,11 +487,11 @@ function Sidebar({ groups, route, menuOpen, role }) {
       <div class="sidebar-section">
         <div class="sidebar-heading">${t('sidebar.discover')}</div>
         <a class="sidebar-item ${route === '/explore' ? 'active' : ''}"
-           href="#/explore">${t('sidebar.public_groups')}</a>
+           href="#/explore"><${Icon} name="globe" /> ${t('sidebar.public_groups')}</a>
         <a class="sidebar-item ${route === '/search' ? 'active' : ''}"
-           href="#/search">${t('sidebar.search')}</a>
+           href="#/search"><${Icon} name="search" /> ${t('sidebar.search')}</a>
         <a class="sidebar-item ${route === '/create-group' ? 'active' : ''}"
-           href="#/create-group">${t('sidebar.create_group')}</a>
+           href="#/create-group"><${Icon} name="plus" /> ${t('sidebar.create_group')}</a>
       </div>
       <div class="sidebar-section">
         <div class="sidebar-heading">${t('sidebar.my_groups')}</div>
@@ -938,13 +950,21 @@ const PIPELINE_WINDOW = 8;
  * it and hand the browser a blob", or false for "the person dismissed the
  * dialog", which is not an error and must not start a transfer.
  */
-async function _openDownloadTarget(filename, pickerOpts = {}) {
+async function _openDownloadTarget(filename, size = 0, pickerOpts = {}) {
   try {
     const target = await downloads.openTarget(filename);
     if (target) return target;
   } catch (err) {
     console.warn('[MeshBay] download folder unusable:', err.message);
   }
+
+  // No granted folder. Saving automatically means not putting a dialog in the
+  // way, so anything that fits in memory goes to the browser's own download
+  // folder — which is what "automatic" meant to whoever chose the setting.
+  // Past that a blob would take the tab down with it, and one dialog is the
+  // lesser evil; Settings is where to stop it happening again.
+  if (downloads.getMode() === 'auto' && size < downloads.BLOB_LIMIT) return null;
+
   if (!window.showSaveFilePicker) return null;
   try {
     const handle = await window.showSaveFilePicker({
@@ -1030,7 +1050,7 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
   const [currentPath, setCurrentPath] = useState('');
   const [videoEntry, setVideoEntry] = useState(null);
   const [previewEntry, setPreviewEntry] = useState(null);
-  const [tab, setTab] = useState('files');
+  const [tab, setTab] = useState('chat');
   // Directories are not index entries, so a new empty one needs a nudge
   // to appear in the breadcrumb listing.
   const [nodeDirs, setNodeDirs] = useState([]);
@@ -1201,12 +1221,12 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
 
     // Both of these have to happen inside the click: a browser grants a file
     // picker, and re-grants a folder, only from a user gesture.
-    const target = await _openDownloadTarget(entry.name);
+    const target = await _openDownloadTarget(entry.name, entry.size);
     if (target === false) return;          // the picker was dismissed
 
     transfers.start({
       kind: 'download', name: (target && target.name) || entry.name,
-      total: entry.size, transport,
+      total: entry.size, transport, open: target && target.open,
       run: async ({ signal, onProgress }) => {
         const totalChunks = Math.ceil(entry.size / CHUNK_SIZE);
         let done = 0;
@@ -1311,7 +1331,7 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
     const totalBytes = files.reduce((n, f) => n + (f.entry.size || 0), 0);
     const suggested = (dir.split('/').pop() || 'files') + '.zip';
 
-    const target = await _openDownloadTarget(suggested, {
+    const target = await _openDownloadTarget(suggested, totalBytes, {
       types: [{ description: 'ZIP archive',
                 accept: { 'application/zip': ['.zip'] } }],
     });
@@ -1325,7 +1345,7 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
 
     transfers.start({
       kind: 'download', name: (target && target.name) || suggested,
-      total: totalBytes, transport,
+      total: totalBytes, transport, open: target && target.open,
       run: async ({ signal, onProgress }) => {
         const writable = target ? target.writable : null;
         const parts = writable ? null : [];
@@ -1475,8 +1495,14 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
     ? selectedFiles[0] : null;
   const deletableFiles = selectedFiles.filter(
     e => isNodeAdmin || (userId && e.uploader_id === userId));
-  const run = (fn) => { setActionsOpen(false); setSelecting(false);
-                        setSelected(new Set()); fn(); };
+  const run = (fn) => {
+    setActionsOpen(false);
+    setSelecting(false);
+    setSelected(new Set());
+    Promise.resolve().then(fn).catch(err => {
+      if (err && err.name !== 'AbortError') setError(err.message);
+    });
+  };
 
   const actionItems = html`
     ${onlyFile && onlyFile.type === 'video' && html`
@@ -1490,18 +1516,21 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
       </button>
     `}
     ${selectedFiles.length > 0 && html`
-      <button onClick=${() => run(() => {
-        // Started together and left to run together: each is its own transfer,
-        // and the widget by the bell is where they are watched from now.
-        for (const e of selectedFiles) downloadFile(e);
+      <button onClick=${() => run(async () => {
+        // Awaited one at a time, and each returns as soon as its transfer is
+        // registered — so the transfers still run together. Firing them without
+        // awaiting meant every file asked the browser for a save dialog at
+        // once, and a browser allows one: the rest were rejected and only the
+        // first file ever downloaded.
+        for (const e of selectedFiles) await downloadFile(e);
       })}>
         <span class="fmi">${'\u{2B07}'}</span>
         ${t('group.download_n', { n: selectedFiles.length })}
       </button>
     `}
     ${selectedDirs.length > 0 && html`
-      <button onClick=${() => run(() => {
-        for (const d of selectedDirs) downloadDirectory(d);
+      <button onClick=${() => run(async () => {
+        for (const d of selectedDirs) await downloadDirectory(d);
       })}>
         <span class="fmi">${'\u{2B07}'}</span>
         ${t('group.download_zip_n', { n: selectedDirs.length })}
@@ -1594,25 +1623,31 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
       `}
       ${status === 'connected' && html`
         <div class="group-tabs">
-          <button class="group-tab ${tab === 'files' ? 'active' : ''}"
-            onClick=${() => setTab('files')}>${t('group.tab_files')}</button>
           <button class="group-tab ${tab === 'chat' ? 'active' : ''}"
             onClick=${() => setTab('chat')}>${t('group.tab_chat')}</button>
+          <button class="group-tab ${tab === 'files' ? 'active' : ''}"
+            onClick=${() => setTab('files')}>${t('group.tab_files')}</button>
           <button class="group-tab ${tab === 'members' ? 'active' : ''}"
             onClick=${() => setTab('members')}>${t('group.tab_members')}</button>
         </div>
 
         ${tab === 'files' && html`
           <div class="file-toolbar">
-            <label class="admin-btn upload-btn" style="cursor:pointer;margin-right:8px">
-              ${t('group.upload')}
-              <input type="file" multiple style="display:none"
-                onChange=${uploadFile} />
-            </label>
-            <button class="admin-btn" style="margin-right:8px"
-              onClick=${makeDirectory}>${t('group.mkdir')}</button>
+            <div class="toolbar-group">
+              <label class="tb-btn primary">
+                <${Icon} name="upload" /> ${t('group.upload')}
+                <input type="file" multiple style="display:none"
+                  onChange=${uploadFile} />
+              </label>
+              <button class="tb-btn" onClick=${makeDirectory}>
+                <${Icon} name="folder-plus" /> ${t('group.mkdir')}
+              </button>
+            </div>
+
             <div class="breadcrumbs">
-              <a class="crumb" onClick=${() => setCurrentPath('')}>/</a>
+              <a class="crumb" onClick=${() => setCurrentPath('')}>
+                <${Icon} name="home" />
+              </a>
               ${breadcrumbs.map((seg, i) => {
                 const path = breadcrumbs.slice(0, i + 1).join('/');
                 return html`
@@ -1621,28 +1656,33 @@ function GroupPage({ groupId, group, token, username, userId, onRefreshAuth,
                 `;
               })}
             </div>
-            <input type="text" class="file-search" placeholder="${t('group.filter')}"
-              value=${filter} onInput=${e => setFilter(e.target.value)} />
-            <button class="admin-btn ${selecting ? 'active' : ''}"
-              style="margin-left:8px"
-              onClick=${() => {
-                setSelecting(v => !v);
-                setSelected(new Set());
-                setActionsOpen(false);
-              }}>
-              ${selecting ? t('group.select_done') : t('group.select')}
-            </button>
-            ${selecting && html`
-              <div class="actions-wrap">
-                <button class="admin-btn" disabled=${selected.size === 0}
-                  onClick=${(ev) => { ev.stopPropagation(); setActionsOpen(o => !o); }}>
-                  ${'\u{22EE}'} ${t('group.actions', { n: selected.size })}
-                </button>
-                ${actionsOpen && html`
-                  <div class="file-menu">${actionItems}</div>
-                `}
+
+            <div class="toolbar-group right">
+              <div class="tb-search">
+                <${Icon} name="search" />
+                <input type="text" placeholder="${t('group.filter')}"
+                  value=${filter} onInput=${e => setFilter(e.target.value)} />
               </div>
-            `}
+              <button class="tb-btn ${selecting ? 'active' : ''}"
+                onClick=${() => {
+                  setSelecting(v => !v);
+                  setSelected(new Set());
+                  setActionsOpen(false);
+                }}>
+                <${Icon} name=${selecting ? 'check' : 'checkbox'} />
+                ${selecting ? t('group.select_done') : t('group.select')}
+              </button>
+              ${selecting && html`
+                <div class="actions-wrap">
+                  <button class="tb-btn" disabled=${selected.size === 0}
+                    onClick=${(ev) => { ev.stopPropagation(); setActionsOpen(o => !o); }}>
+                    <${Icon} name="dots" />
+                    ${t('group.actions', { n: selected.size })}
+                  </button>
+                  ${actionsOpen && html`<div class="file-menu">${actionItems}</div>`}
+                </div>
+              `}
+            </div>
           </div>
           <table class="file-table">
             <thead>
@@ -2067,6 +2107,34 @@ function MembersPanel({ groupId, group, token, transportRef, gekRef,
 
 // ── Chat Panel ──────────────────────────────────────────────────────────
 
+/**
+ * Message text with its links made clickable.
+ *
+ * Only http and https, and built as elements rather than markup: a message is
+ * something another member wrote, so it must never become HTML. `javascript:`
+ * and `data:` are not matched at all, and the anchors carry noopener so the new
+ * tab cannot reach back into this one.
+ */
+const URL_RE = /\bhttps?:\/\/[^\s<>"']+/gi;
+
+function linkify(text) {
+  const out = [];
+  let last = 0;
+  for (const m of String(text).matchAll(URL_RE)) {
+    if (m.index > last) out.push(text.slice(last, m.index));
+    // Trailing punctuation is almost never part of the address.
+    let url = m[0];
+    let tail = '';
+    while (/[.,;:!?)\]]$/.test(url)) { tail = url.slice(-1) + tail; url = url.slice(0, -1); }
+    out.push(html`<a href=${url} target="_blank" rel="noopener noreferrer"
+      class="chat-link">${url}</a>`);
+    if (tail) out.push(tail);
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
 function formatTime(ts) {
   const d = new Date(ts * 1000);
   const now = new Date();
@@ -2258,7 +2326,10 @@ function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex, on
                     <div class="chat-att-size">${formatSize(att.size)}</div>
                   </div>
                 ` : html`
-                  <span class="chat-text">${m.payload}</span>
+                  <span class="chat-text">
+                    ${linkify(parsed && typeof parsed.text === 'string'
+                      ? parsed.text : m.payload)}
+                  </span>
                 `}
                 <span class="chat-time">${formatTime(m.timestamp)}</span>
               </div>
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/downloads.js b/packages/meshbay-hub/src/meshbay_hub/static/downloads.js
index 9c6ced1..a71f289 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/downloads.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/downloads.js
@@ -133,11 +133,11 @@ export async function freeName(name, exists) {
 }
 
 /**
- * Where this download should be written.
+ * Where this download should be written, if a folder has been granted.
  *
- * Returns a writable stream, or null meaning "there is nowhere to stream to —
- * collect it and hand the browser a blob". The caller opens the picker itself
- * in "ask" mode, because that one has to happen inside the click.
+ * Returns `{writable, name, open}` or null. Null does not mean failure: it
+ * means there is no granted folder, and the caller decides between handing the
+ * browser a blob and asking for a Save As.
  */
 export async function openTarget(filename) {
   if (!SUPPORTED || getMode() === 'ask') return null;
@@ -155,5 +155,24 @@ export async function openTarget(filename) {
   };
   const name = await freeName(filename, exists);
   const handle = await dir.getFileHandle(name, { create: true });
-  return { writable: await handle.createWritable(), name };
+  return {
+    writable: await handle.createWritable(),
+    name,
+    // Reading it back is the only way a page can "open" a file it wrote: hand
+    // the bytes to a tab and let the browser decide what to do with them. No
+    // web page can start a desktop application, or show a file manager.
+    open: async () => {
+      const file = await handle.getFile();
+      const url = URL.createObjectURL(file);
+      window.open(url, '_blank', 'noopener');
+      setTimeout(() => URL.revokeObjectURL(url), 60000);
+    },
+  };
 }
+
+/**
+ * Below this, a download with no granted folder is collected in memory and
+ * handed to the browser, which saves it without asking. Above it that would
+ * mean holding gigabytes in a tab, so it is worth one Save As dialog instead.
+ */
+export const BLOB_LIMIT = 512 * 1024 * 1024;
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/i18n.js b/packages/meshbay-hub/src/meshbay_hub/static/i18n.js
index 25fbd77..a2d13c5 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/i18n.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/i18n.js
@@ -298,6 +298,7 @@ const en = {
   'transfers.title': 'Transfers',
   'transfers.clear': 'Clear finished',
   'transfers.cancel': 'Cancel',
+  'transfers.open': 'Open',
   'transfers.done': 'Finished',
   'transfers.cancelled': 'Cancelled',
   'transfers.failed': 'Failed',
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 2296b2d..851c07e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -546,14 +546,77 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* ── File toolbar ────────────────────────────────────────────────────────── */
 
+/* One bar, three groups: what you can add on the left, where you are in the
+   middle, what you can do with what is here on the right. It used to be four
+   controls of three different heights sitting in a row. */
 .file-toolbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
   margin-bottom: 12px;
+  padding: 8px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border);
+  border-radius: 8px;
   flex-wrap: wrap;
 }
+.toolbar-group { display: flex; align-items: center; gap: 6px; }
+.toolbar-group.right { margin-left: auto; }
+
+.tb-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;               /* the icon and the word are not the same word */
+  height: 32px;
+  padding: 0 11px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-surface);
+  color: var(--text);
+  font-size: 0.83em;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: border-color 0.12s, color 0.12s, background 0.12s;
+}
+.tb-btn:hover { border-color: var(--accent); color: var(--accent); }
+.tb-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+.tb-btn:disabled:hover { border-color: var(--border); color: var(--text); }
+.tb-btn .icon { width: 15px; height: 15px; }
+.tb-btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+.tb-btn.primary:hover { background: var(--accent-hover); color: var(--accent-text); }
+.tb-btn.active {
+  background: color-mix(in srgb, var(--accent) 12%, var(--bg-surface));
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* The filter is a field, not a button, and should not pretend otherwise. */
+.tb-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--bg-surface);
+  color: var(--text-dim);
+}
+.tb-search:focus-within { border-color: var(--border-focus); }
+.tb-search .icon { width: 14px; height: 14px; flex-shrink: 0; }
+.tb-search input {
+  border: none;
+  background: none;
+  outline: none;
+  padding: 0;
+  width: 150px;
+  font-size: 0.83em;
+  color: var(--text);
+}
 
 .breadcrumbs {
   display: flex;
@@ -564,6 +627,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   flex-wrap: wrap;
 }
 .crumb {
+  display: inline-flex;
+  align-items: center;
   cursor: pointer;
   color: var(--accent);
   padding: 2px 4px;
@@ -572,11 +637,6 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .crumb:hover { background: var(--bg-raised); text-decoration: none; }
 .crumb-sep { color: var(--text-dim); }
 
-.file-search {
-  max-width: 220px;
-  padding: 6px 10px !important;
-  font-size: 0.85em !important;
-}
 
 /* ── File table ──────────────────────────────────────────────────────────── */
 
@@ -1190,6 +1250,15 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .settings-choice strong { display: block; font-size: 0.88em; color: var(--text); }
 .settings-choice .settings-hint { display: block; margin-top: 2px; }
 
+/* A pasted address can be longer than the bubble; breaking it is better than
+   a message that scrolls sideways. */
+.chat-link {
+  color: var(--accent);
+  text-decoration: underline;
+  word-break: break-all;
+}
+.chat-bubble-own .chat-link { color: inherit; }
+
 /* ── Transfers widget ────────────────────────────────────────────────────── */
 
 .transfer-wrap { position: relative; display: flex; align-items: center; }
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/transfers.js b/packages/meshbay-hub/src/meshbay_hub/static/transfers.js
index 1ad1ec5..fa34c67 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/transfers.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/transfers.js
@@ -56,6 +56,9 @@ export class TransferStore {
       error: it.error || '',
       speed: this._speed(it),
       percent: it.total ? Math.min(100, Math.round(it.done / it.total * 100)) : 0,
+      // Only for a file written into a folder the browser granted us: that is
+      // the one case where the page can read its own download back.
+      canOpen: it.status === 'done' && typeof it.open === 'function',
     }));
   }
 
@@ -79,10 +82,10 @@ export class TransferStore {
    * `run` receives `{ signal, onProgress }`. It must poll `signal.aborted` — a
    * cancel that only sets a flag nobody reads is a button that lies.
    */
-  start({ kind, name, total = 0, transport = null, run }) {
+  start({ kind, name, total = 0, transport = null, run, open = null }) {
     const item = {
       id: _nextId++,
-      kind, name, total, transport,
+      kind, name, total, transport, open,
       done: 0,
       status: 'running',
       error: '',
@@ -128,6 +131,19 @@ export class TransferStore {
     return item.id;
   }
 
+  /**
+   * Hand a finished download to the browser to display.
+   *
+   * As close to "open it" as a web page gets: the bytes go to a new tab and the
+   * browser decides what to do with them. A page cannot start a desktop
+   * application, and cannot show a file manager — there is no API for either,
+   * in any browser, by design.
+   */
+  open(id) {
+    const item = this._items.find(it => it.id === id);
+    if (item && typeof item.open === 'function') return item.open();
+  }
+
   cancel(id) {
     const item = this._items.find(it => it.id === id);
     if (!item || item.status !== 'running') return;
diff --git a/packages/meshbay-hub/tests/test_downloads.py b/packages/meshbay-hub/tests/test_downloads.py
index cc4fdd1..cd0cded 100644
--- a/packages/meshbay-hub/tests/test_downloads.py
+++ b/packages/meshbay-hub/tests/test_downloads.py
@@ -95,3 +95,16 @@ say(await M.freeName('clip.mp4', async n => n === 'clip.mp4'));
 def test_a_browser_without_the_api_reports_it(tmp_path):
     """`SUPPORTED` decides whether Settings offers a choice or an explanation."""
     assert _run("say(M.SUPPORTED);", tmp_path) == [False]
+
+
+def test_the_open_action_reads_the_file_back(tmp_path):
+    """
+    "Open" is the browser being handed the bytes, not a desktop application
+    being started — no web page can do the second, and none can show a file
+    manager either. It is only offered for a file written into a granted folder,
+    since that is the one a page can read back.
+    """
+    src = DOWNLOADS.read_text()
+    target = src[src.index("export async function openTarget"):]
+    assert "getFile()" in target and "window.open(" in target
+    assert "revokeObjectURL" in target, "the blob URL must not be leaked"
diff --git a/packages/meshbay-hub/tests/test_spa_ordering.py b/packages/meshbay-hub/tests/test_spa_ordering.py
index 04c5159..79d7c9a 100644
--- a/packages/meshbay-hub/tests/test_spa_ordering.py
+++ b/packages/meshbay-hub/tests/test_spa_ordering.py
@@ -199,3 +199,33 @@ def test_the_files_panel_no_longer_carries_its_own_progress_bars():
     app = APP.read_text()
     for gone in ("setUlState", "setDlState", "dl-bar"):
         assert gone not in app, f"{gone} survived the move to the transfer widget"
+
+
+# ── Downloading a selection ─────────────────────────────────────────────────
+
+def test_a_multi_file_download_waits_for_each_picker():
+    """
+    A browser allows one file picker at a time. Firing every download at once
+    meant the first opened a dialog and the rest were rejected — two files
+    selected, one file downloaded.
+    """
+    app = APP.read_text()
+    block = app[app.index("${selectedFiles.length > 0 && html`"):]
+    block = block[:block.index("`}")]
+    assert "await downloadFile(e)" in block, (
+        "downloads are fired without awaiting again; only the first will ask "
+        "for a save location and the others will be rejected")
+
+
+def test_links_in_chat_are_built_as_elements_not_markup():
+    """
+    A message is something another member wrote. It becomes an anchor element,
+    never HTML, and only for http(s) — otherwise javascript: would be one
+    message away from running here.
+    """
+    app = APP.read_text()
+    fn = app[app.index("function linkify("):]
+    fn = fn[:fn.index("\nfunction ", 1)]
+    assert "innerHTML" not in fn and "dangerouslySetInnerHTML" not in fn
+    assert 'rel="noopener noreferrer"' in fn
+    assert "https?" in app[app.index("const URL_RE"):app.index("function linkify(")]