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, 62 insertions, 0 deletions

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