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

package/lib/public/js/components/envars.js

@@ -6,16 +6,44 @@ import { showToast } from "./toast.js";
 import { SecretInput } from "./secret-input.js";
 import { PageHeader } from "./page-header.js";
 import { ActionButton } from "./action-button.js";
+import {
+  Brain2LineIcon,
+  ChatVoiceLineIcon,
+  ChevronDownIcon,
+  ImageAiLineIcon,
+  TextToSpeechLineIcon,
+} from "./icons.js";
+import { Tooltip } from "./tooltip.js";
 const html = htm.bind(h);
 
 const kGroupLabels = {
+  ai: "AI Provider Keys",
   github: "GitHub",
   channels: "Channels",
   tools: "Tools",
   custom: "Custom",
 };
 
-const kGroupOrder = ["github", "channels", "tools", "custom"];
+const kGroupOrder = ["ai", "github", "channels", "tools", "custom"];
+const kDefaultVisibleAiKeys = new Set(["OPENAI_API_KEY", "GEMINI_API_KEY"]);
+const kFeatureIconByName = {
+  Embeddings: {
+    Icon: Brain2LineIcon,
+    label: "Memory embeddings",
+  },
+  Image: {
+    Icon: ImageAiLineIcon,
+    label: "Image generation",
+  },
+  TTS: {
+    Icon: TextToSpeechLineIcon,
+    label: "Text to speech",
+  },
+  STT: {
+    Icon: ChatVoiceLineIcon,
+    label: "Speech to text",
+  },
+};
 const normalizeEnvVarKey = (raw) => raw.trim().toUpperCase().replace(/[^A-Z0-9_]/g, "_");
 const stripSurroundingQuotes = (raw) => {
   const value = String(raw || "").trim();
@@ -57,27 +85,80 @@ const kHintByKey = {
   ANTHROPIC_TOKEN: html`from <code class="text-xs bg-black/30 px-1 rounded">claude setup-token</code>`,
   OPENAI_API_KEY: html`from <a href="https://platform.openai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">platform.openai.com</a>`,
   GEMINI_API_KEY: html`from <a href="https://aistudio.google.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">aistudio.google.com</a>`,
+  ELEVENLABS_API_KEY: html`from <a href="https://elevenlabs.io" target="_blank" class="hover:underline" style="color: var(--accent-link)">elevenlabs.io</a> · <code class="text-xs bg-black/30 px-1 rounded">XI_API_KEY</code> also supported`,
   GITHUB_TOKEN: html`classic PAT · <code class="text-xs bg-black/30 px-1 rounded">repo</code> scope · <a href="https://github.com/settings/tokens" target="_blank" class="hover:underline" style="color: var(--accent-link)">github settings</a>`,
   GITHUB_WORKSPACE_REPO: html`use <code class="text-xs bg-black/30 px-1 rounded">owner/repo</code> or <code class="text-xs bg-black/30 px-1 rounded">https://github.com/owner/repo</code>`,
   TELEGRAM_BOT_TOKEN: html`from <a href="https://t.me/BotFather" target="_blank" class="hover:underline" style="color: var(--accent-link)">@BotFather</a> · <a href="https://docs.openclaw.ai/channels/telegram" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
   DISCORD_BOT_TOKEN: html`from <a href="https://discord.com/developers/applications" target="_blank" class="hover:underline" style="color: var(--accent-link)">developer portal</a> · <a href="https://docs.openclaw.ai/channels/discord" target="_blank" class="hover:underline" style="color: var(--accent-link)">full guide</a>`,
+  MISTRAL_API_KEY: html`from <a href="https://console.mistral.ai" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.mistral.ai</a>`,
+  VOYAGE_API_KEY: html`from <a href="https://dash.voyageai.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">dash.voyageai.com</a>`,
+  GROQ_API_KEY: html`from <a href="https://console.groq.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.groq.com</a>`,
+  DEEPGRAM_API_KEY: html`from <a href="https://console.deepgram.com" target="_blank" class="hover:underline" style="color: var(--accent-link)">console.deepgram.com</a>`,
   BRAVE_API_KEY: html`from <a href="https://brave.com/search/api/" target="_blank" class="hover:underline" style="color: var(--accent-link)">brave.com/search/api</a> — free tier available`,
 };
 
 const getHintContent = (envVar) => kHintByKey[envVar.key] || envVar.hint || "";
 
+const getVisibleFeatureIcons = (envVar) =>
+  (Array.isArray(envVar?.features) ? envVar.features : []).filter(
+    (feature) => !!kFeatureIconByName[feature],
+  );
+
+const splitAiVars = (items) => {
+  const visible = [];
+  const hidden = [];
+  (items || []).forEach((item) => {
+    const hasValue = !!String(item?.value || "").trim();
+    if (kDefaultVisibleAiKeys.has(item?.key) || hasValue) {
+      visible.push(item);
+      return;
+    }
+    hidden.push(item);
+  });
+  return { visible, hidden };
+};
+
+const FeatureIcon = ({ feature }) => {
+  const entry = kFeatureIconByName[feature];
+  if (!entry) return null;
+  const { Icon, label } = entry;
+  return html`
+    <${Tooltip} text=${label} widthClass="w-auto" tooltipClassName="whitespace-nowrap">
+      <span
+        class="inline-flex items-center justify-center text-gray-500 hover:text-gray-300 focus-within:text-gray-300"
+        tabindex="0"
+        aria-label=${label}
+      >
+        <${Icon} className="w-3.5 h-3.5" />
+      </span>
+    </${Tooltip}>
+  `;
+};
+
 const EnvRow = ({ envVar, onChange, onDelete, disabled }) => {
   const hint = getHintContent(envVar);
+  const featureIcons = getVisibleFeatureIcons(envVar);
 
   return html`
     <div class="flex items-start gap-4 px-4 py-3">
-      <div class="shrink-0 flex items-center gap-2 pt-1.5" style="width: 200px">
-        <span
-          class="inline-block w-1.5 h-1.5 rounded-full shrink-0 ${envVar.value
-            ? "bg-green-500"
-            : "bg-gray-600"}"
-        />
-        <code class="text-sm truncate">${envVar.key}</code>
+      <div class="shrink-0" style="width: 200px">
+        <div class="flex items-center gap-2 pt-1.5">
+          <span
+            class="inline-block w-1.5 h-1.5 rounded-full shrink-0 ${envVar.value
+              ? "bg-green-500"
+              : "bg-gray-600"}"
+          />
+          <code class="text-sm truncate">${envVar.key}</code>
+        </div>
+        ${featureIcons.length > 0
+          ? html`
+              <div class="flex items-center gap-2 mt-1 pl-3.5">
+                ${featureIcons.map(
+                  (feature) => html`<${FeatureIcon} key=${feature} feature=${feature} />`,
+                )}
+              </div>
+            `
+          : null}
       </div>
       <div class="flex-1 min-w-0">
         <div class="flex items-center gap-1">
@@ -114,6 +195,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
   const [secretMaskEpoch, setSecretMaskEpoch] = useState(0);
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
+  const [showAllAiKeys, setShowAllAiKeys] = useState(false);
   const [newKey, setNewKey] = useState("");
   const baselineSignatureRef = useRef("[]");
 
@@ -310,6 +392,61 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
     const pendingAtBottom = grouped.custom.filter((item) => pending.has(item.key));
     grouped.custom = [...nonPending, ...pendingAtBottom];
   }
+  const aiSplit = splitAiVars(grouped.ai || []);
+  const renderEnvRows = (items) =>
+    items.map(
+      (v) =>
+        html`<${EnvRow}
+          key=${`${secretMaskEpoch}:${v.key}`}
+          envVar=${v}
+          onChange=${handleChange}
+          onDelete=${handleDelete}
+          disabled=${saving}
+        />`,
+    );
+  const renderGroupCard = (groupKey) => {
+    const items = grouped[groupKey] || [];
+    if (!items.length) return null;
+    if (groupKey === "ai") {
+      const { visible, hidden } = aiSplit;
+      const expanded = showAllAiKeys && hidden.length > 0;
+      return html`
+        <div class="bg-surface border border-border rounded-xl overflow-hidden">
+          <h3 class="card-label text-xs px-4 pt-3 pb-2">
+            ${kGroupLabels[groupKey] || groupKey}
+          </h3>
+          <div class="divide-y divide-border">${renderEnvRows(visible)}</div>
+          ${hidden.length > 0
+            ? html`
+                <div class="border-t border-border px-4 py-2">
+                  <button
+                    type="button"
+                    onclick=${() => setShowAllAiKeys((prev) => !prev)}
+                    class="inline-flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-300"
+                  >
+                    <${ChevronDownIcon}
+                      className=${`transition-transform ${expanded ? "rotate-180" : ""}`}
+                    />
+                    ${expanded ? "Show fewer" : `Show more (${hidden.length})`}
+                  </button>
+                </div>
+              `
+            : null}
+          ${expanded
+            ? html`<div class="divide-y divide-border border-t border-border">${renderEnvRows(hidden)}</div>`
+            : null}
+        </div>
+      `;
+    }
+    return html`
+      <div class="bg-surface border border-border rounded-xl overflow-hidden">
+        <h3 class="card-label text-xs px-4 pt-3 pb-2">
+          ${kGroupLabels[groupKey] || groupKey}
+        </h3>
+        <div class="divide-y divide-border">${renderEnvRows(items)}</div>
+      </div>
+    `;
+  };
 
   return html`
     <div class="space-y-4">
@@ -331,27 +468,7 @@ export const Envars = ({ onRestartRequired = () => {} }) => {
 
       ${kGroupOrder
         .filter((g) => grouped[g]?.length)
-        .map(
-          (g) => html`
-            <div class="bg-surface border border-border rounded-xl overflow-hidden">
-              <h3 class="card-label text-xs px-4 pt-3 pb-2">
-                ${kGroupLabels[g] || g}
-              </h3>
-              <div class="divide-y divide-border">
-                ${grouped[g].map(
-                  (v) =>
-                    html`<${EnvRow}
-                      key=${`${secretMaskEpoch}:${v.key}`}
-                      envVar=${v}
-                      onChange=${handleChange}
-                      onDelete=${handleDelete}
-                      disabled=${saving}
-                    />`,
-                )}
-              </div>
-            </div>
-          `,
-        )}
+        .map((g) => renderGroupCard(g))}
 
       <div class="bg-surface border border-border rounded-xl overflow-hidden">
         <div class="flex items-center justify-between px-4 pt-3 pb-2">

package/lib/public/js/components/features.js

@@ -61,7 +61,7 @@ export const Features = ({ onSwitchTab }) => {
                         href="#"
                         onclick=${(e) => {
                           e.preventDefault();
-                          onSwitchTab?.("providers");
+                          onSwitchTab?.("envars");
                         }}
                         class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
                       >Add provider</a>

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

@@ -0,0 +1,155 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { Gateway } from "../gateway.js";
+import { Channels } from "../channels.js";
+import { Pairings } from "../pairings.js";
+import { DevicePairings } from "../device-pairings.js";
+import { Google } from "../google/index.js";
+import { Features } from "../features.js";
+import { GeneralDoctorWarning } from "../doctor/general-warning.js";
+import { ChevronDownIcon } from "../icons.js";
+import { UpdateActionButton } from "../update-action-button.js";
+import { useGeneralTab } from "./use-general-tab.js";
+
+const html = htm.bind(h);
+
+export const GeneralTab = ({
+  statusData = null,
+  watchdogData = null,
+  doctorStatusData = null,
+  doctorWarningDismissedUntilMs = 0,
+  onRefreshStatuses = () => {},
+  onSwitchTab = () => {},
+  onNavigate = () => {},
+  onOpenGmailWebhook = () => {},
+  isActive = false,
+  restartingGateway = false,
+  onRestartGateway = () => {},
+  restartSignal = 0,
+  openclawUpdateInProgress = false,
+  onOpenclawVersionActionComplete = () => {},
+  onOpenclawUpdate = () => {},
+  onRestartRequired = () => {},
+  onDismissDoctorWarning = () => {},
+}) => {
+  const { state, actions } = useGeneralTab({
+    statusData,
+    watchdogData,
+    doctorStatusData,
+    onRefreshStatuses,
+    isActive,
+    restartSignal,
+  });
+
+  return html`
+    <div class="space-y-4">
+      <${Gateway}
+        status=${state.gatewayStatus}
+        openclawVersion=${state.openclawVersion}
+        restarting=${restartingGateway}
+        onRestart=${onRestartGateway}
+        watchdogStatus=${state.watchdogStatus}
+        onOpenWatchdog=${() => onSwitchTab("watchdog")}
+        onRepair=${actions.handleWatchdogRepair}
+        repairing=${state.repairingWatchdog}
+        openclawUpdateInProgress=${openclawUpdateInProgress}
+        onOpenclawVersionActionComplete=${onOpenclawVersionActionComplete}
+        onOpenclawUpdate=${onOpenclawUpdate}
+      />
+      <${GeneralDoctorWarning}
+        doctorStatus=${state.doctorStatus}
+        dismissedUntilMs=${doctorWarningDismissedUntilMs}
+        onOpenDoctor=${() => onSwitchTab("doctor")}
+        onDismiss=${onDismissDoctorWarning}
+      />
+      <${Channels}
+        channels=${state.channels}
+        onSwitchTab=${onSwitchTab}
+        onNavigate=${onNavigate}
+      />
+      <${Pairings}
+        pending=${state.pending}
+        channels=${state.channels}
+        visible=${state.hasUnpaired}
+        onApprove=${actions.handleApprove}
+        onReject=${actions.handleReject}
+      />
+      <${Features} onSwitchTab=${onSwitchTab} />
+      <${Google}
+        gatewayStatus=${state.gatewayStatus}
+        onRestartRequired=${onRestartRequired}
+        onOpenGmailWebhook=${onOpenGmailWebhook}
+      />
+
+      ${state.repo &&
+      html`
+        <div class="bg-surface border border-border rounded-xl p-4">
+          <div class="flex items-center justify-between gap-3">
+            <div class="flex items-center gap-2 min-w-0">
+              <svg
+                class="w-4 h-4 text-gray-400"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+                />
+              </svg>
+              <a
+                href="https://github.com/${state.repo}"
+                target="_blank"
+                class="text-sm text-gray-400 hover:text-gray-200 transition-colors truncate"
+                >${state.repo}</a
+              >
+            </div>
+            <div class="flex items-center gap-2 shrink-0">
+              <span class="text-xs text-gray-400">Auto-sync</span>
+              <div class="relative">
+                <select
+                  value=${state.syncCronChoice}
+                  onchange=${(event) =>
+                    actions.handleSyncCronChoiceChange(event.target.value)}
+                  disabled=${state.savingSyncCron}
+                  class="appearance-none bg-black/30 border border-border rounded-lg pl-2.5 pr-9 py-1.5 text-xs text-gray-300 ${state.savingSyncCron
+                    ? "opacity-50 cursor-not-allowed"
+                    : ""}"
+                  title=${state.syncCron?.installed === false
+                    ? "Not Installed Yet"
+                    : state.syncCronStatusText}
+                >
+                  <option value="disabled">Disabled</option>
+                  <option value="*/30 * * * *">Every 30 min</option>
+                  <option value="0 * * * *">Hourly</option>
+                  <option value="0 0 * * *">Daily</option>
+                </select>
+                <${ChevronDownIcon}
+                  className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-gray-500"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      `}
+
+      <div class="bg-surface border border-border rounded-xl p-4">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="font-semibold text-sm">OpenClaw Gateway Dashboard</h2>
+          </div>
+          <${UpdateActionButton}
+            onClick=${actions.handleOpenDashboard}
+            loading=${state.dashboardLoading}
+            warning=${false}
+            idleLabel="Open"
+            loadingLabel="Opening..."
+          />
+        </div>
+        <${DevicePairings}
+          pending=${state.devicePending}
+          onApprove=${actions.handleDeviceApprove}
+          onReject=${actions.handleDeviceReject}
+        />
+      </div>
+    </div>
+  `;
+};

package/lib/public/js/components/icons.js

@@ -119,6 +119,58 @@ export const Image2FillIcon = ({ className = "" }) => html`
   </svg>
 `;
 
+export const ImageAiLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M20.7134 8.12811L20.4668 8.69379C20.2864 9.10792 19.7136 9.10792 19.5331 8.69379L19.2866 8.12811C18.8471 7.11947 18.0555 6.31641 17.0677 5.87708L16.308 5.53922C15.8973 5.35653 15.8973 4.75881 16.308 4.57612L17.0252 4.25714C18.0384 3.80651 18.8442 2.97373 19.2761 1.93083L19.5293 1.31953C19.7058 0.893489 20.2942 0.893489 20.4706 1.31953L20.7238 1.93083C21.1558 2.97373 21.9616 3.80651 22.9748 4.25714L23.6919 4.57612C24.1027 4.75881 24.1027 5.35653 23.6919 5.53922L22.9323 5.87708C21.9445 6.31641 21.1529 7.11947 20.7134 8.12811ZM2.9918 3H14V5H4V19L14 9L20 15V11H22V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3ZM20 17.8284L14 11.8284L6.82843 19H20V17.8284ZM8 11C6.89543 11 6 10.1046 6 9C6 7.89543 6.89543 7 8 7C9.10457 7 10 7.89543 10 9C10 10.1046 9.10457 11 8 11Z"
+    />
+  </svg>
+`;
+
+export const Brain2LineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M7 6C7 6.23676 7.04072 6.46184 7.11469 6.66999C7.22686 6.98559 7.17357 7.33638 6.97276 7.60444C6.77194 7.8725 6.45026 8.02222 6.11585 8.00327C6.0776 8.0011 6.03898 8 6 8C4.89543 8 4 8.89543 4 10C4 10.5129 4.19174 10.9786 4.50903 11.3331C4.84885 11.7128 4.84885 12.2872 4.50903 12.6669C4.19174 13.0214 4 13.4871 4 14C4 14.8842 4.57447 15.6369 5.37327 15.9001C5.84924 16.057 6.1356 16.5419 6.04308 17.0345C6.01489 17.1846 6 17.3401 6 17.5C6 18.8807 7.11929 20 8.5 20C9.75862 20 10.8015 19.069 10.9746 17.8583C10.9806 17.8165 10.9891 17.7756 11 17.7358V6C11 4.89543 10.1046 4 9 4C7.89543 4 7 4.89543 7 6ZM13 17.7358C13.0109 17.7756 13.0194 17.8165 13.0254 17.8583C13.1985 19.069 14.2414 20 15.5 20C16.8807 20 18 18.8807 18 17.5C18 17.3401 17.9851 17.1846 17.9569 17.0345C17.8644 16.5419 18.1508 16.057 18.6267 15.9001C19.4255 15.6369 20 14.8842 20 14C20 13.4871 19.8083 13.0214 19.491 12.6669C19.1511 12.2872 19.1511 11.7128 19.491 11.3331C19.8083 10.9786 20 10.5129 20 10C20 8.89543 19.1046 8 18 8C17.961 8 17.9224 8.0011 17.8841 8.00327C17.5497 8.02222 17.2281 7.8725 17.0272 7.60444C16.8264 7.33638 16.7731 6.98559 16.8853 6.66999C16.9593 6.46184 17 6.23676 17 6C17 4.89543 16.1046 4 15 4C13.8954 4 13 4.89543 13 6V17.7358ZM9 2C10.1947 2 11.2671 2.52376 12 3.35418C12.7329 2.52376 13.8053 2 15 2C17.2091 2 19 3.79086 19 6C19 6.04198 18.9994 6.08382 18.9981 6.12552C20.7243 6.56889 22 8.13546 22 10C22 10.728 21.8049 11.4116 21.4646 12C21.8049 12.5884 22 13.272 22 14C22 15.4817 21.1949 16.7734 19.9999 17.4646L20 17.5C20 19.9853 17.9853 22 15.5 22C14.0859 22 12.8248 21.3481 12 20.3285C11.1752 21.3481 9.91405 22 8.5 22C6.01472 22 4 19.9853 4 17.5L4.00014 17.4646C2.80512 16.7734 2 15.4817 2 14C2 13.272 2.19513 12.5884 2.53536 12C2.19513 11.4116 2 10.728 2 10C2 8.13546 3.27573 6.56889 5.00194 6.12552C5.00065 6.08382 5 6.04198 5 6C5 3.79086 6.79086 2 9 2Z"
+    />
+  </svg>
+`;
+
+export const TextToSpeechLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M14.5 5H6C4.89543 5 4 5.89543 4 7V17C4 18.1046 4.89543 19 6 19H18C19.1046 19 20 18.1046 20 17V14.5H22V17C22 19.2091 20.2091 21 18 21H6C3.79086 21 2 19.2091 2 17V7C2 4.79086 3.79086 3 6 3H14.5V5ZM14 11H11V17H9V11H6V9H14V11ZM20.6572 1.34277C22.1049 2.79049 23 4.79086 23 7C23 9.20914 22.1049 11.2095 20.6572 12.6572L19.2422 11.2422C20.328 10.1564 21 8.65685 21 7C21 5.34315 20.328 3.8436 19.2422 2.75781L20.6572 1.34277ZM17.8281 4.17188C18.552 4.89573 19 5.89543 19 7C19 8.10457 18.552 9.10427 17.8281 9.82812L16.4141 8.41406C16.776 8.05213 17 7.55228 17 7C17 6.44772 16.776 5.94787 16.4141 5.58594L17.8281 4.17188Z"
+    />
+  </svg>
+`;
+
+export const ChatVoiceLineIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    viewBox="0 0 24 24"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22H2L4.92893 19.0711C3.11929 17.2614 2 14.7614 2 12ZM6.82843 20H12C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 14.1524 4.85124 16.1649 6.34315 17.6569L7.75736 19.0711L6.82843 20ZM11 6H13V18H11V6ZM7 9H9V15H7V9ZM15 9H17V15H15V9Z"
+    />
+  </svg>
+`;
+
 export const FileMusicLineIcon = ({ className = "" }) => html`
   <svg
     class=${className}

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

@@ -1,18 +1,15 @@
 import { h } from "https://esm.sh/preact";
 import htm from "https://esm.sh/htm";
+import { Tooltip } from "./tooltip.js";
 
 const html = htm.bind(h);
 
 export const InfoTooltip = ({ text = "", widthClass = "w-64" }) => html`
-  <span class="relative group inline-flex items-center cursor-default select-none">
+  <${Tooltip} text=${text} widthClass=${widthClass}>
     <span
-      class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-500 text-[10px] text-gray-400 cursor-default"
+      class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-500 text-[10px] text-gray-400 cursor-default select-none"
       aria-label=${text}
       >?</span
     >
-    <span
-      class=${`pointer-events-none absolute left-1/2 top-full z-10 mt-2 hidden -translate-x-1/2 rounded-md border border-border bg-modal px-2 py-1 text-[11px] text-gray-300 shadow-lg group-hover:block ${widthClass}`}
-      >${text}</span
-    >
-  </span>
+  </${Tooltip}>
 `;