feat(client): HelloWorld, the reference application

Every other test of the plugin architecture reads source for the *absence* of
app names. That proves nobody wrote a special case for Videos; it cannot prove
a genuinely new application works, because there was no new application.

This is one. It stores directories, appears as a tab, has a settings pane and
lists files, and the node has never heard its name outside a single allow-list
entry. Two files and one registry line, which is the claim
`docs/refactor-groups.md` §4.1 makes.

It ships hidden behind `?dev=1` (`dev: true` in the registry, the same opt-in
shape as transport.js's `?trace=1`). Registering it normally would put a toy
app in every operator's group; not registering it would prove nothing, since
registration is exactly what is claimed to be sufficient.

**Adding it found two places where the claim was nearly true rather than true,
and both are fixed by making the code less app-specific:**

`group-settings.js` fell back to the whole registry when a group had no
`enabled_apps` yet — which would have turned a hidden app on for everyone. It
asks `availableApps()` now.

`group-page.js` wrote out `videoDirectories` / `musicDirectories` /
`photoDirectories` by hand, so a fifth app would have needed that file edited.
It derives `<key>Directories` from the registry.

Neither was found by reading; both were found by adding the app, which is the
whole reason it exists.

Verified in a real Electron window as well as by the tests: hidden by default,
present with the flag, offered its own settings section, and listing exactly
the files under its configured folder and its subfolders — not the ones beside
it.

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

1 files changed, 50 insertions, 0 deletions

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 };