Merge branch 'refactor/groups-phase1'

Groups refactor, phases 1-3.

The root model replaces the old `upload` flag and group-wide `member_upload`
with per-root `writable`/`removable`/`ejected`, carried by a `RootSet` that
both front doors — the loopback API and signed MNP — reach through the same
`ops` functions. MNP goes to 1.1, additively: the roots table now rides on
`index_delta`, so a root added, removed, ejected or plugged reaches every
connected client instead of only whoever reloaded.

The group UI becomes a plugin architecture: an application is a registry
entry in `apps.js` plus its own files, with directories stored generically
by `ops.set_app_directories` under whatever the app is called. A reference
application, hidden behind `?dev=1`, is what makes that claim testable —
adding it is what found the two places still naming apps by hand.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011pvMdvLBG92jyhvD5pD6us

32 files changed, 2861 insertions, 980 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
index a1807ea..3cfb208 100644
--- a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
+++ b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
@@ -38,6 +38,18 @@ _ASSETS = ("style.css", "keyderive.js", "crypto.js", "transport.js", "app.js",
            "chat-app.js", "files-app.js", "video-player.js", "video-app.js",
            "music-app.js", "music-player.js", "photos-app.js",
            "group-settings.js", "group-page.js",
+           # The per-app settings architecture (docs/refactor-groups.md §3):
+           # the shared widgets, the folder picker, and one settings pane per
+           # app. Reached through the `apps.js` registry rather than imported
+           # by name anywhere, which is exactly why they have to be listed —
+           # nothing else would notice one of them changing.
+           "settings-ui.js", "folder-tree.js",
+           "chat-app-settings.js", "video-app-settings.js",
+           "music-app-settings.js", "photos-app-settings.js",
+           # The reference app (docs/refactor-groups.md §4.1). Hidden behind
+           # `?dev=1` client-side, but it is still served and still cached, so
+           # it participates in the hash like anything else here.
+           "helloworld-app.js", "helloworld-app-settings.js",
            # Pages extracted from app.js — statically imported or lazy-loaded,
            # but all must participate in the content hash.
            "auth-page.js", "explore-page.js", "create-group-page.js",
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/apps.js b/packages/meshbay-hub/src/meshbay_hub/static/apps.js
index 47b5bba..461bd57 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/apps.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/apps.js
@@ -3,32 +3,97 @@ import { FilesPanel } from './files-app.js';
 import { VideoApp } from './video-app.js';
 import { MusicApp } from './music-app.js';
 import { PhotosApp } from './photos-app.js';
+import { ChatSettings } from './chat-app-settings.js';
+import { VideoSettings } from './video-app-settings.js';
+import { MusicSettings } from './music-app-settings.js';
+import { PhotoSettings } from './photos-app-settings.js';
+import { HelloWorldApp } from './helloworld-app.js';
+import { HelloWorldSettings } from './helloworld-app-settings.js';
+
+/**
+ * Whether apps marked `dev` are shown. Opt in once with `?dev=1`, off with
+ * `?dev=0` — persisted, the same shape as transport.js's `?trace=1`.
+ *
+ * HelloWorld exists to prove that adding an application is a registry entry
+ * and two files. Registering it normally would put a toy app in every
+ * operator's group; leaving it unregistered would prove nothing, since the
+ * claim is precisely that registration is enough. So it is registered, and
+ * hidden behind a flag that changes nothing else.
+ */
+const DEV_KEY = 'mb_dev_apps';
+(function _initDevFlag() {
+  try {
+    const params = new URLSearchParams(location.search);
+    if (params.has('dev')) {
+      if (params.get('dev') === '0') localStorage.removeItem(DEV_KEY);
+      else localStorage.setItem(DEV_KEY, '1');
+    }
+  } catch { /* localStorage unavailable — dev apps stay hidden */ }
+})();
+
+function devAppsShown() {
+  try { return localStorage.getItem(DEV_KEY) === '1'; } catch { return false; }
+}
 
 /**
  * Every group "application", in tab order.
  *
- * Adding one (Videos, Music, Photos — none of them need an MNP change, see
- * the node's indexer classifying video/audio/image already) means a new file
- * exporting a component and one entry here. Nothing in group-page.js changes:
- * every registered component receives the same shared context (see its
- * `commonProps`) and renders itself into the active tab.
+ * Adding one means a new file exporting a component, an optional second file
+ * exporting its settings pane, and one entry here. Nothing in `group-page.js`
+ * or `group-settings.js` changes: every registered component receives the same
+ * shared context (see `commonProps`) and renders itself into the active tab,
+ * and every registered `Settings` gets its own collapsible section with a
+ * toggle, rendered by a loop that names no app.
  *
- * `key` doubles as the identifier the node's `apps_enabled` setting uses, so
- * it must match `ALLOWED_APPS` in the node's webrtc_server.py.
+ * `key` doubles as the identifier the node's `apps_enabled` setting and its
+ * `app_directories` op use, so it must match `ALLOWED_APPS` in the node's
+ * webrtc_server.py. It is also the key an app's directories are stored under
+ * (`<key>_directories`) — one identifier per app, everywhere.
+ *
+ * Fields:
+ *   key            the identifier, shared with the node
+ *   icon, labelKey the tab
+ *   Component      the app itself
+ *   Settings       its operator settings pane, if it has any (optional)
+ *   alwaysEnabled  cannot be turned off, and is not offered as a toggle
  */
 const APPS = [
-  { key: 'chat', icon: 'chat', labelKey: 'group.tab_chat', Component: ChatPanel },
-  { key: 'files', icon: 'folder', labelKey: 'group.tab_files', Component: FilesPanel },
-  { key: 'video', icon: 'video', labelKey: 'group.tab_video', Component: VideoApp },
-  { key: 'music', icon: 'music', labelKey: 'group.tab_music', Component: MusicApp },
-  { key: 'photo', icon: 'image', labelKey: 'group.tab_photos', Component: PhotosApp },
+  { key: 'chat', icon: 'chat', labelKey: 'group.tab_chat',
+    Component: ChatPanel, Settings: ChatSettings },
+  // Files has no settings of its own: it works over every shared directory by
+  // definition, which is what the shared-directories table already configures.
+  { key: 'files', icon: 'folder', labelKey: 'group.tab_files',
+    Component: FilesPanel, alwaysEnabled: true },
+  { key: 'video', icon: 'video', labelKey: 'group.tab_video',
+    Component: VideoApp, Settings: VideoSettings },
+  { key: 'music', icon: 'music', labelKey: 'group.tab_music',
+    Component: MusicApp, Settings: MusicSettings },
+  { key: 'photo', icon: 'image', labelKey: 'group.tab_photos',
+    Component: PhotosApp, Settings: PhotoSettings },
+  // The reference implementation (docs/refactor-groups.md §4.1). `dev` keeps
+  // it out of an operator's way; everything else about it is an ordinary
+  // entry, which is the point.
+  { key: 'helloworld', icon: 'chat', labelKey: 'group.tab_helloworld',
+    Component: HelloWorldApp, Settings: HelloWorldSettings, dev: true },
 ];
 
+/** Everything a reader of this page is allowed to see, in registry order. */
+function availableApps() {
+  const dev = devAppsShown();
+  return APPS.filter(a => dev || !a.dev);
+}
+
 /** The registry filtered to what this group has enabled, in registry order. */
 function visibleApps(enabledKeys) {
+  const registered = availableApps();
   const enabled = new Set(
-    enabledKeys && enabledKeys.length ? enabledKeys : APPS.map(a => a.key));
-  return APPS.filter(a => enabled.has(a.key));
+    enabledKeys && enabledKeys.length ? enabledKeys : registered.map(a => a.key));
+  return registered.filter(a => a.alwaysEnabled || enabled.has(a.key));
+}
+
+/** The apps the Settings page offers a section for, in registry order. */
+function configurableApps() {
+  return availableApps().filter(a => !a.alwaysEnabled && a.Settings);
 }
 
-export { APPS, visibleApps };
+export { APPS, availableApps, visibleApps, configurableApps };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/chat-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/chat-app-settings.js
new file mode 100644
index 0000000..96fc52f
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/chat-app-settings.js
@@ -0,0 +1,67 @@
+import { html, useState, useEffect } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { ToggleSwitch, useSaver } from './settings-ui.js';
+import { FolderPickerField } from './folder-tree.js';
+
+/**
+ * Chat's operator settings.
+ *
+ * Every app's settings pane takes the same props (see `apps.js`): the group's
+ * roots and known folders, the node's current answers, a `saveDirectories`
+ * bound to this app, and the transport for anything the app alone needs. It
+ * owns its drafts and its own busy state, and the page renders it without
+ * naming it.
+ *
+ * The directory here is unlike every other app's. Videos, Music and Photos
+ * point at folders they *read*; this is where attachments get *written*, so it
+ * has to be on a read-write root. The picker greys out the rest rather than
+ * letting the node's refusal arrive after the fact.
+ */
+function ChatSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
+  const { busy, msg, run } = useSaver();
+  const [directory, setDirectory] = useState(settings.chatDirectory || '');
+  const [linkPreview, setLinkPreview] = useState(settings.chatLinkPreview !== false);
+
+  // Re-seeded from the node's answer: another operator may be editing the
+  // same group, and their change arrives here as a prop.
+  useEffect(() => { setDirectory(settings.chatDirectory || ''); },
+            [settings.chatDirectory]);
+  useEffect(() => { setLinkPreview(settings.chatLinkPreview !== false); },
+            [settings.chatLinkPreview]);
+
+  const noWritable = !(roots || []).some((r) => r.writable);
+  const dirty = directory !== (settings.chatDirectory || '');
+
+  return html`
+    <div class="app-settings">
+      ${noWritable && html`
+        <p class="settings-hint">${t('settings_app.chat_no_writable_root')}</p>`}
+
+      <${FolderPickerField}
+        label=${t('settings_app.chat_directory_label')}
+        hint=${t('settings_app.chat_directory_hint')}
+        roots=${roots} dirs=${dirs}
+        mode="single" requireWritable=${true}
+        value=${directory} disabled=${busy || noWritable}
+        onChange=${setDirectory} />
+
+      <button class="app-save" disabled=${busy || !dirty}
+        onClick=${() => run(() => transport.setChatDirectory(directory, signFn))}>
+        ${busy ? t('settings_app.saving') : t('settings_app.save')}
+      </button>
+
+      <div class="settings-row" style="margin-top:12px">
+        <${ToggleSwitch} checked=${linkPreview} disabled=${busy}
+          onChange=${(v) => {
+            setLinkPreview(v);
+            run(() => transport.setChatLinkPreview(v, signFn));
+          }}
+          label=${t('settings_app.chat_link_preview_label')} />
+        <p class="settings-hint">${t('settings_app.chat_link_preview_hint')}</p>
+      </div>
+      ${msg && html`<p class="settings-hint">${msg}</p>`}
+    </div>
+  `;
+}
+
+export { ChatSettings };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/chat-app.js b/packages/meshbay-hub/src/meshbay_hub/static/chat-app.js
index 3bc110f..0a7ef26 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/chat-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/chat-app.js
@@ -198,8 +198,14 @@ function ChatImage({ filename, entries, transportRef, gekRef }) {
   return html`<img class="chat-att-thumb" src=${blobUrl} alt=${filename} />`;
 }
 
+// `attachRoot` is the shared directory attachments are written to: the name of
+// the first writable, available root, decided in group-page.js so Files and Chat
+// read one answer. Empty means the group has no writable root right now — every
+// root is read-only, or the one drive that was writable is unplugged — and the
+// paperclip says so rather than producing a refusal from the node.
 function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex,
-                    onPreview, mayUpload = true, onActivity, status }) {
+                    onPreview, attachRoot = '', attachDir = '',
+                    onActivity, status }) {
   const [messages, setMessages] = useState([]);
   const [hasMore, setHasMore] = useState(false);
   const [loadingOlder, setLoadingOlder] = useState(false);
@@ -479,7 +485,10 @@ function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex,
     try {
       // Two people sending IMG_1234.jpg both succeed; the node picks a free name
       // and the message has to point at the one it chose.
-      const ack = await transport.uploadFile(file);
+      // `attachDir` is the folder the operator chose in Settings; `attachRoot`
+      // is the fallback for a group where they have not chosen one yet.
+      const ack = await transport.uploadFile(
+        file, { root: attachRoot, dir: attachDir || undefined });
       const storedAs = (ack && ack.stored_as) || file.name;
       await new Promise(r => setTimeout(r, 2500));
       if (onRefreshIndex) await onRefreshIndex();
@@ -501,7 +510,7 @@ function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex,
     } finally {
       setAttaching(false);
     }
-  }, [username, onRefreshIndex, jumpToBottom]);
+  }, [username, onRefreshIndex, jumpToBottom, attachRoot, attachDir]);
 
   const onKeyDown = useCallback((e) => {
     if (e.key === 'Enter' && !e.shiftKey) {
@@ -592,12 +601,16 @@ function ChatPanel({ transportRef, username, entries, gekRef, onRefreshIndex,
         </button>
       `}
       <div class="chat-input-row">
-        ${mayUpload && html`
+        ${attachRoot ? html`
         <label class="chat-attach" title="${t('chat.attach')}">
           ${attaching ? html`<span class="spinner"></span>`
                       : html`<${Icon} name="clip" />`}
           <input type="file" style="display:none" onChange=${attachFile} disabled=${attaching} />
         </label>
+        ` : html`
+        <span class="chat-attach chat-attach-off" title="${t('chat.attach_read_only')}">
+          <${Icon} name="clip" />
+        </span>
         `}
         <textarea class="chat-input" rows="1" ref=${inputRef}
           placeholder="${t('chat.placeholder')}"
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/create-group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/create-group-page.js
index d86521f..c3b542f 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/create-group-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/create-group-page.js
@@ -5,7 +5,7 @@ import { t } from './i18n.js';
 import { HUB, hubFetch, session, navigate } from './hub-client.js';
 import * as platform from './platform.js';
 import { Icon } from './icon.js';
-import { APPS } from './apps.js';
+import { SharedDirectoriesTable } from './group-settings.js';
 
 export function CreateGroupPage(props) {
   if (platform.node.available) return html`<${CreateGroupWizard} ...${props} />`;
@@ -109,13 +109,6 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
   const [description, setDescription] = useState('');
   const [joinPolicy, setJoinPolicy] = useState('invite');
   const [roots, setRoots] = useState([]);
-  const [uploadIdx, setUploadIdx] = useState(0);
-  const [enabledApps, setEnabledApps] = useState(() => APPS.map(a => a.key));
-  const toggleWizardApp = useCallback((key) => {
-    setEnabledApps(prev => prev.includes(key)
-      ? prev.filter(k => k !== key)
-      : [...prev, key]);
-  }, []);
 
   const [setupSteps, setSetupSteps] = useState([]);
   const [setupError, setSetupError] = useState('');
@@ -166,20 +159,9 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
 
   useEffect(() => { detectNode(); }, [detectNode]);
 
-  const addRoot = useCallback(async () => {
-    const chosen = await platform.rootPicker.choose();
-    if (!chosen) return;
-    if (roots.some(r => r.path === chosen.path)) return;
-    setRoots(prev => [...prev, chosen]);
-  }, [roots]);
-
-  const removeRoot = useCallback((idx) => {
-    setRoots(prev => {
-      const next = prev.filter((_, i) => i !== idx);
-      if (uploadIdx >= next.length && next.length > 0) setUploadIdx(0);
-      return next;
-    });
-  }, [uploadIdx]);
+  const handleLocalRootsChange = useCallback((newRoots) => {
+    setRoots(newRoots);
+  }, []);
 
   const runSetup = useCallback(async () => {
     setStep(2);
@@ -189,7 +171,6 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
       { label: t('wizard.step_attach'), status: 'pending' },
     ];
     steps.push({ label: t('wizard.step_index'), status: 'pending' });
-    steps.push({ label: t('wizard.step_apps'), status: 'pending' });
     if (roots.length > 1)
       steps.push({ label: t('wizard.step_add_roots'), status: 'pending' });
     steps.push({ label: t('wizard.step_gek'), status: 'pending' });
@@ -231,11 +212,16 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
 
       // 2. Attach to node with first root
       update('running');
-      const mainRoot = roots[uploadIdx] || roots[0];
-      const attachBody = { name: name.trim(), shared_dir: mainRoot.path };
-      if (roots.length === 1 || uploadIdx === 0) {
-        attachBody.upload_dir = mainRoot.path;
-      }
+      // The first root is attached with the group, so its RW switch has to
+      // travel with it — writing it and then correcting it afterwards would
+      // leave a window where a group the operator marked read-only accepts
+      // uploads.
+      const mainRoot = roots[0];
+      const attachBody = {
+        name: name.trim(),
+        shared_dir: mainRoot.path,
+        writable: mainRoot.writable !== false,
+      };
       await platform.node.call('POST', '/api/groups/attach', attachBody);
       await platform.node.call('POST', '/api/reload');
       update('done');
@@ -247,22 +233,13 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
       update('done');
       advance();
 
-      // 4. Set enabled apps
-      update('running');
-      await withRetry(() => platform.node.call(
-        'PUT', `/api/groups/${gid}/apps`, { apps: enabledApps }));
-      update('done');
-      advance();
-
-      // 5. Add extra roots (if >1)
+      // 4. Add extra roots (if >1)
       if (roots.length > 1) {
         update('running');
-        for (let i = 0; i < roots.length; i++) {
-          if (i === (uploadIdx < roots.length ? uploadIdx : 0)) continue;
+        for (let i = 1; i < roots.length; i++) {
           const r = roots[i];
           await withRetry(() => platform.node.call('POST', `/api/groups/${gid}/roots`, {
-            path: r.path, name: r.name,
-            upload: i === uploadIdx,
+            path: r.path, name: r.name, writable: !!r.writable, removable: !!r.removable,
           }));
         }
         await platform.waitForRootsIndexed(gid, setIndexProgress);
@@ -270,13 +247,13 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
         advance();
       }
 
-      // 6. GEK init
+      // 5. GEK init
       update('running');
       await withRetry(() => platform.node.call('POST', `/api/groups/${gid}/gek`));
       update('done');
       advance();
 
-      // 7. Generate pairing code
+      // 6. Generate pairing code
       update('running');
       const pairResult = await platform.node.call('POST', '/api/operator/pair');
       if (pairResult && pairResult.code) {
@@ -293,7 +270,7 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
       update('error');
       setSetupError(platform.bridgeMessage(err));
     }
-  }, [name, description, joinPolicy, roots, uploadIdx, enabledApps, token, onCreated]);
+  }, [name, description, joinPolicy, roots, token, onCreated]);
 
   // Step 0: Node detection
   if (step === 0) {
@@ -349,7 +326,7 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
     </div>`;
   }
   if (step === 1) {
-    const canProceed = name.trim() && roots.length > 0 && enabledApps.length > 0;
+    const canProceed = name.trim() && roots.length > 0;
     return html`<div class="page-content">
       <h2>${t('wizard.title')}</h2>
       ${error && html`<div class="error-msg" style="margin-bottom:16px">${error}</div>`}
@@ -398,52 +375,11 @@ function CreateGroupWizard({ token, username, onCreated, allowPublicGroups = tru
       `}
 
       <div class="settings-section">
-        <h3 class="settings-heading">${t('members.apps_title')}</h3>
-        <p style="font-size:0.85em;color:var(--text-dim);margin-bottom:8px">
-          ${t('members.apps_hint')}</p>
-        <ul class="apps-toggle-list">
-          ${APPS.map(a => html`
-            <li key=${a.key} class="settings-row">
-              <label class="settings-label">
-                <input type="checkbox" checked=${enabledApps.includes(a.key)}
-                  onChange=${() => toggleWizardApp(a.key)} />
-                ${' '}${t(a.labelKey)}
-              </label>
-            </li>
-          `)}
-        </ul>
-        ${enabledApps.length === 0 && html`
-          <p class="error-msg">${t('members.apps_need_one')}</p>`}
-      </div>
-
-      <div class="settings-section">
         <h3 class="settings-heading">${t('wizard.directories')}</h3>
         <p style="font-size:0.85em;color:var(--text-dim);margin-bottom:8px">
           ${t('wizard.directories_hint')}</p>
-        ${roots.map((r, i) => html`
-          <div class="wizard-root" key=${r.path}>
-            <div class="wizard-root-info">
-              <${Icon} name="folder" />
-              <span class="wizard-root-name">${r.name}</span>
-              <span class="wizard-root-path">${r.path}</span>
-              ${i === uploadIdx && html`
-                <span class="node-root-badge">${t('wizard.upload_target')}</span>`}
-            </div>
-            <div class="wizard-root-actions">
-              ${roots.length > 1 && i !== uploadIdx && html`
-                <button class="btn btn-small btn-secondary"
-                  onClick=${() => setUploadIdx(i)}>
-                  ${t('wizard.set_upload')}</button>`}
-              <button class="btn btn-small btn-danger"
-                onClick=${() => removeRoot(i)}>
-                ${t('wizard.remove')}</button>
-            </div>
-          </div>
-        `)}
-        <button class="btn btn-secondary" style="margin-top:8px"
-          onClick=${addRoot}>
-          <${Icon} name="folder-plus" /> ${t('wizard.add_directory')}
-        </button>
+        <${SharedDirectoriesTable} mode="local"
+          localRoots=${roots} onLocalRootsChange=${handleLocalRootsChange} />
       </div>
 
       <div style="display:flex;gap:8px;margin-top:16px">
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js
index 195c385..4947f8c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js
@@ -26,7 +26,7 @@ import {
 function FilesPanel({
   groupId, transportRef, gekRef, status,
   entries, nodeDirs, nodeRoots, setEntries, setNodeDirs, setNodeRoots, applyIndex,
-  isNodeAdmin, operatorPaired, mayUpload, userId, setError, onPreview,
+  isNodeAdmin, operatorPaired, userId, setError, onPreview,
   showGroup, readOnly, getTransport, onRefreshIndex, showRefresh,
 }) {
   const [selected, setSelected] = useState(() => new Set());
@@ -75,6 +75,12 @@ function FilesPanel({
     e.target.value = '';
     const transport = transportRef.current;
     if (!files.length || !transport || !transport.connected) return;
+    // The folder on screen is the destination — not its root, and not a
+    // subdirectory of the node's invention. Somebody dropping a file into the
+    // folder they are looking at expects it to be in that folder.
+    const uploadDir = currentPath;
+    if (!uploadDir) return;
+    const uploadRoot = uploadDir.split('/')[0];
     setError('');
 
     for (const file of files) {
@@ -85,6 +91,8 @@ function FilesPanel({
             // Bytes the node acknowledged, not bytes read locally.
             onProgress: (sent) => onProgress(sent, file.size),
             signal,
+            root: uploadRoot,
+            dir: uploadDir,
           });
           // The node re-indexes on a filesystem event, so there is nothing to
           // wait on but the clock. Refreshing here means the file appears in
@@ -94,21 +102,49 @@ function FilesPanel({
         },
       });
     }
-  }, [applyIndex]);
+  }, [applyIndex, currentPath]);
+
+  // `null` while not creating one; a draft string while the field is open.
+  const [newDirName, setNewDirName] = useState(null);
+  const [creatingDir, setCreatingDir] = useState(false);
+
+  /**
+   * Create a folder in the directory being browsed.
+   *
+   * The name comes from a field in the toolbar rather than `window.prompt`,
+   * which **throws** in Electron — "prompt() is not supported" — and threw
+   * outside this function's try, so clicking the button did nothing at all:
+   * no folder, no error, nothing in the interface to react to. `confirm()` and
+   * `alert()` do work there and are used elsewhere; `prompt` is the one
+   * Chromium leaves to the embedder and Electron declines to implement.
+   *
+   * An inline field is better anyway — it can show the refusal next to the
+   * input instead of after the dialog has closed.
+   */
+  useEffect(() => { setNewDirName(null); }, [currentPath]);
 
-  const makeDirectory = useCallback(async () => {
+  const makeDirectory = useCallback(async (rawName) => {
     const transport = transportRef.current;
-    if (!transport || !transport.connected) return;
-    const name = prompt(t('group.mkdir_prompt'));
-    if (!name || !name.trim()) return;
+    const name = (rawName || '').trim();
+    if (!name) return;
+    if (!transport || !transport.connected) {
+      setError(t('group.mkdir_offline'));
+      return;
+    }
+    setCreatingDir(true);
     try {
-      await transport.createDirectory(currentPath, name.trim());
+      await transport.createDirectory(currentPath, name);
+      // `list_dirs` walks the filesystem rather than the index, so a folder
+      // with nothing in it is here on this very fetch.
       const indexMsg = await transport.fetchIndex();
       if (indexMsg.entries) setEntries(indexMsg.entries);
       if (indexMsg.dirs) setNodeDirs(indexMsg.dirs);
       if (indexMsg.roots) setNodeRoots(indexMsg.roots);
+      setNewDirName(null);
     } catch (err) {
       setError(err.message);
+    } finally {
+      setCreatingDir(false);
     }
   }, [currentPath]);
 
@@ -212,11 +248,27 @@ function FilesPanel({
   const unavailableHere = currentPath
     ? []
     : subdirs.filter(d => rootState.get(d) && rootState.get(d).available === false);
+  const currentRootName = currentPath ? currentPath.split('/')[0] : '';
+  const currentRoot = currentRootName ? rootState.get(currentRootName) : null;
+  // `upload` is the same answer under the name a node speaking MNP 1.0 uses;
+  // reading only `writable` there means the Upload button disappears on every
+  // node that has not been upgraded yet, which is most of them on the day the
+  // page ships.
+  const currentRootWritable = currentRoot
+    ? (currentRoot.writable !== undefined ? currentRoot.writable
+                                          : Boolean(currentRoot.upload))
+    : false;
   // A member cannot create a folder at the top of a group: that level is the
   // set of roots, which is the operator's configuration and not a directory on
   // anyone's disk. The node refuses it, so offering it would only produce an
   // error nobody can act on.
-  const canCreateDir = Boolean(currentPath) && isNodeAdmin;
+  //
+  // Otherwise the rule is the same as the Upload button's, and for the same
+  // reason the node gives: "making a directory is not a privileged act — a
+  // member who can add a file can organise where it goes". It used to require
+  // `isNodeAdmin`, which contradicted the node and hid the control from
+  // everyone who could actually use it.
+  const canCreateDir = Boolean(currentPath) && currentRootWritable && !readOnly;
 
   const breadcrumbs = currentPath ? currentPath.split('/') : [];
 
@@ -338,13 +390,47 @@ function FilesPanel({
     ${status === 'connected' && html`
       <div class="file-toolbar">
         <div class="toolbar-group">
-          ${mayUpload && html`
+          ${currentPath && currentRootWritable && html`
           <label class="tb-btn primary">
             <${Icon} name="upload" /> ${t('group.upload')}
             <input type="file" multiple style="display:none"
               onChange=${uploadFile} />
           </label>
           `}
+          ${/* Icon only: the toolbar already carries a labelled primary
+                action, and a second one beside it competes with it for the
+                width a breadcrumb trail needs. The name lives in the tooltip
+                and in aria-label, so it is not lost to anyone reading with
+                something other than their eyes. */''}
+          ${canCreateDir && newDirName === null && html`
+          <button class="tb-btn tb-btn-icon" onClick=${() => setNewDirName('')}
+            title=${t('group.mkdir')} aria-label=${t('group.mkdir')}>
+            <${Icon} name="folder-plus" />
+          </button>
+          `}
+          ${canCreateDir && newDirName !== null && html`
+          <span class="tb-mkdir">
+            <input type="text" class="tb-mkdir-input" autofocus
+              value=${newDirName} disabled=${creatingDir}
+              placeholder=${t('group.mkdir_prompt')}
+              aria-label=${t('group.mkdir')}
+              onInput=${(e) => setNewDirName(e.target.value)}
+              onKeyDown=${(e) => {
+                if (e.key === 'Enter') makeDirectory(newDirName);
+                if (e.key === 'Escape') setNewDirName(null);
+              }} />
+            <button class="tb-btn tb-btn-icon" title=${t('group.mkdir')}
+              disabled=${creatingDir || !newDirName.trim()}
+              onClick=${() => makeDirectory(newDirName)}>
+              <${Icon} name="check" />
+            </button>
+            <button class="tb-btn tb-btn-icon" title=${t('settings.cancel')}
+              disabled=${creatingDir}
+              onClick=${() => setNewDirName(null)}>
+              <${Icon} name="close" />
+            </button>
+          </span>
+          `}
         </div>
 
         <div class="breadcrumbs">
@@ -419,16 +505,40 @@ function FilesPanel({
             const full = currentPath ? currentPath + '/' + d : d;
             const inside = entriesUnder(entries, full);
             const bytes = inside.reduce((n, f) => n + (f.entry.size || 0), 0);
+            const rs = rootState.get(d);
+            const isEjected = rs && rs.ejected;
+            const isUnavail = unavailableHere.includes(d);
+            const isRemovable = rs && rs.removable;
             return html`
-            <tr class="file-row dir-row" key=${full} onClick=${() => setCurrentPath(full)}>
+            <tr class="file-row dir-row${isEjected ? ' root-ejected' : ''}" key=${full}
+                onClick=${() => { if (!isEjected) setCurrentPath(full); }}>
                 <td class="sel-cell">
                   <input type="checkbox" checked=${selected.has(dirKey(d))}
                     onClick=${(ev) => ev.stopPropagation()}
                     onChange=${() => toggle(dirKey(d))} />
                 </td>
-              <td>${unavailableHere.includes(d) ? '\u{26A0}' : '\u{1F4C1}'}</td>
-              <td>${d}${unavailableHere.includes(d) ? html`
+              <td>${isEjected ? '\u{23CF}' : isUnavail ? '\u{26A0}' : '\u{1F4C1}'}</td>
+              <td>${d}${isEjected ? html`
+                <span class="root-offline"> ${t('group.root_ejected')}</span>
+              ` : isUnavail ? html`
                 <span class="root-offline"> ${t('group.root_unavailable')}</span>
+              ` : ''}${rs && rs.writable && !isEjected ? html`
+                <span class="root-rw" title="${t('group.root_writable')}" style="margin-left:8px;opacity:0.5;font-size:0.9em">✎</span>
+              ` : ''}${isRemovable && isNodeAdmin && operatorPaired ? html`
+                <button class="btn-small root-eject-btn" title=${isEjected ? t('group.root_plug') : t('group.root_eject')}
+                  onClick=${(ev) => {
+                  ev.stopPropagation();
+                  const transport = transportRef.current;
+                  if (!transport) return;
+                  const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
+                  const signFn = (sk && window.MeshBayKeys)
+                    ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
+                    : null;
+                  const fn = isEjected
+                    ? () => transport.plugRoot(groupId, d, signFn)
+                    : () => transport.ejectRoot(groupId, d, signFn);
+                  fn().catch((err) => setError(err.message));
+                }}>${isEjected ? '\u{1F50C}' : '\u{23CF}'}</button>
               ` : ''}</td>
               <td class="file-size">${inside.length ? formatSize(bytes) : ''}</td>
               ${showGroup && html`<td></td>`}
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/folder-tree.js b/packages/meshbay-hub/src/meshbay_hub/static/folder-tree.js
new file mode 100644
index 0000000..6e6dfad
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/folder-tree.js
@@ -0,0 +1,298 @@
+import {
+  html, useState, useEffect, useMemo, useCallback, useRef,
+} from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { Icon } from './icon.js';
+
+/**
+ * A modal folder picker over a group's shared directories.
+ *
+ * It replaces the flat `<select>` of depth-indented paths every app settings
+ * pane used to carry. That control was defensible while an app picked one
+ * folder once; with several apps picking several folders each, a list of a few
+ * hundred `Media/Films/Action/1999` strings is not something anyone reads.
+ *
+ * **There is no folder-browsing protocol, and this does not add one.** The
+ * whole tree is derived from paths the client already holds — every entry's
+ * folder and every directory the index reports — so opening this asks the node
+ * nothing. That also means it shows exactly what the group's index contains:
+ * an empty folder the node never indexed is not in here, because as far as the
+ * group is concerned it does not exist.
+ *
+ * Props:
+ *   roots          — the group's roots ({ name, writable, removable, ejected,
+ *                    available }), for the badges and the writable rule
+ *   dirs           — every known directory path, `Media/Films` style
+ *   mode           — "single" (default) or "multi"
+ *   requireWritable— grey out roots that do not accept writes, for a
+ *                    destination rather than a view (Chat's attachments)
+ *   selected       — current selection: a string in single mode, an array in
+ *                    multi
+ *   onConfirm(sel) — called with the same shape on OK
+ *   onCancel()
+ */
+function FolderTreePicker({
+  roots, dirs, mode = 'single', requireWritable = false,
+  selected, onConfirm, onCancel,
+}) {
+  const multi = mode === 'multi';
+  const initial = useMemo(() => {
+    if (multi) return new Set(selected || []);
+    return new Set(selected ? [selected] : []);
+  }, []);  // eslint-disable-line -- the initial selection only, never a reset
+
+  const [picked, setPicked] = useState(initial);
+  const [expanded, setExpanded] = useState(() => new Set());
+  const panelRef = useRef(null);
+
+  // Escape closes, and the panel takes focus so it does — a modal that only
+  // responds to the mouse is one a keyboard user cannot leave.
+  useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') onCancel(); };
+    window.addEventListener('keydown', onKey);
+    if (panelRef.current) panelRef.current.focus();
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onCancel]);
+
+  // Every ancestor of every known path, so a folder is reachable even when
+  // only something several levels below it was ever indexed.
+  const nodes = useMemo(() => {
+    const all = new Set();
+    for (const d of (dirs || [])) {
+      if (!d) continue;
+      const parts = d.split('/');
+      for (let i = 1; i <= parts.length; i++) all.add(parts.slice(0, i).join('/'));
+    }
+    // A root with nothing under it is still a choice: pointing an app at a
+    // library that has not been scanned yet is exactly what an operator does
+    // right after adding the directory.
+    for (const r of (roots || [])) all.add(r.name);
+    return all;
+  }, [dirs, roots]);
+
+  const childrenOf = useMemo(() => {
+    const map = new Map();
+    for (const path of nodes) {
+      const cut = path.lastIndexOf('/');
+      const parent = cut === -1 ? '' : path.slice(0, cut);
+      if (!map.has(parent)) map.set(parent, []);
+      map.get(parent).push(path);
+    }
+    for (const list of map.values()) {
+      list.sort((a, b) => a.localeCompare(b, undefined, { numeric: true }));
+    }
+    return map;
+  }, [nodes]);
+
+  const rootByName = useMemo(
+    () => new Map((roots || []).map((r) => [r.name, r])), [roots]);
+
+  // A path's own root decides whether it can be picked: writability is a
+  // property of the root, and everything under it inherits.
+  const rootOf = useCallback(
+    (path) => rootByName.get(path.split('/')[0]) || null, [rootByName]);
+
+  const selectable = useCallback((path) => {
+    if (!requireWritable) return true;
+    const root = rootOf(path);
+    return Boolean(root && root.writable);
+  }, [requireWritable, rootOf]);
+
+  const toggleExpand = useCallback((path) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path); else next.add(path);
+      return next;
+    });
+  }, []);
+
+  const choose = useCallback((path) => {
+    if (!selectable(path)) return;
+    setPicked((prev) => {
+      if (!multi) return new Set(prev.has(path) ? [] : [path]);
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path); else next.add(path);
+      return next;
+    });
+  }, [multi, selectable]);
+
+  // Everything already chosen is expanded on open, so the selection is
+  // visible rather than folded away inside a collapsed branch.
+  useEffect(() => {
+    const open = new Set();
+    for (const path of initial) {
+      const parts = path.split('/');
+      for (let i = 1; i < parts.length; i++) open.add(parts.slice(0, i).join('/'));
+    }
+    setExpanded(open);
+  }, [initial]);
+
+  const renderNode = (path, depth) => {
+    const kids = childrenOf.get(path) || [];
+    const isOpen = expanded.has(path);
+    const isRoot = depth === 0;
+    const root = isRoot ? rootByName.get(path) : null;
+    const name = isRoot ? path : path.slice(path.lastIndexOf('/') + 1);
+    const can = selectable(path);
+    const chosen = picked.has(path);
+
+    return html`
+      <li key=${path} class="ftp-node">
+        <div class="ftp-row ${chosen ? 'chosen' : ''} ${can ? '' : 'blocked'}"
+             style="padding-left:${depth * 18}px"
+             title=${can ? path : t('folder_tree.read_only_blocked')}>
+          <button class="ftp-twisty" disabled=${!kids.length}
+            aria-label=${isOpen ? t('folder_tree.collapse') : t('folder_tree.expand')}
+            onClick=${() => toggleExpand(path)}>
+            ${kids.length ? (isOpen ? '−' : '+') : ' '}
+          </button>
+          <button class="ftp-label" disabled=${!can} onClick=${() => choose(path)}>
+            <${Icon} name="folder" />
+            <span class="ftp-name">${name}</span>
+            ${isRoot && root && html`
+              <span class="ftp-badge ${root.writable ? 'rw' : 'ro'}">
+                ${root.writable ? t('node.root_rw') : t('node.root_ro')}
+              </span>`}
+            ${isRoot && root && root.ejected && html`
+              <span class="ftp-badge warn">${t('group.root_ejected')}</span>`}
+            ${isRoot && root && !root.ejected && root.available === false && html`
+              <span class="ftp-badge warn">${t('node.unavailable')}</span>`}
+            ${chosen && html`<span class="ftp-check">✓</span>`}
+          </button>
+        </div>
+        ${isOpen && kids.length > 0 && html`
+          <ul class="ftp-children">
+            ${kids.map((child) => renderNode(child, depth + 1))}
+          </ul>
+        `}
+      </li>
+    `;
+  };
+
+  const topLevel = childrenOf.get('') || [];
+  const chosenList = [...picked].sort();
+  const noWritableRoot = requireWritable
+    && !(roots || []).some((r) => r.writable);
+
+  return html`
+    <div class="ftp-backdrop" onClick=${onCancel}>
+      <div class="ftp-panel" tabindex="-1" ref=${panelRef}
+           onClick=${(e) => e.stopPropagation()}>
+        <h3 class="ftp-title">${t(multi ? 'folder_tree.title_multi'
+                                        : 'folder_tree.title_single')}</h3>
+        ${requireWritable && html`
+          <p class="settings-hint">${
+            noWritableRoot ? t('folder_tree.no_writable_root')
+                           : t('folder_tree.writable_only')}</p>`}
+
+        ${topLevel.length === 0 ? html`
+          <p class="settings-hint">${t('folder_tree.empty')}</p>
+        ` : html`
+          <ul class="ftp-tree">${topLevel.map((p) => renderNode(p, 0))}</ul>
+        `}
+
+        <div class="ftp-selection">
+          ${chosenList.length
+            ? chosenList.map((p) => html`<code key=${p} class="ftp-chip">${p}</code>`)
+            : html`<span class="settings-hint">${t('folder_tree.nothing_selected')}</span>`}
+        </div>
+
+        <div class="ftp-actions">
+          <button class="btn btn-small" onClick=${onCancel}>
+            ${t('settings.cancel')}
+          </button>
+          ${/* OK is offered with nothing selected on purpose: clearing an
+                app's directories is a real choice, and the only way to make
+                it. */''}
+          <button class="btn btn-small btn-secondary"
+            onClick=${() => onConfirm(multi ? chosenList : (chosenList[0] || ''))}>
+            ${t('folder_tree.confirm')}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+/**
+ * The chosen folders, as a table, plus the button that opens the picker.
+ *
+ * Not a `.settings-row`: that class is `display:flex; justify-content:
+ * space-between`, so a label, a hint and a value laid out inside one end up
+ * spread across a single line in whatever order they were written — which is
+ * how the first version of this read as three unrelated fragments per app.
+ *
+ * A table rather than a row of chips because these are lists now. Videos and
+ * Music can hold several folders, Photos routinely does, and a wrapped run of
+ * chips gives no column to scan and nowhere to put a per-row control. One
+ * folder per line, removable where it sits, in the same shape as the shared
+ * directories table above it — the operator is looking at two lists of
+ * directories on one page and they should read alike.
+ */
+function FolderPickerField({
+  label, hint, roots, dirs, mode = 'single', requireWritable = false,
+  value, onChange, disabled,
+}) {
+  const [open, setOpen] = useState(false);
+  const multi = mode === 'multi';
+  const chosen = multi ? (value || []) : (value ? [value] : []);
+
+  const removeAt = (path) => {
+    if (!multi) { onChange(''); return; }
+    onChange(chosen.filter((p) => p !== path));
+  };
+
+  return html`
+    <div class="folder-field">
+      <div class="folder-field-head">
+        <h4 class="folder-field-label">${label}</h4>
+        ${hint && html`<p class="settings-hint">${hint}</p>`}
+      </div>
+
+      ${chosen.length > 0 && html`
+        <table class="shared-dirs-tbl folder-field-tbl">
+          <tbody>
+            ${chosen.map((path) => html`
+              <tr key=${path}>
+                <td class="sdt-col-dir">
+                  <span class="sdt-dir-name">
+                    <${Icon} name="folder" />
+                    ${path}
+                  </span>
+                </td>
+                <td class="sdt-col-actions">
+                  <button class="sdt-action-btn sdt-action-danger"
+                    disabled=${disabled}
+                    title=${t('folder_tree.remove')}
+                    onClick=${() => removeAt(path)}>\u{2715}</button>
+                </td>
+              </tr>
+            `)}
+          </tbody>
+        </table>
+      `}
+
+      <div class="folder-field-actions">
+        ${chosen.length === 0 && html`
+          <span class="settings-hint">${t('folder_tree.nothing_selected')}</span>`}
+        <button class="btn btn-small btn-secondary" disabled=${disabled}
+          onClick=${() => setOpen(true)}>
+          <${Icon} name="folder" />
+          ${' '}${chosen.length && multi ? t('folder_tree.add')
+                                         : t('folder_tree.choose')}
+        </button>
+      </div>
+
+      ${open && html`
+        <${FolderTreePicker}
+          roots=${roots} dirs=${dirs} mode=${mode}
+          requireWritable=${requireWritable}
+          selected=${value}
+          onCancel=${() => setOpen(false)}
+          onConfirm=${(sel) => { setOpen(false); onChange(sel); }} />
+      `}
+    </div>
+  `;
+}
+
+export { FolderTreePicker, FolderPickerField };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
index 466af53..6f41426 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
@@ -1,5 +1,5 @@
 import {
-  html, useState, useEffect, useCallback, useRef,
+  html, useState, useEffect, useCallback, useRef, useMemo,
 } from './vendor/htm-preact.js';
 import { t } from './i18n.js';
 import { Icon } from './icon.js';
@@ -9,7 +9,7 @@ import {
   HUB, session, cacheGroupIndex, hubFetch, ensureFreshToken,
   _loadBundleKey, _loadRecoveryKey, _storeBundleKey,
 } from './hub-client.js';
-import { visibleApps } from './apps.js';
+import { APPS, visibleApps } from './apps.js';
 import { GroupName } from './group-name.js';
 import { FilePreview } from './files-app.js';
 import { VideoPlayer } from './video-player.js';
@@ -88,9 +88,10 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   const [nodeRoots, setNodeRoots] = useState([]);
 
   const [isNodeAdmin, setIsNodeAdmin] = useState(false);
-  // Whether ordinary members may upload here. The node decides and enforces it;
-  // this only says whether to offer the controls. Defaults to true so a node
-  // that predates the setting behaves as it always did.
+  // Legacy: the group-wide upload switch a node speaking MNP 1.0 sends on its
+  // handshake ack. Per-root `writable` replaced it, and this is read only when
+  // the roots carry no flags at all — see `attachRoot` below. Defaults to true
+  // so such a node behaves as it always did.
   const [memberUpload, setMemberUpload] = useState(true);
   // Which applications this group has enabled, from the node. Falls back to
   // every registered app when a node predates the setting (or hasn't answered
@@ -127,15 +128,22 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   // TMDB on/off + whether a custom token is set, node-wide (not per-group) —
   // docs/mediacenter.md §5.5. Null until the handshake ack arrives.
   const [tmdbConfig, setTmdbConfig] = useState(null);
-  // Which folder is the Videos app's entry point for this group — ''
-  // (the default) means the whole group index. Set from Files, per-group.
-  const [videoRoot, setVideoRoot] = useState('');
-  // Same shape — the Music app's own entry point.
-  const [audioRoot, setAudioRoot] = useState('');
-  // The Photos app's entry points — a *list*, unlike videoRoot/audioRoot
-  // above (docs/photos.md §2.1: a photo library is routinely scattered
-  // across several folders). Empty means nothing configured yet.
-  const [photoRoots, setPhotoRoots] = useState([]);
+  // Which folders each app works over. One shape for all of them — a list,
+  // always, even where an app only wants one (docs/refactor-groups.md §1.6):
+  // Videos and Music were single values, which meant a library spread over two
+  // drives could not be described at all. Empty means nothing configured yet,
+  // which every app reads as "show nothing", never "the whole group index".
+  const [appDirectories, setAppDirectories] = useState({});
+  const appDirs = useCallback(
+    (key) => appDirectories[key] || [], [appDirectories]);
+  // Where chat attachments are written — one directory, because Chat has one
+  // destination rather than a set of folders it reads.
+  const [chatDirectory, setChatDirectory] = useState('');
+  const [chatLinkPreview, setChatLinkPreview] = useState(true);
+  // Whether this node speaks the operations MNP 1.1 added. False for one that
+  // predates them, and the Settings page then offers what that node can
+  // actually do rather than controls whose messages it drops unanswered.
+  const [nodeSupportsAppOps, setNodeSupportsAppOps] = useState(false);
   // MusicBrainz on/off (per-group) — docs/musicbay.md §3.2.
   const [musicbrainzConfig, setMusicbrainzConfig] = useState(null);
   const onPlayQueue = useCallback((tracks, startIndex) => {
@@ -225,8 +233,9 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
       if (indexMsg.roots) setNodeRoots(indexMsg.roots);
     cacheGroupIndex(groupId, group ? group.name : groupId,
                     group ? group.owner_username : null, fresh,
-                    { videoRoot, audioRoot, photoRoots });
-  }, [groupId, group, videoRoot, audioRoot, photoRoots]);
+                    { video: appDirs('video'), music: appDirs('music'),
+                      photo: appDirs('photo') });
+  }, [groupId, group, appDirs]);
 
   // additions/deletions/updates (daemon.py _broadcast_index_change, once
   // there is a previous snapshot to diff against) — applied on top of
@@ -235,6 +244,13 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   // enrichment (duration/thumb_hash/display_title/...) arriving for a file
   // already in the table — same id, new fields (see group_index.py diff()).
   const applyIndexDelta = useCallback((deltaMsg) => {
+    // The roots table rides on the delta as of MNP 1.1. Before that it
+    // travelled only on a full index_sync, which is sent on request — so a
+    // root added, removed, ejected or plugged by anyone left every other
+    // client's directory table stale until they reloaded the page.
+    if (Array.isArray(deltaMsg.roots) && deltaMsg.roots.length) {
+      setNodeRoots(deltaMsg.roots);
+    }
     setEntries((prev) => {
       const deletions = new Set(deltaMsg.deletions || []);
       const kept = prev.filter((e) => !deletions.has(e.id));
@@ -248,10 +264,11 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
       const fresh = updated.concat(additions);
       cacheGroupIndex(groupId, group ? group.name : groupId,
                     group ? group.owner_username : null, fresh,
-                    { videoRoot, audioRoot, photoRoots });
+                    { video: appDirs('video'), music: appDirs('music'),
+                      photo: appDirs('photo') });
       return fresh;
     });
-  }, [groupId, group, videoRoot, audioRoot, photoRoots]);
+  }, [groupId, group, appDirs]);
 
   useEffect(() => {
     let cancelled = false;
@@ -325,9 +342,20 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
           tokenCustomized: !!ack.tmdb_token_customized,
           language: ack.tmdb_language || '',
         });
-        setVideoRoot(ack.video_root || '');
-        setAudioRoot(ack.audio_root || '');
-        setPhotoRoots(ack.photo_roots || []);
+        // The plural form when the node speaks it, the old scalars when it
+        // does not — an MNP 1.0 node sends only the latter, and reading its
+        // missing `video_directories` as "nothing configured" would empty a
+        // working Videos tab.
+        setAppDirectories({
+          video: ack.video_directories
+            || (ack.video_root ? [ack.video_root] : []),
+          music: ack.music_directories
+            || (ack.audio_root ? [ack.audio_root] : []),
+          photo: ack.photo_directories || ack.photo_roots || [],
+        });
+        setNodeSupportsAppOps(transport.supportsAppOps);
+        setChatDirectory(ack.chat_directory || '');
+        setChatLinkPreview(ack.chat_link_preview !== false);
         setMusicbrainzConfig({
           enabled: ack.musicbrainz_enabled !== false,
         });
@@ -343,11 +371,29 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
         // recent value.
         transport.onTmdbConfig = (cfg) => setTmdbConfig((prev) => ({ ...(prev || {}), ...cfg }));
         transport.onTmdbEnabled = (enabled) => setTmdbConfig((prev) => ({ ...(prev || {}), enabled }));
-        transport.onVideoRoot = (path) => setVideoRoot(path);
-        transport.onAudioRoot = (path) => setAudioRoot(path);
-        transport.onPhotoRoots = (roots) => setPhotoRoots(roots);
+        // One handler for every app's directories, plus the three older
+        // per-app messages a node that predates the generic op still sends.
+        transport.onAppDirectories = (app, dirs) =>
+          setAppDirectories((prev) => ({ ...prev, [app]: dirs }));
+        transport.onVideoRoot = (path) => setAppDirectories(
+          (prev) => ({ ...prev, video: path ? [path] : [] }));
+        transport.onAudioRoot = (path) => setAppDirectories(
+          (prev) => ({ ...prev, music: path ? [path] : [] }));
+        transport.onPhotoRoots = (roots) => setAppDirectories(
+          (prev) => ({ ...prev, photo: roots || [] }));
+        transport.onChatDirectory = (path) => setChatDirectory(path);
+        transport.onChatLinkPreview = (on) => setChatLinkPreview(on);
         transport.onMusicbrainzEnabled = (enabled) =>
           setMusicbrainzConfig((prev) => ({ ...(prev || {}), enabled }));
+        transport.onRootsChanged = (msg) => {
+          // `msg.roots &&` would accept `[]`, and an empty array is truthy —
+          // so a node that could not describe its roots would blank the
+          // operator's table on an op that actually succeeded. A group always
+          // has at least one root, so nothing legitimate is dropped here.
+          if (Array.isArray(msg.roots) && msg.roots.length) {
+            setNodeRoots(msg.roots);
+          }
+        };
         // The node's own scan (a root added while we were already connected,
         // or reconcile catching one back up) — never the entries, just
         // enough to animate the sidebar dot. Guaranteed a final push at the
@@ -535,9 +581,35 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
     }
   }, [groupId, token, descDraft, onGroupUpdated]);
 
-  // Asked in two places — the Files toolbar and the chat composer — so it is
-  // answered once. The operator is never locked out of their own node.
-  const mayUpload = memberUpload || isNodeAdmin;
+  // Where an attachment goes, answered once for the whole page.
+  //
+  // Files does not use this — it uploads into the root being browsed, which is
+  // the only unambiguous answer once a group can have several writable roots.
+  // Chat has no folder to browse, so it needs one picked for it, and this is
+  // the same rule the node applies when a client names no root at all. It
+  // becomes an operator-chosen directory in phase 2 (refactor-groups.md §1.7).
+  //
+  // `memberUpload` is the fallback for a node still speaking MNP 1.0, whose
+  // roots carry no `writable` at all: there, the single upload root is the one
+  // the node marked, and the ack's computed flag is all we get.
+  const writableRoots = useMemo(
+    () => nodeRoots.filter((r) => r.writable && r.available !== false),
+    [nodeRoots]);
+  const legacyNode = nodeRoots.length > 0
+    && nodeRoots.every((r) => r.writable === undefined);
+  // The operator's chosen attachment folder wins where there is one — that is
+  // what the Chat settings pane is for. Its root has to be writable and
+  // present, or the choice is stale (they made it read-only, or ejected the
+  // drive) and the fallback is better than a refusal at send time.
+  const chatDirRoot = chatDirectory ? chatDirectory.split('/')[0] : '';
+  const chatDirUsable = Boolean(
+    chatDirRoot && writableRoots.some((r) => r.name === chatDirRoot));
+  const attachDir = chatDirUsable ? chatDirectory : '';
+  const attachRoot = chatDirUsable ? chatDirRoot
+    : writableRoots.length ? writableRoots[0].name
+    : (legacyNode && memberUpload
+        ? (nodeRoots.find((r) => r.upload) || nodeRoots[0]).name
+        : '');
 
   // A single dispatcher so any app can open the right modal without owning
   // video/preview state itself — Files' table and Chat's attachments both
@@ -566,14 +638,55 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
     setPreviewEntry(entry);
   }, [entries, onPlayQueue, onStopMusic]);
 
+  const unavailRoots = useMemo(() => {
+    const s = new Set();
+    for (const r of nodeRoots) if (!r.available) s.add(r.name);
+    return s;
+  }, [nodeRoots]);
+  const availableEntries = useMemo(
+    () => entries.filter((e) => {
+      const root = (e.path || '').split('/')[0];
+      return !root || !unavailRoots.has(root);
+    }), [entries, unavailRoots]);
+
+  // Everything the operator settings panes read, in one object. Built here
+  // because this is where the state already lives, and passed through
+  // `group-settings.js` untouched — that page renders the panes without
+  // knowing what any of them is for, which is what makes adding an app a
+  // registry entry rather than an edit to the page.
+  // `<key>Directories` for every registered app, derived from the registry
+  // rather than written out. Naming them here would mean adding an app
+  // required editing this file, which is the one thing the plugin
+  // architecture is supposed to have removed — and the reference app
+  // (docs/refactor-groups.md §4.1) is what made the difference visible.
+  const perAppDirectories = useMemo(() => {
+    const out = {};
+    for (const app of APPS) out[`${app.key}Directories`] = appDirs(app.key);
+    return out;
+  }, [appDirs]);
+
+  const appSettings = useMemo(() => ({
+    ...perAppDirectories,
+    chatDirectory,
+    chatLinkPreview,
+    tmdbEnabled: tmdbConfig ? tmdbConfig.enabled !== false : true,
+    tmdbLanguage: (tmdbConfig && tmdbConfig.language) || '',
+    tmdbTokenCustomized: Boolean(tmdbConfig && tmdbConfig.tokenCustomized),
+    musicbrainzEnabled: musicbrainzConfig
+      ? musicbrainzConfig.enabled !== false : true,
+  }), [perAppDirectories, chatDirectory, chatLinkPreview, tmdbConfig,
+       musicbrainzConfig]);
+
   const commonProps = {
     groupId, transportRef, gekRef, status, username,
-    entries, nodeDirs, nodeRoots, setEntries, setNodeDirs, setNodeRoots, applyIndex,
-    isNodeAdmin, operatorPaired, mayUpload, userId, setError, onPreview,
+    entries, availableEntries, nodeDirs, nodeRoots,
+    setEntries, setNodeDirs, setNodeRoots, applyIndex,
+    isNodeAdmin, operatorPaired, attachRoot, attachDir, userId, setError, onPreview,
     onRefreshIndex: refreshIndex, onActivity: touchActivity,
-    videoRoot, onVideoRoot: (path) => setVideoRoot(path),
-    audioRoot, onAudioRoot: (path) => setAudioRoot(path),
-    photoRoots, onPhotoRoots: (roots) => setPhotoRoots(roots),
+    // Plural everywhere: Videos and Music read a list now, and Photos always
+    // did. The scalar `videoRoot`/`audioRoot` shapes survive only on the wire,
+    // for a node that speaks MNP 1.0 — nothing in the client carries them.
+    ...perAppDirectories,
     tmdbConfig,
     musicbrainzConfig, onPlayQueue,
   };
@@ -699,24 +812,20 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
             transportRef=${transportRef} gekRef=${gekRef}
             isNodeAdmin=${isNodeAdmin} userId=${userId}
             operatorPaired=${operatorPaired} connected=${status === 'connected'}
-            memberUpload=${memberUpload}
-            onMemberUpload=${(allowed) => setMemberUpload(allowed)}
+            mnpRoots=${nodeRoots}
             enabledApps=${enabledApps}
             onEnabledApps=${(keys) => setEnabledApps(keys)}
             scanSettings=${scanSettings}
             onScanSettings=${(s) => setScanSettings(s)}
-            tmdbConfig=${tmdbConfig}
-            onTmdbConfig=${(cfg) => setTmdbConfig((prev) => ({ ...(prev || {}), ...cfg }))}
-            onTmdbEnabled=${(enabled) => setTmdbConfig((prev) => ({ ...(prev || {}), enabled }))}
-            musicbrainzConfig=${musicbrainzConfig}
-            onMusicbrainzEnabled=${(enabled) => setMusicbrainzConfig((prev) => ({ ...(prev || {}), enabled }))}
             entries=${entries} nodeDirs=${nodeDirs}
-            videoRoot=${videoRoot}
-            onVideoRoot=${(path) => setVideoRoot(path)}
-            audioRoot=${audioRoot}
-            onAudioRoot=${(path) => setAudioRoot(path)}
-            photoRoots=${photoRoots}
-            onPhotoRoots=${(roots) => setPhotoRoots(roots)}
+            appSettings=${appSettings}
+            nodeSupportsAppOps=${nodeSupportsAppOps}
+            ${/* The saving pane already knows what it asked for; this is so
+                  the page's own copy moves at the same time, rather than
+                  waiting for the ack it will not be handed (transport.js
+                  resolves an admin ack against the pending request). */''}
+            onAppDirectories=${(app, dirs) =>
+              setAppDirectories((prev) => ({ ...prev, [app]: dirs }))}
             onRefreshIndex=${refreshIndex}
             onLeft=${onLeft}
             onPaired=${() => setOperatorPaired(true)} />
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
index 1c6ca71..c80cff5 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
@@ -1,179 +1,381 @@
 import {
   html, useState, useEffect, useCallback, useMemo, useRef,
 } from './vendor/htm-preact.js';
-import { t, getLocale, LOCALES } from './i18n.js';
+import { t } from './i18n.js';
 import { Icon } from './icon.js';
+import { CollapsibleSection, ToggleSwitch } from './settings-ui.js';
 import { hubFetch, navigate } from './hub-client.js';
-import { APPS } from './apps.js';
+import { availableApps, configurableApps } from './apps.js';
 import * as platform from './platform.js';
 
-// MeshBay's own locale codes (i18n.js LOCALES) to the language tag TMDB
-// expects — the two don't share a format (MeshBay's "en" vs TMDB's
-// required region, "en-US"). Used only to pre-fill the TMDB language field
-// with the operator's own current UI language, a reasonable default they
-// can still change; the node never guesses this on its own.
-const TMDB_LANGUAGE_BY_LOCALE = {
-  en: 'en-US', fr: 'fr-FR', es: 'es-ES', 'pt-BR': 'pt-BR', 'zh-CN': 'zh-CN',
-  ja: 'ja-JP', de: 'de-DE', it: 'it-IT', nl: 'nl-NL', pl: 'pl-PL',
-};
 
-/**
- * A settings-section that folds — every section but the ones that are
- * really just a form to fill in (invite, pair-operator, approve-device):
- * hiding an input the operator is mid-typing-into behind a click they'd
- * have to undo is friction with nothing to show for it, but a section that
- * is only ever glanced at once it's configured (TMDB, scan tuning, the
- * danger zone) benefits from staying out of the way otherwise. `title` (an
- * already-built string/vnode) wins over `titleKey` when both are given —
- * the members-table heading needs a live count baked in, not just a
- * lookup.
- */
-function CollapsibleSection({ titleKey, title, defaultOpen = true, children }) {
-  const [open, setOpen] = useState(defaultOpen);
-  return html`
-    <div class="settings-section">
-      <button type="button" class="settings-collapsible-header"
-        onClick=${() => setOpen((v) => !v)} aria-expanded=${open}>
-        <h3 class="settings-heading">${title != null ? title : t(titleKey)}</h3>
-        <${Icon} name="chevron" cls=${open ? 'video-flat-chevron open' : 'video-flat-chevron'} />
-      </button>
-      ${open && html`<div class="settings-collapsible-body">${children}</div>`}
-    </div>
-  `;
-}
+// ── Shared Directories Table ────────────────────────────────────────────
 
 /**
- * A modern on/off switch — replaces a plain checkbox or a "Turn on/off"
- * button wherever the setting itself is a straight binary (uploads
- * allowed, TMDB/MusicBrainz enabled). Still a real <input type="checkbox">
- * under the hood (keyboard/screen-reader behaviour for free), just
- * restyled — see .toggle-switch in style.css.
+ * A group's root directories, and the operator's controls over them.
+ *
+ * One component, two modes, because the Create Group wizard and the Settings
+ * page were drifting apart while showing the same thing:
+ *
+ *   mode="live"   — a hosted group. Every change is a signed operator op sent
+ *                   over MNP, or the loopback API when the node is on this
+ *                   machine and there is no live connection.
+ *   mode="local"  — the wizard, before the group exists. Changes are held in
+ *                   an array the caller owns; nothing is persisted until the
+ *                   group is attached.
+ *
+ * **Both paths matter and neither is optional.** The operator of a node is not
+ * necessarily sitting at it: they may be signing in from any browser, and the
+ * only thing that reaches their node from there is MNP. An earlier version of
+ * this read its roots exclusively from the loopback API, which resolves to
+ * "not available" in a browser — so the section rendered for nobody on the
+ * web, while the controls it replaced had worked there. `mnpRoots` is the
+ * source whenever a connection exists; the loopback list is the fallback for
+ * a local node that is not currently connected (a group still scanning, say).
+ *
+ * Props:
+ *   roots          — the node's current roots: { name, path, writable,
+ *                    removable, ejected, available, kind }
+ *   groupId        — the group id
+ *   transport      — MeshBayTransport instance, or null when not connected
+ *   signFn         — signing function for admin ops
+ *   nodeDetected   — whether the loopback node API answers
+ *   readOnly       — suppress every edit control
+ *   onRootsChange  — called after a change, to re-read the loopback list
+ *   onRefreshIndex — full index refresh. Not called after a root change: see
+ *                    `run()` for why the node's own push is what settles it
+ *   mode           — "live" (default) or "local"
+ *   localRoots / onLocalRootsChange — the array, in "local" mode
  */
-function ToggleSwitch({ checked, onChange, disabled, label }) {
-  return html`
-    <label class="toggle-switch ${disabled ? 'toggle-switch-disabled' : ''}">
-      <input type="checkbox" checked=${checked} disabled=${disabled}
-        onChange=${(e) => onChange(e.target.checked)} />
-      <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
-      ${label != null && html`<span class="toggle-switch-label">${label}</span>`}
-    </label>
-  `;
-}
+function SharedDirectoriesTable({ roots, groupId, transport, signFn,
+                                 nodeDetected: nodeAvail, readOnly,
+                                 onRootsChange, onRefreshIndex,
+                                 mode = 'live',
+                                 localRoots, onLocalRootsChange }) {
+  const isLocal = mode === 'local';
+  const serverRoots = isLocal ? (localRoots || []) : (roots || []);
+  const [busy, setBusy] = useState(false);
+  // `{ text, error }` — a refusal has to look like one. Every message here was
+  // a `settings-hint`, which is dim grey body text, so "two roots would both
+  // be called uploads" read as a footnote to the section rather than as the
+  // reason nothing happened.
+  const [msg, setMsg] = useState(null);
+  const [indexProgress, setIndexProgress] = useState(null);
+  const say = useCallback((text) => setMsg(text ? { text, error: false } : null), []);
+  const refuse = useCallback((text) => setMsg({ text, error: true }), []);
 
-/**
- * Which folder is an app's entry point for this group — the shared shape
- * behind both the Videos and Music root pickers (docs/musicbay.md's
- * amended §2.1): a depth-indented <select> over every folder the group's
- * index already knows about, a Save button that only enables once the
- * draft actually differs, and a confirm prompt only when replacing an
- * *already-set* root (setting one for the first time has nothing to lose).
- */
-function RootFolderRow({
-  icon, titleKey, hintKey, folders, value, draft, onDraftChange,
-  busy, msg, onSave, noneKey, saveKey,
-}) {
-  return html`
-    <div class="settings-root-row">
-      <div class="settings-root-row-title">
-        <${Icon} name=${icon} />
-        <h4>${t(titleKey)}</h4>
-      </div>
-      <p class="settings-hint">${t(hintKey)}</p>
-      <div class="settings-row">
-        <label class="settings-label">
-          <select value=${draft} disabled=${busy} onChange=${e => onDraftChange(e.target.value)}>
-            <option value="">${t(noneKey)}</option>
-            ${folders.map(p => html`
-              <option key=${p} value=${p}>
-                ${'  '.repeat(p.split('/').length - 1)}${p.split('/').pop()}
-              </option>
-            `)}
-          </select>
-        </label>
+  // Rendered at the foot of the section, under the Add button — the last thing
+  // below the control that caused it, rather than above a table the eye has
+  // already moved past.
+  const message = !msg ? '' : html`
+    <p class=${msg.error ? 'error-msg' : 'settings-hint'}
+       role=${msg.error ? 'alert' : 'status'}
+       style="margin-top:10px">${msg.text}</p>`;
+  const [pathDraft, setPathDraft] = useState('');
+  const [addingByPath, setAddingByPath] = useState(false);
+
+  // A toggle has to move under the finger, and the answer only comes back
+  // when the node has signed, written node.toml and pushed the new table.
+  // The patch is therefore held until the incoming `roots` actually agrees
+  // with it — clearing it when the request resolves (which is what this did)
+  // drops it in the frame *before* the new table arrives, so the switch
+  // visibly snaps back and then forward again.
+  const [optimistic, setOptimistic] = useState({});
+  useEffect(() => {
+    setOptimistic((prev) => {
+      const keys = Object.keys(prev);
+      if (!keys.length) return prev;
+      const next = {};
+      let changed = false;
+      for (const name of keys) {
+        const server = serverRoots.find(r => r.name === name);
+        const patch = prev[name];
+        // Gone from the table, or the server now says what we asked for:
+        // either way this patch has nothing left to hide.
+        const settled = !server
+          || Object.keys(patch).every(k => server[k] === patch[k]);
+        if (settled) changed = true; else next[name] = patch;
+      }
+      return changed ? next : prev;
+    });
+  }, [serverRoots]);
+
+  const displayRoots = serverRoots.map(r =>
+    optimistic[r.name] ? { ...r, ...optimistic[r.name] } : r);
+
+  // Paths are the operator's own view and do not cross MNP: the roots table
+  // rides in the index payload, which every member receives, and it tells them
+  // what exists and whether it is readable — never where on the operator's
+  // disk it lives. So the column appears when the answer is actually
+  // available (the loopback API, which is already this machine only) and is
+  // left out otherwise, rather than printing a row of blanks.
+  const hasPaths = displayRoots.some((r) => r.path);
+
+  // Which door a change goes through. MNP first: it is the only one that
+  // exists for an operator on the web, and it is signed, which the loopback
+  // API is not (it is authorized by being on localhost with the run token).
+  const overMnp = !isLocal && transport && transport.connected;
+  const overLoopback = !isLocal && !overMnp && nodeAvail;
+  const canEdit = !readOnly && (isLocal || overMnp || overLoopback);
+
+  const rootUrl = (name, suffix = '') =>
+    '/api/groups/' + groupId + '/roots/' + encodeURIComponent(name) + suffix;
+
+  // Deliberately no index refresh after a root change.
+  //
+  // Adding a root makes the node reload, which rescans — minutes on a real
+  // library — and the reload is fire-and-forget for that reason. Fetching the
+  // index in the moment after therefore returns the set from *before* it, and
+  // `applyIndex` writes that over the roots the ack had just delivered: the
+  // new directory appeared for one paint and vanished, which is what "it only
+  // shows up after a refresh" was.
+  //
+  // Nothing is lost by waiting. The ack carries the new table immediately, and
+  // the delta the node pushes when the scan finishes carries it again along
+  // with the files.
+  const run = useCallback(async (work) => {
+    setBusy(true); setMsg(null);
+    try {
+      await work();
+      if (onRootsChange) await onRootsChange();
+      return true;
+    } catch (err) {
+      refuse(platform.bridgeMessage(err));
+      return false;
+    } finally { setBusy(false); }
+  }, [onRootsChange, refuse]);
+
+  const doUpdateRoot = useCallback(async (rootName, updates) => {
+    if (isLocal) {
+      if (onLocalRootsChange) {
+        onLocalRootsChange((localRoots || []).map(r =>
+          r.name === rootName ? { ...r, ...updates } : r));
+      }
+      return;
+    }
+    setOptimistic(prev => ({
+      ...prev, [rootName]: { ...(prev[rootName] || {}), ...updates },
+    }));
+    const ok = await run(async () => {
+      if (overMnp) await transport.updateRoot(groupId, rootName, updates, signFn);
+      else if (overLoopback) await platform.node.call('PATCH', rootUrl(rootName), updates);
+      else throw new Error(t('node.root_no_route'));
+    });
+    // Only a failure clears the patch here; a success waits for the node's
+    // own table, so the switch never travels backwards on its way forwards.
+    if (!ok) {
+      setOptimistic(prev => {
+        const next = { ...prev }; delete next[rootName]; return next;
+      });
+    }
+  }, [isLocal, localRoots, onLocalRootsChange, overMnp, overLoopback,
+      transport, groupId, signFn, run]);
+
+  const doEjectRoot = useCallback((rootName) => run(async () => {
+    if (overMnp) await transport.ejectRoot(groupId, rootName, signFn);
+    else if (overLoopback) await platform.node.call('PUT', rootUrl(rootName, '/eject'));
+    else throw new Error(t('node.root_no_route'));
+  }), [overMnp, overLoopback, transport, groupId, signFn, run]);
+
+  const doPlugRoot = useCallback((rootName) => run(async () => {
+    if (overMnp) await transport.plugRoot(groupId, rootName, signFn);
+    else if (overLoopback) await platform.node.call('PUT', rootUrl(rootName, '/plug'));
+    else throw new Error(t('node.root_no_route'));
+  }), [overMnp, overLoopback, transport, groupId, signFn, run]);
+
+  const doRemoveRoot = useCallback(async (rootName) => {
+    if (isLocal) {
+      if (onLocalRootsChange) {
+        onLocalRootsChange((localRoots || []).filter(r => r.name !== rootName));
+      }
+      return;
+    }
+    if (!confirm(t('node.root_remove_confirm', { name: rootName }))) return;
+    const ok = await run(async () => {
+      if (overMnp) await transport.removeRoot(groupId, rootName, signFn);
+      else if (overLoopback) {
+        await platform.node.call('DELETE', rootUrl(rootName));
+        await platform.node.call('POST', '/api/reload');
+      } else throw new Error(t('node.root_no_route'));
+    });
+    if (ok) say(t('node.root_removed'));
+  }, [isLocal, localRoots, onLocalRootsChange, overMnp, overLoopback,
+      transport, groupId, signFn, run]);
+
+  // Adding a root needs a directory that exists on the *node's* filesystem.
+  // With the node on this machine that is a native folder picker; from any
+  // other browser the operator has to type the path, because nothing in a web
+  // page can browse a remote disk. Both end at the same signed op.
+  const addRootAtPath = useCallback(async (path, name) => {
+    if (isLocal) {
+      if ((localRoots || []).some(r => r.path === path)) return true;
+      const isFirst = (localRoots || []).length === 0;
+      // The first directory is writable so a new group can receive an upload
+      // without the operator having to find this switch first. Every later
+      // one is read-only until they say otherwise.
+      if (onLocalRootsChange) {
+        onLocalRootsChange([...(localRoots || []),
+                            { name, path, writable: isFirst, removable: false }]);
+      }
+      return true;
+    }
+    setIndexProgress(null);
+    return run(async () => {
+      if (overMnp) {
+        await transport.addRoot(groupId, path, { name }, signFn);
+      } else if (overLoopback) {
+        await platform.node.call('POST', '/api/groups/' + groupId + '/roots',
+                                 { path, name });
+        await platform.node.call('POST', '/api/reload');
+        await platform.watchIndexProgress(groupId, setIndexProgress);
+      } else throw new Error(t('node.root_no_route'));
+    });
+  }, [isLocal, localRoots, onLocalRootsChange, overMnp, overLoopback,
+      transport, groupId, signFn, run]);
+
+  const doPickRoot = useCallback(async () => {
+    const chosen = await platform.rootPicker.choose();
+    if (!chosen) return;
+    const ok = await addRootAtPath(chosen.path, chosen.name);
+    if (ok && !isLocal) say(t('node.root_added'));
+  }, [addRootAtPath, isLocal]);
+
+  const doAddByPath = useCallback(async () => {
+    const path = pathDraft.trim();
+    if (!path) return;
+    // The name is the node's business — it derives the basename and refuses a
+    // duplicate. Sending one guessed from a string typed here would be a
+    // second opinion about something already decided in one place.
+    const ok = await addRootAtPath(path, '');
+    if (ok) { setPathDraft(''); setAddingByPath(false); if (!isLocal) say(t('node.root_added')); }
+  }, [pathDraft, addRootAtPath, isLocal]);
+
+  const addControls = !canEdit ? '' : html`
+    ${platform.rootPicker.available ? html`
+      <button class="btn btn-small btn-secondary" style="margin-top:8px"
+        disabled=${busy} onClick=${doPickRoot}>
+        <${Icon} name="folder-plus" /> ${t('node.add_root')}
+      </button>
+    ` : addingByPath ? html`
+      <div class="sdt-add-row">
+        <input class="sdt-add-input" type="text" value=${pathDraft}
+          placeholder=${t('node.root_path_placeholder')}
+          disabled=${busy}
+          onInput=${(e) => setPathDraft(e.target.value)}
+          onKeyDown=${(e) => { if (e.key === 'Enter') doAddByPath(); }} />
+        <button class="btn btn-small btn-secondary" disabled=${busy || !pathDraft.trim()}
+          onClick=${doAddByPath}>${t('node.add_root')}</button>
+        <button class="btn btn-small" disabled=${busy}
+          onClick=${() => { setAddingByPath(false); setPathDraft(''); }}>
+          ${t('settings.cancel')}</button>
       </div>
+      <p class="settings-hint">${t('node.root_path_hint')}</p>
+    ` : html`
       <button class="btn btn-small btn-secondary" style="margin-top:8px"
-        disabled=${busy || draft === (value || '')} onClick=${onSave}>
-        ${busy ? t('settings_node.scan_saving') : t(saveKey)}
+        disabled=${busy} onClick=${() => setAddingByPath(true)}>
+        <${Icon} name="folder-plus" /> ${t('node.add_root')}
       </button>
-      ${msg && html`<p class=${msg.ok ? 'success-msg' : 'error-msg'} style="margin-top:8px">
-        ${msg.text}</p>`}
-    </div>
+    `}
   `;
-}
-
-/**
- * Which folder(s) are the Photos app's entry points for this group — a
- * *set*, unlike RootFolderRow's single value above (docs/photos.md §2.1: a
- * photo library is routinely scattered across several folders). An
- * add/remove list rather than a `<select>`: pick a folder to add from the
- * same `rootFolderOptions` the Videos/Music pickers use, list what is
- * already configured with a remove button each, and one Save signs the
- * whole resulting set in one op (same shape as the app-enable checkboxes
- * below — several changes staged, one signature).
- */
-function PhotoRootsRow({ folders, value, busy, msg, onSave }) {
-  const [draft, setDraft] = useState(value || []);
-  useEffect(() => { setDraft(value || []); }, [value]);
-  const [addSelection, setAddSelection] = useState('');
-
-  const available = folders.filter((p) => !draft.includes(p));
-  const addRoot = () => {
-    if (!addSelection || draft.includes(addSelection)) return;
-    setDraft((prev) => [...prev, addSelection].sort());
-    setAddSelection('');
-  };
-  const removeRoot = (path) => setDraft((prev) => prev.filter((p) => p !== path));
 
-  const unchanged = draft.length === (value || []).length
-    && draft.every((p) => (value || []).includes(p));
+  if (!displayRoots.length) {
+    return html`
+      <div class="shared-directories-table">
+        <p class="settings-hint">${t('settings_node.shared_directories_hint')}</p>
+        ${addControls}
+        ${message}
+      </div>
+    `;
+  }
 
   return html`
-    <div class="settings-root-row">
-      <div class="settings-root-row-title">
-        <${Icon} name="image" />
-        <h4>${t('settings_node.photo_roots_title')}</h4>
-      </div>
-      <p class="settings-hint">${t('settings_node.photo_roots_hint')}</p>
-      ${draft.length === 0 && html`
-        <p class="settings-hint">${t('settings_node.photo_roots_none')}</p>
-      `}
-      ${draft.length > 0 && html`
-        <ul class="settings-root-list">
-          ${draft.map((p) => html`
-            <li key=${p} class="settings-root-list-item">
-              <span>${'  '.repeat(p.split('/').length - 1)}${p.split('/').pop()}</span>
-              <button class="link-btn" disabled=${busy} onClick=${() => removeRoot(p)}
-                title=${t('settings_node.photo_roots_remove')}>
-                <${Icon} name="close" /></button>
-            </li>
-          `)}
-        </ul>
+    <div class="shared-directories-table">
+      <table class="shared-dirs-tbl">
+        <thead>
+          <tr>
+            <th class="sdt-col-dir">${t('node.directory')}</th>
+            ${hasPaths && html`<th class="sdt-col-path">${t('node.root_path')}</th>`}
+            ${canEdit && html`<th class="sdt-col-toggle">${t('node.root_rw')}</th>`}
+            ${canEdit && !isLocal && html`<th class="sdt-col-toggle">${t('node.removable')}</th>`}
+            <th class="sdt-col-actions"></th>
+          </tr>
+        </thead>
+        <tbody>
+        ${displayRoots.map(r => {
+          const rowClass = r.ejected ? 'sdt-row-ejected'
+            : (!isLocal && r.available === false) ? 'sdt-row-unavail' : '';
+          return html`
+          <tr class=${rowClass} key=${r.name}>
+            <td class="sdt-col-dir">
+              <span class="sdt-dir-name">
+                <${Icon} name="folder" />
+                ${r.name}
+              </span>
+              ${r.ejected && html`
+                <span class="node-root-badge node-root-badge-warn">${t('group.root_ejected')}</span>`}
+              ${!isLocal && r.available === false && !r.ejected && html`
+                <span class="node-root-badge node-root-badge-warn">${t('node.unavailable')}</span>`}
+            </td>
+            ${hasPaths && html`
+              <td class="sdt-col-path" title=${r.path || ''}>${r.path || ''}</td>`}
+            ${canEdit && html`
+              <td class="sdt-col-toggle">
+                <${ToggleSwitch} checked=${!!r.writable} disabled=${busy || !!r.ejected}
+                  onChange=${(v) => doUpdateRoot(r.name, { writable: v })} />
+              </td>
+            `}
+            ${canEdit && !isLocal && html`
+              <td class="sdt-col-toggle">
+                <${ToggleSwitch} checked=${!!r.removable} disabled=${busy}
+                  onChange=${(v) => doUpdateRoot(r.name, { removable: v })} />
+              </td>
+            `}
+            <td class="sdt-col-actions">
+              ${canEdit && !isLocal && html`
+                <button class="sdt-action-btn" disabled=${busy || !r.removable}
+                  title=${r.ejected ? t('group.root_plug') : t('group.root_eject')}
+                  onClick=${() => r.ejected ? doPlugRoot(r.name) : doEjectRoot(r.name)}>
+                  ${r.ejected ? '\u{1F50C}' : '\u{23CF}'}
+                </button>
+              `}
+              ${canEdit && html`
+                <button class="sdt-action-btn sdt-action-danger"
+                  disabled=${busy || displayRoots.length < 2}
+                  title=${displayRoots.length < 2
+                    ? t('node.root_remove_last') : t('node.remove_root')}
+                  onClick=${() => doRemoveRoot(r.name)}>
+                  \u{2715}
+                </button>
+              `}
+            </td>
+          </tr>
+        `; })}
+        </tbody>
+      </table>
+      ${addControls}
+      ${message}
+      ${indexProgress && indexProgress.scanning && html`
+        <div class="index-progress" style="margin-top:8px">
+          <div class="index-progress-bar">
+            <div class="index-progress-fill" style="width:${
+              indexProgress.total_bytes
+                ? Math.min(100, Math.round(
+                    100 * indexProgress.scanned_bytes / indexProgress.total_bytes))
+                : 0}%"></div>
+          </div>
+          <div class="index-progress-label">${t('wizard.indexing_progress', {
+            pct: indexProgress.total_bytes
+              ? Math.min(100, Math.round(
+                  100 * indexProgress.scanned_bytes / indexProgress.total_bytes))
+              : 0,
+          })}</div>
+        </div>
       `}
-      <div class="settings-row">
-        <label class="settings-label">
-          <select value=${addSelection} disabled=${busy || available.length === 0}
-            onChange=${(e) => setAddSelection(e.target.value)}>
-            <option value="">${t('settings_node.photo_roots_add_placeholder')}</option>
-            ${available.map((p) => html`
-              <option key=${p} value=${p}>
-                ${'  '.repeat(p.split('/').length - 1)}${p.split('/').pop()}
-              </option>
-            `)}
-          </select>
-        </label>
-        <button class="btn btn-small btn-secondary" disabled=${busy || !addSelection}
-          onClick=${addRoot}>${t('settings_node.photo_roots_add')}</button>
-      </div>
-      <button class="btn btn-small btn-secondary" style="margin-top:8px"
-        disabled=${busy || unchanged} onClick=${() => onSave(draft)}>
-        ${busy ? t('settings_node.scan_saving') : t('settings_node.photo_roots_save')}
-      </button>
-      ${msg && html`<p class=${msg.ok ? 'success-msg' : 'error-msg'} style="margin-top:8px">
-        ${msg.text}</p>`}
     </div>
   `;
 }
 
+
 // ── Members Panel ────────────────────────────────────────────────────────
 
 /**
@@ -187,14 +389,12 @@ function PhotoRootsRow({ folders, value, busy, msg, onSave }) {
  */
 function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
                              isNodeAdmin, userId, operatorPaired, connected,
-                             memberUpload, onMemberUpload,
+                             mnpRoots,
                              enabledApps, onEnabledApps,
                              scanSettings, onScanSettings,
-                             tmdbConfig, onTmdbConfig, onTmdbEnabled,
-                             musicbrainzConfig, onMusicbrainzEnabled,
-                             entries, nodeDirs, videoRoot, onVideoRoot,
-                             audioRoot, onAudioRoot,
-                             photoRoots, onPhotoRoots, onRefreshIndex,
+                             entries, nodeDirs,
+                             appSettings, nodeSupportsAppOps,
+                             onAppDirectories, onRefreshIndex,
                              onPaired, onLeft }) {
   const [members, setMembers] = useState([]);
   const [adminId, setAdminId] = useState('');
@@ -214,6 +414,29 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
   // platform.watchIndexProgress.
   const [nodeIndexProgress, setNodeIndexProgress] = useState(null);
 
+  // The roots to show, from whichever source can actually answer.
+  //
+  // `mnpRoots` comes from the index payload the node pushes over the live
+  // connection, and is the only source an operator signing in from an
+  // ordinary browser has. `nodeRoots` comes from the loopback API and exists
+  // only on the machine running the node. Preferring MNP when connected also
+  // keeps this table on the same data Files and the apps read, so an eject
+  // shows in one place at the same instant it shows in the other.
+  const effectiveRoots = (connected && mnpRoots && mnpRoots.length)
+    ? mnpRoots : nodeRoots;
+
+  // Declared here rather than inline at the call site: a function rebuilt on
+  // every render is a new prop identity every render, and the callbacks that
+  // close over it in the table below are memoised on it.
+  const adminSignFn = useCallback((transcript) => {
+    const sk = transportRef.current && transportRef.current.sessionKeys
+      && transportRef.current.sessionKeys.skEdB64;
+    if (!sk || !window.MeshBayKeys) {
+      throw new Error(t('node.root_no_signing_key'));
+    }
+    return window.MeshBayKeys.signBytes(sk, transcript);
+  }, [transportRef]);
+
   const loadNodeInfo = useCallback(async () => {
     if (!platform.node.available) return;
     try {
@@ -332,40 +555,16 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
     }
   }, [pairCode, transportRef, userId]);
 
-  const [uploadBusy, setUploadBusy] = useState(false);
-  const [uploadMsg, setUploadMsg] = useState('');
-
-  /**
-   * Close or open uploading for everyone who is not the operator.
-   *
-   * Signed, like removing a member: the node refuses an unsigned instruction,
-   * so this is a request to the node rather than a decision taken here. The
-   * button does not move until the node has said it did it.
-   */
-  const setUploads = useCallback(async (allowed) => {
-    const transport = transportRef && transportRef.current;
-    setUploadMsg('');
-    setUploadBusy(true);
-    try {
-      if (!transport || !transport.connected) {
-        throw new Error('Not connected to the node');
-      }
-      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
-      const signFn = (sk && window.MeshBayKeys)
-        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
-        : null;
-      await transport.setMemberUpload(allowed, signFn);
-      if (onMemberUpload) onMemberUpload(allowed);
-    } catch (err) {
-      setUploadMsg(err.message);
-    } finally {
-      setUploadBusy(false);
-    }
-  }, [transportRef, onMemberUpload]);
+  // DEPRECATED: upload toggle removed — per-root writable flag replaces it.
 
   const [appsBusy, setAppsBusy] = useState(false);
   const [appsMsg, setAppsMsg] = useState('');
-  const activeApps = enabledApps && enabledApps.length ? enabledApps : APPS.map(a => a.key);
+  // `availableApps()` rather than the raw registry: an app the reader is not
+  // shown must not be turned on for the whole group by falling back to "all of
+  // them". Found by adding one that is hidden by default — an ordinary app
+  // would never have exposed the difference.
+  const activeApps = enabledApps && enabledApps.length
+    ? enabledApps : availableApps().map(a => a.key);
 
   /**
    * Toggle one app in or out of the group's enabled set. Same shape as
@@ -446,146 +645,21 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
     }
   }, [transportRef, onScanSettings, reconcileMinutes, debounceSeconds]);
 
-  const [tmdbBusy, setTmdbBusy] = useState(false);
-  const [tmdbMsg, setTmdbMsg] = useState('');
-  const [tmdbTokenDraft, setTmdbTokenDraft] = useState('');
-  const [tmdbEnabledBusy, setTmdbEnabledBusy] = useState(false);
-  const tmdbEnabled = tmdbConfig ? tmdbConfig.enabled : true;
-  // Pre-filled from the operator's own current UI language the first time
-  // this renders with nothing configured yet — a sensible default, not a
-  // claim about what the node is actually using until they hit Save.
-  const [tmdbLanguage, setTmdbLanguage] = useState(
-    () => (tmdbConfig && tmdbConfig.language)
-      || TMDB_LANGUAGE_BY_LOCALE[getLocale()] || 'en-US');
-  useEffect(() => {
-    if (tmdbConfig && tmdbConfig.language) setTmdbLanguage(tmdbConfig.language);
-  }, [tmdbConfig && tmdbConfig.language]);
-
-  /**
-   * Whether TMDB is used at all — per-group (2026-08-24, used to be bundled
-   * into the same signed op as the token/language below): a real
-   * media-library group and a test/demo group on the same node need not
-   * share this decision. Saves immediately on toggle, same as an ordinary
-   * checkbox-style setting elsewhere — there is nothing else on the form to
-   * batch it with any more.
-   */
-  const saveTmdbEnabled = useCallback(async (nextEnabled) => {
-    const transport = transportRef && transportRef.current;
-    setTmdbMsg('');
-    setTmdbEnabledBusy(true);
-    try {
-      if (!transport || !transport.connected) {
-        throw new Error('Not connected to the node');
-      }
-      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
-      const signFn = (sk && window.MeshBayKeys)
-        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
-        : null;
-      await transport.setTmdbEnabled(nextEnabled, signFn);
-      if (onTmdbEnabled) onTmdbEnabled(nextEnabled);
-    } catch (err) {
-      setTmdbMsg(err.message);
-    } finally {
-      setTmdbEnabledBusy(false);
-    }
-  }, [transportRef, onTmdbEnabled]);
-
-  /**
-   * An optional custom API token, and the language TMDB is queried in —
-   * node-wide, not per-group (docs/mediacenter.md §5.5): one shared
-   * credential and cache. Same shape as saveScanSettings: signed, and the
-   * button does not claim success until the node confirms it. The token
-   * field is cleared after a save either way: it is never echoed back by
-   * the node (tmdb_config_ack carries only whether one is set, never the
-   * value), so there is nothing to keep showing.
-   */
-  const saveTmdbConfig = useCallback(async () => {
-    const transport = transportRef && transportRef.current;
-    setTmdbMsg('');
-    setTmdbBusy(true);
-    try {
-      if (!transport || !transport.connected) {
-        throw new Error('Not connected to the node');
-      }
-      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
-      const signFn = (sk && window.MeshBayKeys)
-        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
-        : null;
-      const token = tmdbTokenDraft.trim();
-      await transport.setTmdbConfig(token || undefined, tmdbLanguage, signFn);
-      setTmdbTokenDraft('');
-      if (onTmdbConfig) {
-        onTmdbConfig({
-          tokenCustomized: token
-            ? true
-            : (tmdbConfig ? tmdbConfig.tokenCustomized : false),
-          language: tmdbLanguage,
-        });
-      }
-      setTmdbMsg(t('settings_node.scan_saved'));
-    } catch (err) {
-      setTmdbMsg(err.message);
-    } finally {
-      setTmdbBusy(false);
-    }
-  }, [transportRef, onTmdbConfig, tmdbTokenDraft, tmdbConfig, tmdbLanguage]);
-
-  // A node that has never had a language explicitly set would otherwise
-  // query TMDB with none at all — which TMDB itself resolves to English,
-  // regardless of who the operator is — even though this form already
-  // *suggests* their own UI language as the value. Applied once,
-  // automatically, the first time the operator (the only one who can sign
-  // this) is actually connected to see it: a real default tied to whoever
-  // runs this particular node, never a single hardcoded language for every
-  // node. `tmdbConfig.language` being set at all — from this or from an
-  // explicit save — is what stops it from ever firing again, so "unless
-  // manually changed" holds regardless of which of the two set it first.
-  const autoLanguageSetRef = useRef(false);
-  useEffect(() => {
-    if (!isNodeAdmin || !connected || !tmdbConfig || tmdbConfig.language) return;
-    if (autoLanguageSetRef.current) return;
-    autoLanguageSetRef.current = true;
-    saveTmdbConfig();
-  }, [isNodeAdmin, connected, tmdbConfig, saveTmdbConfig]);
+  // ── Per-app settings ────────────────────────────────────────────────
+  //
+  // What every app's settings pane is given, and the one operation the page
+  // performs on their behalf. TMDB, MusicBrainz and each app's folder pickers
+  // used to be hand-written sections here, ~470 lines of them, each with its
+  // own draft state and save handler saying the same thing about a different
+  // key. They live in `<app>-app-settings.js` now; this is the whole of what
+  // the page still knows about any of it.
 
-  const [mbMsg, setMbMsg] = useState('');
-  const [mbEnabledBusy, setMbEnabledBusy] = useState(false);
-  const mbEnabled = musicbrainzConfig ? musicbrainzConfig.enabled : true;
-
-  /**
-   * Whether MusicBrainz is used at all — per-group from the start
-   * (docs/musicbay.md §3.2/§6). Same shape as saveTmdbEnabled.
-   */
-  const saveMusicbrainzEnabled = useCallback(async (nextEnabled) => {
-    const transport = transportRef && transportRef.current;
-    setMbMsg('');
-    setMbEnabledBusy(true);
-    try {
-      if (!transport || !transport.connected) {
-        throw new Error('Not connected to the node');
-      }
-      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
-      const signFn = (sk && window.MeshBayKeys)
-        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
-        : null;
-      await transport.setMusicbrainzEnabled(nextEnabled, signFn);
-      if (onMusicbrainzEnabled) onMusicbrainzEnabled(nextEnabled);
-    } catch (err) {
-      setMbMsg(err.message);
-    } finally {
-      setMbEnabledBusy(false);
-    }
-  }, [transportRef, onMusicbrainzEnabled]);
-
-  // Every folder anywhere in the group's shared index, deepest included —
-  // `entries[].path` is each file's containing directory (files-app.js's own
-  // convention), so every ancestor prefix of it is a real folder, and
-  // `nodeDirs` covers ones with nothing in them yet. A flat, depth-indented
-  // <select> rather than a live folder browser: choosing an app's root is a
-  // rare, one-off decision, not something worth a whole navigable tree for.
-  // Shared between the Videos and Music root pickers below — same folder
-  // set either way.
-  const rootFolderOptions = useMemo(() => {
+  // Every folder anywhere in the group's shared index. `entries[].path` is a
+  // file's containing directory (files-app.js's convention), so every ancestor
+  // prefix of it is a real folder; `nodeDirs` covers the ones with nothing in
+  // them yet. Derived here rather than in the picker so all of them agree, and
+  // so it is computed once per change instead of once per open.
+  const folderOptions = useMemo(() => {
     const set = new Set();
     const addAncestors = (path) => {
       if (!path) return;
@@ -597,109 +671,30 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
     return [...set].sort();
   }, [entries, nodeDirs]);
 
-  const [videoRootDraft, setVideoRootDraft] = useState(videoRoot || '');
-  useEffect(() => { setVideoRootDraft(videoRoot || ''); }, [videoRoot]);
-  const [videoRootBusy, setVideoRootBusy] = useState(false);
-  const [videoRootMsg, setVideoRootMsg] = useState(null);
-
   /**
-   * Which folder is the Videos app's entry point for this group — same
-   * shape as toggleApp/saveScanSettings: signed, and the picker does not
-   * claim success until the node confirms it.
+   * Point one app at folders — the only app-specific operation this page
+   * performs, and it is generic.
    *
-   * Changing an *already-set* root is destructive to every member's Videos
-   * tab (a different set of files, possibly none in common) — the operator
-   * confirms that explicitly. Setting it for the first time is not: there is
-   * nothing yet to lose.
+   * Everything else a pane needs it does itself with the transport it is
+   * given. That is the line: what every app has (directories) is here, what
+   * one app alone has (a TMDB key, a link-preview switch) is in its own file,
+   * and adding an app that only needs directories touches neither.
    */
-  const saveVideoRoot = useCallback(async () => {
-    const next = videoRootDraft;
-    const current = videoRoot || '';
-    if (next === current) return;
-    if (current && !confirm(t('settings_node.video_root_change_confirm'))) return;
-    const transport = transportRef && transportRef.current;
-    setVideoRootMsg(null);
-    setVideoRootBusy(true);
-    try {
-      if (!transport || !transport.connected) {
-        throw new Error('Not connected to the node');
-      }
-      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
-      const signFn = (sk && window.MeshBayKeys)
-        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
-        : null;
-      await transport.setVideoRoot(next, signFn);
-      if (onVideoRoot) onVideoRoot(next);
-      setVideoRootMsg({ text: t('settings_node.scan_saved'), ok: true });
-    } catch (err) {
-      setVideoRootMsg({ text: err.message, ok: false });
-    } finally {
-      setVideoRootBusy(false);
-    }
-  }, [transportRef, onVideoRoot, videoRootDraft, videoRoot]);
-
-  // Same shape as the Videos root above — the Music app's own entry point
-  // (docs/musicbay.md's amended §2.1).
-  const [audioRootDraft, setAudioRootDraft] = useState(audioRoot || '');
-  useEffect(() => { setAudioRootDraft(audioRoot || ''); }, [audioRoot]);
-  const [audioRootBusy, setAudioRootBusy] = useState(false);
-  const [audioRootMsg, setAudioRootMsg] = useState(null);
-
-  const saveAudioRoot = useCallback(async () => {
-    const next = audioRootDraft;
-    const current = audioRoot || '';
-    if (next === current) return;
-    if (current && !confirm(t('settings_node.audio_root_change_confirm'))) return;
+  const saveAppDirectories = useCallback(async (appKey, paths) => {
     const transport = transportRef && transportRef.current;
-    setAudioRootMsg(null);
-    setAudioRootBusy(true);
-    try {
-      if (!transport || !transport.connected) {
-        throw new Error('Not connected to the node');
-      }
-      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
-      const signFn = (sk && window.MeshBayKeys)
-        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
-        : null;
-      await transport.setAudioRoot(next, signFn);
-      if (onAudioRoot) onAudioRoot(next);
-      setAudioRootMsg({ text: t('settings_node.scan_saved'), ok: true });
-    } catch (err) {
-      setAudioRootMsg({ text: err.message, ok: false });
-    } finally {
-      setAudioRootBusy(false);
+    if (!transport || !transport.connected) {
+      throw new Error(t('node.root_no_route'));
     }
-  }, [transportRef, onAudioRoot, audioRootDraft, audioRoot]);
-
-  // Photos app's own entry points — a set (docs/photos.md §2.1), unlike
-  // videoRoot/audioRoot above. No "removing a root is destructive" confirm
-  // dialog: removing one root only drops that root's albums from view, it
-  // does not replace the whole tab's content the way changing video_root
-  // does.
-  const [photoRootsBusy, setPhotoRootsBusy] = useState(false);
-  const [photoRootsMsg, setPhotoRootsMsg] = useState(null);
-
-  const savePhotoRoots = useCallback(async (nextRoots) => {
-    const transport = transportRef && transportRef.current;
-    setPhotoRootsMsg(null);
-    setPhotoRootsBusy(true);
-    try {
-      if (!transport || !transport.connected) {
-        throw new Error('Not connected to the node');
-      }
-      const sk = transport.sessionKeys && transport.sessionKeys.skEdB64;
-      const signFn = (sk && window.MeshBayKeys)
-        ? (transcript) => window.MeshBayKeys.signBytes(sk, transcript)
-        : null;
-      await transport.setPhotoRoots(nextRoots, signFn);
-      if (onPhotoRoots) onPhotoRoots(nextRoots);
-      setPhotoRootsMsg({ text: t('settings_node.scan_saved'), ok: true });
-    } catch (err) {
-      setPhotoRootsMsg({ text: err.message, ok: false });
-    } finally {
-      setPhotoRootsBusy(false);
+    // A node too old for the generic op still answers the three per-app
+    // messages that came before it, so an operator on one keeps the ability
+    // they had rather than being handed a control that times out.
+    if (transport.supportsAppOps) {
+      await transport.setAppDirectories(appKey, paths, adminSignFn);
+    } else {
+      await transport.setAppDirectoriesLegacy(appKey, paths, adminSignFn);
     }
-  }, [transportRef, onPhotoRoots]);
+    if (onAppDirectories) onAppDirectories(appKey, paths);
+  }, [transportRef, adminSignFn, onAppDirectories]);
 
   const [removing, setRemoving] = useState('');
 
@@ -884,28 +879,70 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
         </div>
       `}
 
-      ${/* Which group "applications" members see. New ones (Videos, Music,
-            Photos) show up here automatically as they register in apps.js —
-            nothing about this section changes to add one. */
-        isNodeAdmin && connected && html`
-        <${CollapsibleSection} titleKey="members.apps_title">
-          <p class="settings-hint">${t('members.apps_hint')}</p>
-          <ul class="apps-toggle-list">
-            ${APPS.map(a => html`
-              <li key=${a.key} class="settings-row">
-                <label class="settings-label">
-                  <input type="checkbox" checked=${activeApps.includes(a.key)}
-                    disabled=${appsBusy}
-                    onChange=${() => toggleApp(a.key)} />
-                  ${' '}${t(a.labelKey)}
-                </label>
-              </li>
-            `)}
-          </ul>
-          ${appsMsg && html`<p class="error-msg">${appsMsg}</p>`}
+      ${/* Shared directories — the group's root folders, and the structural
+            control everything else in this page sits on top of, so it comes
+            first. Rendered whenever the operator has a route to their node:
+            a live MNP connection (any browser, anywhere) or the loopback API
+            (the node on this machine). It used to require the second, which
+            meant it rendered for nobody on the web. */
+        isNodeAdmin && (connected || nodeDetected) && html`
+        <${CollapsibleSection} titleKey="settings_node.shared_directories_title">
+          <p class="settings-hint">${t('settings_node.shared_directories_hint')}</p>
+          ${!connected && nodeDetected && html`
+            <p class="settings-hint">${t('settings_node.roots_offline_hint')}</p>`}
+          ${/* Read-only against a node that predates the root operations:
+                writable, removable, eject and plug have no older equivalent
+                to fall back to, and an unknown message type is dropped
+                unanswered — a thirty-second wait ending in a timeout, with
+                nothing on screen to say the node simply cannot do it. */''}
+          ${connected && !nodeSupportsAppOps && !nodeDetected && html`
+            <p class="settings-hint">${t('settings_node.roots_node_too_old')}</p>`}
+          <${SharedDirectoriesTable}
+            roots=${effectiveRoots}
+            groupId=${groupId}
+            transport=${transportRef.current}
+            signFn=${adminSignFn}
+            readOnly=${connected && !nodeSupportsAppOps && !nodeDetected}
+            nodeDetected=${nodeDetected}
+            onRootsChange=${loadNodeInfo}
+            onRefreshIndex=${onRefreshIndex} />
         </${CollapsibleSection}>
       `}
 
+      ${/* One collapsible section per application, from the registry.
+            Adding an app adds an entry to `apps.js` and a settings file; this
+            loop names none of them. The toggle in the header *is* the
+            enablement control — a separate checkbox list somewhere else meant
+            the operator turned an app on in one place and configured it in
+            another, with the two able to disagree.
+
+            Collapsed by default, and the settings inside are not rendered at
+            all while the app is off: a form for something that is not running
+            is a form whose Save button does nothing anyone can see. */
+        isNodeAdmin && connected && configurableApps().map((app) => html`
+        <${CollapsibleSection} key=${app.key} defaultOpen=${false} title=${html`
+          <span class="settings-meta-title">
+            <${Icon} name=${app.icon} />${' '}${t(app.labelKey)}
+          </span>
+        `} action=${html`
+          <${ToggleSwitch} checked=${activeApps.includes(app.key)}
+            disabled=${appsBusy}
+            onChange=${() => toggleApp(app.key)} />
+        `}>
+          ${!nodeSupportsAppOps && app.key === 'chat'
+            ? html`<p class="settings-hint">${t('settings_node.app_node_too_old')}</p>`
+            : activeApps.includes(app.key)
+            ? html`<${app.Settings}
+                roots=${effectiveRoots} dirs=${folderOptions}
+                settings=${appSettings}
+                saveDirectories=${(paths) => saveAppDirectories(app.key, paths)}
+                transport=${transportRef.current} signFn=${adminSignFn} />`
+            : html`<p class="settings-hint">${t('settings_app.disabled_hint')}</p>`}
+        </${CollapsibleSection}>
+      `)}
+
+      ${appsMsg && html`<p class="error-msg">${appsMsg}</p>`}
+
       ${/* How hard the node works watching its own disk — indexer.py
             DirectoryIndexer. A performance knob, not a permission: it
             changes nothing about who can see or do what. */
@@ -936,262 +973,6 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
         </${CollapsibleSection}>
       `}
 
-      ${/* The on/off switch is per-group (2026-08-24); the custom token and
-            query language stay node-wide, one shared credential/cache
-            (docs/mediacenter.md §5.5). Both are new outbound third-party
-            traffic the node did not have before the Videos app, so both are
-            signed operator settings, not display preferences — but two
-            independent ones now, saved separately. */
-        isNodeAdmin && connected && html`
-        <${CollapsibleSection} defaultOpen=${false} title=${html`
-          <span class="settings-meta-title">
-            <${Icon} name="server" />${' '}${t('settings_node.tmdb_title')}
-            <span class="settings-meta-badge ${tmdbEnabled ? 'on' : ''}">
-              ${tmdbEnabled ? t('settings_node.tmdb_enabled') : t('settings_node.tmdb_disabled')}
-            </span>
-          </span>
-        `}>
-          <p class="settings-hint">${t('settings_node.tmdb_hint')}</p>
-          <div class="settings-row">
-            <${ToggleSwitch} checked=${tmdbEnabled} disabled=${tmdbEnabledBusy}
-              onChange=${(v) => saveTmdbEnabled(v)}
-              label=${tmdbEnabled ? t('settings_node.tmdb_enabled') : t('settings_node.tmdb_disabled')} />
-          </div>
-          <div class="settings-row">
-            <label class="settings-label">
-              ${t('settings_node.tmdb_token_label')}
-              <input type="password" placeholder=${t('settings_node.tmdb_token_placeholder')}
-                value=${tmdbTokenDraft} disabled=${tmdbBusy}
-                onInput=${e => setTmdbTokenDraft(e.target.value)} />
-            </label>
-            <p class="settings-hint">
-              ${tmdbConfig && tmdbConfig.tokenCustomized
-                ? t('settings_node.tmdb_token_customized')
-                : t('settings_node.tmdb_token_default')}
-            </p>
-          </div>
-          <div class="settings-row">
-            <label class="settings-label">
-              ${t('settings_node.tmdb_language_label')}
-              <select value=${tmdbLanguage} disabled=${tmdbBusy}
-                onChange=${e => setTmdbLanguage(e.target.value)}>
-                ${LOCALES.map(l => html`
-                  <option key=${l.code} value=${TMDB_LANGUAGE_BY_LOCALE[l.code]}>
-                    ${l.name}
-                  </option>
-                `)}
-              </select>
-            </label>
-            <p class="settings-hint">${t('settings_node.tmdb_language_hint')}</p>
-          </div>
-          <button class="btn btn-small btn-secondary" style="margin-top:8px"
-            disabled=${tmdbBusy} onClick=${() => saveTmdbConfig()}>
-            ${tmdbBusy ? t('settings_node.scan_saving') : t('settings_node.tmdb_save')}
-          </button>
-          ${tmdbMsg && html`<p class="settings-hint">${tmdbMsg}</p>`}
-        </${CollapsibleSection}>
-      `}
-
-      ${/* Same two-part shape as TMDB above: the on/off switch is per-group,
-            the contact string stays node-wide (docs/musicbay.md §3.2) —
-            one operator identity, not a per-group concern. Unlike TMDB
-            there is no token field: MusicBrainz's read endpoints need no
-            credential, just a descriptive User-Agent contact. */
-        isNodeAdmin && connected && html`
-        <${CollapsibleSection} defaultOpen=${false} title=${html`
-          <span class="settings-meta-title">
-            <${Icon} name="music" />${' '}${t('settings_node.musicbrainz_title')}
-            <span class="settings-meta-badge ${mbEnabled ? 'on' : ''}">
-              ${mbEnabled ? t('settings_node.musicbrainz_enabled') : t('settings_node.musicbrainz_disabled')}
-            </span>
-          </span>
-        `}>
-          <p class="settings-hint">${t('settings_node.musicbrainz_hint')}</p>
-          <div class="settings-row">
-            <${ToggleSwitch} checked=${mbEnabled} disabled=${mbEnabledBusy}
-              onChange=${(v) => saveMusicbrainzEnabled(v)}
-              label=${mbEnabled ? t('settings_node.musicbrainz_enabled') : t('settings_node.musicbrainz_disabled')} />
-          </div>
-          ${mbMsg && html`<p class="settings-hint">${mbMsg}</p>`}
-        </${CollapsibleSection}>
-      `}
-
-      ${/* Which folder is the Videos app's entry point for this group —
-            per-group like uploads, not node-wide like TMDB (mediacenter.md
-            §5.6). Until one is chosen, the Videos tab says so instead of
-            listing anything, and the node runs no TMDB/thumbnail work for
-            this group at all (daemon.py's _enrich_new_video_entries). */
-        isNodeAdmin && connected
-          && ((nodeDetected && nodeRoots.length > 0)
-              || activeApps.includes('video') || activeApps.includes('music')
-              || activeApps.includes('photo')) && html`
-        <${CollapsibleSection} titleKey="settings_node.directories_title">
-          <p class="settings-hint">${t('settings_node.directories_hint')}</p>
-
-          ${activeApps.includes('video') && html`
-            <${RootFolderRow} icon="video"
-              titleKey="settings_node.video_root_title" hintKey="settings_node.video_root_hint"
-              folders=${rootFolderOptions} value=${videoRoot}
-              draft=${videoRootDraft} onDraftChange=${setVideoRootDraft}
-              busy=${videoRootBusy} msg=${videoRootMsg} onSave=${saveVideoRoot}
-              noneKey="settings_node.video_root_none" saveKey="settings_node.video_root_save" />
-          `}
-          ${activeApps.includes('music') && html`
-            <${RootFolderRow} icon="music"
-              titleKey="settings_node.audio_root_title" hintKey="settings_node.audio_root_hint"
-              folders=${rootFolderOptions} value=${audioRoot}
-              draft=${audioRootDraft} onDraftChange=${setAudioRootDraft}
-              busy=${audioRootBusy} msg=${audioRootMsg} onSave=${saveAudioRoot}
-              noneKey="settings_node.audio_root_none" saveKey="settings_node.audio_root_save" />
-          `}
-          ${activeApps.includes('photo') && html`
-            <${PhotoRootsRow}
-              folders=${rootFolderOptions} value=${photoRoots}
-              busy=${photoRootsBusy} msg=${photoRootsMsg} onSave=${savePhotoRoots} />
-          `}
-      ${/* Roots management (Electron-only, when node is local) — folded into
-            the same Directories section as the two root pickers above. */
-        nodeDetected && nodeRoots.length > 0 && html`
-        <div class="settings-root-row">
-          <div class="settings-root-row-title">
-            <${Icon} name="server" />
-            <h4>${t('settings_node.roots')}</h4>
-          </div>
-          ${nodeMsg && html`<p class="settings-hint">${nodeMsg}</p>`}
-          <div class="node-roots">
-            ${nodeRoots.map(r => html`
-              <div class="node-root ${!r.available ? 'node-root-unavailable' : ''}"
-                   key=${r.name}>
-                <div class="node-root-info">
-                  <span class="node-root-name">
-                    <${Icon} name="folder" />
-                    ${r.name}
-                  </span>
-                  ${r.upload && html`
-                    <span class="node-root-badge">${t('node.upload_root')}</span>`}
-                  ${!r.available && html`
-                    <span class="node-root-badge node-root-badge-warn">
-                      ${t('node.unavailable')}</span>`}
-                </div>
-                ${nodeRoots.length > 1 && !r.upload && html`
-                  <button class="btn btn-small btn-danger"
-                    disabled=${nodeBusy}
-                    onClick=${async () => {
-                      if (!confirm(t('node.root_remove_confirm', { name: r.name }))) return;
-                      const countBefore = nodeRoots.length;
-                      setNodeBusy(true); setNodeMsg('');
-                      try {
-                        await platform.node.call('DELETE',
-                          '/api/groups/' + groupId + '/roots/' + encodeURIComponent(r.name));
-                        await platform.node.call('POST', '/api/reload');
-                        setNodeMsg(t('node.root_removed'));
-                        await waitForRootCount(countBefore - 1);
-                        // Folders (unlike files) only ever arrive via a full
-                        // index_sync, never index_delta (daemon.py's ongoing
-                        // push has no `dirs` field) — without this, the
-                        // Videos/Music root pickers kept offering a folder
-                        // that no longer existed until the page was reloaded.
-                        if (onRefreshIndex) await onRefreshIndex();
-                      } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
-                      finally { setNodeBusy(false); }
-                    }}>
-                    ${t('node.remove_root')}</button>`}
-              </div>
-            `)}
-            <button class="btn btn-small btn-secondary" style="margin-top:8px"
-              disabled=${nodeBusy}
-              onClick=${async () => {
-                const chosen = await platform.rootPicker.choose();
-                if (!chosen) return;
-                const countBefore = nodeRoots.length;
-                setNodeBusy(true); setNodeMsg(''); setNodeIndexProgress(null);
-                try {
-                  await platform.node.call('POST',
-                    '/api/groups/' + groupId + '/roots',
-                    { path: chosen.path, name: chosen.name });
-                  await platform.node.call('POST', '/api/reload');
-                  // The root is already scanning in the background on the
-                  // node regardless of whether anyone watches this — see
-                  // the "closing the client" test in test_hot_reload_*.py.
-                  // This is only about not leaving the operator staring at
-                  // an unchanged screen while it happens.
-                  await platform.watchIndexProgress(groupId, setNodeIndexProgress);
-                  setNodeMsg(t('node.root_added'));
-                  await waitForRootCount(countBefore + 1);
-                  // See the matching comment on root removal above — a new
-                  // folder needs a full index_sync to show up anywhere that
-                  // reads `nodeDirs` (the Videos/Music root pickers), not
-                  // just in this section's own node-roots list.
-                  if (onRefreshIndex) await onRefreshIndex();
-                } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
-                finally { setNodeBusy(false); }
-              }}>
-              <${Icon} name="folder-plus" /> ${t('node.add_root')}
-            </button>
-            ${nodeIndexProgress && nodeIndexProgress.scanning && html`
-              <div class="index-progress" style="margin-top:8px">
-                <div class="index-progress-bar">
-                  <div class="index-progress-fill" style="width:${
-                    nodeIndexProgress.total_bytes
-                      ? Math.min(100, Math.round(
-                          100 * nodeIndexProgress.scanned_bytes / nodeIndexProgress.total_bytes))
-                      : 0}%"></div>
-                </div>
-                <div class="index-progress-label">${t('wizard.indexing_progress', {
-                  pct: nodeIndexProgress.total_bytes
-                    ? Math.min(100, Math.round(
-                        100 * nodeIndexProgress.scanned_bytes / nodeIndexProgress.total_bytes))
-                    : 0,
-                })}</div>
-                ${nodeIndexProgress.current_dir && html`
-                  <div class="index-progress-dir">
-                    ${t('wizard.indexing_current_dir', { dir: nodeIndexProgress.current_dir })}
-                  </div>
-                `}
-              </div>
-            `}
-          </div>
-        </div>
-      `}
-        </${CollapsibleSection}>
-      `}
-
-      ${/* Operator only, and only with a live connection: the node is what
-            holds and enforces this, so there is nothing to show or change
-            without one. */ isNodeAdmin && connected && html`
-        <${CollapsibleSection} titleKey="members.uploads_title">
-          <div class="settings-row">
-            <${ToggleSwitch} checked=${memberUpload} disabled=${uploadBusy}
-              onChange=${() => setUploads(!memberUpload)}
-              label=${memberUpload ? t('members.uploads_on') : t('members.uploads_off')} />
-          </div>
-          <p class="settings-hint">${t('members.uploads_hint')}</p>
-          ${uploadMsg && html`<p class="error-msg">${uploadMsg}</p>`}
-        </${CollapsibleSection}>
-      `}
-
-      ${/* Upload toggle via loopback when MNP not connected */
-        nodeDetected && !connected && html`
-        <${CollapsibleSection} titleKey="members.uploads_title">
-          <div class="settings-row">
-            <${ToggleSwitch} checked=${memberUpload} disabled=${nodeBusy}
-              onChange=${async () => {
-                setNodeBusy(true); setNodeMsg('');
-                try {
-                  const newVal = !memberUpload;
-                  await platform.node.call('PUT',
-                    '/api/groups/' + groupId + '/member-upload',
-                    { allowed: newVal });
-                  if (onMemberUpload) onMemberUpload(newVal);
-                } catch (err) { setNodeMsg(platform.bridgeMessage(err)); }
-                finally { setNodeBusy(false); }
-              }}
-              label=${memberUpload ? t('members.uploads_on') : t('members.uploads_off')} />
-          </div>
-          <p class="settings-hint">${t('members.uploads_hint')}</p>
-        </${CollapsibleSection}>
-      `}
-
       ${/* Delete/leave — node detach first (reversible), then hub delete
             (irreversible). Closed by default: a danger-zone action is one
             click away either way, but not the first thing seen on open. */
@@ -1334,4 +1115,4 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
 const URL_RE = /\bhttps?:\/\/[^\s<>"']+/gi;
 
 
-export { GroupSettingsPanel };
+export { GroupSettingsPanel, SharedDirectoriesTable };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/helloworld-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/helloworld-app-settings.js
new file mode 100644
index 0000000..9058199
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/helloworld-app-settings.js
@@ -0,0 +1,50 @@
+import { html, useState, useEffect } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { useSaver } from './settings-ui.js';
+import { FolderPickerField } from './folder-tree.js';
+
+/**
+ * HelloWorld's settings: one folder, and nothing else.
+ *
+ * This is the whole server-side surface an application needs — no op, no MNP
+ * message, no route, no roster accessor. `saveDirectories` is bound to this
+ * app's registry key by the page, and `ops.set_app_directories` stores the row
+ * under that name without knowing what it is.
+ *
+ * It takes the shared props and no others (`docs/apps.md` §3b), which is what
+ * `test_app_settings_plugin.py` checks of every pane — including this one, so
+ * the reference implementation is held to the contract it demonstrates.
+ */
+function HelloWorldSettings({ roots, dirs, settings, saveDirectories }) {
+  const { busy, msg, run } = useSaver();
+  const [directories, setDirectories] = useState(
+    settings.helloworldDirectories || []);
+
+  useEffect(() => {
+    setDirectories(settings.helloworldDirectories || []);
+  }, [settings.helloworldDirectories]);
+
+  const current = settings.helloworldDirectories || [];
+  const dirty = directories.length !== current.length
+    || directories.some((d, i) => d !== current[i]);
+
+  return html`
+    <div class="app-settings">
+      <${FolderPickerField}
+        label=${t('settings_app.helloworld_directory_label')}
+        hint=${t('settings_app.helloworld_directory_hint')}
+        roots=${roots} dirs=${dirs} mode="single"
+        value=${directories[0] || ''} disabled=${busy}
+        onChange=${(path) => setDirectories(path ? [path] : [])} />
+
+      <button class="btn btn-small btn-secondary" style="margin-top:4px"
+        disabled=${busy || !dirty}
+        onClick=${() => run(() => saveDirectories(directories))}>
+        ${busy ? t('settings_app.saving') : t('settings_app.save')}
+      </button>
+      ${msg && html`<p class="settings-hint">${msg}</p>`}
+    </div>
+  `;
+}
+
+export { HelloWorldSettings };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/helloworld-app.js b/packages/meshbay-hub/src/meshbay_hub/static/helloworld-app.js
new file mode 100644
index 0000000..01b4ed4
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/helloworld-app.js
@@ -0,0 +1,62 @@
+import { html, useMemo } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { Icon } from './icon.js';
+import { formatSize } from './file-utils.js';
+
+/**
+ * The smallest application this platform can host, and the proof that adding
+ * one costs nothing outside its own two files.
+ *
+ * Everything else in `docs/refactor-groups.md` §3 is asserted by tests that
+ * read source. This is the other kind of evidence: an app nobody wrote a line
+ * of plumbing for, that stores directories, appears as a tab, and lists files —
+ * because the registry entry beside it is genuinely all there is.
+ *
+ * **Not shipped to operators.** It is registered with `dev: true`, which keeps
+ * it out of the tab bar and the settings page unless the reader opts in with
+ * `?dev=1` (same shape as transport.js's `?trace=1`). Deleting the flag would
+ * put a toy app in everybody's group; deleting the app would leave the claim
+ * resting entirely on tests that read text.
+ *
+ * It takes the standard props — see `docs/apps.md` §2 — and reads
+ * `helloworldDirectories`, which nothing on the node knows about by name:
+ * `ops.set_app_directories` keys the row by whatever the app is called.
+ */
+function HelloWorldApp({ entries, availableEntries, helloworldDirectories, status }) {
+  const dirs = helloworldDirectories || [];
+  const pool = availableEntries || entries || [];
+
+  const files = useMemo(() => pool.filter((e) => {
+    const p = e.path || '';
+    return dirs.some((d) => p === d || p.startsWith(d + '/'));
+  }).slice(0, 200), [pool, dirs]);
+
+  if (status !== 'connected') {
+    return html`<p class="page-message">${t('status.connecting_short')}</p>`;
+  }
+
+  return html`
+    <div class="page-content">
+      <h2>${t('helloworld.greeting')}</h2>
+      ${dirs.length === 0 ? html`
+        <p class="page-message">${t('helloworld.no_directory')}</p>
+      ` : html`
+        <p class="settings-hint">
+          ${t('helloworld.counted', { n: files.length })}
+          ${' — '}${dirs.join(', ')}
+        </p>
+        <ul class="hw-list">
+          ${files.map((e) => html`
+            <li key=${e.id} class="hw-item">
+              <${Icon} name="folder" />
+              <span class="hw-name">${e.name}</span>
+              <span class="hw-size">${formatSize(e.size || 0)}</span>
+            </li>
+          `)}
+        </ul>
+      `}
+    </div>
+  `;
+}
+
+export { HelloWorldApp };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js
index 46168cf..d05d3a3 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/de.js
@@ -126,6 +126,12 @@ export default {
   'group.tab_video': 'Videos',
   'group.tab_music': 'Musik',
   'group.tab_photos': 'Fotos',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'Hallo, Welt!',
+  'helloworld.no_directory': 'Noch kein Ordner gewählt. Wählen Sie einen in den Einstellungen.',
+  'helloworld.counted': '{n} Datei(en)',
+  'settings_app.helloworld_directory_label': 'Ordner',
+  'settings_app.helloworld_directory_hint': 'Der Ordner, den diese Referenz-App auflistet. Sie zeigt, dass eine neue Anwendung nichts außer ihren beiden Dateien braucht.',
   'group.tab_members': 'Mitglieder',
   'group.tab_settings': "Einstellungen",
   'members.danger_leave_hint': "Sie verlieren den Zugriff auf die Dateien und den Chat dieser Gruppe.",
@@ -154,7 +160,8 @@ export default {
     + 'diese Gruppe hostet.',
   'group.upload': 'Hochladen',
   'group.mkdir': 'Neuer Ordner',
-  'group.mkdir_prompt': 'Name des neuen Ordners:',
+  'group.mkdir_prompt': 'Name des neuen Ordners',
+  'group.mkdir_offline': 'Nicht mit dem Node verbunden.',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -169,6 +176,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(nicht verfügbar — Laufwerk getrennt)',
+  'group.root_plug': 'Einstecken',
+  'group.root_eject': 'Auswerfen',
+  'group.root_writable': 'Lesen/Schreiben',
+  'group.root_ejected': '(ausgeworfen)',
   'group.view': 'Ansehen',
   'group.delete': 'Löschen',
   'group.delete_confirm': '{name} löschen?',
@@ -195,6 +206,7 @@ export default {
   'chat.placeholder': 'Nachricht schreiben …',
   'chat.send': 'Senden',
   'chat.attach': 'Datei anhängen',
+  'chat.attach_read_only': 'Kein beschreibbares freigegebenes Verzeichnis — Anhänge sind aus',
 
   // Video player
   'video.loading': '{name} wird geladen …',
@@ -722,10 +734,16 @@ export default {
   'node.roots': 'Verzeichnisse',
   'node.add_root': 'Verzeichnis hinzufügen',
   'node.remove_root': 'Entfernen',
+  'node.root_no_signing_key': 'Kein Signaturschlüssel verfügbar — koppeln Sie dieses Gerät zuerst mit dem Node',
+  'node.root_no_route': 'Keine Verbindung zum Node — verbinden Sie sich damit oder verwenden Sie die App auf dem Rechner, der ihn hostet',
+  'node.root_remove_last': 'Eine Gruppe braucht mindestens ein Verzeichnis',
+  'node.root_path_hint': 'Der Pfad, wie der Node ihn sieht, auf dem Rechner, der diese Gruppe hostet.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Pfad',
+  'node.directory': 'Verzeichnis',
   'node.root_added': 'Verzeichnis hinzugefügt.',
   'node.root_remove_confirm': '„{name}" aus dieser Gruppe entfernen?',
   'node.root_removed': 'Verzeichnis entfernt. Neustart empfohlen, um den Index zu aktualisieren.',
-  'node.upload_root': 'Uploads',
   'node.attach_group': 'Gruppe hinzufügen',
   'node.attach_pick': 'Zu hostende Gruppe',
   'node.attach_dir': 'Freigegebenes Verzeichnis',
@@ -805,7 +823,41 @@ export default {
   'settings_node.photo_roots_add': 'Hinzufügen',
   'settings_node.photo_roots_remove': 'Entfernen',
   'settings_node.photo_roots_save': 'Speichern',
-  'settings_node.directories_title': 'Verzeichnisse',
+  'settings_node.shared_directories_title': 'Freigegebene Verzeichnisse',
+  'settings_node.shared_directories_hint': 'Ordner, die mit dieser Gruppe geteilt werden. Lesen/Schreiben umschalten, um Uploads zu erlauben. Als wechselbar markieren für externe Laufwerke.',
+  'folder_tree.title_single': 'Ordner auswählen',
+  'folder_tree.title_multi': 'Ordner auswählen',
+  'folder_tree.choose': 'Auswählen…',
+  'folder_tree.remove': 'Entfernen',
+  'folder_tree.add': 'Ordner hinzufügen…',
+  'folder_tree.confirm': 'Übernehmen',
+  'folder_tree.expand': 'Aufklappen',
+  'folder_tree.collapse': 'Zuklappen',
+  'folder_tree.nothing_selected': 'Nichts ausgewählt',
+  'folder_tree.empty': 'Diese Gruppe hat noch keine freigegebenen Verzeichnisse.',
+  'folder_tree.writable_only': 'Hier sind nur les- und beschreibbare Verzeichnisse wählbar — es wird hineingeschrieben.',
+  'folder_tree.no_writable_root': 'Diese Gruppe hat kein beschreibbares Verzeichnis. Schalten Sie zuerst eines unter Freigegebene Verzeichnisse frei.',
+  'folder_tree.read_only_blocked': 'Nur lesen — kein Schreiben möglich',
+  'settings_app.save': 'Speichern',
+  'settings_app.saving': 'Wird gespeichert…',
+  'settings_app.disabled_hint': 'Schalten Sie diese App ein, um sie zu konfigurieren.',
+  'settings_app.video_directories_label': 'Video-Ordner',
+  'settings_app.video_directories_hint': 'Wo die Filme und Serien dieser Gruppe liegen. Nichts außerhalb erscheint im Videos-Tab.',
+  'settings_app.music_directories_label': 'Musik-Ordner',
+  'settings_app.music_directories_hint': 'Wo die Alben dieser Gruppe liegen. Nichts außerhalb erscheint im Musik-Tab.',
+  'settings_app.photo_directories_label': 'Foto-Ordner',
+  'settings_app.photo_directories_hint': 'Wo die Alben dieser Gruppe liegen. Nichts außerhalb erscheint im Fotos-Tab.',
+  'settings_app.chat_directory_label': 'Ordner für Anhänge',
+  'settings_app.chat_directory_hint': 'Wohin im Chat gesendete Dateien geschrieben werden. Muss ein beschreibbares Verzeichnis sein.',
+  'settings_app.chat_no_writable_root': 'Diese Gruppe hat kein beschreibbares Verzeichnis, daher sind Anhänge aus.',
+  'settings_app.chat_link_preview_label': 'Link-Vorschauen',
+  'settings_app.chat_link_preview_hint': 'Postet ein Mitglied einen Link, holt der Node Titel und Bild der Seite. Das ist eine Anfrage von Ihrem Rechner an eine Website, die jemand anderes gewählt hat.',
+  'settings_app.tmdb_token_prompt': 'Registrieren Sie sich bei TMDB, um einen eigenen API-Schlüssel zu erzeugen.',
+  'settings_app.tmdb_token_link': 'Schlüssel holen',
+  'settings_node.roots_offline_hint': 'Nicht mit dem Node verbunden — Änderungen laufen über den lokalen Node und greifen beim nächsten Neuladen.',
+  'settings_node.roots_node_too_old': 'Dieser Node ist älter als diese Seite: Er kann seine Verzeichnisse anzeigen, aber hier nicht ändern. Aktualisieren Sie ihn oder nutzen Sie die meshbay-node root-Befehle.',
+  'settings_node.app_node_too_old': 'Dieser Node ist älter als diese Seite und hat für diese App noch keine Einstellung. Aktualisieren Sie ihn, um sie hier zu konfigurieren.',
+  'settings_node.directories_title': 'App-Verzeichnisse',
   'settings_node.directories_hint': 'Freigegebene Ordner und welchen davon die Videos-, Musik- und Fotos-Apps als eigene(n) Einstiegspunkt(e) nutzen.',
 
   // Create-group wizard
@@ -909,4 +961,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': 'Lesen/Schreiben',
+  'node.root_ro': 'Nur lesen',
+  'node.removable': 'wechselbar',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js
index 2d38e4b..6dbb70f 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/en.js
@@ -127,6 +127,12 @@ export default {
   'group.tab_video': 'Videos',
   'group.tab_music': 'Music',
   'group.tab_photos': 'Photos',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'Hello, World!',
+  'helloworld.no_directory': 'No folder chosen yet. Pick one in Settings.',
+  'helloworld.counted': '{n} file(s)',
+  'settings_app.helloworld_directory_label': 'Folder',
+  'settings_app.helloworld_directory_hint': 'The folder this reference app lists. It exists to show that adding an application needs nothing beyond its own two files.',
   'group.tab_members': 'Members',
   'group.tab_settings': "Settings",
   'members.danger_leave_hint': "You will lose access to this group's files and chat.",
@@ -154,7 +160,8 @@ export default {
   'group.offline_hint': 'Files will appear when a node hosting this group connects.',
   'group.upload': 'Upload',
   'group.mkdir': 'New folder',
-  'group.mkdir_prompt': 'Name of the new folder:',
+  'group.mkdir_prompt': 'New folder name',
+  'group.mkdir_offline': 'Not connected to the node.',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -169,6 +176,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(unavailable — the drive is disconnected)',
+  'group.root_ejected': '(ejected)',
+  'group.root_writable': 'Read/Write',
+  'group.root_eject': 'Eject',
+  'group.root_plug': 'Plug in',
   'group.view': 'View',
   'group.delete': 'Delete',
   'group.delete_confirm': 'Delete {name}?',
@@ -194,6 +205,7 @@ export default {
   'chat.placeholder': 'Type a message...',
   'chat.send': 'Send',
   'chat.attach': 'Attach file',
+  'chat.attach_read_only': 'No writable shared directory — attachments are off',
 
   // Video player
   'video.loading': 'Loading {name}...',
@@ -599,8 +611,42 @@ export default {
   'settings_node.photo_roots_add': 'Add',
   'settings_node.photo_roots_remove': 'Remove',
   'settings_node.photo_roots_save': 'Save',
-  'settings_node.directories_title': 'Directories',
-  'settings_node.directories_hint': 'Shared folders, and which of them the Videos, Music and Photos apps use as their own entry point(s).',
+  'settings_node.shared_directories_title': 'Shared directories',
+  'settings_node.shared_directories_hint': 'Folders shared with this group. Toggle read-write to allow uploads, mark as removable for external drives.',
+  'folder_tree.title_single': 'Choose a folder',
+  'folder_tree.title_multi': 'Choose folders',
+  'folder_tree.choose': 'Choose…',
+  'folder_tree.remove': 'Remove',
+  'folder_tree.add': 'Add a folder…',
+  'folder_tree.confirm': 'Use these',
+  'folder_tree.expand': 'Expand',
+  'folder_tree.collapse': 'Collapse',
+  'folder_tree.nothing_selected': 'Nothing selected',
+  'folder_tree.empty': 'This group has no shared directories yet.',
+  'folder_tree.writable_only': 'Only read-write directories can be chosen here — files are written to this one.',
+  'folder_tree.no_writable_root': 'This group has no read-write directory. Make one read-write in Shared directories first.',
+  'folder_tree.read_only_blocked': 'Read-only — cannot be written to',
+  'settings_app.save': 'Save',
+  'settings_app.saving': 'Saving…',
+  'settings_app.disabled_hint': 'Turn this app on to configure it.',
+  'settings_app.video_directories_label': 'Video folders',
+  'settings_app.video_directories_hint': 'Where this group\'s films and shows live. Nothing outside them appears in the Videos tab.',
+  'settings_app.music_directories_label': 'Music folders',
+  'settings_app.music_directories_hint': 'Where this group\'s albums live. Nothing outside them appears in the Music tab.',
+  'settings_app.photo_directories_label': 'Photo folders',
+  'settings_app.photo_directories_hint': 'Where this group\'s albums live. Nothing outside them appears in the Photos tab.',
+  'settings_app.chat_directory_label': 'Attachment folder',
+  'settings_app.chat_directory_hint': 'Where files sent in chat are written. Must be a read-write directory.',
+  'settings_app.chat_no_writable_root': 'This group has no read-write directory, so attachments are off.',
+  'settings_app.chat_link_preview_label': 'Link previews',
+  'settings_app.chat_link_preview_hint': 'When a member posts a link, the node fetches the page\'s title and image. That is a request from your machine to a site somebody else chose.',
+  'settings_app.tmdb_token_prompt': 'Sign up on TMDB to generate your own API key.',
+  'settings_app.tmdb_token_link': 'Get a key',
+  'settings_node.roots_offline_hint': 'Not connected to the node — changes go through the local node instead, and take effect on its next reload.',
+  'settings_node.roots_node_too_old': 'This node is older than this page: it can show its directories but not change them here. Update it, or use the meshbay-node root commands.',
+  'settings_node.app_node_too_old': 'This node is older than this page and has no setting for this app yet. Update it to configure this here.',
+  'settings_node.directories_title': 'App directories',
+  'settings_node.directories_hint': 'Which shared folders the Videos, Music and Photos apps use as their entry point(s).',
 
   // Members
   'members.col_role': 'Role',
@@ -753,10 +799,19 @@ export default {
   'node.peers': { one: '1 peer', other: '{n} peers' },
   'node.no_gek': 'No group key',
   'node.roots': 'Directories',
-  'node.upload_root': 'uploads',
+  'node.directory': 'Directory',
+  'node.root_rw': 'Writable',
+  'node.root_ro': 'read-only',
+  'node.removable': 'Removable',
   'node.unavailable': 'unavailable',
   'node.add_root': 'Add directory',
   'node.remove_root': 'Remove',
+  'node.root_no_signing_key': 'No signing key available — pair this device with the node first',
+  'node.root_no_route': 'No route to the node — connect to it, or use the app on the machine hosting it',
+  'node.root_remove_last': 'A group needs at least one directory',
+  'node.root_path_hint': 'The path as the node sees it, on the machine hosting this group.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Path',
   'node.root_added': 'Directory added.',
   'node.root_removed': 'Directory removed. Restart recommended to update the index.',
   'node.root_remove_confirm': 'Remove "{name}" from this group?',
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js
index 471ad82..aa950cc 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/es.js
@@ -124,6 +124,12 @@ export default {
   'group.tab_video': 'Vídeos',
   'group.tab_music': 'Música',
   'group.tab_photos': 'Fotos',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': '¡Hola, mundo!',
+  'helloworld.no_directory': 'Aún no hay carpeta elegida. Elige una en los ajustes.',
+  'helloworld.counted': '{n} archivo(s)',
+  'settings_app.helloworld_directory_label': 'Carpeta',
+  'settings_app.helloworld_directory_hint': 'La carpeta que lista esta aplicación de referencia. Existe para mostrar que añadir una aplicación no requiere más que sus dos archivos.',
   'group.tab_members': 'Miembros',
   'group.tab_settings': "Ajustes",
   'members.danger_leave_hint': "Perderá el acceso a los archivos y al chat de este grupo.",
@@ -152,7 +158,8 @@ export default {
     + 'este grupo.',
   'group.upload': 'Subir',
   'group.mkdir': 'Nueva carpeta',
-  'group.mkdir_prompt': 'Nombre de la nueva carpeta:',
+  'group.mkdir_prompt': 'Nombre de la nueva carpeta',
+  'group.mkdir_offline': 'Sin conexión con el nodo.',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -167,6 +174,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(no disponible — la unidad está desconectada)',
+  'group.root_plug': 'Conectar',
+  'group.root_eject': 'Expulsar',
+  'group.root_writable': 'Lectura/Escritura',
+  'group.root_ejected': '(expulsado)',
   'group.view': 'Ver',
   'group.delete': 'Eliminar',
   'group.delete_confirm': '¿Eliminar {name}?',
@@ -193,6 +204,7 @@ export default {
   'chat.placeholder': 'Escriba un mensaje...',
   'chat.send': 'Enviar',
   'chat.attach': 'Adjuntar archivo',
+  'chat.attach_read_only': 'Ningún directorio compartido con escritura: los adjuntos están desactivados',
 
   // Video player
   'video.loading': 'Cargando {name}...',
@@ -718,10 +730,16 @@ export default {
   'node.roots': 'Directorios',
   'node.add_root': 'Añadir directorio',
   'node.remove_root': 'Eliminar',
+  'node.root_no_signing_key': 'No hay clave de firma disponible: empareja primero este dispositivo con el nodo',
+  'node.root_no_route': 'No hay ruta al nodo: conéctate a él o usa la aplicación en la máquina que lo aloja',
+  'node.root_remove_last': 'Un grupo necesita al menos un directorio',
+  'node.root_path_hint': 'La ruta tal como la ve el nodo, en la máquina que aloja este grupo.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Ruta',
+  'node.directory': 'Directorio',
   'node.root_added': 'Directorio añadido.',
   'node.root_remove_confirm': '¿Eliminar «{name}» de este grupo?',
   'node.root_removed': 'Directorio eliminado. Se recomienda reiniciar para actualizar el índice.',
-  'node.upload_root': 'subidas',
   'node.attach_group': 'Añadir grupo',
   'node.attach_pick': 'Grupo a alojar',
   'node.attach_dir': 'Directorio compartido',
@@ -801,7 +819,41 @@ export default {
   'settings_node.photo_roots_add': 'Añadir',
   'settings_node.photo_roots_remove': 'Quitar',
   'settings_node.photo_roots_save': 'Guardar',
-  'settings_node.directories_title': 'Directorios',
+  'settings_node.shared_directories_title': 'Directorios compartidos',
+  'settings_node.shared_directories_hint': 'Carpetas compartidas con este grupo. Active lectura-escritura para permitir subidas, marque como extraíble para unidades externas.',
+  'folder_tree.title_single': 'Elegir una carpeta',
+  'folder_tree.title_multi': 'Elegir carpetas',
+  'folder_tree.choose': 'Elegir…',
+  'folder_tree.remove': 'Quitar',
+  'folder_tree.add': 'Añadir una carpeta…',
+  'folder_tree.confirm': 'Usar',
+  'folder_tree.expand': 'Expandir',
+  'folder_tree.collapse': 'Contraer',
+  'folder_tree.nothing_selected': 'Nada seleccionado',
+  'folder_tree.empty': 'Este grupo aún no tiene directorios compartidos.',
+  'folder_tree.writable_only': 'Aquí solo se pueden elegir directorios de lectura-escritura: se escriben archivos en él.',
+  'folder_tree.no_writable_root': 'Este grupo no tiene ningún directorio de escritura. Activa primero lectura-escritura en Directorios compartidos.',
+  'folder_tree.read_only_blocked': 'Solo lectura: no se puede escribir',
+  'settings_app.save': 'Guardar',
+  'settings_app.saving': 'Guardando…',
+  'settings_app.disabled_hint': 'Activa esta aplicación para configurarla.',
+  'settings_app.video_directories_label': 'Carpetas de vídeo',
+  'settings_app.video_directories_hint': 'Dónde están las películas y series de este grupo. Nada fuera de ellas aparece en la pestaña Vídeos.',
+  'settings_app.music_directories_label': 'Carpetas de música',
+  'settings_app.music_directories_hint': 'Dónde están los álbumes de este grupo. Nada fuera de ellos aparece en la pestaña Música.',
+  'settings_app.photo_directories_label': 'Carpetas de fotos',
+  'settings_app.photo_directories_hint': 'Dónde están los álbumes de este grupo. Nada fuera de ellos aparece en la pestaña Fotos.',
+  'settings_app.chat_directory_label': 'Carpeta de adjuntos',
+  'settings_app.chat_directory_hint': 'Dónde se escriben los archivos enviados en el chat. Debe ser un directorio de lectura-escritura.',
+  'settings_app.chat_no_writable_root': 'Este grupo no tiene directorio de escritura, así que los adjuntos están desactivados.',
+  'settings_app.chat_link_preview_label': 'Vistas previas de enlaces',
+  'settings_app.chat_link_preview_hint': 'Cuando un miembro publica un enlace, el nodo obtiene el título y la imagen de la página. Es una petición desde tu máquina a un sitio que eligió otra persona.',
+  'settings_app.tmdb_token_prompt': 'Regístrate en TMDB para generar tu propia clave de API.',
+  'settings_app.tmdb_token_link': 'Obtener una clave',
+  'settings_node.roots_offline_hint': 'Sin conexión con el nodo: los cambios pasan por el nodo local y se aplican en su próxima recarga.',
+  'settings_node.roots_node_too_old': 'Este nodo es más antiguo que esta página: puede mostrar sus directorios pero no cambiarlos aquí. Actualízalo o usa los comandos meshbay-node root.',
+  'settings_node.app_node_too_old': 'Este nodo es más antiguo que esta página y aún no tiene ajustes para esta aplicación. Actualízalo para configurarla aquí.',
+  'settings_node.directories_title': 'Directorios de apps',
   'settings_node.directories_hint': 'Carpetas compartidas, y cuál de ellas usan las apps de Vídeos, Música y Fotos como su(s) propio(s) punto(s) de entrada.',
 
   // Create group wizard
@@ -905,4 +957,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': 'lectura-escritura',
+  'node.root_ro': 'solo lectura',
+  'node.removable': 'extraíble',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js
index 48f26a2..daa9f94 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/fr.js
@@ -125,6 +125,12 @@ export default {
   'group.tab_video': 'Vidéos',
   'group.tab_music': 'Musique',
   'group.tab_photos': 'Photos',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'Bonjour, monde !',
+  'helloworld.no_directory': 'Aucun dossier choisi. Choisissez-en un dans les réglages.',
+  'helloworld.counted': '{n} fichier(s)',
+  'settings_app.helloworld_directory_label': 'Dossier',
+  'settings_app.helloworld_directory_hint': 'Le dossier que cette application de référence liste. Elle existe pour montrer qu\'ajouter une application ne demande rien de plus que ses deux fichiers.',
   'group.tab_members': 'Membres',
   'group.tab_settings': "Paramètres",
   'members.danger_leave_hint': "Vous perdrez l’accès aux fichiers et à la discussion de ce groupe.",
@@ -153,7 +159,8 @@ export default {
     + 'groupe se connectera.',
   'group.upload': 'Envoyer',
   'group.mkdir': 'Nouveau dossier',
-  'group.mkdir_prompt': 'Nom du nouveau dossier :',
+  'group.mkdir_prompt': 'Nom du nouveau dossier',
+  'group.mkdir_offline': 'Non connecté au nœud.',
   'device.add_title': 'Ce navigateur n’est pas encore lié à ce nœud',
   'device.add_hint': 'Votre compte est connu ici, mais ce navigateur détient une autre clé. Approuvez-le depuis un appareil déjà lié — sans passer par l’opérateur.',
   'device.add_btn': 'Obtenir un code de liaison',
@@ -168,6 +175,10 @@ export default {
   'device.approve_btn': 'Approuver',
   'device.approved': 'Appareil lié.',
   'group.root_unavailable': '(indisponible — le disque est déconnecté)',
+  'group.root_ejected': '(éjecté)',
+  'group.root_writable': 'Lecture/Écriture',
+  'group.root_eject': 'Éjecter',
+  'group.root_plug': 'Reconnecter',
   'group.view': 'Afficher',
   'group.delete': 'Supprimer',
   'group.delete_confirm': 'Supprimer {name} ?',
@@ -194,6 +205,7 @@ export default {
   'chat.placeholder': 'Écrivez un message...',
   'chat.send': 'Envoyer',
   'chat.attach': 'Joindre un fichier',
+  'chat.attach_read_only': 'Aucun répertoire partagé en écriture — pièces jointes désactivées',
 
   // Video player
   'video.loading': 'Chargement de {name}...',
@@ -727,10 +739,19 @@ export default {
   'node.roots': 'Répertoires',
   'node.add_root': 'Ajouter un répertoire',
   'node.remove_root': 'Retirer',
+  'node.root_no_signing_key': 'Aucune clé de signature disponible — appairez d\'abord cet appareil avec le nœud',
+  'node.root_no_route': 'Aucune route vers le nœud — connectez-vous à lui, ou utilisez l\'application sur la machine qui l\'héberge',
+  'node.root_remove_last': 'Un groupe a besoin d\'au moins un répertoire',
+  'node.root_path_hint': 'Le chemin tel que le nœud le voit, sur la machine qui héberge ce groupe.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Chemin',
   'node.root_added': 'Répertoire ajouté.',
   'node.root_remove_confirm': 'Retirer « {name} » de ce groupe ?',
   'node.root_removed': 'Répertoire retiré. Un redémarrage est recommandé pour mettre à jour l\'index.',
-  'node.upload_root': 'uploads',
+  'node.directory': 'Répertoire',
+  'node.root_rw': 'Écriture',
+  'node.root_ro': 'lecture seule',
+  'node.removable': 'Amovible',
   'node.attach_group': 'Ajouter un groupe',
   'node.attach_pick': 'Groupe à héberger',
   'node.attach_dir': 'Répertoire partagé',
@@ -816,8 +837,42 @@ export default {
   'settings_node.photo_roots_add': 'Ajouter',
   'settings_node.photo_roots_remove': 'Retirer',
   'settings_node.photo_roots_save': 'Enregistrer',
-  'settings_node.directories_title': 'Répertoires',
-  'settings_node.directories_hint': 'Dossiers partagés, et lequel d\'entre eux les applications Vidéos, Musique et Photos utilisent comme leur(s) propre(s) point(s) d\'entrée.',
+  'settings_node.shared_directories_title': 'Répertoires partagés',
+  'settings_node.shared_directories_hint': 'Dossiers partagés avec ce groupe. Activez lecture-écriture pour autoriser les envois, marquez comme amovible pour les disques externes.',
+  'folder_tree.title_single': 'Choisir un dossier',
+  'folder_tree.title_multi': 'Choisir des dossiers',
+  'folder_tree.choose': 'Choisir…',
+  'folder_tree.remove': 'Retirer',
+  'folder_tree.add': 'Ajouter un dossier…',
+  'folder_tree.confirm': 'Utiliser',
+  'folder_tree.expand': 'Déplier',
+  'folder_tree.collapse': 'Replier',
+  'folder_tree.nothing_selected': 'Rien de sélectionné',
+  'folder_tree.empty': 'Ce groupe n\'a pas encore de répertoire partagé.',
+  'folder_tree.writable_only': 'Seuls les répertoires en lecture-écriture sont proposés ici — des fichiers y sont écrits.',
+  'folder_tree.no_writable_root': 'Ce groupe n\'a aucun répertoire en écriture. Activez d\'abord lecture-écriture dans Répertoires partagés.',
+  'folder_tree.read_only_blocked': 'Lecture seule — écriture impossible',
+  'settings_app.save': 'Enregistrer',
+  'settings_app.saving': 'Enregistrement…',
+  'settings_app.disabled_hint': 'Activez cette application pour la configurer.',
+  'settings_app.video_directories_label': 'Dossiers vidéo',
+  'settings_app.video_directories_hint': 'Où vivent les films et séries de ce groupe. Rien en dehors n\'apparaît dans l\'onglet Vidéos.',
+  'settings_app.music_directories_label': 'Dossiers musique',
+  'settings_app.music_directories_hint': 'Où vivent les albums de ce groupe. Rien en dehors n\'apparaît dans l\'onglet Musique.',
+  'settings_app.photo_directories_label': 'Dossiers photo',
+  'settings_app.photo_directories_hint': 'Où vivent les albums de ce groupe. Rien en dehors n\'apparaît dans l\'onglet Photos.',
+  'settings_app.chat_directory_label': 'Dossier des pièces jointes',
+  'settings_app.chat_directory_hint': 'Où sont écrits les fichiers envoyés dans le chat. Doit être un répertoire en lecture-écriture.',
+  'settings_app.chat_no_writable_root': 'Ce groupe n\'a aucun répertoire en écriture : les pièces jointes sont désactivées.',
+  'settings_app.chat_link_preview_label': 'Aperçus des liens',
+  'settings_app.chat_link_preview_hint': 'Quand un membre poste un lien, le nœud récupère le titre et l\'image de la page. C\'est une requête depuis votre machine vers un site choisi par quelqu\'un d\'autre.',
+  'settings_app.tmdb_token_prompt': 'Créez un compte TMDB pour générer votre propre clé d\'API.',
+  'settings_app.tmdb_token_link': 'Obtenir une clé',
+  'settings_node.roots_offline_hint': 'Non connecté au nœud — les changements passent par le nœud local et prennent effet à son prochain rechargement.',
+  'settings_node.roots_node_too_old': 'Ce nœud est plus ancien que cette page : il peut afficher ses répertoires mais pas les modifier ici. Mettez-le à jour, ou utilisez les commandes meshbay-node root.',
+  'settings_node.app_node_too_old': 'Ce nœud est plus ancien que cette page et n\'a pas encore de réglage pour cette application. Mettez-le à jour pour la configurer ici.',
+  'settings_node.directories_title': 'Répertoires des applications',
+  'settings_node.directories_hint': 'Quel(s) dossier(s) partagés les applications Vidéos, Musique et Photos utilisent comme leur(s) propre(s) point(s) d\'entrée.',
 
   // Create group wizard
   'wizard.title': 'Créer un groupe',
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js
index 564f34b..364c26c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/it.js
@@ -125,6 +125,12 @@ export default {
   'group.tab_video': 'Video',
   'group.tab_music': 'Musica',
   'group.tab_photos': 'Foto',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'Ciao, mondo!',
+  'helloworld.no_directory': 'Nessuna cartella scelta. Scegline una nelle impostazioni.',
+  'helloworld.counted': '{n} file',
+  'settings_app.helloworld_directory_label': 'Cartella',
+  'settings_app.helloworld_directory_hint': 'La cartella elencata da questa applicazione di riferimento. Serve a mostrare che aggiungerne una non richiede altro che i suoi due file.',
   'group.tab_members': 'Membri',
   'group.tab_settings': "Impostazioni",
   'members.danger_leave_hint': "Perderai l’accesso ai file e alla chat di questo gruppo.",
@@ -153,7 +159,8 @@ export default {
     + 'questo gruppo.',
   'group.upload': 'Carica',
   'group.mkdir': 'Nuova cartella',
-  'group.mkdir_prompt': 'Nome della nuova cartella:',
+  'group.mkdir_prompt': 'Nome della nuova cartella',
+  'group.mkdir_offline': 'Non connesso al nodo.',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -168,6 +175,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(non disponibile — l’unità è scollegata)',
+  'group.root_plug': 'Ricollega',
+  'group.root_eject': 'Espelli',
+  'group.root_writable': 'Lettura/Scrittura',
+  'group.root_ejected': '(espulso)',
   'group.view': 'Visualizza',
   'group.delete': 'Elimina',
   'group.delete_confirm': 'Eliminare {name}?',
@@ -194,6 +205,7 @@ export default {
   'chat.placeholder': 'Scriva un messaggio...',
   'chat.send': 'Invia',
   'chat.attach': 'Allega un file',
+  'chat.attach_read_only': 'Nessuna directory condivisa scrivibile: gli allegati sono disattivati',
 
   // Video player
   'video.loading': 'Caricamento di {name}...',
@@ -726,10 +738,16 @@ export default {
   'node.roots': 'Directory',
   'node.add_root': 'Aggiungi directory',
   'node.remove_root': 'Rimuovi',
+  'node.root_no_signing_key': 'Nessuna chiave di firma disponibile: associa prima questo dispositivo al nodo',
+  'node.root_no_route': 'Nessuna via verso il nodo: connettiti a esso oppure usa l\'applicazione sulla macchina che lo ospita',
+  'node.root_remove_last': 'Un gruppo ha bisogno di almeno una directory',
+  'node.root_path_hint': 'Il percorso come lo vede il nodo, sulla macchina che ospita questo gruppo.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Percorso',
+  'node.directory': 'Directory',
   'node.root_added': 'Directory aggiunta.',
   'node.root_remove_confirm': 'Rimuovere «{name}» da questo gruppo?',
   'node.root_removed': "Directory rimossa. Si consiglia un riavvio per aggiornare l'indice.",
-  'node.upload_root': 'caricamenti',
   'node.attach_group': 'Aggiungi gruppo',
   'node.attach_pick': 'Gruppo da ospitare',
   'node.attach_dir': 'Directory condivisa',
@@ -815,7 +833,41 @@ export default {
   'settings_node.photo_roots_add': 'Aggiungi',
   'settings_node.photo_roots_remove': 'Rimuovi',
   'settings_node.photo_roots_save': 'Salva',
-  'settings_node.directories_title': 'Directory',
+  'settings_node.shared_directories_title': 'Directory condivise',
+  'settings_node.shared_directories_hint': 'Cartelle condivise con questo gruppo. Attiva lettura-scrittura per consentire il caricamento, segna come rimovibile per unità esterne.',
+  'folder_tree.title_single': 'Scegli una cartella',
+  'folder_tree.title_multi': 'Scegli le cartelle',
+  'folder_tree.choose': 'Scegli…',
+  'folder_tree.remove': 'Rimuovi',
+  'folder_tree.add': 'Aggiungi una cartella…',
+  'folder_tree.confirm': 'Usa',
+  'folder_tree.expand': 'Espandi',
+  'folder_tree.collapse': 'Comprimi',
+  'folder_tree.nothing_selected': 'Niente selezionato',
+  'folder_tree.empty': 'Questo gruppo non ha ancora directory condivise.',
+  'folder_tree.writable_only': 'Qui si possono scegliere solo directory in lettura-scrittura: ci vengono scritti dei file.',
+  'folder_tree.no_writable_root': 'Questo gruppo non ha directory scrivibili. Attiva prima lettura-scrittura in Directory condivise.',
+  'folder_tree.read_only_blocked': 'Sola lettura: non vi si può scrivere',
+  'settings_app.save': 'Salva',
+  'settings_app.saving': 'Salvataggio…',
+  'settings_app.disabled_hint': 'Attiva questa applicazione per configurarla.',
+  'settings_app.video_directories_label': 'Cartelle video',
+  'settings_app.video_directories_hint': 'Dove si trovano film e serie di questo gruppo. Nulla al di fuori compare nella scheda Video.',
+  'settings_app.music_directories_label': 'Cartelle musica',
+  'settings_app.music_directories_hint': 'Dove si trovano gli album di questo gruppo. Nulla al di fuori compare nella scheda Musica.',
+  'settings_app.photo_directories_label': 'Cartelle foto',
+  'settings_app.photo_directories_hint': 'Dove si trovano gli album di questo gruppo. Nulla al di fuori compare nella scheda Foto.',
+  'settings_app.chat_directory_label': 'Cartella degli allegati',
+  'settings_app.chat_directory_hint': 'Dove vengono scritti i file inviati in chat. Deve essere una directory in lettura-scrittura.',
+  'settings_app.chat_no_writable_root': 'Questo gruppo non ha directory scrivibili, quindi gli allegati sono disattivati.',
+  'settings_app.chat_link_preview_label': 'Anteprime dei link',
+  'settings_app.chat_link_preview_hint': 'Quando un membro pubblica un link, il nodo recupera titolo e immagine della pagina. È una richiesta dalla tua macchina a un sito scelto da qualcun altro.',
+  'settings_app.tmdb_token_prompt': 'Registrati su TMDB per generare la tua chiave API.',
+  'settings_app.tmdb_token_link': 'Ottieni una chiave',
+  'settings_node.roots_offline_hint': 'Non connesso al nodo: le modifiche passano dal nodo locale e hanno effetto al successivo ricaricamento.',
+  'settings_node.roots_node_too_old': 'Questo nodo è più vecchio di questa pagina: può mostrare le sue directory ma non modificarle qui. Aggiornalo, oppure usa i comandi meshbay-node root.',
+  'settings_node.app_node_too_old': 'Questo nodo è più vecchio di questa pagina e non ha ancora impostazioni per questa applicazione. Aggiornalo per configurarla qui.',
+  'settings_node.directories_title': 'Directory delle app',
   'settings_node.directories_hint': 'Cartelle condivise, e quale di esse le app Video, Musica e Foto usano come proprio/i punto/i di ingresso.',
 
   // Create-group wizard
@@ -919,4 +971,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': 'lettura-scrittura',
+  'node.root_ro': 'sola lettura',
+  'node.removable': 'rimovibile',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js
index 3eed305..f778fc4 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/ja.js
@@ -123,6 +123,12 @@ export default {
   'group.tab_video': '動画',
   'group.tab_music': '音楽',
   'group.tab_photos': '写真',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'ハロー、ワールド！',
+  'helloworld.no_directory': 'フォルダーが未選択です。設定で選んでください。',
+  'helloworld.counted': '{n} 件のファイル',
+  'settings_app.helloworld_directory_label': 'フォルダー',
+  'settings_app.helloworld_directory_hint': 'この参照アプリが一覧表示するフォルダーです。アプリの追加に必要なのは自身の 2 つのファイルだけであることを示すために存在します。',
   'group.tab_members': 'メンバー',
   'group.tab_settings': "設定",
   'members.danger_leave_hint': "このグループのファイルとチャットにアクセスできなくなります。",
@@ -151,7 +157,8 @@ export default {
     + 'ファイルが表示されます。',
   'group.upload': 'アップロード',
   'group.mkdir': '新しいフォルダー',
-  'group.mkdir_prompt': '新しいフォルダーの名前：',
+  'group.mkdir_prompt': '新しいフォルダー名',
+  'group.mkdir_offline': 'ノードに接続していません。',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -166,6 +173,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(利用不可 — ドライブが切断されています)',
+  'group.root_plug': '接続する',
+  'group.root_eject': '取り外す',
+  'group.root_writable': '読み書き可',
+  'group.root_ejected': '(取り外し済み)',
   'group.view': '表示',
   'group.delete': '削除',
   'group.delete_confirm': '{name} を削除しますか？',
@@ -191,6 +202,7 @@ export default {
   'chat.placeholder': 'メッセージを入力…',
   'chat.send': '送信',
   'chat.attach': 'ファイルを添付',
+  'chat.attach_read_only': '書き込み可能な共有ディレクトリがありません — 添付は無効です',
 
   // Video player
   'video.loading': '{name} を読み込んでいます…',
@@ -712,10 +724,16 @@ export default {
   'node.roots': 'ディレクトリ',
   'node.add_root': 'ディレクトリを追加',
   'node.remove_root': '削除',
+  'node.root_no_signing_key': '署名鍵がありません — 先にこの端末をノードとペアリングしてください',
+  'node.root_no_route': 'ノードへの経路がありません — 接続するか、ノードを動かしているマシンでアプリを使ってください',
+  'node.root_remove_last': 'グループには少なくとも 1 つのディレクトリが必要です',
+  'node.root_path_hint': 'このグループをホストしているマシン上で、ノードから見たパスです。',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'パス',
+  'node.directory': 'ディレクトリ',
   'node.root_added': 'ディレクトリを追加しました。',
   'node.root_remove_confirm': '「{name}」をこのグループから削除しますか？',
   'node.root_removed': 'ディレクトリを削除しました。インデックスを更新するために再起動を推奨します。',
-  'node.upload_root': 'アップロード',
   'node.attach_group': 'グループを追加',
   'node.attach_pick': 'ホストするグループ',
   'node.attach_dir': '共有ディレクトリ',
@@ -799,7 +817,41 @@ export default {
   'settings_node.photo_roots_add': '追加',
   'settings_node.photo_roots_remove': '削除',
   'settings_node.photo_roots_save': '保存',
-  'settings_node.directories_title': 'ディレクトリ',
+  'settings_node.shared_directories_title': '共有ディレクトリ',
+  'settings_node.shared_directories_hint': 'このグループと共有されているフォルダー。読み書きを切り替えてアップロードを許可し、外付けドライブにはリムーバブルを設定します。',
+  'folder_tree.title_single': 'フォルダーを選択',
+  'folder_tree.title_multi': 'フォルダーを選択',
+  'folder_tree.choose': '選択…',
+  'folder_tree.remove': '外す',
+  'folder_tree.add': 'フォルダーを追加…',
+  'folder_tree.confirm': '決定',
+  'folder_tree.expand': '展開',
+  'folder_tree.collapse': '折りたたむ',
+  'folder_tree.nothing_selected': '未選択',
+  'folder_tree.empty': 'このグループにはまだ共有ディレクトリがありません。',
+  'folder_tree.writable_only': 'ここには読み書き可能なディレクトリしか選べません — ファイルが書き込まれます。',
+  'folder_tree.no_writable_root': 'このグループには書き込み可能なディレクトリがありません。まず「共有ディレクトリ」で読み書きを有効にしてください。',
+  'folder_tree.read_only_blocked': '読み取り専用 — 書き込みできません',
+  'settings_app.save': '保存',
+  'settings_app.saving': '保存中…',
+  'settings_app.disabled_hint': 'このアプリを有効にすると設定できます。',
+  'settings_app.video_directories_label': '動画フォルダー',
+  'settings_app.video_directories_hint': 'このグループの映画や番組がある場所です。それ以外は動画タブに表示されません。',
+  'settings_app.music_directories_label': '音楽フォルダー',
+  'settings_app.music_directories_hint': 'このグループのアルバムがある場所です。それ以外は音楽タブに表示されません。',
+  'settings_app.photo_directories_label': '写真フォルダー',
+  'settings_app.photo_directories_hint': 'このグループのアルバムがある場所です。それ以外は写真タブに表示されません。',
+  'settings_app.chat_directory_label': '添付ファイルのフォルダー',
+  'settings_app.chat_directory_hint': 'チャットで送られたファイルの書き込み先です。読み書き可能なディレクトリである必要があります。',
+  'settings_app.chat_no_writable_root': 'このグループには書き込み可能なディレクトリがないため、添付は無効です。',
+  'settings_app.chat_link_preview_label': 'リンクのプレビュー',
+  'settings_app.chat_link_preview_hint': 'メンバーがリンクを投稿すると、ノードがページのタイトルと画像を取得します。これは他人が選んだサイトへの、あなたのマシンからのリクエストです。',
+  'settings_app.tmdb_token_prompt': 'TMDB に登録して、自分の API キーを発行してください。',
+  'settings_app.tmdb_token_link': 'キーを取得',
+  'settings_node.roots_offline_hint': 'ノードに接続していません — 変更はローカルノード経由で行われ、次回の再読み込みで反映されます。',
+  'settings_node.roots_node_too_old': 'このノードはこのページより古く、ディレクトリの表示はできますがここでの変更はできません。更新するか、meshbay-node root コマンドを使ってください。',
+  'settings_node.app_node_too_old': 'このノードはこのページより古く、このアプリの設定をまだ持っていません。ここで設定するには更新してください。',
+  'settings_node.directories_title': 'アプリのディレクトリ',
   'settings_node.directories_hint': '共有フォルダと、動画・音楽・写真の各アプリがそれぞれの起点として使用するフォルダです。',
 
   // Wizard
@@ -903,4 +955,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': '読み書き',
+  'node.root_ro': '読み取り専用',
+  'node.removable': 'リムーバブル',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js
index 711a22f..6e6842e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/nl.js
@@ -126,6 +126,12 @@ export default {
   'group.tab_video': "Video's",
   'group.tab_music': 'Muziek',
   'group.tab_photos': "Foto's",
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'Hallo, wereld!',
+  'helloworld.no_directory': 'Nog geen map gekozen. Kies er een bij Instellingen.',
+  'helloworld.counted': '{n} bestand(en)',
+  'settings_app.helloworld_directory_label': 'Map',
+  'settings_app.helloworld_directory_hint': 'De map die deze referentie-app toont. Hij bestaat om te laten zien dat een app toevoegen niets meer vergt dan zijn eigen twee bestanden.',
   'group.tab_members': 'Leden',
   'group.tab_settings': "Instellingen",
   'members.danger_leave_hint': "U verliest de toegang tot de bestanden en de chat van deze groep.",
@@ -154,7 +160,8 @@ export default {
     + 'die deze groep host.',
   'group.upload': 'Uploaden',
   'group.mkdir': 'Nieuwe map',
-  'group.mkdir_prompt': 'Naam van de nieuwe map:',
+  'group.mkdir_prompt': 'Naam van de nieuwe map',
+  'group.mkdir_offline': 'Niet verbonden met de node.',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -169,6 +176,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(niet beschikbaar — de schijf is losgekoppeld)',
+  'group.root_plug': 'Aansluiten',
+  'group.root_eject': 'Uitwerpen',
+  'group.root_writable': 'Lezen/schrijven',
+  'group.root_ejected': '(uitgeworpen)',
   'group.view': 'Bekijken',
   'group.delete': 'Verwijderen',
   'group.delete_confirm': '{name} verwijderen?',
@@ -195,6 +206,7 @@ export default {
   'chat.placeholder': 'Typ een bericht...',
   'chat.send': 'Versturen',
   'chat.attach': 'Bestand bijvoegen',
+  'chat.attach_read_only': 'Geen beschrijfbare gedeelde map — bijlagen staan uit',
 
   // Video player
   'video.loading': '{name} wordt geladen...',
@@ -728,10 +740,16 @@ export default {
   'node.roots': 'Mappen',
   'node.add_root': 'Map toevoegen',
   'node.remove_root': 'Verwijderen',
+  'node.root_no_signing_key': 'Geen ondertekeningssleutel beschikbaar — koppel dit apparaat eerst aan de node',
+  'node.root_no_route': 'Geen route naar de node — maak verbinding, of gebruik de app op de machine die hem host',
+  'node.root_remove_last': 'Een groep heeft minstens één map nodig',
+  'node.root_path_hint': 'Het pad zoals de node het ziet, op de machine die deze groep host.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Pad',
+  'node.directory': 'Map',
   'node.root_added': 'Map toegevoegd.',
   'node.root_remove_confirm': '„{name}" uit deze groep verwijderen?',
   'node.root_removed': 'Map verwijderd. Herstart aanbevolen om de index bij te werken.',
-  'node.upload_root': 'uploads',
   'node.attach_group': 'Groep toevoegen',
   'node.attach_pick': 'Groep om te hosten',
   'node.attach_dir': 'Gedeelde map',
@@ -817,7 +835,41 @@ export default {
   'settings_node.photo_roots_add': 'Toevoegen',
   'settings_node.photo_roots_remove': 'Verwijderen',
   'settings_node.photo_roots_save': 'Opslaan',
-  'settings_node.directories_title': 'Mappen',
+  'settings_node.shared_directories_title': 'Gedeelde mappen',
+  'settings_node.shared_directories_hint': 'Mappen gedeeld met deze groep. Schakel lezen-schrijven in om uploads toe te staan, markeer als verwijderbaar voor externe schijven.',
+  'folder_tree.title_single': 'Kies een map',
+  'folder_tree.title_multi': 'Kies mappen',
+  'folder_tree.choose': 'Kiezen…',
+  'folder_tree.remove': 'Verwijderen',
+  'folder_tree.add': 'Map toevoegen…',
+  'folder_tree.confirm': 'Gebruiken',
+  'folder_tree.expand': 'Uitklappen',
+  'folder_tree.collapse': 'Inklappen',
+  'folder_tree.nothing_selected': 'Niets geselecteerd',
+  'folder_tree.empty': 'Deze groep heeft nog geen gedeelde mappen.',
+  'folder_tree.writable_only': 'Hier zijn alleen lees-schrijfmappen te kiezen — er wordt in geschreven.',
+  'folder_tree.no_writable_root': 'Deze groep heeft geen beschrijfbare map. Zet er eerst één op lezen-schrijven bij Gedeelde mappen.',
+  'folder_tree.read_only_blocked': 'Alleen-lezen — kan niet worden beschreven',
+  'settings_app.save': 'Opslaan',
+  'settings_app.saving': 'Opslaan…',
+  'settings_app.disabled_hint': 'Zet deze app aan om hem in te stellen.',
+  'settings_app.video_directories_label': 'Videomappen',
+  'settings_app.video_directories_hint': 'Waar de films en series van deze groep staan. Niets daarbuiten verschijnt op het tabblad Video\'s.',
+  'settings_app.music_directories_label': 'Muziekmappen',
+  'settings_app.music_directories_hint': 'Waar de albums van deze groep staan. Niets daarbuiten verschijnt op het tabblad Muziek.',
+  'settings_app.photo_directories_label': 'Fotomappen',
+  'settings_app.photo_directories_hint': 'Waar de albums van deze groep staan. Niets daarbuiten verschijnt op het tabblad Foto\'s.',
+  'settings_app.chat_directory_label': 'Map voor bijlagen',
+  'settings_app.chat_directory_hint': 'Waar in de chat verstuurde bestanden worden geschreven. Moet een lees-schrijfmap zijn.',
+  'settings_app.chat_no_writable_root': 'Deze groep heeft geen beschrijfbare map, dus bijlagen staan uit.',
+  'settings_app.chat_link_preview_label': 'Linkvoorbeelden',
+  'settings_app.chat_link_preview_hint': 'Als een lid een link plaatst, haalt de node de titel en afbeelding van de pagina op. Dat is een verzoek vanaf uw machine naar een site die iemand anders koos.',
+  'settings_app.tmdb_token_prompt': 'Meld u aan bij TMDB om uw eigen API-sleutel te maken.',
+  'settings_app.tmdb_token_link': 'Sleutel ophalen',
+  'settings_node.roots_offline_hint': 'Niet verbonden met de node — wijzigingen gaan via de lokale node en worden bij de volgende herlaadbeurt actief.',
+  'settings_node.roots_node_too_old': 'Deze node is ouder dan deze pagina: hij kan zijn mappen tonen maar hier niet wijzigen. Werk hem bij, of gebruik de meshbay-node root-opdrachten.',
+  'settings_node.app_node_too_old': 'Deze node is ouder dan deze pagina en heeft nog geen instelling voor deze app. Werk hem bij om die hier in te stellen.',
+  'settings_node.directories_title': 'App-mappen',
   'settings_node.directories_hint': 'Gedeelde mappen, en welke daarvan de Video\'s-, Muziek- en Foto\'s-apps als eigen startpunt(en) gebruiken.',
 
   // Create group wizard
@@ -921,4 +973,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': 'lezen-schrijven',
+  'node.root_ro': 'alleen-lezen',
+  'node.removable': 'verwijderbaar',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js
index 67615a2..c8cbd16 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/pl.js
@@ -130,6 +130,12 @@ export default {
   'group.tab_video': 'Wideo',
   'group.tab_music': 'Muzyka',
   'group.tab_photos': 'Zdjęcia',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'Witaj, świecie!',
+  'helloworld.no_directory': 'Nie wybrano folderu. Wybierz go w ustawieniach.',
+  'helloworld.counted': 'Plików: {n}',
+  'settings_app.helloworld_directory_label': 'Folder',
+  'settings_app.helloworld_directory_hint': 'Folder wypisywany przez tę aplikację referencyjną. Istnieje, aby pokazać, że dodanie aplikacji nie wymaga niczego poza jej dwoma plikami.',
   'group.tab_members': 'Członkowie',
   'group.tab_settings': "Ustawienia",
   'members.danger_leave_hint': "Utracisz dostęp do plików i czatu tej grupy.",
@@ -157,7 +163,8 @@ export default {
   'group.offline_hint': 'Pliki pojawią się, gdy połączy się node hostujący tę grupę.',
   'group.upload': 'Wyślij',
   'group.mkdir': 'Nowy folder',
-  'group.mkdir_prompt': 'Nazwa nowego folderu:',
+  'group.mkdir_prompt': 'Nazwa nowego folderu',
+  'group.mkdir_offline': 'Brak połączenia z węzłem.',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -172,6 +179,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(niedostępne — dysk jest odłączony)',
+  'group.root_plug': 'Podłącz',
+  'group.root_eject': 'Odłącz',
+  'group.root_writable': 'Odczyt/zapis',
+  'group.root_ejected': '(odłączony)',
   'group.view': 'Podgląd',
   'group.delete': 'Usuń',
   'group.delete_confirm': 'Usunąć {name}?',
@@ -200,6 +211,7 @@ export default {
   'chat.placeholder': 'Napisz wiadomość...',
   'chat.send': 'Wyślij',
   'chat.attach': 'Załącz plik',
+  'chat.attach_read_only': 'Brak zapisywalnego katalogu współdzielonego — załączniki wyłączone',
 
   // Video player
   'video.loading': 'Wczytywanie {name}...',
@@ -750,10 +762,16 @@ export default {
   'node.roots': 'Katalogi',
   'node.add_root': 'Dodaj katalog',
   'node.remove_root': 'Usuń',
+  'node.root_no_signing_key': 'Brak klucza podpisu — najpierw sparuj to urządzenie z węzłem',
+  'node.root_no_route': 'Brak połączenia z węzłem — połącz się z nim albo użyj aplikacji na komputerze, który go hostuje',
+  'node.root_remove_last': 'Grupa wymaga co najmniej jednego katalogu',
+  'node.root_path_hint': 'Ścieżka widziana przez węzeł, na komputerze hostującym tę grupę.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Ścieżka',
+  'node.directory': 'Katalog',
   'node.root_added': 'Katalog dodany.',
   'node.root_remove_confirm': 'Usunąć „{name}" z tej grupy?',
   'node.root_removed': 'Katalog usunięty. Zalecany restart w celu odświeżenia indeksu.',
-  'node.upload_root': 'przesyłanie',
   'node.attach_group': 'Dodaj grupę',
   'node.attach_pick': 'Grupa do hostowania',
   'node.attach_dir': 'Katalog współdzielony',
@@ -843,7 +861,41 @@ export default {
   'settings_node.photo_roots_add': 'Dodaj',
   'settings_node.photo_roots_remove': 'Usuń',
   'settings_node.photo_roots_save': 'Zapisz',
-  'settings_node.directories_title': 'Katalogi',
+  'settings_node.shared_directories_title': 'Katalogi udostępnione',
+  'settings_node.shared_directories_hint': 'Foldery udostępnione tej grupie. Przełącz odczyt-zapis, aby zezwolić na przesyłanie, oznacz jako wymienny dla dysków zewnętrznych.',
+  'folder_tree.title_single': 'Wybierz folder',
+  'folder_tree.title_multi': 'Wybierz foldery',
+  'folder_tree.choose': 'Wybierz…',
+  'folder_tree.remove': 'Usuń',
+  'folder_tree.add': 'Dodaj folder…',
+  'folder_tree.confirm': 'Użyj',
+  'folder_tree.expand': 'Rozwiń',
+  'folder_tree.collapse': 'Zwiń',
+  'folder_tree.nothing_selected': 'Nic nie wybrano',
+  'folder_tree.empty': 'Ta grupa nie ma jeszcze katalogów współdzielonych.',
+  'folder_tree.writable_only': 'Tutaj można wybrać tylko katalogi do odczytu i zapisu — zapisywane są w nim pliki.',
+  'folder_tree.no_writable_root': 'Ta grupa nie ma katalogu do zapisu. Najpierw włącz odczyt i zapis w Katalogach współdzielonych.',
+  'folder_tree.read_only_blocked': 'Tylko do odczytu — nie można zapisywać',
+  'settings_app.save': 'Zapisz',
+  'settings_app.saving': 'Zapisywanie…',
+  'settings_app.disabled_hint': 'Włącz tę aplikację, aby ją skonfigurować.',
+  'settings_app.video_directories_label': 'Foldery wideo',
+  'settings_app.video_directories_hint': 'Gdzie znajdują się filmy i seriale tej grupy. Nic poza nimi nie pojawi się w zakładce Wideo.',
+  'settings_app.music_directories_label': 'Foldery muzyki',
+  'settings_app.music_directories_hint': 'Gdzie znajdują się albumy tej grupy. Nic poza nimi nie pojawi się w zakładce Muzyka.',
+  'settings_app.photo_directories_label': 'Foldery zdjęć',
+  'settings_app.photo_directories_hint': 'Gdzie znajdują się albumy tej grupy. Nic poza nimi nie pojawi się w zakładce Zdjęcia.',
+  'settings_app.chat_directory_label': 'Folder załączników',
+  'settings_app.chat_directory_hint': 'Gdzie zapisywane są pliki wysłane na czacie. Musi to być katalog do odczytu i zapisu.',
+  'settings_app.chat_no_writable_root': 'Ta grupa nie ma katalogu do zapisu, więc załączniki są wyłączone.',
+  'settings_app.chat_link_preview_label': 'Podglądy linków',
+  'settings_app.chat_link_preview_hint': 'Gdy członek wysyła link, węzeł pobiera tytuł i obraz strony. To żądanie z Twojego komputera do witryny wybranej przez kogoś innego.',
+  'settings_app.tmdb_token_prompt': 'Zarejestruj się w TMDB, aby wygenerować własny klucz API.',
+  'settings_app.tmdb_token_link': 'Pobierz klucz',
+  'settings_node.roots_offline_hint': 'Brak połączenia z węzłem — zmiany przechodzą przez węzeł lokalny i zaczną działać po jego następnym przeładowaniu.',
+  'settings_node.roots_node_too_old': 'Ten węzeł jest starszy niż ta strona: może pokazać swoje katalogi, ale nie zmieni ich tutaj. Zaktualizuj go albo użyj poleceń meshbay-node root.',
+  'settings_node.app_node_too_old': 'Ten węzeł jest starszy niż ta strona i nie ma jeszcze ustawień tej aplikacji. Zaktualizuj go, aby skonfigurować ją tutaj.',
+  'settings_node.directories_title': 'Katalogi aplikacji',
   'settings_node.directories_hint': 'Katalogi udostępnione oraz to, który z nich aplikacje Wideo, Muzyka i Zdjęcia traktują jako własny punkt (punkty) wejścia.',
 
   // Create-group wizard
@@ -947,4 +999,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': 'odczyt-zapis',
+  'node.root_ro': 'tylko odczyt',
+  'node.removable': 'wymienny',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js
index 2d07994..6eb2242 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/pt-BR.js
@@ -126,6 +126,12 @@ export default {
   'group.tab_video': 'Vídeos',
   'group.tab_music': 'Música',
   'group.tab_photos': 'Fotos',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': 'Olá, mundo!',
+  'helloworld.no_directory': 'Nenhuma pasta escolhida. Escolha uma nas configurações.',
+  'helloworld.counted': '{n} arquivo(s)',
+  'settings_app.helloworld_directory_label': 'Pasta',
+  'settings_app.helloworld_directory_hint': 'A pasta que este aplicativo de referência lista. Existe para mostrar que adicionar um aplicativo não exige nada além de seus dois arquivos.',
   'group.tab_members': 'Membros',
   'group.tab_settings': "Configurações",
   'members.danger_leave_hint': "Você perderá o acesso aos arquivos e ao chat deste grupo.",
@@ -154,7 +160,8 @@ export default {
     + 'se conectar.',
   'group.upload': 'Enviar',
   'group.mkdir': 'Nova pasta',
-  'group.mkdir_prompt': 'Nome da nova pasta:',
+  'group.mkdir_prompt': 'Nome da nova pasta',
+  'group.mkdir_offline': 'Sem conexão com o nó.',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -169,6 +176,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(indisponível — a unidade está desconectada)',
+  'group.root_plug': 'Conectar',
+  'group.root_eject': 'Ejetar',
+  'group.root_writable': 'Leitura/Escrita',
+  'group.root_ejected': '(ejetado)',
   'group.view': 'Visualizar',
   'group.delete': 'Excluir',
   'group.delete_confirm': 'Excluir {name}?',
@@ -195,6 +206,7 @@ export default {
   'chat.placeholder': 'Escreva uma mensagem...',
   'chat.send': 'Enviar',
   'chat.attach': 'Anexar arquivo',
+  'chat.attach_read_only': 'Nenhum diretório compartilhado gravável — anexos desativados',
 
   // Video player
   'video.loading': 'Carregando {name}...',
@@ -719,10 +731,16 @@ export default {
   'node.roots': 'Diretórios',
   'node.add_root': 'Adicionar diretório',
   'node.remove_root': 'Remover',
+  'node.root_no_signing_key': 'Nenhuma chave de assinatura disponível — pareie este dispositivo com o nó primeiro',
+  'node.root_no_route': 'Sem rota até o nó — conecte-se a ele ou use o aplicativo na máquina que o hospeda',
+  'node.root_remove_last': 'Um grupo precisa de pelo menos um diretório',
+  'node.root_path_hint': 'O caminho como o nó o vê, na máquina que hospeda este grupo.',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': 'Caminho',
+  'node.directory': 'Diretório',
   'node.root_added': 'Diretório adicionado.',
   'node.root_remove_confirm': 'Remover "{name}" deste grupo?',
   'node.root_removed': 'Diretório removido. Reinicialização recomendada para atualizar o índice.',
-  'node.upload_root': 'uploads',
   'node.attach_group': 'Adicionar grupo',
   'node.attach_pick': 'Grupo a hospedar',
   'node.attach_dir': 'Diretório compartilhado',
@@ -802,7 +820,41 @@ export default {
   'settings_node.photo_roots_add': 'Adicionar',
   'settings_node.photo_roots_remove': 'Remover',
   'settings_node.photo_roots_save': 'Salvar',
-  'settings_node.directories_title': 'Diretórios',
+  'settings_node.shared_directories_title': 'Diretórios compartilhados',
+  'settings_node.shared_directories_hint': 'Pastas compartilhadas com este grupo. Alterne leitura-escrita para permitir uploads, marque como removível para unidades externas.',
+  'folder_tree.title_single': 'Escolher uma pasta',
+  'folder_tree.title_multi': 'Escolher pastas',
+  'folder_tree.choose': 'Escolher…',
+  'folder_tree.remove': 'Remover',
+  'folder_tree.add': 'Adicionar uma pasta…',
+  'folder_tree.confirm': 'Usar',
+  'folder_tree.expand': 'Expandir',
+  'folder_tree.collapse': 'Recolher',
+  'folder_tree.nothing_selected': 'Nada selecionado',
+  'folder_tree.empty': 'Este grupo ainda não tem diretórios compartilhados.',
+  'folder_tree.writable_only': 'Aqui só é possível escolher diretórios de leitura e escrita — arquivos são gravados nele.',
+  'folder_tree.no_writable_root': 'Este grupo não tem diretório gravável. Ative leitura e escrita em Diretórios compartilhados primeiro.',
+  'folder_tree.read_only_blocked': 'Somente leitura — não é possível gravar',
+  'settings_app.save': 'Salvar',
+  'settings_app.saving': 'Salvando…',
+  'settings_app.disabled_hint': 'Ative este aplicativo para configurá-lo.',
+  'settings_app.video_directories_label': 'Pastas de vídeo',
+  'settings_app.video_directories_hint': 'Onde ficam os filmes e séries deste grupo. Nada fora delas aparece na aba Vídeos.',
+  'settings_app.music_directories_label': 'Pastas de música',
+  'settings_app.music_directories_hint': 'Onde ficam os álbuns deste grupo. Nada fora delas aparece na aba Música.',
+  'settings_app.photo_directories_label': 'Pastas de fotos',
+  'settings_app.photo_directories_hint': 'Onde ficam os álbuns deste grupo. Nada fora delas aparece na aba Fotos.',
+  'settings_app.chat_directory_label': 'Pasta de anexos',
+  'settings_app.chat_directory_hint': 'Onde os arquivos enviados no chat são gravados. Precisa ser um diretório de leitura e escrita.',
+  'settings_app.chat_no_writable_root': 'Este grupo não tem diretório gravável, então os anexos estão desativados.',
+  'settings_app.chat_link_preview_label': 'Prévias de links',
+  'settings_app.chat_link_preview_hint': 'Quando alguém publica um link, o nó busca o título e a imagem da página. É uma requisição da sua máquina para um site escolhido por outra pessoa.',
+  'settings_app.tmdb_token_prompt': 'Cadastre-se no TMDB para gerar sua própria chave de API.',
+  'settings_app.tmdb_token_link': 'Obter uma chave',
+  'settings_node.roots_offline_hint': 'Sem conexão com o nó — as alterações passam pelo nó local e entram em vigor no próximo recarregamento.',
+  'settings_node.roots_node_too_old': 'Este nó é mais antigo que esta página: ele pode mostrar seus diretórios, mas não alterá-los aqui. Atualize-o ou use os comandos meshbay-node root.',
+  'settings_node.app_node_too_old': 'Este nó é mais antigo que esta página e ainda não tem configuração para este aplicativo. Atualize-o para configurá-lo aqui.',
+  'settings_node.directories_title': 'Diretórios de apps',
   'settings_node.directories_hint': 'Pastas compartilhadas, e qual delas os apps Vídeos, Música e Fotos tratam como seu(s) próprio(s) ponto(s) de entrada.',
 
   // Create group wizard
@@ -906,4 +958,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': 'leitura-escrita',
+  'node.root_ro': 'somente leitura',
+  'node.removable': 'removível',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js b/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js
index fd0c7f9..044611e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/locales/zh-CN.js
@@ -123,6 +123,12 @@ export default {
   'group.tab_video': '视频',
   'group.tab_music': '音乐',
   'group.tab_photos': '照片',
+  'group.tab_helloworld': 'HelloWorld',
+  'helloworld.greeting': '你好，世界！',
+  'helloworld.no_directory': '尚未选择文件夹。请在设置中选择。',
+  'helloworld.counted': '{n} 个文件',
+  'settings_app.helloworld_directory_label': '文件夹',
+  'settings_app.helloworld_directory_hint': '该参考应用所列出的文件夹。它的存在是为了说明：新增一个应用只需要它自己的两个文件。',
   'group.tab_members': '成员',
   'group.tab_settings': "设置",
   'members.danger_leave_hint': "您将无法再访问该群组的文件和聊天。",
@@ -150,7 +156,8 @@ export default {
   'group.offline_hint': '当托管此群组的 node 连接后，文件就会出现。',
   'group.upload': '上传',
   'group.mkdir': '新建文件夹',
-  'group.mkdir_prompt': '新文件夹的名称：',
+  'group.mkdir_prompt': '新文件夹名称',
+  'group.mkdir_offline': '未连接到节点。',
   'device.add_title': 'This browser is not linked to this node yet',
   'device.add_hint': 'Your account is known here, but this browser holds a different key. Approve it from a device already linked — no operator needed.',
   'device.add_btn': 'Get a linking code',
@@ -165,6 +172,10 @@ export default {
   'device.approve_btn': 'Approve',
   'device.approved': 'Device linked.',
   'group.root_unavailable': '(不可用 — 驱动器已断开连接)',
+  'group.root_plug': '重新接入',
+  'group.root_eject': '弹出',
+  'group.root_writable': '读写',
+  'group.root_ejected': '(已弹出)',
   'group.view': '查看',
   'group.delete': '删除',
   'group.delete_confirm': '删除 {name}？',
@@ -189,6 +200,7 @@ export default {
   'chat.placeholder': '输入消息…',
   'chat.send': '发送',
   'chat.attach': '添加附件',
+  'chat.attach_read_only': '没有可写的共享目录 — 附件已停用',
 
   // Video player
   'video.loading': '正在加载 {name}…',
@@ -699,10 +711,16 @@ export default {
   'node.roots': '目录',
   'node.add_root': '添加目录',
   'node.remove_root': '移除',
+  'node.root_no_signing_key': '没有可用的签名密钥 — 请先将本设备与节点配对',
+  'node.root_no_route': '无法连接到节点 — 请先连接，或在运行该节点的机器上使用应用',
+  'node.root_remove_last': '每个群组至少需要一个目录',
+  'node.root_path_hint': '托管该群组的机器上，节点所看到的路径。',
+  'node.root_path_placeholder': '/home/user/Media',
+  'node.root_path': '路径',
+  'node.directory': '目录',
   'node.root_added': '目录已添加。',
   'node.root_remove_confirm': '从此群组中移除"{name}"？',
   'node.root_removed': '目录已移除。建议重启以更新索引。',
-  'node.upload_root': '上传目录',
   'node.attach_group': '添加群组',
   'node.attach_pick': '要托管的群组',
   'node.attach_dir': '共享目录',
@@ -786,7 +804,41 @@ export default {
   'settings_node.photo_roots_add': '添加',
   'settings_node.photo_roots_remove': '移除',
   'settings_node.photo_roots_save': '保存',
-  'settings_node.directories_title': '目录',
+  'settings_node.shared_directories_title': '共享目录',
+  'settings_node.shared_directories_hint': '与此群组共享的文件夹。切换读写以允许上传，标记为可移除用于外置驱动器。',
+  'folder_tree.title_single': '选择文件夹',
+  'folder_tree.title_multi': '选择文件夹',
+  'folder_tree.choose': '选择…',
+  'folder_tree.remove': '移除',
+  'folder_tree.add': '添加文件夹…',
+  'folder_tree.confirm': '使用',
+  'folder_tree.expand': '展开',
+  'folder_tree.collapse': '折叠',
+  'folder_tree.nothing_selected': '未选择',
+  'folder_tree.empty': '该群组还没有共享目录。',
+  'folder_tree.writable_only': '此处只能选择可读写的目录 — 文件会写入其中。',
+  'folder_tree.no_writable_root': '该群组没有可写目录。请先在「共享目录」中将某个目录设为读写。',
+  'folder_tree.read_only_blocked': '只读 — 无法写入',
+  'settings_app.save': '保存',
+  'settings_app.saving': '正在保存…',
+  'settings_app.disabled_hint': '启用该应用后即可配置。',
+  'settings_app.video_directories_label': '视频文件夹',
+  'settings_app.video_directories_hint': '该群组的影片和剧集所在位置。其外的内容不会出现在「视频」标签页。',
+  'settings_app.music_directories_label': '音乐文件夹',
+  'settings_app.music_directories_hint': '该群组的专辑所在位置。其外的内容不会出现在「音乐」标签页。',
+  'settings_app.photo_directories_label': '照片文件夹',
+  'settings_app.photo_directories_hint': '该群组的相册所在位置。其外的内容不会出现在「照片」标签页。',
+  'settings_app.chat_directory_label': '附件文件夹',
+  'settings_app.chat_directory_hint': '聊天中发送的文件写入位置。必须是可读写的目录。',
+  'settings_app.chat_no_writable_root': '该群组没有可写目录，因此附件已停用。',
+  'settings_app.chat_link_preview_label': '链接预览',
+  'settings_app.chat_link_preview_hint': '当成员发布链接时，节点会抓取该页面的标题和图片。这是从你的机器发往他人所选站点的请求。',
+  'settings_app.tmdb_token_prompt': '在 TMDB 注册以生成你自己的 API 密钥。',
+  'settings_app.tmdb_token_link': '获取密钥',
+  'settings_node.roots_offline_hint': '未连接到节点 — 变更将通过本地节点进行，并在其下次重新加载时生效。',
+  'settings_node.roots_node_too_old': '该节点比本页面旧：它能显示自己的目录，但无法在此更改。请更新节点，或使用 meshbay-node root 命令。',
+  'settings_node.app_node_too_old': '该节点比本页面旧，尚不支持此应用的设置。请更新节点后在此配置。',
+  'settings_node.directories_title': '应用目录',
   'settings_node.directories_hint': '共享文件夹，以及“视频”“音乐”和“照片”应用各自使用哪个（些）作为入口。',
 
   // Create group wizard
@@ -891,4 +943,7 @@ export default {
   'node.tab_peers': 'Peers',
   'node.tab_audit': 'Audit',
   'node.tab_settings': 'Settings',
+  'node.root_rw': '读写',
+  'node.root_ro': '只读',
+  'node.removable': '可移除',
 };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/music-app-settings.js
new file mode 100644
index 0000000..8ce2ab6
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/music-app-settings.js
@@ -0,0 +1,60 @@
+import { html, useState, useEffect } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { ToggleSwitch, useSaver } from './settings-ui.js';
+import { FolderPickerField } from './folder-tree.js';
+
+/**
+ * The Music app's operator settings.
+ *
+ * Same shape as Videos, minus a credential: MusicBrainz's read endpoints need
+ * no API key, only a descriptive User-Agent, and that is one operator identity
+ * held node-wide rather than a per-group setting (docs/musicbay.md §3.2).
+ *
+ * Several folders, for the same reason Videos has several: a music library
+ * that lives on two drives had no way to say so.
+ */
+function MusicSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
+  const { busy, msg, run } = useSaver();
+  const [directories, setDirectories] = useState(settings.musicDirectories || []);
+  const [mbEnabled, setMbEnabled] = useState(settings.musicbrainzEnabled !== false);
+
+  useEffect(() => {
+    setDirectories(settings.musicDirectories || []);
+  }, [settings.musicDirectories]);
+  useEffect(() => {
+    setMbEnabled(settings.musicbrainzEnabled !== false);
+  }, [settings.musicbrainzEnabled]);
+
+  const current = settings.musicDirectories || [];
+  const dirsDirty = directories.length !== current.length
+    || directories.some((d, i) => d !== current[i]);
+
+  return html`
+    <div class="app-settings">
+      <${FolderPickerField}
+        label=${t('settings_app.music_directories_label')}
+        hint=${t('settings_app.music_directories_hint')}
+        roots=${roots} dirs=${dirs} mode="multi"
+        value=${directories} disabled=${busy}
+        onChange=${setDirectories} />
+
+      <button class="app-save" disabled=${busy || !dirsDirty}
+        onClick=${() => run(() => saveDirectories(directories))}>
+        ${busy ? t('settings_app.saving') : t('settings_app.save')}
+      </button>
+
+      <h4 class="app-settings-sub">${t('settings_node.musicbrainz_title')}</h4>
+      <p class="settings-hint">${t('settings_node.musicbrainz_hint')}</p>
+      <div class="settings-row">
+        <${ToggleSwitch} checked=${mbEnabled} disabled=${busy}
+          onChange=${(v) => { setMbEnabled(v);
+                              run(() => transport.setMusicbrainzEnabled(v, signFn)); }}
+          label=${mbEnabled ? t('settings_node.musicbrainz_enabled')
+                            : t('settings_node.musicbrainz_disabled')} />
+      </div>
+      ${msg && html`<p class="settings-hint">${msg}</p>`}
+    </div>
+  `;
+}
+
+export { MusicSettings };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
index 616f169..f622b5d 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/music-app.js
@@ -52,19 +52,20 @@ function foldKey(s) {
 // tag/cover enrichment for this group before a root is chosen either,
 // daemon.py's _enrich_new_audio_entries), not "the whole shared tree" —
 // falling back to that would just show files nothing has enriched.
-function underAudioRoot(entry, audioRoot) {
-  if (!audioRoot) return false;
+function underAudioRoot(entry, directories) {
+  const dirs = directories || [];
+  if (!dirs.length) return false;
   const p = entry.path || '';
-  return p === audioRoot || p.startsWith(audioRoot + '/');
+  return dirs.some((d) => p === d || p.startsWith(d + '/'));
 }
 
-function groupMusicEntries(entries, audioRoot) {
+function groupMusicEntries(entries, musicDirectories) {
   const tracks = []; // no artist at all, even after the folder fallback -- rare, but real
   const byArtistKey = new Map(); // foldKey(artist) -> { artist, albumsByKey: Map, loose: [] }
 
   for (const e of entries) {
     if (e.type !== 'audio') continue;
-    if (!underAudioRoot(e, audioRoot)) continue;
+    if (!underAudioRoot(e, musicDirectories)) continue;
     const artistRaw = (e.artist || '').trim();
     if (!artistRaw) { tracks.push(e); continue; }
     const artistKey = foldKey(artistRaw);
@@ -453,7 +454,8 @@ function FlatList({ tracks, artists, onPlayQueue }) {
 // -- shell --------------------------------------------------------------------
 
 function MusicApp({
-  groupId, transportRef, gekRef, status, entries, audioRoot, musicbrainzConfig, onPlayQueue,
+  groupId, transportRef, gekRef, status, entries, availableEntries,
+  musicDirectories, musicbrainzConfig, onPlayQueue,
   hideFilter,
 }) {
   const [mode, setMode] = useState(loadViewMode);
@@ -465,8 +467,11 @@ function MusicApp({
 
   const setModeAndSave = (m) => { setMode(m); saveViewMode(m); };
 
+  const musicEntries = availableEntries || entries;
+  const configured = (musicDirectories || []).length > 0;
   const { tracks, artists, albums } = useMemo(
-    () => groupMusicEntries(entries, audioRoot), [entries, audioRoot]);
+    () => groupMusicEntries(musicEntries, musicDirectories),
+    [musicEntries, musicDirectories]);
 
   const needle = filter.trim().toLowerCase();
   const filteredArtists = useMemo(() => {
@@ -492,10 +497,10 @@ function MusicApp({
     ${status === 'offline' && html`
       <p class="page-message">${t('group.offline_title')} ${t('group.offline_hint')}</p>
     `}
-    ${status === 'connected' && !audioRoot && html`
+    ${status === 'connected' && !configured && html`
       <p class="page-message">${t('music.no_root_configured')}</p>
     `}
-    ${status === 'connected' && audioRoot && html`
+    ${status === 'connected' && configured && html`
       <div class="video-toolbar">
         <button class="tb-btn ${mode === 'grid' ? 'active' : ''}"
           onClick=${() => setModeAndSave('grid')}>
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/node-page.js b/packages/meshbay-hub/src/meshbay_hub/static/node-page.js
index ec73128..2e216a9 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/node-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/node-page.js
@@ -750,13 +750,21 @@ export function NodePage({ groups }) {
                     <${Icon} name="folder" />
                     ${r.name}
                   </span>
-                  ${r.upload && html`
-                    <span class="node-root-badge">${t('node.upload_root')}</span>`}
-                  ${!r.available && html`
+                  ${r.writable && html`
+                    <span class="node-root-badge">${t('node.root_rw')}</span>`}
+                  ${r.removable && html`
+                    <span class="node-root-badge">${t('node.removable')}</span>`}
+                  ${r.ejected ? html`
+                    <span class="node-root-badge node-root-badge-warn">
+                      ${t('group.root_ejected')}</span>`
+                  : !r.available && html`
                     <span class="node-root-badge node-root-badge-warn">
                       ${t('node.unavailable')}</span>`}
                 </div>
-                ${(g.roots || []).length > 1 && !r.upload && html`
+                ${/* Removing a writable root is allowed now — several can be
+                      writable, and a group with none is a valid read-only
+                      group. The last root is still the one that cannot go. */''}
+                ${(g.roots || []).length > 1 && html`
                   <button class="btn btn-small btn-danger"
                     disabled=${busy} onClick=${() => removeRoot(g.id, r.name)}>
                     ${t('node.remove_root')}</button>`}
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/photos-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/photos-app-settings.js
new file mode 100644
index 0000000..8656fa5
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/photos-app-settings.js
@@ -0,0 +1,44 @@
+import { html, useState, useEffect } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { useSaver } from './settings-ui.js';
+import { FolderPickerField } from './folder-tree.js';
+
+/**
+ * The Photos app's operator settings: folders, and nothing else.
+ *
+ * Photos was always several folders (docs/photos.md §2.1) — a photo library
+ * is routinely scattered, with no single natural root — so this pane is what
+ * the other two grew into rather than the exception it used to be. No
+ * third-party service: EXIF is read locally on the node, and nothing about a
+ * photo leaves the machine to be identified.
+ */
+function PhotoSettings({ roots, dirs, settings, saveDirectories }) {
+  const { busy, msg, run } = useSaver();
+  const [directories, setDirectories] = useState(settings.photoDirectories || []);
+  useEffect(() => {
+    setDirectories(settings.photoDirectories || []);
+  }, [settings.photoDirectories]);
+
+  const current = settings.photoDirectories || [];
+  const dirty = directories.length !== current.length
+    || directories.some((d, i) => d !== current[i]);
+
+  return html`
+    <div class="app-settings">
+      <${FolderPickerField}
+        label=${t('settings_app.photo_directories_label')}
+        hint=${t('settings_app.photo_directories_hint')}
+        roots=${roots} dirs=${dirs} mode="multi"
+        value=${directories} disabled=${busy}
+        onChange=${setDirectories} />
+
+      <button class="app-save" disabled=${busy || !dirty}
+        onClick=${() => run(() => saveDirectories(directories))}>
+        ${busy ? t('settings_app.saving') : t('settings_app.save')}
+      </button>
+      ${msg && html`<p class="settings-hint">${msg}</p>`}
+    </div>
+  `;
+}
+
+export { PhotoSettings };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js
index e6f3482..a58af8c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js
@@ -322,7 +322,8 @@ function AlbumView({ album, entries, transportRef, gekRef, setError, onBack, rea
 // ── shell ────────────────────────────────────────────────────────────────────
 
 function PhotosApp({
-  groupId, transportRef, gekRef, status, entries, photoRoots, setError,
+  groupId, transportRef, gekRef, status, entries, availableEntries,
+  photoDirectories, setError,
   hideFilter, readOnly,
 }) {
   const [openDir, setOpenDir] = useState(null);
@@ -330,8 +331,10 @@ function PhotosApp({
 
   useEffect(() => { setOpenDir(null); setFilter(''); }, [groupId]);
 
+  const photoEntries = availableEntries || entries;
   const albums = useMemo(
-    () => groupPhotoAlbums(entries, photoRoots), [entries, photoRoots]);
+    () => groupPhotoAlbums(photoEntries, photoDirectories),
+    [photoEntries, photoDirectories]);
 
   const needle = filter.trim().toLowerCase();
   const filteredAlbums = useMemo(() => (!needle ? albums : albums.filter(
@@ -346,10 +349,10 @@ function PhotosApp({
     ${status === 'offline' && html`
       <p class="page-message">${t('group.offline_title')} ${t('group.offline_hint')}</p>
     `}
-    ${status === 'connected' && (!photoRoots || photoRoots.length === 0) && html`
+    ${status === 'connected' && (photoDirectories || []).length === 0 && html`
       <p class="page-message">${t('photo.no_roots_configured')}</p>
     `}
-    ${status === 'connected' && photoRoots && photoRoots.length > 0 && !openAlbum && html`
+    ${status === 'connected' && (photoDirectories || []).length > 0 && !openAlbum && html`
       <div class="photo-toolbar">
         ${!hideFilter && html`<div class="tb-search">
           <${Icon} name="search" />
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/search-page.js b/packages/meshbay-hub/src/meshbay_hub/static/search-page.js
index 608bb81..4ed3df1 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/search-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/search-page.js
@@ -147,10 +147,12 @@ async function fetchGroupIndex(groupId, token, bundleKey, username, userId) {
     clearTimeout(timer);
 
     const indexMsg = await transport.fetchIndex();
+    // Plural, with the old scalars as the fallback for a node still speaking
+    // MNP 1.0 — the same reading group-page.js does on its own handshake.
     const roots = {
-      videoRoot: ack.video_root || '',
-      audioRoot: ack.audio_root || '',
-      photoRoots: ack.photo_roots || [],
+      video: ack.video_directories || (ack.video_root ? [ack.video_root] : []),
+      music: ack.music_directories || (ack.audio_root ? [ack.audio_root] : []),
+      photo: ack.photo_directories || ack.photo_roots || [],
     };
     // Which of the reader's groups sit on their own node — the tie-breaker
     // when the same file is announced by several of them
@@ -201,10 +203,29 @@ async function fetchAllIndexes(groups, token, username, userId, onProgress, onBa
 
 // -- SearchPage ---------------------------------------------------------------
 
-function underRoot(entry, root) {
-  if (!root) return false;
+function underRoot(entry, directories) {
+  const dirs = directories || [];
+  if (!dirs.length) return false;
   const p = entry.path || '';
-  return p === root || p.startsWith(root + '/');
+  return dirs.some((d) => p === d || p.startsWith(d + '/'));
+}
+
+/**
+ * An app's directories out of a cached group, in either shape.
+ *
+ * The cache lives in IndexedDB and outlives a deploy, so a reader opening
+ * Search after this ships still has entries written by the previous version —
+ * `{videoRoot: 'X'}` where this now writes `{video: ['X']}`. Reading only the
+ * new shape would empty their Videos results with no explanation and no way
+ * to tell it from "nothing matched".
+ */
+function cachedDirs(roots, appKey, legacyKey) {
+  if (!roots) return [];
+  const fresh = roots[appKey];
+  if (Array.isArray(fresh)) return fresh;
+  const legacy = roots[legacyKey];
+  if (Array.isArray(legacy)) return legacy;
+  return legacy ? [legacy] : [];
 }
 
 // -- Merging the same file announced by several groups ------------------------
@@ -226,7 +247,7 @@ function underRoot(entry, root) {
 // `mergeUnitEntries` folds lists that share a key, so the two copies become
 // one unit without this having to group them first.
 function videoUnits(entries) {
-  const { movies, shows } = groupVideoEntries(entries, SEARCH_VIDEO_ROOT);
+  const { movies, shows } = groupVideoEntries(entries, [SEARCH_VIDEO_ROOT]);
   return [
     ...movies.map((e) => ({ key: `movie:${e.id}`, entries: [e] })),
     ...shows.map((s) => ({ key: `show:${s.title}`, entries: s.episodes })),
@@ -238,7 +259,7 @@ function videoUnits(entries) {
 // object, so the key only has to name it stably — hence `foldKey` over the
 // display strings, which are whichever spelling arrived first.
 function musicUnits(entries) {
-  const { tracks, albums } = groupMusicEntries(entries, SEARCH_AUDIO_ROOT);
+  const { tracks, albums } = groupMusicEntries(entries, [SEARCH_AUDIO_ROOT]);
   return [
     ...albums.map((a) => ({
       key: `album:${foldKey(a.artist)}/${foldKey(a.album)}`,
@@ -497,12 +518,12 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs })
   const videoEntries = useMemo(() => {
     const result = [];
     for (const [groupId, data] of indexedGroups) {
-      const root = data.roots.videoRoot;
-      if (!root) continue;
+      const dirs = cachedDirs(data.roots, 'video', 'videoRoot');
+      if (!dirs.length) continue;
       const conn = groupConns.current.get(groupId);
       for (const e of data.entries) {
         if (e.type !== 'video') continue;
-        if (!underRoot(e, root)) continue;
+        if (!underRoot(e, dirs)) continue;
         if (q && !matchesQuery(e)) continue;
         result.push({
           ...e,
@@ -523,12 +544,12 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs })
   const musicEntries = useMemo(() => {
     const result = [];
     for (const [groupId, data] of indexedGroups) {
-      const root = data.roots.audioRoot;
-      if (!root) continue;
+      const dirs = cachedDirs(data.roots, 'music', 'audioRoot');
+      if (!dirs.length) continue;
       const conn = groupConns.current.get(groupId);
       for (const e of data.entries) {
         if (e.type !== 'audio') continue;
-        if (!underRoot(e, root)) continue;
+        if (!underRoot(e, dirs)) continue;
         if (q && !matchesQuery(e)) continue;
         result.push({
           ...e,
@@ -549,13 +570,13 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs })
   const photoEntries = useMemo(() => {
     const result = [];
     for (const [groupId, data] of indexedGroups) {
-      const roots = data.roots.photoRoots;
-      if (!roots || !roots.length) continue;
+      const dirs = cachedDirs(data.roots, 'photo', 'photoRoots');
+      if (!dirs.length) continue;
       const conn = groupConns.current.get(groupId);
       for (const e of data.entries) {
         if (e.type !== 'image') continue;
         const p = e.path || '';
-        if (!roots.some((r) => p === r || p.startsWith(r + '/'))) continue;
+        if (!dirs.some((d) => p === d || p.startsWith(d + '/'))) continue;
         if (q && !matchesQuery(e)) continue;
         result.push({
           ...e,
@@ -707,7 +728,6 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs })
           applyIndex=${noop}
           isNodeAdmin=${false}
           operatorPaired=${false}
-          mayUpload=${false}
           userId=${userId}
           setError=${noop}
           onPreview=${onPreview}
@@ -726,7 +746,7 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs })
           status="connected"
           entries=${videoEntries}
           onPreview=${onPreview}
-          videoRoot=${SEARCH_VIDEO_ROOT}
+          videoDirectories=${[SEARCH_VIDEO_ROOT]}
           tmdbConfig=${{ enabled: true }}
           isNodeAdmin=${false}
           onNeedConn=${connectGroup}
@@ -740,7 +760,7 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs })
           gekRef=${defaultGRef}
           status="connected"
           entries=${musicEntries}
-          audioRoot=${SEARCH_AUDIO_ROOT}
+          musicDirectories=${[SEARCH_AUDIO_ROOT]}
           musicbrainzConfig=${{ enabled: true }}
           onPlayQueue=${handleMusicPlay}
           hideFilter=${true} />
@@ -753,7 +773,7 @@ function SearchPage({ token, username, userId, groups, onPlayQueue, userPrefs })
           gekRef=${defaultGRef}
           status="connected"
           entries=${photoEntries}
-          photoRoots=${SEARCH_PHOTO_ROOTS}
+          photoDirectories=${SEARCH_PHOTO_ROOTS}
           setError=${noop}
           hideFilter=${true}
           readOnly=${true} />
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/settings-ui.js b/packages/meshbay-hub/src/meshbay_hub/static/settings-ui.js
new file mode 100644
index 0000000..9b7a286
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/settings-ui.js
@@ -0,0 +1,92 @@
+import { html, useState, useCallback } from './vendor/htm-preact.js';
+import { t } from './i18n.js';
+import { Icon } from './icon.js';
+
+/**
+ * The two controls every settings pane is built from.
+ *
+ * Their own module rather than `group-settings.js`, because each app's
+ * settings component now lives in its own file and is reached *through* the
+ * app registry — so importing them from the page that renders them would make
+ * a cycle (`group-settings` → `apps` → `<app>-app-settings` → `group-settings`).
+ * ES modules tolerate that and then hand you a temporal-dead-zone
+ * `ReferenceError` at the first render, which is the same class of defect as
+ * the hook-ordering one already recorded in CLAUDE.md.
+ */
+
+/**
+ * A settings-section that folds — every section but the ones that are
+ * really just a form to fill in (invite, pair-operator, approve-device):
+ * hiding an input the operator is mid-typing-into behind a click they'd
+ * have to undo is friction with nothing to show for it, but a section that
+ * is only ever glanced at once it's configured (TMDB, scan tuning, the
+ * danger zone) benefits from staying out of the way otherwise. `title` (an
+ * already-built string/vnode) wins over `titleKey` when both are given —
+ * the members-table heading needs a live count baked in, not just a
+ * lookup.
+ */
+function CollapsibleSection({ titleKey, title, action, defaultOpen = true, children }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return html`
+    <div class="settings-section">
+      ${/* `action` sits *beside* the header button, never inside it: a
+            <label><input> nested in a <button> is invalid HTML, and the click
+            would reach both — flipping the toggle and collapsing the section
+            it belongs to in the same gesture. */''}
+      <div class="settings-collapsible-bar">
+        <button type="button" class="settings-collapsible-header"
+          onClick=${() => setOpen((v) => !v)} aria-expanded=${open}>
+          <h3 class="settings-heading">${title != null ? title : t(titleKey)}</h3>
+          <${Icon} name="chevron" cls=${open ? 'video-flat-chevron open' : 'video-flat-chevron'} />
+        </button>
+        ${action != null && html`
+          <div class="settings-collapsible-action">${action}</div>`}
+      </div>
+      ${open && html`<div class="settings-collapsible-body">${children}</div>`}
+    </div>
+  `;
+}
+
+/**
+ * A modern on/off switch — replaces a plain checkbox or a "Turn on/off"
+ * button wherever the setting itself is a straight binary (uploads
+ * allowed, TMDB/MusicBrainz enabled). Still a real <input type="checkbox">
+ * under the hood (keyboard/screen-reader behaviour for free), just
+ * restyled — see .toggle-switch in style.css.
+ */
+function ToggleSwitch({ checked, onChange, disabled, label }) {
+  return html`
+    <label class="toggle-switch ${disabled ? 'toggle-switch-disabled' : ''}">
+      <input type="checkbox" checked=${checked} disabled=${disabled}
+        onChange=${(e) => onChange(e.target.checked)} />
+      <span class="toggle-switch-track"><span class="toggle-switch-thumb"></span></span>
+      ${label != null && html`<span class="toggle-switch-label">${label}</span>`}
+    </label>
+  `;
+}
+
+/**
+ * The busy/message bookkeeping every settings pane does around one call.
+ *
+ * Each pane owns its own, rather than sharing the page's: two sections saving
+ * at once is ordinary (an operator ticks a toggle in Videos while Music's
+ * folder save is still in flight), and one shared flag would disable both and
+ * then attribute one section's error to the other.
+ */
+function useSaver() {
+  const [busy, setBusy] = useState(false);
+  const [msg, setMsg] = useState('');
+  const run = useCallback(async (work) => {
+    setBusy(true); setMsg('');
+    try {
+      await work();
+      return true;
+    } catch (err) {
+      setMsg(err && err.message ? err.message : String(err));
+      return false;
+    } finally { setBusy(false); }
+  }, []);
+  return { busy, msg, run, setMsg };
+}
+
+export { CollapsibleSection, ToggleSwitch, useSaver };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index c183d7e..d1d5732 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -24,6 +24,11 @@
   --nav-brand: #23b1f0;
   --sidebar-bg: #f1f5f9;
   --sidebar-hover: #e2e8f0;
+  /* Used with a literal fallback in a handful of rules before they were
+     defined here — same values, so nothing moves; now themeable, and the
+     names in those rules are real. */
+  --warn: #d97706;
+  --accent-bg: rgba(59, 130, 246, 0.1);
   --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
 }
@@ -36,6 +41,8 @@
   --text-secondary: #94a3b8;
   --text-dim: #64748b;
   --border: #334155;
+  --warn: #f59e0b;
+  --accent-bg: rgba(59, 130, 246, 0.18);
   --error-bg: #450a0a;
   --nav-bg: #020617;
   --sidebar-bg: #1e293b;
@@ -826,6 +833,22 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 .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; }
+/* Square, for a toolbar button whose name is in its tooltip rather than
+   beside it. The horizontal padding goes; the height does not, so it lines up
+   with the labelled buttons next to it. */
+.tb-btn-icon { padding: 0; width: 32px; justify-content: center; gap: 0; }
+
+/* Naming a new folder, in the toolbar. Not `window.prompt`, which throws in
+   Electron — and an inline field can put the node's refusal next to the input
+   rather than after a dialog has closed. */
+.tb-mkdir { display: inline-flex; align-items: center; gap: 6px; }
+.tb-mkdir-input {
+  height: 32px; width: 170px; padding: 0 9px;
+  border: 1px solid var(--border-focus); border-radius: 6px;
+  background: var(--bg-surface); color: var(--text);
+  font-family: inherit; font-size: 0.83em;
+}
+.tb-mkdir-input:focus { outline: none; }
 .tb-btn.primary {
   background: var(--accent);
   border-color: var(--accent);
@@ -1240,6 +1263,46 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 }
 .settings-collapsible-header .settings-heading { margin-bottom: 0; }
 .settings-collapsible-body { margin-top: 12px; }
+/* The header button stretches; the action (an app's on/off switch) keeps its
+   own width at the end, and its own click. */
+.settings-collapsible-bar { display: flex; align-items: center; gap: 12px; }
+.settings-collapsible-bar .settings-collapsible-header { flex: 1 1 auto; min-width: 0; }
+.settings-collapsible-action { flex: 0 0 auto; }
+
+/* One app's settings pane, inside its section. */
+.app-settings > .settings-row:first-child { margin-top: 0; }
+/* The Save button of an app's settings pane.
+ *
+ * It was `btn btn-small btn-secondary`, and there is no `.btn` rule at all —
+ * so it inherited `.btn-secondary`: no background, a transparent border, dim
+ * grey text. Enabled, it already looked like a disabled control; disabled, it
+ * was the same thing at 40% opacity. "You cannot always click Save, you do not
+ * notice, and it does not work" was one sentence describing all of that.
+ *
+ * It looks like a button now, and a disabled one looks disabled. */
+.app-save {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px; padding: 0 14px; margin-top: 4px;
+  border: 1px solid var(--accent); border-radius: 6px;
+  background: var(--accent); color: var(--accent-text);
+  font-family: inherit; font-size: 0.83em; cursor: pointer;
+}
+.app-save:hover:not(:disabled) { background: var(--accent-hover); }
+/* No transition on the enabled/disabled swap. It animates a colour change that
+   coincides with a text-colour change, which reads as a flicker — and it made
+   the state genuinely hard to observe: a measurement taken during it reports a
+   transparent background on a button that is not transparent. */
+.app-save:disabled {
+  background: none; color: var(--text-dim);
+  border-color: var(--border); opacity: 1; cursor: default;
+}
+/* Why it is inert, beside it — a disabled control that explains itself is the
+   difference between "nothing changed" and "this is broken". */
+
+.app-settings-sub {
+  margin: 18px 0 4px; font-size: 0.9em; font-weight: 600;
+  padding-top: 12px; border-top: 1px solid var(--border);
+}
 
 .settings-meta-title {
   display: flex;
@@ -1267,6 +1330,7 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 /* A modern on/off switch — replaces a checkbox or a "Turn on/off" button
    wherever the setting is a straight binary. */
 .toggle-switch {
+  position: relative;
   display: inline-flex;
   align-items: center;
   gap: 10px;
@@ -1897,7 +1961,8 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
   white-space: nowrap;
 }
 a.transfer-name {
-  color: var(--link);
+  /* `--link` is not defined here; the palette's link colour is `--accent`. */
+  color: var(--accent);
   text-decoration: underline;
   cursor: pointer;
 }
@@ -2125,7 +2190,11 @@ a.transfer-name {
   position: absolute;
   top: -6px;
   right: -8px;
-  background: var(--danger);
+  /* `--danger` is not one of this stylesheet's variables — the palette calls
+     it `--error`. The declaration was invalid, so the unread-count badge had
+     white text on no background at all. Pre-existing; found while fixing four
+     more of the same in the folder picker. */
+  background: var(--error);
   color: #fff;
   font-size: 0.65rem;
   padding: 1px 5px;
@@ -2147,7 +2216,8 @@ a.transfer-name {
   align-items: center;
   gap: 8px;
   padding: 8px 12px;
-  border-radius: var(--radius);
+  /* `--radius` was never defined — 8px is what the other cards use. */
+  border-radius: 8px;
   background: var(--bg-surface);
   margin-bottom: 4px;
   cursor: pointer;
@@ -2157,7 +2227,8 @@ a.transfer-name {
   background: var(--bg-raised);
 }
 .notif-unread {
-  border-left: 3px solid var(--primary);
+  /* `--primary` is not defined here either; it is `--accent`. */
+  border-left: 3px solid var(--accent);
   font-weight: 600;
 }
 .notif-kind {
@@ -2542,6 +2613,66 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
 
 .node-roots-header { margin-bottom: 8px; }
 
+/* Shared directories table */
+.shared-dirs-tbl { width: 100%; border-collapse: collapse; border: none; }
+.shared-dirs-tbl th {
+  text-align: left; font-size: 0.78em; font-weight: 500;
+  color: var(--text-dim); padding: 0 12px 6px 0;
+  text-transform: uppercase; letter-spacing: 0.04em;
+  border: none;
+}
+.shared-dirs-tbl td { padding: 7px 12px 7px 0; border: none; vertical-align: middle; }
+.shared-dirs-tbl tbody tr + tr td { border-top: 1px solid var(--border); }
+.sdt-col-dir { min-width: 140px; }
+/* The path is the only thing separating two libraries whose folders happen to
+   share a basename, so it is shown — truncated, because it is usually long and
+   rarely the thing being read. */
+.sdt-col-path {
+  color: var(--text-dim); font-size: 0.85em;
+  max-width: 260px; overflow: hidden; text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sdt-add-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
+.sdt-add-input {
+  flex: 1 1 auto; min-width: 0; padding: 5px 8px;
+  border: 1px solid var(--border); border-radius: 4px;
+  background: var(--bg-surface); color: var(--text);
+  font-family: inherit; font-size: 0.9em;
+}
+.sdt-col-toggle { width: 90px; text-align: center; }
+.sdt-col-toggle th { text-align: center; }
+.sdt-col-toggle .toggle-switch { justify-content: center; }
+.sdt-col-actions { white-space: nowrap; text-align: right; }
+.sdt-action-btn {
+  background: none; border: 1px solid var(--border); border-radius: 4px;
+  padding: 4px 7px; cursor: pointer; font-size: 0.85em; color: var(--text-dim);
+  line-height: 1; vertical-align: middle;
+}
+.sdt-action-btn + .sdt-action-btn { margin-left: 6px; }
+.sdt-action-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--text); }
+.sdt-action-btn:disabled { opacity: 0.3; cursor: default; }
+.sdt-action-danger:hover:not(:disabled) { color: var(--error); border-color: var(--error); }
+.sdt-dir-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
+.sdt-dir-name .icon { width: 16px; height: 16px; flex-shrink: 0; }
+.sdt-row-ejected { opacity: 0.5; }
+.sdt-row-unavail { opacity: 0.6; }
+.root-eject-btn {
+  background: none; border: 1px solid var(--border); border-radius: 4px;
+  padding: 2px 6px; cursor: pointer; font-size: 0.85em; color: var(--text-dim);
+  line-height: 1;
+}
+.root-eject-btn:hover { background: var(--bg-raised); }
+.root-eject-btn { margin-left: 8px; }
+/* An ejected root in the Files table: still listed, deliberately — its files
+   are frozen, not gone — but not somewhere you can walk into. */
+.file-row.root-ejected { opacity: 0.5; }
+.file-row.root-ejected td:not(.sel-cell) { cursor: default; }
+
+/* The paperclip with no writable directory to write to. Shown rather than
+   hidden, so the reason is discoverable instead of the control just being
+   absent. */
+.chat-attach-off { opacity: 0.35; cursor: not-allowed; }
+
 .node-root {
   display: flex;
   align-items: center;
@@ -3993,3 +4124,95 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
 }
 .photo-lightbox-count { color: #94a3b8; }
+
+/* ── Folder tree picker (folder-tree.js) ─────────────────────────────────── */
+
+.ftp-backdrop {
+  position: fixed; inset: 0; z-index: 1200;
+  background: rgba(0, 0, 0, 0.55);
+  display: flex; align-items: center; justify-content: center;
+  padding: 16px;
+}
+.ftp-panel {
+  background: var(--bg-surface); color: var(--text);
+  border: 1px solid var(--border); border-radius: 8px;
+  width: min(520px, 100%); max-height: min(70vh, 640px);
+  display: flex; flex-direction: column; padding: 16px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+}
+.ftp-panel:focus { outline: none; }
+.ftp-title { margin: 0 0 8px; font-size: 1em; }
+/* The tree is the only part that scrolls: the title, the selection and the
+   buttons stay put, so OK never travels off-screen in a deep library. */
+.ftp-tree, .ftp-children { list-style: none; margin: 0; padding: 0; }
+.ftp-tree {
+  flex: 1 1 auto; overflow-y: auto; overflow-x: hidden;
+  border: 1px solid var(--border); border-radius: 4px;
+  padding: 4px 0; margin: 8px 0;
+}
+.ftp-row { display: flex; align-items: center; gap: 2px; }
+.ftp-row.chosen { background: var(--bg-raised); }
+/* 0.4 was low enough that a greyed-out root read as an artefact rather than
+   a disabled control — the names were barely legible in the screenshot that
+   prompted this. */
+.ftp-row.blocked { opacity: 0.55; }
+.ftp-twisty {
+  flex: 0 0 auto; width: 20px; height: 20px; padding: 0;
+  background: none; border: none; color: var(--text-dim);
+  font-family: inherit; font-size: 0.95em; line-height: 1; cursor: pointer;
+}
+.ftp-twisty:disabled { cursor: default; opacity: 0; }
+.ftp-label {
+  flex: 1 1 auto; min-width: 0;
+  display: flex; align-items: center; gap: 6px;
+  background: none; border: none; color: inherit;
+  font: inherit; text-align: left; padding: 3px 6px; cursor: pointer;
+}
+.ftp-label:disabled { cursor: not-allowed; }
+.ftp-label .icon { width: 15px; height: 15px; flex-shrink: 0; }
+.ftp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ftp-badge {
+  flex: 0 0 auto; margin-left: 8px;
+  font-size: 0.72em; padding: 1px 5px; border-radius: 3px;
+  border: 1px solid var(--border); background: var(--bg-raised);
+  color: var(--text-dim); white-space: nowrap;
+  text-transform: uppercase; letter-spacing: 0.03em;
+}
+.ftp-badge.rw { color: var(--accent); border-color: currentColor; }
+.ftp-badge.warn { color: var(--error); border-color: currentColor; }
+.ftp-check { margin-left: auto; flex: 0 0 auto; }
+.ftp-selection {
+  display: flex; flex-wrap: wrap; gap: 4px;
+  max-height: 84px; overflow-y: auto; margin-bottom: 10px;
+}
+.ftp-chip {
+  font-size: 0.82em; padding: 2px 6px; border-radius: 3px;
+  background: var(--bg-raised); border: 1px solid var(--border);
+}
+.ftp-actions { display: flex; justify-content: flex-end; gap: 8px; }
+/* An app's chosen folders. Deliberately not a .settings-row: that is a
+   space-between flex row, and a label, a hint and a list laid out inside one
+   end up spread across a single line in source order. */
+.folder-field { padding: 8px 0; }
+.folder-field-head { margin-bottom: 6px; }
+.folder-field-label {
+  margin: 0 0 2px; font-size: 0.9em; font-weight: 600; color: var(--text);
+}
+.folder-field-head .settings-hint { margin-bottom: 0; }
+/* Borrows .shared-dirs-tbl so the two lists of directories on this page read
+   as the same kind of thing. */
+.folder-field-tbl { margin-bottom: 8px; }
+.folder-field-tbl .sdt-col-dir { font-size: 0.9em; }
+.folder-field-actions { display: flex; align-items: center; gap: 10px; }
+
+/* HelloWorld (docs/refactor-groups.md §4.1) — the reference app, hidden
+   behind ?dev=1. Deliberately plain: it exists to prove the plumbing, and
+   anything decorative here would be a second thing to keep working. */
+.hw-list { list-style: none; margin: 12px 0 0; padding: 0; }
+.hw-item {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 0; border-bottom: 1px solid var(--border);
+}
+.hw-item .icon { width: 15px; height: 15px; flex-shrink: 0; }
+.hw-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hw-size { flex: 0 0 auto; color: var(--text-dim); font-size: 0.85em; }
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/transport.js b/packages/meshbay-hub/src/meshbay_hub/static/transport.js
index ea1e70a..179292e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/transport.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/transport.js
@@ -72,12 +72,43 @@ function _aborted() {
 // change anything — `op` is already on every admin_challenge, and this
 // list is what lets a response two steps later be tied back to the right
 // one.
+// Acks the node *broadcasts* to everyone in the group, which the requester
+// therefore also has to be handed.
+//
+// `_dispatch` resolves an admin ack against the pending request and returns,
+// which is right for an op whose caller already knows the value it chose. It is
+// wrong for these: every *other* connected client learns the change from the
+// broadcast, and the one that asked for it is the only one that does not,
+// because its own request swallowed its copy. Found twice — first on the root
+// table, then on Chat's directory, where it meant the pane went on showing an
+// unsaved-looking draft after a save that had worked.
+const BROADCAST_ACK_TYPES = new Set([
+  'root_update_ack', 'root_eject_ack', 'root_plug_ack',
+  'root_add_ack', 'root_remove_ack',
+  'app_directories_ack', 'chat_directory_ack', 'chat_link_preview_ack',
+]);
+
+/** Hand a broadcast ack to the callback that would have had it from a peer. */
+function _replayBroadcast(transport, msg) {
+  if (msg.type === 'app_directories_ack' && transport._onAppDirectories) {
+    transport._onAppDirectories(msg.app, msg.directories || []);
+  } else if (msg.type === 'chat_directory_ack' && transport._onChatDirectory) {
+    transport._onChatDirectory(msg.path || '');
+  } else if (msg.type === 'chat_link_preview_ack' && transport._onChatLinkPreview) {
+    transport._onChatLinkPreview(Boolean(msg.enabled));
+  } else if (transport._onRootsChanged) {
+    transport._onRootsChanged(msg);
+  }
+}
+
 const ADMIN_OP_TYPES = new Set([
   'tmdb_override', 'tmdb_rematch', 'tmdb_config', 'tmdb_enabled', 'video_root', 'audio_root',
   'photo_roots',
   'musicbrainz_enabled', 'file_delete', 'dir_delete',
-  'member_upload', 'apps_enabled', 'set_scan_settings', 'member_revoke',
-  'root_add', 'root_remove', 'member_unpin', 'gek_rotate', 'group_attach',
+  'apps_enabled', 'set_scan_settings', 'member_revoke',
+  'root_add', 'root_remove', 'root_update', 'root_eject', 'root_plug',
+  'app_directories', 'chat_directory', 'chat_link_preview',
+  'member_unpin', 'gek_rotate', 'group_attach',
   'group_detach', 'invite_create',
 ]);
 
@@ -217,7 +248,7 @@ window.addEventListener('hashchange', () => {
 // The `v: '0.1'` on every other message in this file is the historical value
 // and is read by nothing; it is left alone deliberately. The range is
 // negotiated once, at the start, not restated per message.
-const MNP_V = '1.0';
+const MNP_V = '1.1';
 const MNP_V_MIN = '1.0';
 
 // Codes a NODE sends us, in its own vocabulary (meshbay_common/handshake.py's
@@ -325,7 +356,30 @@ class MeshBayTransport {
   set onIndexSync(fn) { this._onIndexSync = fn; }
   set onIndexDelta(fn) { this._onIndexDelta = fn; }
   set onUploadPolicy(fn) { this._onUploadPolicy = fn; }
+  set onRootsChanged(fn) { this._onRootsChanged = fn; }
+
+  /** The MNP version the connected node declared, or '' before a handshake. */
+  get nodeVersion() { return this._nodeVersion || ''; }
+
+  /**
+   * Whether the node speaks the per-root and per-app operations MNP 1.1 added:
+   * `root_update`/`root_eject`/`root_plug`, `app_directories`,
+   * `chat_directory`, `chat_link_preview`.
+   *
+   * An older node has no equivalent for the root ones at all, and answers the
+   * app ones through their three predecessors (`video_root`, `audio_root`,
+   * `photo_roots`). The caller chooses which; what it must not do is send a
+   * 1.1 message and wait, because an unknown type is logged and dropped.
+   */
+  get supportsAppOps() {
+    const m = /^(\d+)\.(\d+)$/.exec(this._nodeVersion || '');
+    if (!m) return false;
+    return (Number(m[1]) > 1) || (Number(m[1]) === 1 && Number(m[2]) >= 1);
+  }
   set onAppsEnabled(fn) { this._onAppsEnabled = fn; }
+  set onAppDirectories(fn) { this._onAppDirectories = fn; }
+  set onChatDirectory(fn) { this._onChatDirectory = fn; }
+  set onChatLinkPreview(fn) { this._onChatLinkPreview = fn; }
   set onTmdbConfig(fn) { this._onTmdbConfig = fn; }
   set onTmdbEnabled(fn) { this._onTmdbEnabled = fn; }
   set onVideoRoot(fn) { this._onVideoRoot = fn; }
@@ -587,6 +641,12 @@ class MeshBayTransport {
       // block, because everything below — the join, the proof, the sealed ack
       // — assumes both sides mean the same thing by each message.
       _checkNodeVersion(reply);
+      // Kept, not just checked. Several controls exist only on a node new
+      // enough to have them, and the alternative to asking is offering a
+      // button whose message an older node logs as unknown and never answers
+      // — a 30-second wait ending in a timeout, with nothing on screen to say
+      // the node simply cannot do this.
+      this._nodeVersion = String(reply.v || '');
       if (!window.MeshBayCrypto) {
         throw new Error('Node requires GEK proof but no crypto available');
       }
@@ -1070,7 +1130,7 @@ class MeshBayTransport {
    * queried in (e.g. "fr-FR") — one for the whole node, since both are one
    * operator's shared credential/cache, not a per-group concern (see
    * setTmdbEnabled below for the per-group on/off switch). Signed like
-   * setAppsEnabled/setMemberUpload — an unsigned change would let any
+   * setAppsEnabled/updateRoot — an unsigned change would let any
    * member alter outbound third-party network traffic the operator never
    * agreed to (docs/mediacenter.md §5.5, §8). `token: ''` explicitly clears
    * a previously-set custom token; omit it (undefined/null), like
@@ -1169,6 +1229,96 @@ class MeshBayTransport {
   }
 
   /**
+   * Point an application at folder(s) inside the group's shared directories.
+   *
+   * One method for every app, keyed by the app's registry name — the same
+   * generic op the node grew for the same reason (docs/refactor-groups.md
+   * §1.6). `setVideoRoot`, `setAudioRoot` and `setPhotoRoots` are still here
+   * and still work; nothing new should call them.
+   *
+   * The subject names the app as well as the paths, because an operator shown
+   * "Media/Films" alone cannot tell which application is about to be pointed
+   * at it, and two apps' challenges would otherwise be indistinguishable.
+   * Cleaned and sorted the same way the node does, so both sides build the
+   * same bytes to sign.
+   */
+  /**
+   * The same instruction a node too old for `app_directories` understands.
+   *
+   * Videos, Music and Photos each had their own message before this, and they
+   * still work — so an operator on an un-upgraded node keeps the ability they
+   * had, rather than being handed a control that silently times out. Chat has
+   * no predecessor, which is why its settings are hidden rather than routed.
+   */
+  async setAppDirectoriesLegacy(appKey, directories, signFn) {
+    const clean = [...new Set(
+      (directories || []).map((d) => (d || '').replace(/^\/+|\/+$/g, '')).filter(Boolean),
+    )].sort();
+    if (appKey === 'photo') return this.setPhotoRoots(clean, signFn);
+    // One folder was all these two could carry. Sending several would store
+    // the first and silently drop the rest, so it is refused instead.
+    if (clean.length > 1) {
+      throw new Error(
+        'This node is older than this page and can hold one folder per app. '
+        + 'Update it, or choose a single folder.');
+    }
+    const one = clean[0] || '';
+    if (appKey === 'video') return this.setVideoRoot(one, signFn);
+    if (appKey === 'music') return this.setAudioRoot(one, signFn);
+    throw new Error(
+      'This node is older than this page and cannot store this app\'s '
+      + 'folders. Its operator has to update it.');
+  }
+
+  async setAppDirectories(appKey, directories, signFn) {
+    const clean = [...new Set(
+      (directories || []).map((d) => (d || '').replace(/^\/+|\/+$/g, '')).filter(Boolean),
+    )].sort();
+    const msg = await this._sendAndWait({
+      type: 'app_directories', v: '1.1', app: appKey, directories: clean,
+    });
+    if (msg.type === 'error') throw new Error(msg.detail);
+    if (msg.type === 'admin_challenge') {
+      return this._authorizeAdminOp(
+        msg, 'app_directories', `${appKey}:${clean.join(',')}`, signFn);
+    }
+    return msg;
+  }
+
+  /**
+   * Where chat attachments are written.
+   *
+   * Its own message rather than `setAppDirectories('chat', ...)`: this one is
+   * a destination, and the node refuses a read-only root for it. A caller
+   * reaching for the generic form would get a refusal it has no reason to
+   * expect, so the difference is in the name.
+   */
+  async setChatDirectory(path, signFn) {
+    const clean = (path || '').replace(/^\/+|\/+$/g, '');
+    const msg = await this._sendAndWait({
+      type: 'chat_directory', v: '1.1', path: clean,
+    });
+    if (msg.type === 'error') throw new Error(msg.detail);
+    if (msg.type === 'admin_challenge') {
+      return this._authorizeAdminOp(msg, 'chat_directory', clean, signFn);
+    }
+    return msg;
+  }
+
+  /** Whether the node unfurls links members post in this group's chat. */
+  async setChatLinkPreview(enabled, signFn) {
+    const msg = await this._sendAndWait({
+      type: 'chat_link_preview', v: '1.1', enabled: Boolean(enabled),
+    });
+    if (msg.type === 'error') throw new Error(msg.detail);
+    if (msg.type === 'admin_challenge') {
+      return this._authorizeAdminOp(
+        msg, 'chat_link_preview', enabled ? 'on' : 'off', signFn);
+    }
+    return msg;
+  }
+
+  /**
    * MusicBrainz metadata for one track (Music app, docs/musicbay.md §4.3)
    * — same shape as fetchMediaMeta, minus a season/episode concept:
    * album-level (release), resolved from the track's own artist/album
@@ -1365,24 +1515,6 @@ class MeshBayTransport {
    * on the hub is the other half, and neither implies the other.
    */
   /**
-   * Turn uploading by ordinary members on or off.
-   *
-   * Signed by the operator like any other privileged operation — the node
-   * refuses an unsigned one, which is what stops a member turning it back on.
-   */
-  async setMemberUpload(allowed, signFn) {
-    const msg = await this._sendAndWait({
-      type: 'member_upload', v: '0.1', allowed: Boolean(allowed),
-    });
-    if (msg.type === 'error') throw new Error(msg.detail);
-    if (msg.type === 'admin_challenge') {
-      return this._authorizeAdminOp(
-        msg, 'member_upload', allowed ? 'on' : 'off', signFn);
-    }
-    return msg;
-  }
-
-  /**
    * Turn a group "application" (Chat, Files, ...) on or off for everyone.
    *
    * Takes the whole set in one signed message rather than one op per app, so
@@ -1391,13 +1523,25 @@ class MeshBayTransport {
    * `_authorizeAdminOp` below checks the two match.
    */
   async setAppsEnabled(apps, signFn) {
+    // Files cannot be turned off — MNP permits root exploration regardless of
+    // this list, so hiding the tab only ever misled — and the node adds it if
+    // it is missing. That normalisation has to happen *here too*: the subject
+    // below is rebuilt from what this client sent, and compared byte for byte
+    // against what the node put in the challenge. A list arriving here without
+    // `files` would produce two different strings and `_authorizeAdminOp`
+    // would refuse to sign an op the operator did ask for. It is reachable
+    // only from a caller that builds the list from something other than the
+    // node's own answer, which is exactly the kind of caller a later phase
+    // adds. (`apps.js` marks it `alwaysEnabled`; this file is a classic
+    // script and cannot import it.)
+    const full = apps.includes('files') ? [...apps] : ['files', ...apps];
     const msg = await this._sendAndWait({
-      type: 'apps_enabled', v: '0.1', apps,
+      type: 'apps_enabled', v: '0.1', apps: full,
     });
     if (msg.type === 'error') throw new Error(msg.detail);
     if (msg.type === 'admin_challenge') {
       return this._authorizeAdminOp(
-        msg, 'apps_enabled', [...apps].sort().join(','), signFn);
+        msg, 'apps_enabled', [...full].sort().join(','), signFn);
     }
     return msg;
   }
@@ -1452,11 +1596,12 @@ class MeshBayTransport {
     return msg;
   }
 
-  async addRoot(groupId, path, { name, kind, upload } = {}, signFn) {
+  async addRoot(groupId, path, { name, kind, writable, removable } = {}, signFn) {
     const msg = await this._sendAndWait({
-      type: 'root_add', v: '0.1',
+      type: 'root_add', v: '1.1',
       group_id: groupId, path,
-      name: name || '', kind: kind || 'generic', upload: !!upload,
+      name: name || '', kind: kind || 'generic',
+      writable: !!writable, removable: !!removable,
     });
     if (msg.type === 'error') throw new Error(msg.detail);
     if (msg.type === 'admin_challenge') {
@@ -1477,6 +1622,48 @@ class MeshBayTransport {
     return msg;
   }
 
+  async updateRoot(groupId, rootName, { writable, removable } = {}, signFn) {
+    const updates = [];
+    if (writable !== undefined) updates.push(`rw=${writable ? 'on' : 'off'}`);
+    if (removable !== undefined) updates.push(`rem=${removable ? 'on' : 'off'}`);
+    const subject = updates.length ? `${rootName}:${updates.join(',')}` : rootName;
+    const msg = await this._sendAndWait({
+      type: 'root_update', v: '1.1',
+      group_id: groupId, root_name: rootName,
+      ...(writable !== undefined && { writable }),
+      ...(removable !== undefined && { removable }),
+    });
+    if (msg.type === 'error') throw new Error(msg.detail);
+    if (msg.type === 'admin_challenge') {
+      return this._authorizeAdminOp(msg, 'root_update', subject, signFn);
+    }
+    return msg;
+  }
+
+  async ejectRoot(groupId, rootName, signFn) {
+    const msg = await this._sendAndWait({
+      type: 'root_eject', v: '1.1',
+      group_id: groupId, root_name: rootName,
+    });
+    if (msg.type === 'error') throw new Error(msg.detail);
+    if (msg.type === 'admin_challenge') {
+      return this._authorizeAdminOp(msg, 'root_eject', rootName, signFn);
+    }
+    return msg;
+  }
+
+  async plugRoot(groupId, rootName, signFn) {
+    const msg = await this._sendAndWait({
+      type: 'root_plug', v: '1.1',
+      group_id: groupId, root_name: rootName,
+    });
+    if (msg.type === 'error') throw new Error(msg.detail);
+    if (msg.type === 'admin_challenge') {
+      return this._authorizeAdminOp(msg, 'root_plug', rootName, signFn);
+    }
+    return msg;
+  }
+
   async unpinMember(userId, signFn) {
     const msg = await this._sendAndWait({
       type: 'member_unpin', v: '0.1', user_id: userId,
@@ -1612,8 +1799,19 @@ class MeshBayTransport {
    * The node decides where this lands (uploads/) and under what name — it finds a
    * free one rather than replacing anything. The ack says which, and that is what
    * this returns.
+   *
+   * `dir` names the folder to upload into, as a virtual path
+   * (`Media/Films/1999`) — where the sender is actually looking. The node
+   * resolves it against the group's own roots, which refuses `..`, absolute
+   * segments and anything escaping its root; it is a place among the group's
+   * folders, never a path on the operator's filesystem.
+   *
+   * `root` is the older, coarser form: the root's name and nothing below it.
+   * Kept because a node that predates `dir` reads it, and because Chat has no
+   * folder on screen to name. Omitting both leaves the node to pick, which it
+   * only does for a client old enough to have had one destination.
    */
-  async uploadFile(file, { chunkSize, onProgress, signal } = {}) {
+  async uploadFile(file, { chunkSize, onProgress, signal, root, dir } = {}) {
     // The same file twice at once would confuse the node, which keys its own
     // upload state by name — and would race for the same destination.
     if (this._uploaders.has(file.name)) {
@@ -1664,6 +1862,8 @@ class MeshBayTransport {
           chunk_index: i,
           total_chunks: total,
           data: buf,
+          ...(root ? { root } : {}),
+          ...(dir ? { dir } : {}),
         });
       }
       while (acked < total) {
@@ -2161,7 +2361,19 @@ class MeshBayTransport {
     } else if (typeof msg.type === 'string' && msg.type.endsWith('_ack')) {
       const key = `admin:${msg.type.slice(0, -4)}`;
       for (const [, handler] of this._pending) {
-        if (handler._key === key) { handler.resolve(msg); return; }
+        if (handler._key === key) {
+          handler.resolve(msg);
+          // The comment above ("its own caller already updates local state
+          // from what it sent") is true of every op whose caller passes the
+          // value it just chose to an onX(next). The root ops are not like
+          // that: what changes is the whole roots table, which only the node
+          // can compute — availability, the eject that the plug refused, the
+          // name it settled on. Returning here left the operator who clicked
+          // Eject as the one client that never saw it happen, while every
+          // other peer got the broadcast. So this one type is handed on.
+          if (BROADCAST_ACK_TYPES.has(msg.type)) _replayBroadcast(this, msg);
+          return;
+        }
       }
     }
 
@@ -2208,10 +2420,12 @@ class MeshBayTransport {
       return;
     }
 
-    // The operator changed who may upload. Unsolicited: it arrives at everyone
-    // connected, not only at whoever asked. It still has to reach a pending
-    // caller — the operator's own request resolves on this reply — so it falls
-    // through to the matching below rather than returning here.
+    // Legacy. An MNP 1.0 node still broadcasts this when its operator changes
+    // the group-wide upload switch, and its roots carry no `writable` for us
+    // to read instead — so this is the only answer available from such a node
+    // and it is still honoured. Nothing here *sends* the message any more:
+    // per-root RO/RW replaced it, and a current node answers it with a
+    // deprecation notice and no action.
     if (msg.type === 'member_upload_ack' && this._onUploadPolicy) {
       this._onUploadPolicy(Boolean(msg.allowed));
     }
@@ -2222,6 +2436,18 @@ class MeshBayTransport {
       this._onAppsEnabled(msg.apps || []);
     }
 
+    // An application was pointed at different folders. One handler for every
+    // app — the callback is given the app's name and decides.
+    if (msg.type === 'app_directories_ack' && this._onAppDirectories) {
+      this._onAppDirectories(msg.app, msg.directories || []);
+    }
+    if (msg.type === 'chat_directory_ack' && this._onChatDirectory) {
+      this._onChatDirectory(msg.path || '');
+    }
+    if (msg.type === 'chat_link_preview_ack' && this._onChatLinkPreview) {
+      this._onChatLinkPreview(Boolean(msg.enabled));
+    }
+
     // Node-wide (not per-group) — the operator supplied/cleared a custom
     // token, or changed the query language. `token_customized` only says
     // whether one is set, never the token itself.
@@ -2277,6 +2503,15 @@ class MeshBayTransport {
       this._onMusicbrainzEnabled(Boolean(msg.enabled));
     }
 
+    // A root's flags changed, or one was ejected, plugged, added or removed.
+    // Broadcast by the node to every peer, so everyone's table updates without
+    // waiting for the next index_sync.
+    if (msg.type === 'root_update_ack' || msg.type === 'root_eject_ack'
+        || msg.type === 'root_plug_ack' || msg.type === 'root_add_ack'
+        || msg.type === 'root_remove_ack') {
+      if (this._onRootsChanged) this._onRootsChanged(msg);
+    }
+
     // The operator's node is scanning — never the entries themselves, just
     // enough to animate a presence dot. Pushed periodically while it runs,
     // plus once more on the transition back to idle (daemon.py
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js
new file mode 100644
index 0000000..5c79bc5
--- /dev/null
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app-settings.js
@@ -0,0 +1,131 @@
+import { html, useState, useEffect } from './vendor/htm-preact.js';
+import { t, getLocale, LOCALES } from './i18n.js';
+import { ToggleSwitch, useSaver } from './settings-ui.js';
+import { FolderPickerField } from './folder-tree.js';
+
+// MeshBay's own locale codes (i18n.js LOCALES) to the language tag TMDB
+// expects. Duplicated from nothing: this is the only place it lives now that
+// the TMDB fields moved out of the monolithic settings page.
+const TMDB_LANGUAGE_BY_LOCALE = {
+  en: 'en-US', fr: 'fr-FR', es: 'es-ES', 'pt-BR': 'pt-BR', 'zh-CN': 'zh-CN',
+  ja: 'ja-JP', de: 'de-DE', it: 'it-IT', nl: 'nl-NL', pl: 'pl-PL',
+};
+
+/**
+ * The Videos app's operator settings: which folders it works over, and the
+ * TMDB lookups it makes.
+ *
+ * Several folders now, not one. A film library is as likely to be two drives
+ * as one, and the single-root model made the second one invisible — the
+ * operator's only recourse was to point Videos at a parent containing both,
+ * which pulls in everything else under it too.
+ *
+ * The TMDB parts are two independent settings that happen to sit together:
+ * the on/off switch is per group, while the API key and the query language
+ * are node-wide, because they are one operator's credential and one shared
+ * cache (docs/mediacenter.md §5.5). They save separately for that reason.
+ */
+function VideoSettings({ roots, dirs, settings, saveDirectories, transport, signFn }) {
+  const { busy, msg, run } = useSaver();
+  const [directories, setDirectories] = useState(settings.videoDirectories || []);
+  const [tmdbEnabled, setTmdbEnabled] = useState(settings.tmdbEnabled !== false);
+  const [token, setToken] = useState('');
+  const [language, setLanguage] = useState(
+    settings.tmdbLanguage || TMDB_LANGUAGE_BY_LOCALE[getLocale()] || 'en-US');
+
+  useEffect(() => {
+    setDirectories(settings.videoDirectories || []);
+  }, [settings.videoDirectories]);
+  useEffect(() => {
+    setTmdbEnabled(settings.tmdbEnabled !== false);
+  }, [settings.tmdbEnabled]);
+  useEffect(() => {
+    if (settings.tmdbLanguage) setLanguage(settings.tmdbLanguage);
+  }, [settings.tmdbLanguage]);
+
+  const current = settings.videoDirectories || [];
+  const dirsDirty = directories.length !== current.length
+    || directories.some((d, i) => d !== current[i]);
+
+  return html`
+    <div class="app-settings">
+      <${FolderPickerField}
+        label=${t('settings_app.video_directories_label')}
+        hint=${t('settings_app.video_directories_hint')}
+        roots=${roots} dirs=${dirs} mode="multi"
+        value=${directories} disabled=${busy}
+        onChange=${setDirectories} />
+
+      <button class="app-save" disabled=${busy || !dirsDirty}
+        onClick=${() => run(() => saveDirectories(directories))}>
+        ${busy ? t('settings_app.saving') : t('settings_app.save')}
+      </button>
+
+      <h4 class="app-settings-sub">${t('settings_node.tmdb_title')}</h4>
+      <p class="settings-hint">${t('settings_node.tmdb_hint')}</p>
+
+      <div class="settings-row">
+        <${ToggleSwitch} checked=${tmdbEnabled} disabled=${busy}
+          onChange=${(v) => { setTmdbEnabled(v);
+                              run(() => transport.setTmdbEnabled(v, signFn)); }}
+          label=${tmdbEnabled ? t('settings_node.tmdb_enabled')
+                              : t('settings_node.tmdb_disabled')} />
+      </div>
+
+      <div class="settings-row">
+        <label class="settings-label">
+          ${t('settings_node.tmdb_token_label')}
+          <input type="password" value=${token} disabled=${busy}
+            placeholder=${t('settings_node.tmdb_token_placeholder')}
+            onInput=${(e) => setToken(e.target.value)} />
+        </label>
+        ${/* No "optional", and no mention of a shipped default. A key that
+              works without one is a key somebody else is paying the rate
+              limit for, and the operator should know they are meant to have
+              their own. */''}
+        <p class="settings-hint">
+          ${settings.tmdbTokenCustomized
+            ? t('settings_node.tmdb_token_customized')
+            : t('settings_app.tmdb_token_prompt')}
+          ${' '}
+          <a href="https://www.themoviedb.org/settings/api" target="_blank"
+             rel="noopener noreferrer">${t('settings_app.tmdb_token_link')}</a>
+        </p>
+      </div>
+
+      <div class="settings-row">
+        <label class="settings-label">
+          ${t('settings_node.tmdb_language_label')}
+          <select value=${language} disabled=${busy}
+            onChange=${(e) => setLanguage(e.target.value)}>
+            ${LOCALES.map((l) => html`
+              <option key=${l.code} value=${TMDB_LANGUAGE_BY_LOCALE[l.code]}>
+                ${l.name}
+              </option>`)}
+          </select>
+        </label>
+        <p class="settings-hint">${t('settings_node.tmdb_language_hint')}</p>
+      </div>
+
+      ${/* The same control as the one above it. Two Save buttons in one pane
+            that do not look alike is worse than either looking wrong. This one
+            is never inert: the language always has a value to send, and an
+            empty token means "leave the stored one alone", not "no change". */''}
+      <button class="app-save" disabled=${busy}
+        onClick=${() => run(async () => {
+          // `undefined` for the token means "leave the stored one alone",
+          // which is not the same as `''` — that clears it. The input starts
+          // empty on every render because a secret is not read back, so
+          // sending it as a value would wipe the key every time the language
+          // was changed.
+          await transport.setTmdbConfig(token || undefined, language, signFn);
+          setToken('');
+        })}>
+        ${busy ? t('settings_app.saving') : t('settings_node.tmdb_save')}
+      </button>
+      ${msg && html`<p class="settings-hint">${msg}</p>`}
+    </div>
+  `;
+}
+
+export { VideoSettings, TMDB_LANGUAGE_BY_LOCALE };
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
index 4f52b16..57da9ff 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/video-app.js
@@ -57,10 +57,11 @@ function yearOf(dateStr) {
 // work for this group before that either (daemon.py's
 // _enrich_new_video_entries), so falling back to "the whole index" here
 // would just show files nothing has enriched.
-function underVideoRoot(entry, videoRoot) {
-  if (!videoRoot) return false;
+function underVideoRoot(entry, directories) {
+  const dirs = directories || [];
+  if (!dirs.length) return false;
   const p = entry.path || '';
-  return p === videoRoot || p.startsWith(videoRoot + '/');
+  return dirs.some((d) => p === d || p.startsWith(d + '/'));
 }
 
 function buildSeasons(episodes) {
@@ -96,12 +97,12 @@ function defaultSeason(show) {
   return Math.min(...(real.length ? real : numbers));
 }
 
-function groupVideoEntries(entries, videoRoot) {
+function groupVideoEntries(entries, videoDirectories) {
   const movies = [];
   const showsByTitle = new Map();
   for (const e of entries) {
     if (e.type !== 'video') continue;
-    if (!underVideoRoot(e, videoRoot)) continue;
+    if (!underVideoRoot(e, videoDirectories)) continue;
     if (e.season != null && e.episode != null) {
       const title = e.display_title || e.name;
       if (!showsByTitle.has(title)) showsByTitle.set(title, { title, episodes: [] });
@@ -1040,7 +1041,8 @@ function FlatList({ movies, shows, transportRef, gekRef, onPreview, onNeedConn }
 // ── shell ────────────────────────────────────────────────────────────────────
 
 function VideoApp({
-  groupId, transportRef, gekRef, status, entries, onPreview, videoRoot, tmdbConfig, isNodeAdmin,
+  groupId, transportRef, gekRef, status, entries, availableEntries, onPreview,
+  videoDirectories, tmdbConfig, isNodeAdmin,
   hideFilter, onNeedConn,
 }) {
   const [mode, setMode] = useState(loadViewMode);
@@ -1056,8 +1058,13 @@ function VideoApp({
 
   const setModeAndSave = (m) => { setMode(m); saveViewMode(m); };
 
+  const videoEntries = availableEntries || entries;
+  // One or several folders now, so the "is anything configured" question
+  // is asked once rather than by every branch testing a string.
+  const configured = (videoDirectories || []).length > 0;
   const { movies, shows } = useMemo(
-    () => groupVideoEntries(entries, videoRoot), [entries, videoRoot]);
+    () => groupVideoEntries(videoEntries, videoDirectories),
+    [videoEntries, videoDirectories]);
 
   const needle = filter.trim().toLowerCase();
   const filteredMovies = useMemo(() => (typeFilter === 'series' ? [] : !needle ? movies : movies.filter(
@@ -1072,10 +1079,10 @@ function VideoApp({
     ${status === 'offline' && html`
       <p class="page-message">${t('group.offline_title')} ${t('group.offline_hint')}</p>
     `}
-    ${status === 'connected' && !videoRoot && html`
+    ${status === 'connected' && !configured && html`
       <p class="page-message">${t('video.no_root_configured')}</p>
     `}
-    ${status === 'connected' && videoRoot && html`
+    ${status === 'connected' && configured && html`
       <div class="video-toolbar">
         <button class="tb-btn ${mode === 'poster' ? 'active' : ''}"
           onClick=${() => setModeAndSave('poster')}>