@metricinsights/pp-dev 1.4.7 → 1.5.0-beta.10

package/dist/client/client.js

@@ -58,8 +58,11 @@ function createPPDevHotContext() {
             scheduleReconnect();
             return;
         }
+        let opened = false;
         socket.addEventListener('open', () => {
+            opened = true;
             reconnectDelay = 1_000;
+            dispatch('vite:ws:connect', {});
             flushOutbox();
         });
         socket.addEventListener('message', (ev) => {
@@ -76,6 +79,12 @@ function createPPDevHotContext() {
         });
         socket.addEventListener('close', () => {
             socket = null;
+            // Same events as Vite's own HMR client, so the panel can tell a lost connection apart
+            // (e.g. a sync whose response will never arrive). Only for a socket that was open: a
+            // failed reconnect attempt is not a new disconnect.
+            if (opened) {
+                dispatch('vite:ws:disconnect', {});
+            }
             scheduleReconnect();
         });
         socket.addEventListener('error', () => {
@@ -644,6 +653,441 @@ function initPanelSettings($panel, controller, hooks) {
     });
 }
 
+/**
+ * The dev panel's "Users" popover (PP-4597): the user of this tab, the saved users (open as, log
+ * in, make default, remove) and adding a user by API token or by username + password. Each user
+ * works on its own host, `<name>.localhost:<port>`; see src/lib/user-registry.ts.
+ */
+const USERS_API = '/@api/users';
+const REFRESH_INTERVAL = 3000;
+const USER_HOST_REGEXP = /^([a-z](?:[a-z0-9-]*[a-z0-9])?)\.localhost$/;
+/** Marks the user this tab works as, apart from the radio, which picks localhost's user. */
+const THIS_TAB_BADGE = '<span class="pp-dev-info__users-badge">this tab</span>';
+const STATE_LABELS = {
+    pending: 'not logged in yet',
+    active: 'logged in',
+    expired: 'session expired',
+};
+/** The saved user this tab belongs to, from its host; `undefined` on the main host. */
+function getTabUserName(hostname = window.location.hostname) {
+    return USER_HOST_REGEXP.exec(hostname)?.[1];
+}
+/** Users need `*.localhost` hosts, which only exist when the dev server is opened on localhost. */
+function isOnLocalhost(hostname = window.location.hostname) {
+    return hostname === 'localhost' || hostname.endsWith('.localhost');
+}
+function mainOrigin() {
+    const { protocol, port } = window.location;
+    return `${protocol}//localhost${port ? `:${port}` : ''}`;
+}
+/** The current page on another origin, so "open as" keeps the page you are on. */
+function samePageOn(origin) {
+    const { pathname, search, hash } = window.location;
+    return `${origin}${pathname}${search}${hash}`;
+}
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
+}
+function describeUser(user) {
+    const who = user.miUser?.username || (user.miUser ? `MI user ${user.miUser.id}` : '');
+    const how = user.kind === 'token'
+        ? user.state === 'expired'
+            ? 'API token turned down by MI'
+            : 'API token'
+        : STATE_LABELS[user.state ?? 'pending'];
+    return [who, how].filter(Boolean).join(' · ');
+}
+async function readError(response) {
+    try {
+        const body = await response.json();
+        return body?.error || `Request failed (${response.status})`;
+    }
+    catch {
+        return `Request failed (${response.status})`;
+    }
+}
+function initUsersPanel($panel, hooks) {
+    const $btn = $panel.querySelector('.pp-dev-info__users-btn');
+    if (!$btn) {
+        return;
+    }
+    const tabUser = getTabUserName();
+    // On a saved user's host the button stands out (the name is in its tooltip and the popover, so a
+    // long name doesn't widen the panel), so the tab is never mistaken for your own.
+    if (tabUser) {
+        $panel.classList.add('pp-dev-info--user-tab');
+        $btn.title = `This tab works as ${tabUser}. Users…`;
+        $btn.setAttribute('aria-label', `Users (this tab works as ${tabUser})`);
+    }
+    let $popover = null;
+    let refreshTimer;
+    let addKind = 'token';
+    let data = null;
+    // What the list shows now, so a refresh with the same data leaves it (and the focus) alone.
+    let renderedData = '';
+    // The token user being edited, whose row shows the edit form instead.
+    let editing = null;
+    const onDocClick = (ev) => {
+        const target = ev.target;
+        if ($popover && !$popover.contains(target) && !$btn.contains(target)) {
+            close();
+        }
+    };
+    const onKeyDown = (ev) => {
+        if (ev.key === 'Escape') {
+            close();
+        }
+    };
+    const close = () => {
+        if (!$popover) {
+            return;
+        }
+        editing = null;
+        window.clearInterval(refreshTimer);
+        $popover.remove();
+        $popover = null;
+        document.removeEventListener('click', onDocClick, true);
+        document.removeEventListener('keydown', onKeyDown, true);
+        hooks?.onOpenChange?.(false);
+    };
+    const setError = (message) => {
+        const $error = $popover?.querySelector('.pp-dev-info__users-error');
+        if ($error) {
+            $error.textContent = message;
+            $error.hidden = !message;
+        }
+    };
+    const request = async (method, path, body) => {
+        try {
+            const response = await fetch(path, {
+                method,
+                headers: body === undefined ? undefined : { 'Content-Type': 'application/json' },
+                body: body === undefined ? undefined : JSON.stringify(body),
+            });
+            if (!response.ok) {
+                setError(await readError(response));
+                return null;
+            }
+            setError('');
+            return response;
+        }
+        catch {
+            setError('pp-dev is not reachable');
+            return null;
+        }
+    };
+    /**
+     * Who this tab works as: on a user's host that user, on localhost the default user, and on an IP
+     * address or a custom domain you (`undefined`). Before the users are loaded, a user's host only.
+     */
+    const getCurrentUser = () => tabUser ?? (window.location.hostname === 'localhost' ? data?.defaultUser : null) ?? undefined;
+    const renderList = () => {
+        const $list = $popover?.querySelector('.pp-dev-info__users-list');
+        if (!$popover || !$list || !data) {
+            return;
+        }
+        // The user being edited is gone (removed, logged out): nothing to edit any more.
+        if (editing && !data.users.some((user) => user.name === editing && user.kind === 'token')) {
+            editing = null;
+        }
+        else if (editing && $list.querySelector('.pp-dev-info__users-edit')?.dataset.user === editing) {
+            // A refresh must not wipe what is being typed into the edit form. (Edit on another user
+            // redraws it for that one.)
+            return;
+        }
+        const snapshot = JSON.stringify(data);
+        if (snapshot === renderedData) {
+            return;
+        }
+        renderedData = snapshot;
+        // The control that has the keyboard focus, to focus its counterpart in the new list.
+        const focusKey = document.activeElement instanceof HTMLElement && $list.contains(document.activeElement)
+            ? document.activeElement.dataset.focusKey
+            : undefined;
+        const defaultUser = data.defaultUser;
+        const currentUser = getCurrentUser();
+        const $tab = $popover.querySelector('.pp-dev-info__users-tab strong');
+        if ($tab) {
+            $tab.textContent = currentUser ?? 'you';
+        }
+        const rows = [
+            `<div class="pp-dev-info__users-row${currentUser ? '' : ' is-current'}">
+        <input type="radio" name="pp-dev-default-user" class="pp-dev-info__users-default" value="" data-focus-key=":default"
+          title="Make the main host (localhost) work as you" ${defaultUser ? '' : 'checked'} />
+        <div class="pp-dev-info__users-who">
+          <span class="pp-dev-info__users-name">You${currentUser ? '' : THIS_TAB_BADGE}</span>
+          <span class="pp-dev-info__users-meta">original user · the dev panel always works as you</span>
+        </div>
+        ${
+            // The main host works as you only while no other user is the default; then that user's
+            // row is the one to open.
+            tabUser && !defaultUser
+                ? `<button type="button" class="pp-dev-info__users-action" data-open="${escapeHtml(mainOrigin())}" data-focus-key=":open" title="Open this page on the main host">Open</button>`
+                : ''}
+      </div>`,
+            ...data.users.map((user) => {
+                const canBeDefault = user.kind === 'token' ? user.state !== 'expired' : user.state === 'active';
+                const needsLogin = user.kind === 'session' && user.state !== 'active';
+                const needsAttention = needsLogin || user.state === 'expired';
+                const name = escapeHtml(user.name);
+                if (user.kind === 'token' && user.name === editing) {
+                    return `<form class="pp-dev-info__users-row pp-dev-info__users-edit" data-user="${name}">
+            <input class="pp-dev-info__users-input pp-dev-info__users-edit-name" value="${name}" maxlength="32"
+              autocomplete="off" spellcheck="false" aria-label="Name" data-focus-key="${name}:edit-name"
+              title="Lowercase latin letters, digits and -, starting with a letter. The user opens on <name>.localhost." />
+            <input class="pp-dev-info__users-input pp-dev-info__users-edit-token" type="password" autocomplete="off"
+              placeholder="New API token (empty keeps the current one)" aria-label="New API token" data-focus-key="${name}:edit-token" />
+            <div class="pp-dev-info__users-edit-actions">
+              <button type="submit" class="pp-dev-info__users-action pp-dev-info__users-action--accent" data-focus-key="${name}:save">Save</button>
+              <button type="button" class="pp-dev-info__users-action" data-cancel-edit data-focus-key="${name}:cancel">Cancel</button>
+            </div>
+          </form>`;
+                }
+                let defaultTitle = `Make the main host (localhost) work as ${name}`;
+                if (!canBeDefault) {
+                    defaultTitle =
+                        user.kind === 'token' ? `MI turned down the API token of ${name}` : `${name} has to log in first`;
+                }
+                return `<div class="pp-dev-info__users-row${user.name === currentUser ? ' is-current' : ''}${needsAttention ? ' needs-login' : ''}" data-user="${name}">
+          <input type="radio" name="pp-dev-default-user" class="pp-dev-info__users-default" value="${name}" data-focus-key="${name}:default"
+            title="${defaultTitle}"
+            ${user.name === defaultUser ? 'checked' : ''} ${canBeDefault ? '' : 'disabled'} />
+          <div class="pp-dev-info__users-who">
+            <span class="pp-dev-info__users-name">${name}${user.name === currentUser ? THIS_TAB_BADGE : ''}</span>
+            <span class="pp-dev-info__users-meta">${escapeHtml(describeUser(user))}</span>
+          </div>
+          ${needsLogin && user.loginUrl
+                    ? `<button type="button" class="pp-dev-info__users-action pp-dev-info__users-action--accent" data-open="${escapeHtml(user.loginUrl)}" data-raw="true" data-focus-key="${name}:login">Log in</button>`
+                    : ''}
+          ${user.kind === 'token'
+                    ? `<button type="button" class="pp-dev-info__users-action" data-edit="${name}" data-focus-key="${name}:edit" title="Rename ${name} or replace its API token">Edit</button>`
+                    : ''}
+          <button type="button" class="pp-dev-info__users-action" data-open="${escapeHtml(user.origin)}" data-focus-key="${name}:open" title="Open this page as ${name}">Open</button>
+          <button type="button" class="pp-dev-info__users-remove" data-remove="${name}" data-focus-key="${name}:remove" title="Remove ${name}" aria-label="Remove ${name}">×</button>
+        </div>`;
+            }),
+        ];
+        $list.innerHTML = rows.join('');
+        if (focusKey !== undefined) {
+            // The same control of the same user, or the list's first control if it is gone.
+            const $same = [...$list.querySelectorAll('[data-focus-key]')].find(($el) => $el.dataset.focusKey === focusKey);
+            ($same ?? $list.querySelector('[data-focus-key]'))?.focus();
+        }
+        $list.querySelectorAll('[data-open]').forEach(($open) => {
+            $open.addEventListener('click', (ev) => {
+                ev.preventDefault();
+                const target = $open.dataset.open;
+                window.open($open.dataset.raw ? target : samePageOn(target), '_blank');
+            });
+        });
+        const startEditing = (name) => {
+            editing = name;
+            renderedData = '';
+            renderList();
+            $list.querySelector('.pp-dev-info__users-edit-name')?.focus();
+        };
+        $list.querySelectorAll('[data-edit]').forEach(($edit) => {
+            $edit.addEventListener('click', (ev) => {
+                ev.preventDefault();
+                startEditing($edit.dataset.edit);
+            });
+        });
+        $list.querySelector('[data-cancel-edit]')?.addEventListener('click', (ev) => {
+            ev.preventDefault();
+            setError('');
+            startEditing(null);
+        });
+        $list.querySelector('.pp-dev-info__users-edit')?.addEventListener('submit', async (ev) => {
+            ev.preventDefault();
+            const name = editing;
+            const $form = ev.currentTarget;
+            const newName = $form.querySelector('.pp-dev-info__users-edit-name').value.trim();
+            const token = $form.querySelector('.pp-dev-info__users-edit-token').value.trim();
+            const response = await request('PATCH', `${USERS_API}/${encodeURIComponent(name)}`, {
+                name: newName,
+                ...(token ? { token } : {}),
+            });
+            if (!response) {
+                return;
+            }
+            const { user } = (await response.json());
+            // This tab's own user got a new host: go on there (the old one would only send it on).
+            if (tabUser === name && user.name !== name) {
+                window.location.href = samePageOn(user.origin);
+                return;
+            }
+            editing = null;
+            renderedData = '';
+            await refresh();
+        });
+        $list.querySelectorAll('[data-remove]').forEach(($remove) => {
+            $remove.addEventListener('click', async (ev) => {
+                ev.preventDefault();
+                if (await request('DELETE', `${USERS_API}/${encodeURIComponent($remove.dataset.remove)}`)) {
+                    await refresh();
+                }
+            });
+        });
+        $list.querySelectorAll('.pp-dev-info__users-default').forEach(($radio) => {
+            $radio.addEventListener('change', async () => {
+                await request('PUT', `${USERS_API}/default`, { name: $radio.value || null });
+                // Redrawn even if refused: the radio the click checked must go back.
+                renderedData = '';
+                await refresh();
+            });
+        });
+    };
+    const renderAvailability = () => {
+        if (!$popover || !data) {
+            return;
+        }
+        const $form = $popover.querySelector('.pp-dev-info__users-add');
+        const $unavailable = $popover.querySelector('.pp-dev-info__users-unavailable');
+        let reason = '';
+        if (!isOnLocalhost()) {
+            reason = 'Users open on <name>.localhost hosts: open the dev server on localhost to use them.';
+        }
+        else if (!data.available) {
+            reason = 'Adding users needs your own API token: set mi.token or MI_ACCESS_TOKEN.';
+        }
+        if ($form) {
+            $form.hidden = Boolean(reason);
+        }
+        if ($unavailable) {
+            $unavailable.textContent = reason;
+            $unavailable.hidden = !reason;
+        }
+    };
+    const refresh = async () => {
+        try {
+            const response = await fetch(USERS_API);
+            if (!response.ok) {
+                return;
+            }
+            data = (await response.json());
+            renderList();
+            renderAvailability();
+        }
+        catch {
+            // The next refresh tries again.
+        }
+    };
+    const renderKind = () => {
+        if (!$popover) {
+            return;
+        }
+        $popover.querySelectorAll('.pp-dev-info__users-kind').forEach(($kind) => {
+            const active = $kind.dataset.kind === addKind;
+            $kind.classList.toggle('active', active);
+            $kind.setAttribute('aria-pressed', String(active));
+        });
+        const $token = $popover.querySelector('.pp-dev-info__users-token');
+        const $submit = $popover.querySelector('.pp-dev-info__users-submit');
+        const $kindHint = $popover.querySelector('.pp-dev-info__users-kind-hint');
+        if ($token) {
+            $token.hidden = addKind !== 'token';
+        }
+        if ($submit) {
+            $submit.textContent = addKind === 'token' ? 'Add user' : 'Add and log in…';
+        }
+        if ($kindHint) {
+            $kindHint.textContent =
+                addKind === 'token'
+                    ? 'Checked with MI before the user is added. SSO users can only be added this way.'
+                    : "Opens MI's login page on the user's own host. pp-dev never sees the password.";
+        }
+    };
+    const submit = async () => {
+        if (!$popover) {
+            return;
+        }
+        const $name = $popover.querySelector('.pp-dev-info__users-name-input');
+        const $token = $popover.querySelector('.pp-dev-info__users-token');
+        const $submit = $popover.querySelector('.pp-dev-info__users-submit');
+        const body = addKind === 'token'
+            ? { name: $name.value.trim(), token: $token.value }
+            : { name: $name.value.trim(), kind: 'session' };
+        $submit.disabled = true;
+        const response = await request('POST', USERS_API, body);
+        $submit.disabled = false;
+        if (!response) {
+            return;
+        }
+        const { user } = (await response.json());
+        $name.value = '';
+        $token.value = '';
+        if (user.kind === 'session' && user.loginUrl) {
+            window.open(user.loginUrl, '_blank');
+        }
+        await refresh();
+    };
+    const open = () => {
+        renderedData = '';
+        $popover = document.createElement('div');
+        $popover.classList.add('pp-dev-info__settings', 'pp-dev-info__users');
+        $popover.innerHTML = `
+      <div class="pp-dev-info__settings-title">Users</div>
+      <div class="pp-dev-info__users-tab">
+        This tab works as <strong>${escapeHtml(getCurrentUser() ?? 'you')}</strong>.
+      </div>
+      <div class="pp-dev-info__users-list-head" aria-hidden="true">localhost</div>
+      <div class="pp-dev-info__users-list" role="radiogroup" aria-label="Who localhost works as">
+        <span class="pp-dev-info__users-meta">Loading users…</span>
+      </div>
+      <div class="pp-dev-info__settings-hint">The radio picks who localhost works as; each user's own host always works as that user.</div>
+      <div class="pp-dev-info__users-unavailable" hidden></div>
+      <form class="pp-dev-info__settings-group pp-dev-info__users-add" hidden>
+        <span class="pp-dev-info__settings-label">Add user</span>
+        <div class="pp-dev-info__theme-grid" role="group" aria-label="How the user logs in">
+          <button type="button" class="pp-dev-info__theme-btn pp-dev-info__users-kind" data-kind="token">API token</button>
+          <button type="button" class="pp-dev-info__theme-btn pp-dev-info__users-kind" data-kind="session">Username + password</button>
+        </div>
+        <input class="pp-dev-info__users-input pp-dev-info__users-name-input" placeholder="Name, e.g. viewer" maxlength="32"
+          autocomplete="off" spellcheck="false" pattern="[a-z]([a-z0-9-]*[a-z0-9])?"
+          title="Lowercase latin letters, digits and -, starting with a letter. The user opens on <name>.localhost." />
+        <input class="pp-dev-info__users-input pp-dev-info__users-token" type="password" placeholder="API token" autocomplete="off" />
+        <button type="submit" class="pp-dev-info__vars-btn pp-dev-info__users-submit">Add user</button>
+        <div class="pp-dev-info__settings-hint pp-dev-info__users-kind-hint"></div>
+      </form>
+      <div class="pp-dev-info__users-error" role="alert" hidden></div>
+      <div class="pp-dev-info__settings-hint">Each user opens on <code>&lt;name&gt;.localhost</code> and is kept until the dev server stops.</div>
+    `;
+        $popover.querySelectorAll('.pp-dev-info__users-kind').forEach(($kind) => {
+            $kind.addEventListener('click', (ev) => {
+                ev.preventDefault();
+                addKind = $kind.dataset.kind;
+                renderKind();
+            });
+        });
+        $popover.querySelector('.pp-dev-info__users-add').addEventListener('submit', (ev) => {
+            ev.preventDefault();
+            submit();
+        });
+        renderKind();
+        $panel.appendChild($popover);
+        document.addEventListener('click', onDocClick, true);
+        document.addEventListener('keydown', onKeyDown, true);
+        hooks?.onOpenChange?.(true);
+        // Shown right away from what was loaded with the panel, then brought up to date.
+        renderList();
+        renderAvailability();
+        refresh();
+        // Picks up logins and expired sessions while the popover is open.
+        refreshTimer = window.setInterval(refresh, REFRESH_INTERVAL);
+    };
+    // Loaded with the panel, so the popover opens with its list.
+    refresh();
+    $btn.addEventListener('click', (ev) => {
+        ev.preventDefault();
+        if ($popover) {
+            close();
+        }
+        else {
+            open();
+        }
+    });
+}
+
 const ICON_SIZE = 16;
 const CLOSE_ICON_SIZE = 12;
 const TYPE_ICONS = {
@@ -705,6 +1149,115 @@ function createPopupElement(opts) {
     return $popup;
 }
 
+/**
+ * `template:sync:response` code for a sync requested while another one runs. Kept in sync with
+ * `SYNC_IN_PROGRESS_CODE` in `src/lib/client.service.ts` (server side, not importable here).
+ */
+const SYNC_IN_PROGRESS_CODE = 'SYNC_IN_PROGRESS';
+const TITLE_AVAILABLE = 'Sync template';
+const TITLE_UNAVAILABLE = 'Sync is unavailable on this instance';
+/**
+ * Wires the dev panel's "Sync template" button to the dev server.
+ *
+ * The button is disabled while a sync runs, so a double click can't start a second build, and is
+ * enabled again by whatever ends the sync: its response, or a lost connection. It stays disabled
+ * only when the server says sync is unavailable on this instance (`config.canSync === false`);
+ * a failed sync (MI unreachable, a build error) can simply be retried.
+ */
+function initSyncButton(hot, $button, deps) {
+    const reload = deps.reload ?? (() => window.location.reload());
+    let available = !$button.disabled && !$button.classList.contains('disabled');
+    let syncing = false;
+    const applyState = () => {
+        $button.disabled = syncing || !available;
+        $button.classList.toggle('syncing', syncing);
+        $button.classList.toggle('disabled', !available);
+        $button.title = available ? TITLE_AVAILABLE : TITLE_UNAVAILABLE;
+        if (syncing) {
+            $button.setAttribute('aria-busy', 'true');
+        }
+        else {
+            $button.removeAttribute('aria-busy');
+        }
+    };
+    const endSync = () => {
+        syncing = false;
+        applyState();
+    };
+    hot.on('client:config:update', (data) => {
+        if (typeof data?.config?.canSync !== 'boolean') {
+            return;
+        }
+        // The server sends `canSync: true` at the start of every sync: it must not enable the
+        // button while that sync runs, which `applyState` takes care of.
+        available = data.config.canSync;
+        applyState();
+    });
+    hot.on('template:sync:action-required', async (payload) => {
+        // The spinner keeps running while a confirmation modal is shown: the sync is still in
+        // progress and only ends on `template:sync:response`.
+        const approved = await deps.confirmModal({
+            title: payload.title,
+            content: payload.content,
+            confirmText: payload.confirmText,
+            cancelText: payload.cancelText,
+        });
+        hot.send('template:sync:action-response', { requestId: payload.requestId, approved });
+    });
+    hot.on('template:sync:response', (payload) => {
+        deps.closeAllConfirmModals();
+        if ('error' in payload && payload.config?.canSync === false) {
+            available = false;
+        }
+        endSync();
+        if ('cancelled' in payload && payload.cancelled) {
+            deps.infoPopup({ title: 'Sync cancelled', content: payload.message, type: 'warning' });
+            return;
+        }
+        if ('error' in payload && typeof payload.error !== 'undefined') {
+            if (payload.code === SYNC_IN_PROGRESS_CODE) {
+                deps.infoPopup({ title: 'Sync already running', content: payload.error, type: 'warning' });
+                return;
+            }
+            deps.infoPopup({ title: 'Sync error', content: payload.error, type: 'danger' });
+            if (payload.refresh) {
+                setTimeout(reload);
+            }
+            return;
+        }
+        if ('syncedAt' in payload && typeof payload.syncedAt !== 'undefined') {
+            deps.infoPopup({
+                title: 'Sync success',
+                content: `Synced at ${new Date(payload.syncedAt).toLocaleString()}.\nBackup filename: ${payload.backupFilename}`,
+                type: 'success',
+            });
+        }
+    });
+    // A response sent to a socket that has closed never arrives. Without this, the button would
+    // spin, disabled, until the page is reloaded.
+    hot.on('vite:ws:disconnect', () => {
+        if (!syncing) {
+            return;
+        }
+        deps.closeAllConfirmModals();
+        endSync();
+        deps.infoPopup({
+            title: 'Sync result unknown',
+            content: 'The connection to the dev server was lost during the sync. Check its terminal for the result before syncing again.',
+            type: 'warning',
+        });
+    });
+    $button.addEventListener('click', (ev) => {
+        ev.preventDefault();
+        if (syncing || !available) {
+            return;
+        }
+        syncing = true;
+        applyState();
+        hot.send('template:sync', {});
+    });
+}
+
 /// <reference types="vite/client" />
 // Applied unconditionally (even if the panel itself is hidden) — this is what makes the
 // override affect the whole injected panel, not just its own markup.
@@ -895,6 +1448,7 @@ if ($infoPanel) {
         onOpenInspectorClick: () => window.open(window.location.origin + '/@pp-dev/inspector', '_blank'),
         onReloadVariablesClick: () => startReloadVariablesFlow?.(),
     });
+    initUsersPanel($infoPanel, { onOpenChange: (open) => autoHide.keepPeeked(open) });
     panelController.onChange((state) => {
         if (!state.autoHide) {
             $infoPanel.classList.remove('is-peeking');
@@ -936,82 +1490,9 @@ if (hot) {
     hot.on('redirect', (data) => {
         window.location.href = data.url;
     });
-    hot.on('client:config:update', (data) => {
-        if (typeof data.config?.canSync === 'boolean') {
-            if (data.config.canSync) {
-                const $syncButton = document.getElementById('sync-template');
-                if ($syncButton) {
-                    $syncButton.disabled = false;
-                    $syncButton.classList.remove('disabled');
-                    $syncButton.title = 'Sync template';
-                }
-            }
-            else {
-                const $syncButton = document.getElementById('sync-template');
-                if ($syncButton) {
-                    $syncButton.disabled = true;
-                    $syncButton.classList.add('disabled');
-                    $syncButton.title = 'Sync is unavailable on this instance';
-                }
-            }
-        }
-    });
     const $syncButton = document.getElementById('sync-template');
     if ($syncButton) {
-        hot.on('template:sync:action-required', async (payload) => {
-            // Keep the sync spinner running while a confirmation modal is shown — the sync
-            // process is still in progress and only ends on `template:sync:response`.
-            const approved = await confirmModal({
-                title: payload.title,
-                content: payload.content,
-                confirmText: payload.confirmText,
-                cancelText: payload.cancelText,
-            });
-            hot.send('template:sync:action-response', {
-                requestId: payload.requestId,
-                approved,
-            });
-        });
-        hot.on('template:sync:response', (payload) => {
-            closeAllConfirmModals();
-            $syncButton.classList.remove('syncing');
-            if ('cancelled' in payload && payload.cancelled) {
-                infoPopup({
-                    title: 'Sync cancelled',
-                    content: payload.message,
-                    type: 'warning',
-                });
-            }
-            else if ('error' in payload && typeof payload.error !== 'undefined') {
-                infoPopup({
-                    title: 'Sync error',
-                    content: payload.error,
-                    type: 'danger',
-                });
-                if (payload.refresh) {
-                    setTimeout(() => {
-                        window.location.reload();
-                    });
-                }
-                else {
-                    $syncButton.disabled = true;
-                    $syncButton.classList.add('disabled');
-                    $syncButton.title = 'Sync is unavailable on this instance';
-                }
-            }
-            else if ('syncedAt' in payload && typeof payload.syncedAt !== 'undefined') {
-                infoPopup({
-                    title: 'Sync success',
-                    content: `Synced at ${new Date(payload.syncedAt).toLocaleString()}.\nBackup filename: ${payload.backupFilename}`,
-                    type: 'success',
-                });
-            }
-        });
-        $syncButton.addEventListener('click', (ev) => {
-            ev.preventDefault();
-            $syncButton.classList.add('syncing');
-            hot.send('template:sync', {});
-        });
+        initSyncButton(hot, $syncButton, { infoPopup, confirmModal, closeAllConfirmModals });
     }
     hot.on('page-variables:reload:response', (payload) => {
         pendingReloadVariablesPopup?.close();