fix(client): downloads stream to disk, and two rough edges on first run

**Downloads were going through RAM.** `_openDownloadTarget` tries a granted
folder, then a service worker, then its floor: collect the whole file in the
page and hand the browser a blob. Both of the first two are absent in the
desktop application — `showDirectoryPicker` does not exist, and Chromium refuses
a service worker on a custom scheme — so every download under 512 MB took the
floor. A gigabyte of film meant a gigabyte of RAM, and the only visible symptom
was a Save As dialog at the *end* rather than the start, which is what the
operator noticed and asked about.

The main process now streams to disk: it honours "save automatically" with a
folder chosen once and no dialog, never overwrites (a colliding name gets a
suffix), awaits each write so the renderer cannot outrun the disk and queue the
file in memory anyway, and unlinks a cancelled download rather than leaving a
truncated file that looks complete to whoever opens it next. Settings now offers
the native folder picker instead of saying downloads are unsupported.

Measured in the running application: the file on disk grows 256 KB → 512 KB →
768 KB → 1 MB as the chunks arrive, and an aborted download leaves nothing
behind.

**A permanent scrollbar on sign-in.** `.layout` and `.page-center` each reserved
`100vh - 52px`, and `.page-center` sits inside `main`'s 24px vertical padding —
so the page overflowed by exactly 48px at every window size. Found by measuring
in the app rather than reading the stylesheet: `scrollHeight` 819 against a 771
viewport, then the bottom edge of every element. The centring page brings its
own padding, so main's is dropped for it and the duplicated arithmetic goes
rather than growing a third term. Now `scrollHeight == innerHeight`, no
overflowing elements.

**The first-run screen was unstyled.** It used a class name I invented
(`auth-page`) that appears nowhere in the stylesheet, so it had no card and the
button sat against the input. It now uses the same `page-center` + `login-card`
markup as sign-in, which is where the 12px gap comes from. The sign-in link in
the nav is hidden until a hub is chosen — it led to a page that could not work.

809 tests pass.

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

1 files changed, 55 insertions, 19 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/app.js b/packages/meshbay-hub/src/meshbay_hub/static/app.js
index 4091ae7..f49d412 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/app.js
@@ -569,7 +569,8 @@ function TransferWidget() {
 
 // ── Nav ──────────────────────────────────────────────────────────────────────
 
-function Nav({ user, theme, onThemeChange, onLogout, onMenuToggle, unreadCount }) {
+function Nav({ user, theme, onThemeChange, onLogout, onMenuToggle, unreadCount,
+              hubUnset }) {
   return html`
     <nav class="nav">
       <div class="nav-left">
@@ -590,7 +591,7 @@ function Nav({ user, theme, onThemeChange, onLogout, onMenuToggle, unreadCount }
         ${user ? html`
           <${UserMenu} user=${user} theme=${theme}
             onThemeChange=${onThemeChange} onLogout=${onLogout} />
-        ` : html`
+        ` : hubUnset ? null : html`
           <a class="nav-btn" href="#/login">${t('nav.login')}</a>
         `}
       </div>
@@ -681,18 +682,21 @@ function FirstRunPage({ onSet }) {
   };
 
   return html`
-    <div class="auth-page">
-      <h2>${t('firstrun.title')}</h2>
-      <p class="settings-hint">${t('firstrun.hint')}</p>
-      <form onSubmit=${submit}>
-        <input type="url" placeholder="https://meshbay.org" required
-          value=${url} onInput=${e => setUrl(e.target.value)} />
-        <button type="submit" disabled=${busy}>
-          ${busy ? '…' : t('firstrun.btn')}
-        </button>
-      </form>
-      ${error && html`<p class="error-msg">${error}</p>`}
-      <p class="settings-hint">${t('firstrun.note')}</p>
+    <div class="page-center">
+      <div class="card login-card">
+        <h2>${t('firstrun.title')}</h2>
+        <p class="settings-hint" style="margin-bottom:16px">${t('firstrun.hint')}</p>
+        <form onSubmit=${submit}>
+          <input type="text" placeholder="https://meshbay.org" required
+            autofocus value=${url}
+            onInput=${e => setUrl(e.target.value)} />
+          <button type="submit" disabled=${busy}>
+            ${busy ? t('firstrun.checking') : t('firstrun.btn')}
+          </button>
+        </form>
+        ${error && html`<div class="error-msg">${error}</div>`}
+        <p class="settings-hint" style="margin-top:16px">${t('firstrun.note')}</p>
+      </div>
     </div>
   `;
 }
@@ -1185,6 +1189,26 @@ const PIPELINE_WINDOW = 8;
  */
 async function _openDownloadTarget(filename, size = 0, pickerOpts = {},
                                    swSize = size) {
+  // On a desktop build this is the whole answer, and it comes first.
+  //
+  // The two browser paths below are both unavailable there — `showDirectoryPicker`
+  // does not exist, and Chromium refuses a service worker on a custom scheme —
+  // so without this the chain fell all the way through to its floor, which
+  // collects the file in the page and hands the browser a blob. A gigabyte of
+  // film meant a gigabyte of RAM, and a Save As dialog at the *end*.
+  if (platform.capabilities.nativeSave) {
+    try {
+      const native = await platform.nativeSave(
+        filename, { auto: downloads.getMode() === 'auto' });
+      // Null means the person dismissed the dialog, which is not an error and
+      // must not start a transfer.
+      return native || false;
+    } catch (err) {
+      console.warn('[MeshBay] native save failed:', platform.bridgeMessage(err));
+      return false;
+    }
+  }
+
   try {
     const target = await downloads.openTarget(filename);
     if (target) return target;
@@ -4013,10 +4037,20 @@ function SettingsPage({ user, theme, onThemeChange, groups }) {
     hubFetch('/v1/hub/version').then(setHubInfo).catch(() => {});
   }, []);
 
-  useEffect(() => { downloads.savedDirectory().then(setDlDir); }, []);
+  useEffect(() => {
+    // The desktop build remembers a path; the browser remembers a handle. Both
+    // answer "where do downloads go", and the row below renders either.
+    if (platform.folder.available) platform.folder.get().then(setDlDir);
+    else downloads.savedDirectory().then(setDlDir);
+  }, []);
 
   const pickFolder = useCallback(async () => {
     try {
+      if (platform.folder.available) {
+        const dir = await platform.folder.choose();
+        if (dir) setDlDir(dir);
+        return;
+      }
       const handle = await downloads.chooseDirectory();
       setDlDir(handle);
     } catch (err) {
@@ -4033,7 +4067,7 @@ function SettingsPage({ user, theme, onThemeChange, groups }) {
 
       <div class="settings-section">
         <h3 class="settings-heading">${t('settings.downloads')}</h3>
-        ${!downloads.SUPPORTED
+        ${!(downloads.SUPPORTED || platform.folder.available)
           ? html`<p class="settings-hint">${t('settings.dl_unsupported')}</p>`
           : html`
             <label class="settings-choice">
@@ -4054,7 +4088,8 @@ function SettingsPage({ user, theme, onThemeChange, groups }) {
             </label>
             <div class="settings-row" style="margin-top:10px">
               <span class="settings-label">
-                ${dlDir ? t('settings.dl_folder', { name: dlDir.name })
+                ${dlDir ? t('settings.dl_folder',
+                            { name: dlDir.name || String(dlDir) })
                         : t('settings.dl_no_folder')}
               </span>
               <span>
@@ -4063,7 +4098,8 @@ function SettingsPage({ user, theme, onThemeChange, groups }) {
                 </button>
                 ${dlDir && html`
                   <button class="btn-secondary" onClick=${async () => {
-                    await downloads.forgetDirectory();
+                    if (platform.folder.available) await platform.folder.forget();
+                    else await downloads.forgetDirectory();
                     setDlDir(null);
                   }}>${t('settings.dl_forget')}</button>
                 `}
@@ -4869,7 +4905,7 @@ function App() {
         onThemeChange=${changeTheme}
         onLogout=${authCtx.logout}
         onMenuToggle=${() => setMenuOpen(o => !o)}
-        unreadCount=${unreadCount} />
+        unreadCount=${unreadCount} hubUnset=${needsHub} />
       <div class="layout">
         ${user && html`<${Sidebar}
           groups=${groups}