feat: add Photos group app

A new group application (docs/apps.md's plug-in mechanism), following the
plan in docs/photos.md. Unlike Videos/Music: several photo roots per group
instead of one (photo_roots is a set, one signed op replaces it whole),
a single album-grid view with no third-party matching step, and per-photo
info read from the file's own EXIF at index time — no metadata service,
no credential, no outbound network call at all.

Protocol (meshbay-common, MNP 0.10 -> 0.11, additive): `taken_at`/`camera`
on IndexEntry; `photo_roots`/`photo_roots_ack`; `OP_PHOTO_ROOTS`.

Node: roster.py stores photo_roots as a group_settings entry (JSON list,
same shape as enabled_apps); ops.py/webrtc_server.py validate and sign the
whole set in one op, same pattern as apps_enabled; a new PhotoEnricher
(indexer/enrich_photo.py) runs Pillow in its own small bounded pool,
separate from the video/audio pools, producing a resized thumbnail plus
the two EXIF fields — never GPS, checked by a grep-based regression test.

Client: photos-app.js — one album card per directory containing images,
a per-album photo grid, and a lightbox with next/previous (keyboard and
buttons), zoom in/out/fit/100% starting from the actual on-screen fit
percentage, and a "zip this album" button reusing files-app.js's own zip
mechanism (lifted into file-utils.js's downloadDirectory so both call the
same implementation). group-settings.js gets an add/remove multi-root
picker, distinct from Videos/Music's single-value one.

Bugs found and fixed before this ever shipped, worth keeping the story of:

- enrich_photo.py read width/height from the raw image *before* applying
  EXIF orientation correction, and read DateTimeOriginal off the plain
  0th-IFD Exif object — a real camera stores it in the Exif sub-IFD, which
  Pillow only exposes via get_ifd(Exif). A flat, hand-built EXIF dict
  round-trips through Pillow either way, which is exactly what would have
  hidden both bugs; the regression test builds EXIF with piexif instead,
  matching what real hardware produces.
- photos-app.js's album grouping stripped a trailing path segment from
  entry.path under the assumption it still carried a filename — it
  doesn't (files-app.js's own convention: e.path is already the
  containing directory), so every album collapsed one level into its
  parent. Found live against a real multi-folder library.
- transport.js's ADMIN_OP_TYPES allowlist (already the fix for an
  identical bug on video_root/apps_enabled, see 4783d81) was missing
  photo_roots: its admin_challenge matched no pending request and was
  silently dropped, so saving a photo root just timed out after 30s with
  no error.
- daemon.py pruned a thumbnail when its file left the index (root removed
  or reconfigured) but never forgot the content hash was "already
  attempted" — the same bytes reappearing under a renamed/relocated root
  (an operator's real workflow) were then permanently skipped, forever,
  with nothing to indicate why. Discarding the attempt alongside the
  cache entry on prune is what makes pruning actually reversible.
- packages/meshbay-client's app:// protocol handler served every file
  with no Cache-Control header, so Chromium was free to serve a stale
  cached copy indefinitely — none of several `npm run sync-ui` + reload
  cycles during development actually picked up the new code until the
  renderer's disk cache was cleared by hand. Now sends Cache-Control:
  no-store.
- the lightbox's zoomed image used flex centering (align-items/
  justify-content: center) combined with overflow: auto — a well-known
  trap where the browser centers overflowing content by shifting it, and
  the leading half of that overflow (here, the top of a zoomed photo)
  sits outside what the scrollport can actually reach. Reported live as
  "unusable". Fixed by switching to top/left alignment once zoomed.

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

1 files changed, 112 insertions, 2 deletions

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 a4db4cb..60b0184 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-settings.js
@@ -101,6 +101,79 @@ function RootFolderRow({
   `;
 }
 
+/**
+ * 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));
+
+  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="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 ────────────────────────────────────────────────────────
 
 /**
@@ -120,7 +193,8 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
                              tmdbConfig, onTmdbConfig, onTmdbEnabled,
                              musicbrainzConfig, onMusicbrainzConfig, onMusicbrainzEnabled,
                              entries, nodeDirs, videoRoot, onVideoRoot,
-                             audioRoot, onAudioRoot, onRefreshIndex,
+                             audioRoot, onAudioRoot,
+                             photoRoots, onPhotoRoots, onRefreshIndex,
                              onPaired, onLeft }) {
   const [members, setMembers] = useState([]);
   const [adminId, setAdminId] = useState('');
@@ -636,6 +710,36 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
     }
   }, [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);
+    }
+  }, [transportRef, onPhotoRoots]);
+
   const [removing, setRemoving] = useState('');
 
   /**
@@ -957,7 +1061,8 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
             this group at all (daemon.py's _enrich_new_video_entries). */
         isNodeAdmin && connected
           && ((nodeDetected && nodeRoots.length > 0)
-              || activeApps.includes('video') || activeApps.includes('music')) && html`
+              || 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>
 
@@ -977,6 +1082,11 @@ function GroupSettingsPanel({ groupId, group, token, transportRef, gekRef,
               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`