feat: add account selector dropdown in message viewer

webui/viewer.html

@@ -13,7 +13,7 @@
           <div>
             <div class="eyebrow">Export Viewer</div>
             <h1>Messages</h1>
-            <p class="muted small">Account: <span id="viewer-account-name">Loading...</span></p>
+            <p class="muted small">Account: <select id="viewer-account-select"></select></p>
           </div>
           <button id="sidebar-toggle" class="button button-small sidebar-toggle">☰</button>
           <a class="button button-small" href="/">Dashboard</a>

webui/viewer.js

@@ -130,6 +130,58 @@ function channelsEndpoint() {
   return "/api/channels";
 }
 
+function renderAccountSelector() {
+  const sel = document.getElementById("viewer-account-select");
+  if (!sel) return;
+  sel.innerHTML = "";
+  const legacy = viewerState.accounts.length === 0;
+  if (legacy) {
+    const opt = document.createElement("option");
+    opt.value = "";
+    opt.textContent = "Legacy";
+    sel.appendChild(opt);
+  } else {
+    viewerState.accounts.forEach((acc) => {
+      const opt = document.createElement("option");
+      opt.value = acc.id;
+      opt.textContent = acc.label || acc.id;
+      if (acc.id === viewerState.accountId) opt.selected = true;
+      sel.appendChild(opt);
+    });
+  }
+}
+
+async function switchViewerAccount(accountId) {
+  viewerState.accountId = accountId || null;
+  viewerState.accounts.forEach((acc) => {
+    if (acc.id === accountId) {
+      const opts = document.getElementById("viewer-account-select")?.options;
+      if (opts) {
+        for (let i = 0; i < opts.length; i++) {
+          opts[i].selected = opts[i].value === accountId;
+        }
+      }
+    }
+  });
+  try {
+    const authData = viewerState.accountId
+      ? await api(`/api/accounts/${encodeURIComponent(viewerState.accountId)}/auth`)
+      : await api("/api/auth");
+    viewerState.userId = authData.user_id || null;
+  } catch (e) {
+    console.warn("Could not fetch user ID:", e);
+  }
+  const channels = await api(channelsEndpoint());
+  viewerState.channels = channels;
+  viewerState.channelId = channels[0]?.channel_id || null;
+  viewerState.oldestMessageId = null;
+  viewerState.newestMessageId = null;
+  renderChannelList();
+  if (viewerState.channelId) {
+    await loadChannel(viewerState.channelId);
+  }
+}
+
 async function loadViewerAccount(params) {
   const requested = params.get("account");
   try {
@@ -143,12 +195,12 @@ async function loadViewerAccount(params) {
     viewerState.accounts[0]?.id ||
     null;
 
-  const accountName =
+  renderAccountSelector();
-    viewerState.accounts.find((item) => item.id === viewerState.accountId)?.label ||
+
-    viewerState.accountId ||
+  const sel = document.getElementById("viewer-account-select");
-    "Legacy";
+  if (sel) {
-  const accountEl = document.getElementById("viewer-account-name");
+    sel.addEventListener("change", () => switchViewerAccount(sel.value));
-  if (accountEl) accountEl.textContent = accountName;
+  }
 
   try {
     const authData = viewerState.accountId