@chrysb/alphaclaw 0.4.6-beta.4 → 0.4.6-beta.6

package/lib/public/js/components/models-tab/use-models.js

@@ -0,0 +1,262 @@
+import { useState, useEffect, useRef, useCallback } from "https://esm.sh/preact/hooks";
+import {
+  fetchModels,
+  fetchModelsConfig,
+  saveModelsConfig,
+  fetchCodexStatus,
+  disconnectCodex,
+} from "../../lib/api.js";
+import { showToast } from "../toast.js";
+
+let kModelsTabCache = null;
+
+export const useModels = () => {
+  const [catalog, setCatalog] = useState(() => kModelsTabCache?.catalog || []);
+  const [primary, setPrimary] = useState(() => kModelsTabCache?.primary || "");
+  const [configuredModels, setConfiguredModels] = useState(
+    () => kModelsTabCache?.configuredModels || {},
+  );
+  const [authProfiles, setAuthProfiles] = useState(
+    () => kModelsTabCache?.authProfiles || [],
+  );
+  const [authOrder, setAuthOrder] = useState(
+    () => kModelsTabCache?.authOrder || {},
+  );
+  const [codexStatus, setCodexStatus] = useState(
+    () => kModelsTabCache?.codexStatus || { connected: false },
+  );
+  const [loading, setLoading] = useState(() => !kModelsTabCache);
+  const [saving, setSaving] = useState(false);
+  const [ready, setReady] = useState(() => !!kModelsTabCache);
+  const [error, setError] = useState("");
+
+  const [profileEdits, setProfileEdits] = useState({});
+  const [orderEdits, setOrderEdits] = useState({});
+
+  const savedPrimaryRef = useRef(kModelsTabCache?.primary || "");
+  const savedConfiguredRef = useRef(kModelsTabCache?.configuredModels || {});
+
+  const updateCache = useCallback((patch) => {
+    kModelsTabCache = { ...(kModelsTabCache || {}), ...patch };
+  }, []);
+
+  const refresh = useCallback(async () => {
+    if (!ready) setLoading(true);
+    setError("");
+    try {
+      const [catalogResult, configResult, codex] = await Promise.all([
+        fetchModels(),
+        fetchModelsConfig(),
+        fetchCodexStatus(),
+      ]);
+      const catalogModels = Array.isArray(catalogResult.models)
+        ? catalogResult.models
+        : [];
+      setCatalog(catalogModels);
+      const p = configResult.primary || "";
+      const cm = configResult.configuredModels || {};
+      const ap = configResult.authProfiles || [];
+      const ao = configResult.authOrder || {};
+      setPrimary(p);
+      setConfiguredModels(cm);
+      setAuthProfiles(ap);
+      setAuthOrder(ao);
+      setCodexStatus(codex || { connected: false });
+      setProfileEdits({});
+      setOrderEdits({});
+      savedPrimaryRef.current = p;
+      savedConfiguredRef.current = cm;
+      updateCache({
+        catalog: catalogModels,
+        primary: p,
+        configuredModels: cm,
+        authProfiles: ap,
+        authOrder: ao,
+        codexStatus: codex || { connected: false },
+      });
+      if (!catalogModels.length) setError("No models found");
+    } catch (err) {
+      setError("Failed to load model settings");
+      showToast(`Failed to load model settings: ${err.message}`, "error");
+    } finally {
+      setReady(true);
+      setLoading(false);
+    }
+  }, [ready, updateCache]);
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  const modelConfigDirty =
+    primary !== savedPrimaryRef.current ||
+    JSON.stringify(configuredModels) !==
+      JSON.stringify(savedConfiguredRef.current);
+
+  const authDirty = (() => {
+    const hasProfileChanges = Object.entries(profileEdits).some(
+      ([id, cred]) => {
+        const existing = authProfiles.find((p) => p.id === id);
+        const newVal = cred?.key || cred?.token || cred?.access || "";
+        const oldVal =
+          existing?.key || existing?.token || existing?.access || "";
+        return newVal !== oldVal && newVal !== "";
+      },
+    );
+    const hasOrderChanges = Object.entries(orderEdits).some(
+      ([provider, order]) => {
+        const existing = authOrder[provider];
+        return JSON.stringify(order) !== JSON.stringify(existing);
+      },
+    );
+    return hasProfileChanges || hasOrderChanges;
+  })();
+
+  const isDirty = modelConfigDirty || authDirty;
+
+  const addModel = useCallback(
+    (modelKey) => {
+      if (!modelKey) return;
+      setConfiguredModels((prev) => {
+        const next = { ...prev, [modelKey]: {} };
+        updateCache({ configuredModels: next });
+        return next;
+      });
+    },
+    [updateCache],
+  );
+
+  const removeModel = useCallback(
+    (modelKey) => {
+      setConfiguredModels((prev) => {
+        const next = { ...prev };
+        delete next[modelKey];
+        updateCache({ configuredModels: next });
+        return next;
+      });
+      if (primary === modelKey) {
+        const remaining = Object.keys(configuredModels).filter(
+          (k) => k !== modelKey,
+        );
+        const newPrimary = remaining[0] || "";
+        setPrimary(newPrimary);
+        updateCache({ primary: newPrimary });
+      }
+    },
+    [primary, configuredModels, updateCache],
+  );
+
+  const setPrimaryModel = useCallback(
+    (modelKey) => {
+      setPrimary(modelKey);
+      updateCache({ primary: modelKey });
+    },
+    [updateCache],
+  );
+
+  const editProfile = useCallback((profileId, credential) => {
+    setProfileEdits((prev) => ({ ...prev, [profileId]: credential }));
+  }, []);
+
+  const editAuthOrder = useCallback((provider, orderedIds) => {
+    setOrderEdits((prev) => ({ ...prev, [provider]: orderedIds }));
+  }, []);
+
+  const getProfileValue = useCallback(
+    (profileId) => {
+      if (profileEdits[profileId] !== undefined) return profileEdits[profileId];
+      const existing = authProfiles.find((p) => p.id === profileId);
+      return existing || null;
+    },
+    [profileEdits, authProfiles],
+  );
+
+  const getEffectiveOrder = useCallback(
+    (provider) => {
+      if (orderEdits[provider] !== undefined) return orderEdits[provider];
+      return authOrder[provider] || null;
+    },
+    [orderEdits, authOrder],
+  );
+
+  const cancelChanges = useCallback(() => {
+    const savedPrimary = savedPrimaryRef.current || "";
+    const savedConfigured = savedConfiguredRef.current || {};
+    setPrimary(savedPrimary);
+    setConfiguredModels(savedConfigured);
+    setProfileEdits({});
+    setOrderEdits({});
+    updateCache({
+      primary: savedPrimary,
+      configuredModels: savedConfigured,
+    });
+  }, [updateCache]);
+
+  const saveAll = useCallback(async () => {
+    if (saving) return;
+    setSaving(true);
+    try {
+      const changedProfiles = Object.entries(profileEdits)
+        .filter(([, cred]) => {
+          const val = cred?.key || cred?.token || cred?.access || "";
+          return val !== "";
+        })
+        .map(([id, cred]) => ({ id, ...cred }));
+
+      const result = await saveModelsConfig({
+        primary,
+        configuredModels,
+        profiles: changedProfiles.length > 0 ? changedProfiles : undefined,
+        authOrder:
+          Object.keys(orderEdits).length > 0 ? orderEdits : undefined,
+      });
+      if (!result.ok)
+        throw new Error(result.error || "Failed to save config");
+      showToast("Changes saved", "success");
+      if (result.syncWarning) {
+        showToast(`Saved, but git-sync failed: ${result.syncWarning}`, "warning");
+      }
+      await refresh();
+    } catch (err) {
+      showToast(err.message || "Failed to save changes", "error");
+    } finally {
+      setSaving(false);
+    }
+  }, [saving, primary, configuredModels, profileEdits, orderEdits, refresh]);
+
+  const refreshCodexStatus = useCallback(async () => {
+    try {
+      const codex = await fetchCodexStatus();
+      setCodexStatus(codex || { connected: false });
+      updateCache({ codexStatus: codex || { connected: false } });
+    } catch {
+      setCodexStatus({ connected: false });
+      updateCache({ codexStatus: { connected: false } });
+    }
+  }, [updateCache]);
+
+  return {
+    catalog,
+    primary,
+    configuredModels,
+    authProfiles,
+    authOrder,
+    codexStatus,
+    loading,
+    saving,
+    ready,
+    error,
+    isDirty,
+    refresh,
+    addModel,
+    removeModel,
+    setPrimaryModel,
+    editProfile,
+    editAuthOrder,
+    getProfileValue,
+    getEffectiveOrder,
+    cancelChanges,
+    saveAll,
+    refreshCodexStatus,
+  };
+};

package/lib/public/js/components/models.js

@@ -268,7 +268,7 @@ export const Models = () => {
       : selectedModelProvider === "openai"
       ? !!getKeyVal(envVars, "OPENAI_API_KEY")
       : selectedModelProvider === "openai-codex"
-      ? !!(codexStatus.connected || getKeyVal(envVars, "OPENAI_API_KEY"))
+      ? !!codexStatus.connected
       : selectedModelProvider === "google"
       ? !!getKeyVal(envVars, "GEMINI_API_KEY")
       : false;

package/lib/public/js/components/providers.js

@@ -232,7 +232,7 @@ export const Providers = ({ onRestartRequired = () => {} }) => {
       : selectedModelProvider === "openai"
         ? !!getKeyVal(envVars, "OPENAI_API_KEY")
         : selectedModelProvider === "openai-codex"
-          ? !!(codexStatus.connected || getKeyVal(envVars, "OPENAI_API_KEY"))
+          ? !!codexStatus.connected
           : selectedModelProvider === "google"
             ? !!getKeyVal(envVars, "GEMINI_API_KEY")
             : false;

package/lib/public/js/components/routes/browse-route.js

@@ -0,0 +1,35 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { FileViewer } from "../file-viewer/index.js";
+
+const html = htm.bind(h);
+
+export const BrowseRoute = ({
+  activeBrowsePath = "",
+  browseView = "edit",
+  lineTarget = 0,
+  lineEndTarget = 0,
+  selectedBrowsePath = "",
+  onNavigateToBrowseFile = () => {},
+  onEditSelectedBrowseFile = () => {},
+  onClearSelection = () => {},
+}) => html`
+  <div class="w-full">
+    <${FileViewer}
+      filePath=${activeBrowsePath}
+      isPreviewOnly=${false}
+      browseView=${browseView}
+      lineTarget=${lineTarget}
+      lineEndTarget=${lineEndTarget}
+      onRequestEdit=${(targetPath) => {
+        const normalizedTargetPath = String(targetPath || "");
+        if (normalizedTargetPath && normalizedTargetPath !== selectedBrowsePath) {
+          onNavigateToBrowseFile(normalizedTargetPath, { view: "edit" });
+          return;
+        }
+        onEditSelectedBrowseFile();
+      }}
+      onRequestClearSelection=${onClearSelection}
+    />
+  </div>
+`;

package/lib/public/js/components/routes/doctor-route.js

@@ -0,0 +1,21 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { DoctorTab } from "../doctor/index.js";
+
+const html = htm.bind(h);
+
+export const DoctorRoute = ({ onNavigateToBrowseFile = () => {} }) => html`
+  <div class="pt-4">
+    <${DoctorTab}
+      isActive=${true}
+      onOpenFile=${(relativePath, options = {}) => {
+        const browsePath = `workspace/${String(relativePath || "").trim().replace(/^workspace\//, "")}`;
+        onNavigateToBrowseFile(browsePath, {
+          view: "edit",
+          ...(options.line ? { line: options.line } : {}),
+          ...(options.lineEnd ? { lineEnd: options.lineEnd } : {}),
+        });
+      }}
+    />
+  </div>
+`;

package/lib/public/js/components/routes/envars-route.js

@@ -0,0 +1,11 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Envars } from "../envars.js";
+
+const html = htm.bind(h);
+
+export const EnvarsRoute = ({ onRestartRequired = () => {} }) => html`
+  <div class="pt-4">
+    <${Envars} onRestartRequired=${onRestartRequired} />
+  </div>
+`;

package/lib/public/js/components/routes/general-route.js

@@ -0,0 +1,45 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { GeneralTab } from "../general/index.js";
+
+const html = htm.bind(h);
+
+export const GeneralRoute = ({
+  statusData = null,
+  watchdogData = null,
+  doctorStatusData = null,
+  doctorWarningDismissedUntilMs = 0,
+  onRefreshStatuses = () => {},
+  onSetLocation = () => {},
+  onNavigate = () => {},
+  restartingGateway = false,
+  onRestartGateway = () => {},
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate = () => {},
+  onRestartRequired = () => {},
+  onDismissDoctorWarning = () => {},
+}) => html`
+  <div class="pt-4">
+    <${GeneralTab}
+      statusData=${statusData}
+      watchdogData=${watchdogData}
+      doctorStatusData=${doctorStatusData}
+      doctorWarningDismissedUntilMs=${doctorWarningDismissedUntilMs}
+      onRefreshStatuses=${onRefreshStatuses}
+      onSwitchTab=${(nextTab) => onSetLocation(`/${nextTab}`)}
+      onNavigate=${onNavigate}
+      onOpenGmailWebhook=${() => onSetLocation("/webhooks/gmail")}
+      isActive=${true}
+      restartingGateway=${restartingGateway}
+      onRestartGateway=${onRestartGateway}
+      restartSignal=${restartSignal}
+      openclawUpdateInProgress=${openclawUpdateInProgress}
+      onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+      onOpenclawUpdate=${onOpenclawUpdate}
+      onRestartRequired=${onRestartRequired}
+      onDismissDoctorWarning=${onDismissDoctorWarning}
+    />
+  </div>
+`;

package/lib/public/js/components/routes/index.js

@@ -0,0 +1,11 @@
+export { BrowseRoute } from "./browse-route.js";
+export { DoctorRoute } from "./doctor-route.js";
+export { EnvarsRoute } from "./envars-route.js";
+export { GeneralRoute } from "./general-route.js";
+export { ModelsRoute } from "./models-route.js";
+export { ProvidersRoute } from "./providers-route.js";
+export { RouteRedirect } from "./route-redirect.js";
+export { TelegramRoute } from "./telegram-route.js";
+export { UsageRoute } from "./usage-route.js";
+export { WatchdogRoute } from "./watchdog-route.js";
+export { WebhooksRoute } from "./webhooks-route.js";

package/lib/public/js/components/routes/models-route.js

@@ -0,0 +1,11 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Models } from "../models-tab/index.js";
+
+const html = htm.bind(h);
+
+export const ModelsRoute = ({ onRestartRequired = () => {} }) => html`
+  <div class="pt-4">
+    <${Models} onRestartRequired=${onRestartRequired} />
+  </div>
+`;

package/lib/public/js/components/routes/providers-route.js

@@ -0,0 +1,11 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Providers } from "../providers.js";
+
+const html = htm.bind(h);
+
+export const ProvidersRoute = ({ onRestartRequired = () => {} }) => html`
+  <div class="pt-4">
+    <${Providers} onRestartRequired=${onRestartRequired} />
+  </div>
+`;

package/lib/public/js/components/routes/route-redirect.js

@@ -0,0 +1,10 @@
+import { useEffect } from "https://esm.sh/preact/hooks";
+import { useLocation } from "https://esm.sh/wouter-preact";
+
+export const RouteRedirect = ({ to }) => {
+  const [, setLocation] = useLocation();
+  useEffect(() => {
+    setLocation(to);
+  }, [to, setLocation]);
+  return null;
+};

package/lib/public/js/components/routes/telegram-route.js

@@ -0,0 +1,11 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { TelegramWorkspace } from "../telegram-workspace/index.js";
+
+const html = htm.bind(h);
+
+export const TelegramRoute = ({ onBack = () => {} }) => html`
+  <div class="pt-4">
+    <${TelegramWorkspace} onBack=${onBack} />
+  </div>
+`;

package/lib/public/js/components/routes/usage-route.js

@@ -0,0 +1,15 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { UsageTab } from "../usage-tab/index.js";
+
+const html = htm.bind(h);
+
+export const UsageRoute = ({ sessionId = "", onSetLocation = () => {} }) => html`
+  <div class="pt-4">
+    <${UsageTab}
+      sessionId=${sessionId}
+      onSelectSession=${(id) => onSetLocation(`/usage/${encodeURIComponent(String(id || ""))}`)}
+      onBackToSessions=${() => onSetLocation("/usage")}
+    />
+  </div>
+`;

package/lib/public/js/components/routes/watchdog-route.js

@@ -0,0 +1,32 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { WatchdogTab } from "../watchdog-tab.js";
+
+const html = htm.bind(h);
+
+export const WatchdogRoute = ({
+  statusData = null,
+  watchdogStatus = null,
+  onRefreshStatuses = () => {},
+  restartingGateway = false,
+  onRestartGateway = () => {},
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate = () => {},
+}) => html`
+  <div class="pt-4">
+    <${WatchdogTab}
+      gatewayStatus=${statusData?.gateway || null}
+      openclawVersion=${statusData?.openclawVersion || null}
+      watchdogStatus=${watchdogStatus}
+      onRefreshStatuses=${onRefreshStatuses}
+      restartingGateway=${restartingGateway}
+      onRestartGateway=${onRestartGateway}
+      restartSignal=${restartSignal}
+      openclawUpdateInProgress=${openclawUpdateInProgress}
+      onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+      onOpenclawUpdate=${onOpenclawUpdate}
+    />
+  </div>
+`;

package/lib/public/js/components/routes/webhooks-route.js

@@ -0,0 +1,43 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Webhooks } from "../webhooks.js";
+
+const html = htm.bind(h);
+
+export const WebhooksRoute = ({
+  hookName = "",
+  routeHistoryRef = null,
+  getCurrentPath = () => "",
+  onSetLocation = () => {},
+  onRestartRequired = () => {},
+  onNavigateToBrowseFile = () => {},
+}) => {
+  const handleBackToList = () => {
+    const historyStack = routeHistoryRef?.current || [];
+    const hasPreviousRoute = historyStack.length > 1;
+    if (!hasPreviousRoute) {
+      onSetLocation("/webhooks");
+      return;
+    }
+    const currentPath = getCurrentPath();
+    window.history.back();
+    window.setTimeout(() => {
+      if (getCurrentPath() === currentPath) {
+        onSetLocation("/webhooks");
+      }
+    }, 180);
+  };
+
+  return html`
+    <div class="pt-4">
+      <${Webhooks}
+        selectedHookName=${hookName}
+        onSelectHook=${(name) => onSetLocation(`/webhooks/${encodeURIComponent(name)}`)}
+        onBackToList=${handleBackToList}
+        onRestartRequired=${onRestartRequired}
+        onOpenFile=${(relativePath) =>
+          onNavigateToBrowseFile(String(relativePath || "").trim(), { view: "edit" })}
+      />
+    </div>
+  `;
+};

package/lib/public/js/components/sidebar.js

@@ -47,7 +47,6 @@ export const AppSidebar = ({
   onPreviewBrowseFile = () => {},
   acHasUpdate = false,
   acLatest = "",
-  acDismissed = false,
   acUpdating = false,
   onAcUpdate = () => {},
 }) => {
@@ -200,7 +199,7 @@ export const AppSidebar = ({
         `,
       )}
       <div class="sidebar-footer">
-        ${acHasUpdate && acLatest && !acDismissed
+        ${acHasUpdate && acLatest
           ? html`
               <${UpdateActionButton}
                 onClick=${onAcUpdate}
@@ -251,7 +250,7 @@ export const AppSidebar = ({
             onSelectFile=${onSelectBrowseFile}
             isActive=${sidebarTab === "browse"}
           />
-          ${acHasUpdate && acLatest && !acDismissed
+          ${acHasUpdate && acLatest
             ? html`
                 <${UpdateActionButton}
                   onClick=${onAcUpdate}

package/lib/public/js/components/tooltip.js

@@ -0,0 +1,106 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect, useRef, useState } from "https://esm.sh/preact/hooks";
+import { createPortal } from "https://esm.sh/preact/compat";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+const kViewportPadding = 8;
+const kTooltipOffset = 8;
+
+const getTooltipPosition = (triggerEl, tooltipEl) => {
+  if (!triggerEl) return null;
+  const triggerRect = triggerEl.getBoundingClientRect();
+  const tooltipRect = tooltipEl?.getBoundingClientRect?.() || {
+    width: 0,
+    height: 0,
+  };
+  const minLeft = kViewportPadding + tooltipRect.width / 2;
+  const maxLeft = window.innerWidth - kViewportPadding - tooltipRect.width / 2;
+  const centeredLeft = triggerRect.left + triggerRect.width / 2;
+  const left = tooltipRect.width
+    ? Math.min(Math.max(centeredLeft, minLeft), maxLeft)
+    : centeredLeft;
+
+  let top = triggerRect.bottom + kTooltipOffset;
+  const canRenderAbove =
+    triggerRect.top - kTooltipOffset - tooltipRect.height >= kViewportPadding;
+  const wouldOverflowBelow =
+    top + tooltipRect.height + kViewportPadding > window.innerHeight;
+  if (wouldOverflowBelow && canRenderAbove) {
+    top = triggerRect.top - kTooltipOffset - tooltipRect.height;
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${Math.max(kViewportPadding, top)}px`,
+  };
+};
+
+export const Tooltip = ({
+  text = "",
+  widthClass = "w-64",
+  tooltipClassName = "",
+  children = null,
+  disabled = false,
+}) => {
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [positionStyle, setPositionStyle] = useState(null);
+
+  useEffect(() => {
+    if (!open || disabled || !text) return undefined;
+
+    const updatePosition = () => {
+      const nextStyle = getTooltipPosition(triggerRef.current, tooltipRef.current);
+      if (nextStyle) setPositionStyle(nextStyle);
+    };
+
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [open, disabled, text]);
+
+  const handleOpen = () => {
+    if (disabled || !text) return;
+    setOpen(true);
+  };
+
+  const handleClose = () => setOpen(false);
+
+  return html`
+    <span
+      ref=${triggerRef}
+      class="inline-flex"
+      onMouseEnter=${handleOpen}
+      onMouseLeave=${handleClose}
+      onFocusIn=${handleOpen}
+      onFocusOut=${(event) => {
+        if (event.currentTarget.contains(event.relatedTarget)) return;
+        handleClose();
+      }}
+    >
+      ${children}
+      ${open && !disabled && text && typeof document !== "undefined"
+        ? createPortal(
+            html`
+              <span
+                ref=${tooltipRef}
+                role="tooltip"
+                class=${`pointer-events-none fixed left-0 top-0 z-[80] -translate-x-1/2 rounded-md border border-border bg-modal px-2 py-1 text-[11px] text-gray-300 shadow-lg ${widthClass} ${tooltipClassName}`.trim()}
+                style=${positionStyle || { visibility: "hidden" }}
+              >
+                ${text}
+              </span>
+            `,
+            document.body,
+          )
+        : null}
+    </span>
+  `;
+};