+ |
+
+ ${isActive ? 'Active' : ""}
+ ${escapeHtml(account.email)}
+
+ ${escapeHtml(identityBits || account.account_key)}
+ ${escapeHtml(account.account_key)}
+ |
+ ${escapeHtml(formatPlan(account))} |
+
+
+ ${escapeHtml(formatPercent(account.last_usage?.primary?.used_percent))}
+
+ ${escapeHtml(account.last_usage?.primary?.resets_at ? formatDate(account.last_usage.primary.resets_at) : "No reset data")}
+ |
+
+
+ ${escapeHtml(formatPercent(account.last_usage?.secondary?.used_percent))}
+
+ ${escapeHtml(account.last_usage?.secondary?.resets_at ? formatDate(account.last_usage.secondary.resets_at) : "No reset data")}
+ |
+ ${escapeHtml(formatDate(account.last_used_at))} |
+
+
+
+ |
+
+ `;
+ }).join("");
+}
+
+async function loadOverview() {
+ const payload = await request("/api/overview");
+ state.overview = payload.overview;
+ renderSummary();
+ renderAccounts();
+}
+
+async function performAction({ confirmMessage = "", pendingMessage = "Working…", action, onSuccess } = {}) {
+ if (confirmMessage && !window.confirm(confirmMessage)) {
+ return;
+ }
+
+ setBusy(true);
+ setBanner(pendingMessage);
+ logOutput(pendingMessage);
+
+ try {
+ const payload = await action();
+ if (payload.overview) {
+ state.overview = payload.overview;
+ renderSummary();
+ renderAccounts();
+ }
+ if (onSuccess) {
+ onSuccess(payload);
+ }
+ setBanner(payload.message, "success");
+ logOutput(payload.message, payload);
+ } catch (error) {
+ setBanner(error.message, "error");
+ logOutput(error.message);
+ } finally {
+ setBusy(false);
+ }
+}
+
+async function encodeFile(file) {
+ const buffer = await file.arrayBuffer();
+ const bytes = new Uint8Array(buffer);
+ let binary = "";
+ for (const byte of bytes) {
+ binary += String.fromCharCode(byte);
+ }
+ return btoa(binary);
+}
+
+elements.reloadButton.addEventListener("click", () => {
+ performAction({
+ pendingMessage: "Reloading dashboard…",
+ action: async () => {
+ const payload = await request("/api/overview");
+ return {
+ message: "View reloaded.",
+ overview: payload.overview
+ };
+ }
+ });
+});
+
+elements.refreshButton.addEventListener("click", () => {
+ performAction({
+ pendingMessage: "Refreshing usage data…",
+ action: () => request("/api/refresh", { method: "POST", body: {} })
+ });
+});
+
+elements.cleanButton.addEventListener("click", () => {
+ performAction({
+ confirmMessage: "Clean backup and stale registry files now?",
+ pendingMessage: "Cleaning backups…",
+ action: () => request("/api/clean", { method: "POST", body: {} })
+ });
+});
+
+elements.loginBrowserButton.addEventListener("click", () => {
+ performAction({
+ pendingMessage: "Starting browser login… complete the auth flow and wait for the app to return.",
+ action: () => request("/api/login", {
+ method: "POST",
+ body: { deviceAuth: false }
+ })
+ });
+});
+
+elements.loginDeviceButton.addEventListener("click", () => {
+ performAction({
+ pendingMessage: "Starting device auth login… follow the code flow and wait for completion.",
+ action: () => request("/api/login", {
+ method: "POST",
+ body: { deviceAuth: true }
+ })
+ });
+});
+
+elements.searchInput.addEventListener("input", (event) => {
+ state.filter = event.target.value;
+ renderAccounts();
+});
+
+elements.thresholdForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+ performAction({
+ pendingMessage: "Saving thresholds…",
+ action: () => request("/api/thresholds", {
+ method: "POST",
+ body: {
+ threshold5h: Number(elements.threshold5h.value),
+ thresholdWeekly: Number(elements.thresholdWeekly.value)
+ }
+ })
+ });
+});
+
+elements.autoSwitchToggle.addEventListener("change", () => {
+ performAction({
+ pendingMessage: "Updating auto-switch…",
+ action: () => request("/api/auto-switch", {
+ method: "POST",
+ body: { enabled: elements.autoSwitchToggle.checked }
+ })
+ });
+});
+
+elements.apiToggle.addEventListener("change", () => {
+ performAction({
+ pendingMessage: "Updating API usage mode…",
+ action: () => request("/api/api-config", {
+ method: "POST",
+ body: { enabled: elements.apiToggle.checked }
+ })
+ });
+});
+
+elements.uploadForm.addEventListener("submit", async (event) => {
+ event.preventDefault();
+ const file = elements.uploadFile.files?.[0];
+ if (!file) {
+ setBanner("Choose a JSON file first.", "error");
+ return;
+ }
+
+ performAction({
+ pendingMessage: "Importing uploaded auth file…",
+ action: async () => request("/api/import-file", {
+ method: "POST",
+ body: {
+ filename: file.name,
+ alias: elements.uploadAlias.value.trim(),
+ contentBase64: await encodeFile(file)
+ }
+ }),
+ onSuccess: () => {
+ elements.uploadForm.reset();
+ }
+ });
+});
+
+elements.pathForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+ performAction({
+ pendingMessage: "Importing path…",
+ action: () => request("/api/import-path", {
+ method: "POST",
+ body: {
+ importPath: elements.importPath.value.trim(),
+ alias: elements.pathAlias.value.trim()
+ }
+ }),
+ onSuccess: () => {
+ elements.pathForm.reset();
+ }
+ });
+});
+
+elements.cpaForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+ performAction({
+ pendingMessage: "Importing CPA tokens…",
+ action: () => request("/api/import-cpa", {
+ method: "POST",
+ body: {
+ importPath: elements.cpaPath.value.trim(),
+ alias: elements.cpaAlias.value.trim()
+ }
+ }),
+ onSuccess: () => {
+ elements.cpaForm.reset();
+ }
+ });
+});
+
+elements.purgeForm.addEventListener("submit", (event) => {
+ event.preventDefault();
+ performAction({
+ confirmMessage: "Rebuild the registry from saved auth snapshots?",
+ pendingMessage: "Rebuilding registry…",
+ action: () => request("/api/purge", {
+ method: "POST",
+ body: {
+ importPath: elements.purgePath.value.trim()
+ }
+ }),
+ onSuccess: () => {
+ elements.purgeForm.reset();
+ }
+ });
+});
+
+elements.removeAllButton.addEventListener("click", () => {
+ performAction({
+ confirmMessage: "Remove all saved accounts from the registry and local auth snapshots?",
+ pendingMessage: "Removing all accounts…",
+ action: () => request("/api/remove-all", {
+ method: "POST",
+ body: {}
+ })
+ });
+});
+
+elements.accountsBody.addEventListener("click", (event) => {
+ const button = event.target.closest("button[data-action]");
+ if (!button) return;
+
+ const accountKey = button.dataset.key;
+ const actionName = button.dataset.action;
+ const account = state.overview.registry.accounts.find((item) => item.account_key === accountKey);
+ if (!account) return;
+
+ if (actionName === "switch") {
+ performAction({
+ confirmMessage: `Switch to ${account.email}?`,
+ pendingMessage: `Switching to ${account.email}…`,
+ action: () => request("/api/switch", {
+ method: "POST",
+ body: { accountKey }
+ })
+ });
+ return;
+ }
+
+ if (actionName === "remove") {
+ performAction({
+ confirmMessage: `Remove ${account.email}?`,
+ pendingMessage: `Removing ${account.email}…`,
+ action: () => request("/api/remove", {
+ method: "POST",
+ body: { accountKey }
+ })
+ });
+ }
+});
+
+loadOverview().catch((error) => {
+ setBanner(error.message, "error");
+ logOutput(error.message);
+});
diff --git a/gui/public/index.html b/gui/public/index.html
new file mode 100644
index 0000000..61d394d
--- /dev/null
+++ b/gui/public/index.html
@@ -0,0 +1,204 @@
+
+
+
+