agent-pager 0.1.0

package/web/app.js

@@ -0,0 +1,676 @@
+import { createClient } from "https://esm.sh/@supabase/supabase-js@2.108.2";
+
+const state = {
+  view: "console",
+  mode: "loading",
+  config: null,
+  supabase: null,
+  session: null,
+  me: null,
+  abuseReports: [],
+  blocks: [],
+  devices: [],
+  invites: [],
+  mutes: [],
+  pages: [],
+  settings: null,
+  friendRequests: [],
+  auditEvents: [],
+  routeUsername: "",
+  publicProfile: null,
+  prototype: null,
+  notice: ""
+};
+
+const els = {};
+for (const id of [
+  "abuse-reports-list",
+  "audit-list",
+  "auth-email",
+  "auth-password",
+  "auth-username",
+  "auth-name",
+  "auth-panel",
+  "blocks-list",
+  "console-note",
+  "device-code",
+  "devices-list",
+  "friend-code",
+  "friend-request-note",
+  "friend-requests-list",
+  "friends-list",
+  "invite-output",
+  "invites-list",
+  "mutes-list",
+  "page-friend",
+  "page-message",
+  "page-urgency",
+  "pages-list",
+  "profile-line",
+  "profile-request-card",
+  "profile-request-title",
+  "quiet-enabled",
+  "quiet-end",
+  "quiet-start",
+  "quiet-timezone",
+  "rate-limit",
+  "security-line",
+  "setup-command",
+  "status-cloud",
+  "status-friends",
+  "status-human",
+  "status-pending",
+  "user-count"
+]) {
+  els[id] = document.querySelector(`#${id}`);
+}
+
+for (const tab of document.querySelectorAll(".tab")) {
+  tab.addEventListener("click", () => {
+    state.view = tab.dataset.view;
+    renderTabs();
+  });
+}
+
+document.addEventListener("click", async (event) => {
+  const action = event.target?.dataset?.action;
+  if (!action) return;
+  try {
+    if (action === "sign-in") await signIn();
+    if (action === "sign-up") await signUp();
+    if (action === "sign-out") await signOut();
+    if (action === "save-profile") await saveProfile();
+    if (action === "save-settings") await saveSettings();
+    if (action === "create-invite") await createInvite();
+    if (action === "revoke-invite") await revokeInvite(event.target.dataset.code);
+    if (action === "accept-invite") await acceptInvite();
+    if (action === "request-profile") await requestProfileAccess();
+    if (action === "approve-friend-request") await resolveFriendRequest(event.target.dataset.requestId, "approve");
+    if (action === "deny-friend-request") await resolveFriendRequest(event.target.dataset.requestId, "deny");
+    if (action === "cancel-friend-request") await resolveFriendRequest(event.target.dataset.requestId, "cancel");
+    if (action === "send-page") await sendPage();
+    if (action === "mute-friend") await muteFriend(event.target.dataset.username);
+    if (action === "unmute-friend") await unmuteFriend(event.target.dataset.username);
+    if (action === "remove-friend") await removeFriend(event.target.dataset.username);
+    if (action === "block-friend") await blockFriend(event.target.dataset.username);
+    if (action === "report-user") await reportUser(event.target.dataset.username);
+    if (action === "report-page") await reportPage(event.target.dataset.pageId);
+    if (action === "unblock-user") await unblockUser(event.target.dataset.username);
+    if (action === "approve-device") await approveDevice();
+    if (action === "revoke-device") await revokeDevice(event.target.dataset.deviceId);
+    await refresh();
+  } catch (error) {
+    setNotice(error instanceof Error ? error.message : "Action failed.");
+  }
+});
+
+await init();
+
+async function init() {
+  fillRouteInputs();
+  try {
+    const config = await fetchJson("/api/config");
+    if (!config.supabaseUrl || !config.supabaseAnonKey) throw new Error("Hosted config unavailable.");
+    state.mode = "hosted";
+    state.config = config;
+    state.supabase = createClient(config.supabaseUrl, config.supabaseAnonKey, {
+      auth: {
+        persistSession: true,
+        autoRefreshToken: true
+      }
+    });
+    const { data } = await state.supabase.auth.getSession();
+    state.session = data.session;
+    state.supabase.auth.onAuthStateChange((_event, session) => {
+      state.session = session;
+      refresh();
+    });
+  } catch {
+    state.mode = "prototype";
+  }
+  await refresh();
+  setInterval(refresh, 8000);
+}
+
+async function refresh() {
+  if (state.mode === "prototype") {
+    await loadPrototype();
+    return;
+  }
+  if (state.routeUsername) {
+    state.publicProfile = await fetchJson(`/api/public/profiles/${encodeURIComponent(state.routeUsername)}`).catch(() => null);
+  }
+  if (!state.session) {
+    state.me = null;
+    state.abuseReports = [];
+    state.blocks = [];
+    state.devices = [];
+    state.invites = [];
+    state.mutes = [];
+    state.pages = [];
+    state.settings = null;
+    state.friendRequests = [];
+    state.auditEvents = [];
+    render();
+    return;
+  }
+  const [me, pages, devices, audit, abuseReports, friendRequests, blocks, mutes, invites, settings] = await Promise.all([
+    hostedApi("/api/me"),
+    hostedApi("/api/pages"),
+    hostedApi("/api/devices"),
+    hostedApi("/api/audit-events"),
+    hostedApi("/api/abuse-reports"),
+    hostedApi("/api/friend-requests"),
+    hostedApi("/api/blocks"),
+    hostedApi("/api/mutes"),
+    hostedApi("/api/invites"),
+    hostedApi("/api/settings")
+  ]);
+  state.me = me;
+  state.pages = pages.pages || [];
+  state.devices = devices.devices || [];
+  state.auditEvents = audit.auditEvents || [];
+  state.abuseReports = abuseReports.abuseReports || [];
+  state.friendRequests = friendRequests.friendRequests || [];
+  state.blocks = blocks.blocks || [];
+  state.mutes = mutes.mutes || [];
+  state.invites = invites.invites || [];
+  state.settings = settings.settings || null;
+  render();
+}
+
+async function loadPrototype() {
+  const response = await fetch("/api/public/state");
+  if (!response.ok) throw new Error("Agent Pager service is not reachable.");
+  state.prototype = await response.json();
+  render();
+}
+
+function render() {
+  renderTabs();
+  if (state.mode === "prototype") {
+    renderPrototype();
+    return;
+  }
+
+  const signedIn = Boolean(state.session);
+  const profile = state.me?.profile;
+  const friends = state.me?.friends || [];
+  const requests = state.friendRequests || [];
+  const pending = state.me?.pendingDeliveries || [];
+  const username = profile?.username || state.session?.user?.email || "not signed in";
+
+  els["auth-panel"].classList.toggle("is-signed-in", signedIn);
+  els["profile-line"].textContent = signedIn ? `Signed in as ${username}` : "Signed out";
+  els["status-human"].textContent = username;
+  els["status-cloud"].textContent = state.config?.publicUrl || "hosted API";
+  els["status-friends"].textContent = `${friends.length} approved`;
+  els["status-pending"].textContent = `${pending.length} pending`;
+  els["user-count"].textContent = signedIn ? "1 human signed in" : "No active human";
+  els["security-line"].textContent = state.notice || "Friend-gated, signed, and rate-limited.";
+  els["setup-command"].textContent = "npm install -g agent-pager\nagent-pager login\nagent-pager start";
+  renderPublicProfileCard();
+  renderSettings();
+
+  els["friends-list"].innerHTML = friends.map((friend) => `
+    <article class="item">
+      <span class="light ${friend.reachable ? "online" : ""}"></span>
+      <div>
+        <h3>@${escapeHtml(friend.username)} · ${escapeHtml(friend.status)}</h3>
+        <p>${friend.reachable ? "Reachable" : "Not reachable"}${friend.lastSeenAt ? ` · ${formatTime(friend.lastSeenAt)}` : ""}</p>
+        <div class="button-row">
+          <button data-action="mute-friend" data-username="${escapeHtml(friend.username)}">Mute 1h</button>
+          <button data-action="remove-friend" data-username="${escapeHtml(friend.username)}">Remove</button>
+          <button data-action="report-user" data-username="${escapeHtml(friend.username)}">Report</button>
+          <button data-action="block-friend" data-username="${escapeHtml(friend.username)}">Block</button>
+        </div>
+      </div>
+    </article>
+  `).join("") || empty("No approved friends yet.", "Create or accept an invite.");
+
+  els["invites-list"].innerHTML = state.invites.map((invite) => {
+    const actions = invite.status === "active"
+      ? `<div class="button-row">
+          <button data-action="revoke-invite" data-code="${escapeHtml(invite.code)}">Revoke invite</button>
+        </div>`
+      : "";
+    return `
+      <article class="item">
+        <span class="light ${invite.status === "active" ? "online" : ""}"></span>
+        <div>
+          <h3>Invite · ${escapeHtml(invite.status)}</h3>
+          <p>${escapeHtml(invite.url)} · expires ${formatTime(invite.expiresAt)}</p>
+          ${actions}
+        </div>
+      </article>
+    `;
+  }).join("");
+
+  els["blocks-list"].innerHTML = state.blocks.map((block) => `
+    <article class="item">
+      <span class="light"></span>
+      <div>
+        <h3>Blocked · @${escapeHtml(block.user.username)}</h3>
+        <p>${formatTime(block.createdAt)}</p>
+        <div class="button-row">
+          <button data-action="unblock-user" data-username="${escapeHtml(block.user.username)}">Unblock</button>
+        </div>
+      </div>
+    </article>
+  `).join("");
+
+  els["mutes-list"].innerHTML = state.mutes.map((mute) => `
+    <article class="item">
+      <span class="light"></span>
+      <div>
+        <h3>Muted · @${escapeHtml(mute.user.username)}</h3>
+        <p>${mute.mutedUntil ? `Until ${formatTime(mute.mutedUntil)}` : "Forever"}${mute.reason ? ` · ${escapeHtml(mute.reason)}` : ""}</p>
+        <div class="button-row">
+          <button data-action="unmute-friend" data-username="${escapeHtml(mute.user.username)}">Unmute</button>
+        </div>
+      </div>
+    </article>
+  `).join("");
+
+  els["friend-requests-list"].innerHTML = requests.map((request) => {
+    const other = request.direction === "incoming" ? request.from : request.to;
+    const actions = request.status === "pending" && request.direction === "incoming"
+      ? `<div class="button-row">
+          <button data-action="approve-friend-request" data-request-id="${escapeHtml(request.id)}">Approve</button>
+          <button data-action="deny-friend-request" data-request-id="${escapeHtml(request.id)}">Deny</button>
+        </div>`
+      : request.status === "pending" && request.direction === "outgoing"
+        ? `<div class="button-row">
+            <button data-action="cancel-friend-request" data-request-id="${escapeHtml(request.id)}">Cancel</button>
+          </div>`
+      : "";
+    return `
+      <article class="item">
+        <span class="light ${request.status === "approved" ? "online" : ""}"></span>
+        <div>
+          <h3>${escapeHtml(request.direction)} · @${escapeHtml(other.username)} · ${escapeHtml(request.status)}</h3>
+          <p>${escapeHtml(request.note || "No note")} · ${formatTime(request.createdAt)}</p>
+          ${actions}
+        </div>
+      </article>
+    `;
+  }).join("") || empty("No friend requests yet.", "Public profile requests appear here.");
+
+  els["pages-list"].innerHTML = state.pages.map((page) => `
+    <article class="item">
+      <span class="light ${page.to_user_id === profile?.id ? "online" : ""}"></span>
+      <div>
+        <h3>${escapeHtml(page.fromUsername)} → ${escapeHtml(page.toUsername)} · ${escapeHtml(page.urgency)}</h3>
+        <p>${escapeHtml(page.message)} · ${formatTime(page.created_at)}</p>
+        <div class="button-row">
+          <button data-action="report-page" data-page-id="${escapeHtml(page.id)}">Report</button>
+        </div>
+      </div>
+    </article>
+  `).join("") || empty("No page traffic yet.", "Approved friends can page each other.");
+
+  els["devices-list"].innerHTML = state.devices.map((device) => {
+    const status = device.revokedAt ? `Revoked ${formatTime(device.revokedAt)}` : "Active";
+    const actions = device.revokedAt
+      ? ""
+      : `<div class="button-row">
+          <button data-action="revoke-device" data-device-id="${escapeHtml(device.id)}">Revoke</button>
+        </div>`;
+    return `
+      <article class="item">
+        <span class="light ${device.revokedAt ? "" : "online"}"></span>
+        <div>
+          <h3>${escapeHtml(device.name)} · ${status}</h3>
+          <p>${escapeHtml(device.platform || "unknown")} · ${escapeHtml(device.fingerprint.slice(0, 16))} · ${device.lastSeenAt ? formatTime(device.lastSeenAt) : "new"}</p>
+          ${actions}
+        </div>
+      </article>
+    `;
+  }).join("") || empty("No paired devices yet.", "Run agent-pager login.");
+
+  els["audit-list"].innerHTML = state.auditEvents.map((event) => `
+    <article class="item">
+      <div>
+        <h3>${escapeHtml(event.action)}</h3>
+        <p>${formatTime(event.createdAt)}${event.targetId ? ` · ${escapeHtml(event.targetId)}` : ""}</p>
+      </div>
+    </article>
+  `).join("") || empty("No security events yet.", "Account activity appears here.");
+
+  els["abuse-reports-list"].innerHTML = state.abuseReports.map((report) => `
+    <article class="item">
+      <span class="light ${report.status === "open" ? "" : "online"}"></span>
+      <div>
+        <h3>Report · ${escapeHtml(report.status)} · ${escapeHtml(report.reason)}</h3>
+        <p>${formatTime(report.createdAt)}${report.pageId ? ` · page ${escapeHtml(report.pageId)}` : ""}</p>
+      </div>
+    </article>
+  `).join("") || empty("No abuse reports filed.", "Reports you file appear here.");
+}
+
+function renderSettings() {
+  const settings = state.settings || {};
+  const quietHours = quietHoursDefaults(settings.quietHours);
+  els["quiet-enabled"].checked = quietHours.enabled;
+  els["quiet-start"].value = quietHours.start;
+  els["quiet-end"].value = quietHours.end;
+  els["quiet-timezone"].value = quietHours.timezone;
+  els["rate-limit"].value = settings.maxPagesPerFriendPerMinute || 8;
+}
+
+function renderPrototype() {
+  const users = state.prototype?.users || [];
+  const pages = state.prototype?.pages || [];
+  els["auth-panel"].classList.remove("is-signed-in");
+  els["profile-line"].textContent = "Prototype mode";
+  els["status-human"].textContent = `${users.length} registered`;
+  els["status-cloud"].textContent = state.prototype?.publicUrl || "local service";
+  els["status-friends"].textContent = "prototype";
+  els["status-pending"].textContent = `${pages.filter((page) => !page.deliveredAt).length} pending`;
+  els["user-count"].textContent = `${users.length} human${users.length === 1 ? "" : "s"} registered`;
+  els["security-line"].textContent = "Local prototype mode.";
+  els["setup-command"].textContent = "npm install -g agent-pager\nagent-pager login --username bryson --local-dev\nagent-pager start";
+  renderSettings();
+  els["profile-request-card"].classList.add("is-hidden");
+
+  els["friends-list"].innerHTML = users.map((user) => `
+    <article class="item">
+      <span class="light ${user.reachable ? "online" : ""}"></span>
+      <div>
+        <h3>@${escapeHtml(user.username)} · ${escapeHtml(user.status)}</h3>
+        <p>${user.reachable ? "Reachable" : "Not reachable"} · ${user.deviceCount} terminal${user.deviceCount === 1 ? "" : "s"}</p>
+      </div>
+    </article>
+  `).join("") || empty("No humans registered yet.", "Start with the setup cards.");
+  els["invites-list"].innerHTML = "";
+  els["blocks-list"].innerHTML = "";
+  els["mutes-list"].innerHTML = "";
+  els["abuse-reports-list"].innerHTML = "";
+
+  els["pages-list"].innerHTML = pages.map((page) => `
+    <article class="item">
+      <span class="light ${page.deliveredAt ? "online" : ""}"></span>
+      <div>
+        <h3>${escapeHtml(page.fromUsername)} → ${escapeHtml(page.toUsername)} · ${escapeHtml(page.urgency)}</h3>
+        <p>${escapeHtml(page.message)}</p>
+      </div>
+    </article>
+  `).join("") || empty("No page traffic yet.", "Pages will appear here.");
+
+  els["devices-list"].innerHTML = empty("Hosted device pairing is unavailable in prototype mode.", "Use the hosted API path.");
+  els["audit-list"].innerHTML = (state.prototype?.auditEvents || []).map((event) => `
+    <article class="item">
+      <div>
+        <h3>${escapeHtml(event.action)}</h3>
+        <p>${new Date(event.at).toLocaleString()}${event.target ? ` · ${escapeHtml(event.target)}` : ""}</p>
+      </div>
+    </article>
+  `).join("") || empty("No security events yet.", "Account activity appears here.");
+}
+
+async function signIn() {
+  requireSupabase();
+  const { error } = await state.supabase.auth.signInWithPassword(authCredentials());
+  if (error) throw error;
+  setNotice("Signed in.");
+}
+
+async function signUp() {
+  requireSupabase();
+  const { error } = await state.supabase.auth.signUp(authCredentials());
+  if (error) throw error;
+  setNotice("Account created. Check email confirmation settings if sign-in is blocked.");
+}
+
+async function signOut() {
+  requireSupabase();
+  await state.supabase.auth.signOut();
+  setNotice("Signed out.");
+}
+
+async function saveProfile() {
+  const username = els["auth-username"].value.trim();
+  const displayName = els["auth-name"].value.trim() || username;
+  if (!username) throw new Error("Username is required.");
+  await hostedApi("/api/profiles", {
+    method: "POST",
+    body: { username, displayName }
+  });
+  setNotice("Profile saved.");
+}
+
+async function saveSettings() {
+  const quietHours = {
+    enabled: els["quiet-enabled"].checked,
+    start: els["quiet-start"].value.trim() || "22:00",
+    end: els["quiet-end"].value.trim() || "08:00",
+    timezone: els["quiet-timezone"].value.trim() || Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"
+  };
+  const maxPagesPerFriendPerMinute = Number(els["rate-limit"].value || 8);
+  await hostedApi("/api/settings", {
+    method: "POST",
+    body: { quietHours, maxPagesPerFriendPerMinute }
+  });
+  setNotice("Settings saved.");
+}
+
+async function createInvite() {
+  const result = await hostedApi("/api/invites", { method: "POST", body: {} });
+  els["invite-output"].value = result.url;
+  setNotice("Invite created.");
+}
+
+async function revokeInvite(code) {
+  if (!code) throw new Error("Invite code is missing.");
+  await hostedApi(`/api/invites/${encodeURIComponent(code)}/revoke`, { method: "POST", body: {} });
+  setNotice("Invite revoked.");
+}
+
+async function acceptInvite() {
+  const code = extractCode(els["friend-code"].value);
+  if (!code) throw new Error("Invite code is required.");
+  await hostedApi(`/api/invites/${encodeURIComponent(code)}/accept`, { method: "POST", body: {} });
+  setNotice("Friend added.");
+}
+
+async function requestProfileAccess() {
+  const username = state.publicProfile?.profile?.username || state.routeUsername;
+  if (!username) throw new Error("No public profile selected.");
+  await hostedApi("/api/friend-requests", {
+    method: "POST",
+    body: {
+      toUsername: username,
+      note: els["friend-request-note"].value.trim()
+    }
+  });
+  setNotice(`Requested access to @${username}.`);
+}
+
+async function resolveFriendRequest(id, action) {
+  if (!id) throw new Error("Friend request id is missing.");
+  await hostedApi(`/api/friend-requests/${encodeURIComponent(id)}/${action}`, {
+    method: "POST",
+    body: {}
+  });
+  const labels = {
+    approve: "approved",
+    deny: "denied",
+    cancel: "canceled"
+  };
+  setNotice(`Friend request ${labels[action] || "resolved"}.`);
+}
+
+async function sendPage() {
+  const to = els["page-friend"].value.trim();
+  const message = els["page-message"].value.trim();
+  const urgency = els["page-urgency"].value;
+  if (!to || !message) throw new Error("Friend and message are required.");
+  await hostedApi("/api/pages", { method: "POST", body: { to, message, urgency } });
+  els["page-message"].value = "";
+  setNotice("Page sent.");
+}
+
+async function muteFriend(username) {
+  if (!username) throw new Error("Username is missing.");
+  await hostedApi("/api/mutes", { method: "POST", body: { friend: username, duration: "1h", reason: "web console" } });
+  setNotice(`Muted @${username} for 1h.`);
+}
+
+async function unmuteFriend(username) {
+  if (!username) throw new Error("Username is missing.");
+  await hostedApi(`/api/mutes/${encodeURIComponent(username)}/unmute`, { method: "POST", body: {} });
+  setNotice(`Unmuted @${username}.`);
+}
+
+async function removeFriend(username) {
+  if (!username) throw new Error("Username is missing.");
+  await hostedApi(`/api/friends/${encodeURIComponent(username)}/remove`, { method: "POST", body: {} });
+  setNotice(`Removed @${username}. They cannot page you unless friendship is approved again.`);
+}
+
+async function blockFriend(username) {
+  if (!username) throw new Error("Username is missing.");
+  await hostedApi("/api/blocks", { method: "POST", body: { username } });
+  setNotice(`Blocked @${username}.`);
+}
+
+async function reportUser(username) {
+  if (!username) throw new Error("Username is missing.");
+  await hostedApi("/api/abuse-reports", { method: "POST", body: { username, reason: "reported-user" } });
+  setNotice(`Report filed for @${username}.`);
+}
+
+async function reportPage(id) {
+  if (!id) throw new Error("Page id is missing.");
+  await hostedApi("/api/abuse-reports", { method: "POST", body: { pageId: id, reason: "reported-page" } });
+  setNotice("Report filed.");
+}
+
+async function unblockUser(username) {
+  if (!username) throw new Error("Username is missing.");
+  await hostedApi(`/api/blocks/${encodeURIComponent(username)}/unblock`, { method: "POST", body: {} });
+  setNotice(`Unblocked @${username}.`);
+}
+
+async function approveDevice() {
+  const code = extractCode(els["device-code"].value);
+  if (!code) throw new Error("Pairing code is required.");
+  await hostedApi(`/api/device-pairings/${encodeURIComponent(code)}/approve`, { method: "POST", body: {} });
+  setNotice("Device approved.");
+}
+
+async function revokeDevice(id) {
+  if (!id) throw new Error("Device id is missing.");
+  await hostedApi(`/api/devices/${encodeURIComponent(id)}/revoke`, { method: "POST", body: {} });
+  setNotice("Device revoked.");
+}
+
+async function hostedApi(path, options = {}) {
+  if (!state.session?.access_token) throw new Error("Sign in first.");
+  const response = await fetch(path, {
+    method: options.method || "GET",
+    headers: {
+      authorization: `Bearer ${state.session.access_token}`,
+      ...(options.body === undefined ? {} : { "content-type": "application/json" })
+    },
+    body: options.body === undefined ? undefined : JSON.stringify(options.body)
+  });
+  const text = await response.text();
+  const json = text ? JSON.parse(text) : null;
+  if (!response.ok) throw new Error(json?.error || `${response.status} ${response.statusText}`);
+  return json;
+}
+
+async function fetchJson(path) {
+  const response = await fetch(path);
+  if (!response.ok) throw new Error(`${response.status} ${response.statusText}`);
+  return response.json();
+}
+
+function authCredentials() {
+  const email = els["auth-email"].value.trim();
+  const password = els["auth-password"].value;
+  if (!email || !password) throw new Error("Email and password are required.");
+  return { email, password };
+}
+
+function fillRouteInputs() {
+  const path = location.pathname;
+  if (path.startsWith("/invite/")) {
+    els["friend-code"].value = decodeURIComponent(path.split("/").filter(Boolean).pop() || "");
+    state.view = "friends";
+  }
+  if (path.startsWith("/@")) {
+    state.routeUsername = decodeURIComponent(path.slice(2)).trim().toLowerCase();
+    state.view = "friends";
+  }
+  if (path.startsWith("/app/devices/pair")) {
+    els["device-code"].value = new URL(location.href).searchParams.get("code") || "";
+    state.view = "devices";
+  }
+}
+
+function renderPublicProfileCard() {
+  const card = els["profile-request-card"];
+  if (!state.routeUsername) {
+    card.classList.add("is-hidden");
+    return;
+  }
+  card.classList.remove("is-hidden");
+  if (!state.publicProfile?.profile) {
+    els["profile-request-title"].textContent = `@${state.routeUsername}`;
+    els["friend-request-note"].placeholder = "Profile not found or not public.";
+    return;
+  }
+  const profile = state.publicProfile.profile;
+  els["profile-request-title"].textContent = `Page my agent: @${profile.username}`;
+  els["friend-request-note"].placeholder = `Ask ${profile.displayName} for access`;
+}
+
+function renderTabs() {
+  for (const tab of document.querySelectorAll(".tab")) {
+    tab.classList.toggle("is-active", tab.dataset.view === state.view);
+  }
+  for (const panel of document.querySelectorAll("[data-panel]")) {
+    panel.classList.toggle("is-hidden", panel.dataset.panel !== state.view);
+  }
+}
+
+function empty(title, detail) {
+  return `<article class="item"><div><h3>${escapeHtml(title)}</h3><p>${escapeHtml(detail)}</p></div></article>`;
+}
+
+function quietHoursDefaults(value) {
+  const object = value && typeof value === "object" && !Array.isArray(value) ? value : {};
+  return {
+    enabled: object.enabled === true,
+    start: typeof object.start === "string" ? object.start : "22:00",
+    end: typeof object.end === "string" ? object.end : "08:00",
+    timezone: typeof object.timezone === "string" ? object.timezone : "UTC"
+  };
+}
+
+function extractCode(value) {
+  return String(value || "").split("?")[0].split("/").filter(Boolean).pop()?.trim().toUpperCase() || "";
+}
+
+function setNotice(message) {
+  state.notice = message;
+  render();
+}
+
+function requireSupabase() {
+  if (!state.supabase) throw new Error("Hosted Supabase config is not available.");
+}
+
+function formatTime(value) {
+  return new Date(value).toLocaleString();
+}
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}