diff --git a/webui/viewer.html b/webui/viewer.html
index c69d597..96eae71 100644
--- a/webui/viewer.html
+++ b/webui/viewer.html
@@ -13,7 +13,7 @@
Export Viewer
Messages
-
Account: Loading...
+
Account:
Dashboard
diff --git a/webui/viewer.js b/webui/viewer.js
index fe62648..ae20025 100644
--- a/webui/viewer.js
+++ b/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 =
- viewerState.accounts.find((item) => item.id === viewerState.accountId)?.label ||
- viewerState.accountId ||
- "Legacy";
- const accountEl = document.getElementById("viewer-account-name");
- if (accountEl) accountEl.textContent = accountName;
+ renderAccountSelector();
+
+ const sel = document.getElementById("viewer-account-select");
+ if (sel) {
+ sel.addEventListener("change", () => switchViewerAccount(sel.value));
+ }
try {
const authData = viewerState.accountId