@chrysb/alphaclaw 0.9.6 → 0.9.7

package/lib/public/js/components/agents-tab/create-channel-modal.js

@@ -18,6 +18,7 @@ const kChannelEnvKeys = {
   telegram: "TELEGRAM_BOT_TOKEN",
   discord: "DISCORD_BOT_TOKEN",
   slack: "SLACK_BOT_TOKEN",
+  whatsapp: "WHATSAPP_OWNER_NUMBER",
 };
 
 const kChannelExtraEnvKeys = {
@@ -229,8 +230,10 @@ export const CreateChannelModal = ({
     }
     setName(providerLabel);
   }, [provider, providerHasAccounts, nameEditedManually, isEditMode]);
+  const normalizedProvider = String(provider || "").trim();
   const isSingleAccountProvider = isSingleAccountChannelProvider(provider);
-  const needsAppToken = String(provider || "").trim() === "slack";
+  const needsAppToken = normalizedProvider === "slack";
+  const isWhatsApp = normalizedProvider === "whatsapp";
 
   const accountId = useMemo(() => {
     if (isEditMode) {
@@ -419,20 +422,34 @@ export const CreateChannelModal = ({
         </label>
 
         <label class="block space-y-1">
-          <span class="text-xs text-fg-muted">
-            ${needsAppToken ? "Bot Token" : "Token"}
+          <span class="text-xs text-gray-400">
+            ${isWhatsApp ? "Owner Number" : needsAppToken ? "Bot Token" : "Token"}
           </span>
-          <${SecretInput}
-            value=${token}
-            onInput=${(event) => setToken(event.target.value)}
-            placeholder=${token ? "" : "Paste bot token"}
-            loading=${loadingToken}
-            isSecret=${true}
-            inputClass="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm font-mono text-body outline-none focus:border-fg-muted"
-          />
+          ${isWhatsApp
+            ? html`
+                <input
+                  type="text"
+                  value=${token}
+                  onInput=${(event) => setToken(event.target.value)}
+                  placeholder="+15551234567"
+                  class="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm font-mono text-body outline-none focus:border-fg-muted"
+                />
+              `
+            : html`
+                <${SecretInput}
+                  value=${token}
+                  onInput=${(event) => setToken(event.target.value)}
+                  placeholder=${token ? "" : "Paste bot token"}
+                  loading=${loadingToken}
+                  isSecret=${true}
+                  inputClass="w-full bg-field border border-border rounded-lg px-3 py-2 text-sm font-mono text-body outline-none focus:border-fg-muted"
+                />
+              `}
           <p class="text-xs text-fg-muted">
-            Saved behind the scenes as
-            <code class="font-mono text-fg-muted ml-1">${envKey || "CHANNEL_TOKEN"}</code>.
+            ${isWhatsApp
+              ? "E.164 format phone number used for allowlist pairing."
+              : html`Saved behind the scenes as
+                <code class="font-mono text-fg-muted ml-1">${envKey || "CHANNEL_TOKEN"}</code>.`}
           </p>
         </label>
 

package/lib/public/js/components/channel-login-modal.js

@@ -0,0 +1,82 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+import { ActionButton } from "./action-button.js";
+import { CloseIcon } from "./icons.js";
+import { ModalShell } from "./modal-shell.js";
+import { PageHeader } from "./page-header.js";
+
+const html = htm.bind(h);
+
+export const ChannelLoginModal = ({
+  visible = false,
+  loading = false,
+  title = "Link Channel",
+  output = "",
+  error = "",
+  runDisabled = false,
+  runLabel = "Generate QR",
+  runLoadingLabel = "Running...",
+  closeLabel = "Close",
+  onRun = async () => {},
+  onClose = () => {},
+}) => {
+  if (!visible) return null;
+  const hasOutput = !!String(output || "").trim();
+  const hasError = !!String(error || "").trim();
+  const displayOutput = hasOutput
+    ? String(output)
+    : hasError
+      ? String(error)
+      : "No output yet. Generate QR to start login.";
+  return html`
+    <${ModalShell}
+      visible=${visible}
+      onClose=${onClose}
+      panelClassName="bg-modal border border-border rounded-xl p-6 max-w-2xl w-full space-y-4"
+    >
+      <${PageHeader}
+        title=${title}
+        actions=${html`
+          <button
+            type="button"
+            onclick=${onClose}
+            class="h-8 w-8 inline-flex items-center justify-center rounded-lg ac-btn-secondary"
+            aria-label="Close modal"
+          >
+            <${CloseIcon} className="w-3.5 h-3.5 text-gray-300" />
+          </button>
+        `}
+      />
+      <div class="space-y-3">
+        <p class="text-xs text-gray-500">
+          Click "Generate QR" to run channel login and capture terminal output.
+        </p>
+        <textarea
+          readonly
+          wrap="off"
+          value=${displayOutput}
+          class="w-full h-[440px] max-h-[70vh] text-[11px] leading-[1.1] font-mono text-gray-300 bg-black/30 border border-border rounded-lg p-3 outline-none resize-y overflow-auto"
+        />
+      </div>
+      <div class="flex justify-end gap-2 pt-1">
+        <${ActionButton}
+          onClick=${onClose}
+          disabled=${loading}
+          loading=${false}
+          tone="secondary"
+          size="sm"
+          idleLabel=${closeLabel}
+        />
+        <${ActionButton}
+          onClick=${onRun}
+          disabled=${loading || runDisabled}
+          loading=${loading}
+          tone="primary"
+          size="sm"
+          idleLabel=${runLabel}
+          loadingLabel=${runLoadingLabel}
+        />
+      </div>
+    </${ModalShell}>
+  `;
+};

package/lib/public/js/components/channels.js

@@ -8,14 +8,19 @@ import {
 import htm from "htm";
 import { AddChannelMenu } from "./add-channel-menu.js";
 import { ChannelAccountStatusBadge } from "./channel-account-status-badge.js";
+import { ChannelLoginModal } from "./channel-login-modal.js";
 import { ConfirmDialog } from "./confirm-dialog.js";
 import { OverflowMenu, OverflowMenuItem } from "./overflow-menu.js";
 import {
   deleteChannelAccount,
   fetchChannelAccounts,
+  fetchChannelAccountLoginStatus,
+  fetchRestartStatus,
+  runChannelAccountLogin,
   updateChannelAccount,
 } from "../lib/api.js";
 import { useCachedFetch } from "../hooks/use-cached-fetch.js";
+import { usePolling } from "../hooks/usePolling.js";
 import {
   isImplicitDefaultAccount,
   resolveChannelAccountLabel,
@@ -27,11 +32,12 @@ import { showToast } from "./toast.js";
 
 const html = htm.bind(h);
 
-const ALL_CHANNELS = ["telegram", "discord", "slack"];
+const ALL_CHANNELS = ["telegram", "discord", "slack", "whatsapp"];
 const kChannelMeta = {
   telegram: { label: "Telegram", iconSrc: "/assets/icons/telegram.svg" },
   discord: { label: "Discord", iconSrc: "/assets/icons/discord.svg" },
   slack: { label: "Slack", iconSrc: "/assets/icons/slack.svg" },
+  whatsapp: { label: "WhatsApp", iconSrc: "/assets/icons/whatsapp.svg" },
 };
 
 const getChannelMeta = (channelId = "") => {
@@ -49,6 +55,48 @@ const getChannelMeta = (channelId = "") => {
 const announceRestartRequired = () =>
   window.dispatchEvent(new CustomEvent("alphaclaw:restart-required"));
 
+const appendTerminalOutput = (previousOutput = "", nextChunk = "") =>
+  [String(previousOutput || "").trim(), String(nextChunk || "").trim()]
+    .filter(Boolean)
+    .join("\n\n");
+
+const cloneLoginModalState = (state = {}) => ({
+  loginAccount: state.loginAccount || null,
+  loginOutput: String(state.loginOutput || ""),
+  loginError: String(state.loginError || ""),
+  loginRunning: !!state.loginRunning,
+  loginMonitoring: !!state.loginMonitoring,
+  loginCompleted: !!state.loginCompleted,
+  loginLinked: !!state.loginLinked,
+  loginRestartingGateway: !!state.loginRestartingGateway,
+  loginRestartedGateway: !!state.loginRestartedGateway,
+});
+
+let kPreservedChannelLoginModalState = null;
+
+const clearChannelLoginModalState = ({
+  setLoginAccount,
+  setLoginOutput,
+  setLoginError,
+  setLoginRunning,
+  setLoginMonitoring,
+  setLoginCompleted,
+  setLoginLinked,
+  setLoginRestartingGateway,
+  setLoginRestartedGateway,
+}) => {
+  kPreservedChannelLoginModalState = null;
+  setLoginAccount(null);
+  setLoginOutput("");
+  setLoginError("");
+  setLoginRunning(false);
+  setLoginMonitoring(false);
+  setLoginCompleted(false);
+  setLoginLinked(false);
+  setLoginRestartingGateway(false);
+  setLoginRestartedGateway(false);
+};
+
 export const ChannelsCard = ({
   title = "Channels",
   items = [],
@@ -140,7 +188,9 @@ export const Channels = ({
   agents = [],
   onNavigate = () => {},
   onRefreshStatuses = () => {},
+  onRestartGateway = async () => ({ ok: false }),
 }) => {
+  const preservedLoginState = cloneLoginModalState(kPreservedChannelLoginModalState || {});
   const [saving, setSaving] = useState(false);
   const [createLoadingLabel, setCreateLoadingLabel] = useState("Creating...");
   const [menuOpenId, setMenuOpenId] = useState("");
@@ -156,6 +206,20 @@ export const Channels = ({
   const channelAccounts = Array.isArray(channelAccountsPayload?.channels)
     ? channelAccountsPayload.channels
     : [];
+  const [loginAccount, setLoginAccount] = useState(preservedLoginState.loginAccount);
+  const [loginOutput, setLoginOutput] = useState(preservedLoginState.loginOutput);
+  const [loginError, setLoginError] = useState(preservedLoginState.loginError);
+  const [loginRunning, setLoginRunning] = useState(preservedLoginState.loginRunning);
+  const [loginMonitoring, setLoginMonitoring] = useState(preservedLoginState.loginMonitoring);
+  const [loginCompleted, setLoginCompleted] = useState(preservedLoginState.loginCompleted);
+  const [loginLinked, setLoginLinked] = useState(preservedLoginState.loginLinked);
+  const [loginRestartingGateway, setLoginRestartingGateway] = useState(
+    preservedLoginState.loginRestartingGateway,
+  );
+  const [loginRestartedGateway, setLoginRestartedGateway] = useState(
+    preservedLoginState.loginRestartedGateway,
+  );
+  const [loginRestartStatusChecked, setLoginRestartStatusChecked] = useState(false);
 
   const loadChannelAccounts = useCallback(async () => {
     try {
@@ -163,6 +227,62 @@ export const Channels = ({
     } catch {}
   }, [refreshChannelAccounts]);
 
+  const loginStatusPoll = usePolling(
+    () =>
+      fetchChannelAccountLoginStatus({
+        provider: loginAccount?.provider,
+        accountId: loginAccount?.id,
+      }),
+    1000,
+    {
+      enabled:
+        !!loginAccount &&
+        !!loginMonitoring &&
+        String(loginAccount?.provider || "").trim() === "whatsapp",
+    },
+  );
+  const restartStatusPoll = usePolling(fetchRestartStatus, 2000, {
+    enabled: !!loginAccount && !!loginRestartingGateway,
+  });
+
+  const appendLoginOutput = useCallback((nextChunk = "") => {
+    setLoginOutput((currentOutput) => appendTerminalOutput(currentOutput, nextChunk));
+  }, []);
+
+  useEffect(() => {
+    const nextState = cloneLoginModalState({
+      loginAccount,
+      loginOutput,
+      loginError,
+      loginRunning,
+      loginMonitoring,
+      loginCompleted,
+      loginLinked,
+      loginRestartingGateway,
+      loginRestartedGateway,
+    });
+    const hasActiveLoginState =
+      !!nextState.loginAccount ||
+      !!nextState.loginOutput ||
+      !!nextState.loginError ||
+      !!nextState.loginRunning ||
+      !!nextState.loginMonitoring ||
+      !!nextState.loginCompleted ||
+      !!nextState.loginLinked ||
+      !!nextState.loginRestartingGateway ||
+      !!nextState.loginRestartedGateway;
+    kPreservedChannelLoginModalState = hasActiveLoginState ? nextState : null;
+  }, [
+    loginAccount,
+    loginCompleted,
+    loginError,
+    loginLinked,
+    loginMonitoring,
+    loginOutput,
+    loginRestartedGateway,
+    loginRestartingGateway,
+    loginRunning,
+  ]);
 
   const configuredChannelMap = useMemo(
     () =>
@@ -192,6 +312,51 @@ export const Channels = ({
   );
   const showAgentBadge = agents.length > 0;
 
+  useEffect(() => {
+    const handleOpenWhatsAppQr = () => {
+      const configuredWhatsApp = channelAccounts.find(
+        (entry) => String(entry?.channel || "").trim() === "whatsapp",
+      );
+      const account = Array.isArray(configuredWhatsApp?.accounts)
+        ? configuredWhatsApp.accounts[0]
+        : null;
+      if (!account) return;
+      const accountId = String(account?.id || "").trim() || "default";
+      const boundAgentId = String(account?.boundAgentId || "").trim();
+      const ownerAgentId =
+        boundAgentId ||
+        (isImplicitDefaultAccount({ accountId, boundAgentId })
+          ? defaultAgentId
+          : "");
+      const accountData = {
+        id: accountId,
+        provider: "whatsapp",
+        name: resolveChannelAccountLabel({
+          channelId: "whatsapp",
+          account,
+          providerLabel: getChannelMeta("whatsapp").label || "WhatsApp",
+        }),
+        ownerAgentId,
+        envKey: String(account?.envKey || "").trim(),
+        token: String(account?.token || "").trim(),
+      };
+      setLoginAccount(accountData);
+      setLoginOutput("");
+      setLoginError("");
+      setLoginRunning(false);
+      setLoginMonitoring(false);
+      setLoginCompleted(false);
+      setLoginLinked(false);
+      setLoginRestartingGateway(false);
+      setLoginRestartedGateway(false);
+      setLoginRestartStatusChecked(false);
+    };
+    window.addEventListener("alphaclaw:open-whatsapp-qr", handleOpenWhatsAppQr);
+    return () => {
+      window.removeEventListener("alphaclaw:open-whatsapp-qr", handleOpenWhatsAppQr);
+    };
+  }, [channelAccounts, defaultAgentId]);
+
   const handleUpdateChannel = async (payload) => {
     setSaving(true);
     try {
@@ -259,6 +424,134 @@ export const Channels = ({
       setSaving(false);
     }
   };
+  const handleRunChannelLogin = async () => {
+    if (!loginAccount) return;
+    setLoginRunning(true);
+    setLoginMonitoring(true);
+    setLoginCompleted(false);
+    setLoginLinked(false);
+    setLoginRestartingGateway(false);
+    setLoginRestartedGateway(false);
+    setLoginRestartStatusChecked(false);
+    setLoginError("");
+    setLoginOutput("");
+    try {
+      const result = await runChannelAccountLogin({
+        provider: loginAccount.provider,
+        accountId: loginAccount.id,
+      });
+      const combinedOutput = appendTerminalOutput(result?.stdout || "", result?.stderr || "");
+      setLoginOutput(combinedOutput || "No terminal output captured.");
+      setLoginCompleted(!!result?.completed);
+      if (result?.completed) {
+        await loginStatusPoll.refresh();
+      }
+    } catch (error) {
+      setLoginError(String(error?.message || "Could not start channel login"));
+      setLoginMonitoring(false);
+    } finally {
+      setLoginRunning(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!loginAccount || !loginMonitoring || loginLinked || loginRestartingGateway) {
+      return;
+    }
+    if (!loginStatusPoll.data?.linked) return;
+
+    let cancelled = false;
+    setLoginLinked(true);
+    setLoginError("");
+    appendLoginOutput("✅ Saved WhatsApp credentials detected.");
+
+    (async () => {
+      setLoginRestartingGateway(true);
+      setLoginRestartStatusChecked(false);
+      appendLoginOutput("Restarting the gateway so the new WhatsApp session comes online...");
+      try {
+        const restartResult = await onRestartGateway();
+        if (restartResult && restartResult.ok === false) {
+          throw new Error(restartResult.error || "Could not restart gateway");
+        }
+        if (cancelled) return;
+        appendLoginOutput("✅ Gateway restart triggered. Waiting for it to come back online...");
+        await restartStatusPoll.refresh();
+        if (cancelled) return;
+        setLoginRestartStatusChecked(true);
+      } catch (error) {
+        if (cancelled) return;
+        setLoginError(String(error?.message || "Could not restart gateway"));
+        appendLoginOutput(
+          "WhatsApp linked, but the gateway restart failed. You may need to restart it manually.",
+        );
+        setLoginRestartStatusChecked(false);
+        setLoginRestartingGateway(false);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    appendLoginOutput,
+    loadChannelAccounts,
+    loginAccount,
+    loginLinked,
+    loginMonitoring,
+    loginRestartingGateway,
+    loginStatusPoll.data?.linked,
+    onRefreshStatuses,
+    onRestartGateway,
+    restartStatusPoll.refresh,
+  ]);
+
+  useEffect(() => {
+    if (!loginAccount || !loginRestartingGateway) return;
+    if (!loginRestartStatusChecked) return;
+    const restartInProgress = !!restartStatusPoll.data?.restartInProgress;
+    const gatewayRunning = restartStatusPoll.data?.gatewayRunning !== false;
+    if (restartInProgress || !gatewayRunning) return;
+
+    let cancelled = false;
+
+    (async () => {
+      setLoginRestartedGateway(true);
+      setLoginMonitoring(false);
+      appendLoginOutput("✅ Gateway restart complete.");
+      showToast("Channel linked", "success");
+      await Promise.all([
+        loadChannelAccounts(),
+        Promise.resolve(onRefreshStatuses?.()),
+      ]);
+      if (cancelled) return;
+      clearChannelLoginModalState({
+        setLoginAccount,
+        setLoginOutput,
+        setLoginError,
+        setLoginRunning,
+        setLoginMonitoring,
+        setLoginCompleted,
+        setLoginLinked,
+        setLoginRestartingGateway,
+        setLoginRestartedGateway,
+      });
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    appendLoginOutput,
+    loadChannelAccounts,
+    loginAccount,
+    loginRestartStatusChecked,
+    loginRestartingGateway,
+    onRefreshStatuses,
+    restartStatusPoll.data?.gatewayRunning,
+    restartStatusPoll.data?.restartInProgress,
+  ]);
+
   const openCreateChannelModal = (provider) => {
     setMenuOpenId("");
     setEditingAccount({
@@ -396,6 +689,27 @@ export const Channels = ({
                       >
                         Edit
                       </${OverflowMenuItem}>
+                      ${channelId === "whatsapp"
+                        ? html`
+                            <${OverflowMenuItem}
+                              onClick=${() => {
+                                setMenuOpenId("");
+                                setLoginAccount(accountData);
+                                setLoginOutput("");
+                                setLoginError("");
+                                setLoginRunning(false);
+                                setLoginMonitoring(false);
+                                setLoginCompleted(false);
+                                setLoginLinked(false);
+                                setLoginRestartingGateway(false);
+                                setLoginRestartedGateway(false);
+                                setLoginRestartStatusChecked(false);
+                              }}
+                            >
+                              Link WhatsApp (QR)
+                            </${OverflowMenuItem}>
+                          `
+                        : null}
                       <${OverflowMenuItem}
                         className="text-status-error hover:text-status-error"
                         onClick=${() => {
@@ -518,6 +832,38 @@ export const Channels = ({
           setDeletingAccount(null);
         }}
       />
+      <${ChannelLoginModal}
+        visible=${!!loginAccount}
+        loading=${loginRunning || loginRestartingGateway}
+        title=${`Link ${String(loginAccount?.name || "WhatsApp").trim()} via QR`}
+        output=${loginOutput}
+        error=${loginError}
+        onRun=${handleRunChannelLogin}
+        onClose=${() => {
+          if (loginRunning || loginRestartingGateway) return;
+          clearChannelLoginModalState({
+            setLoginAccount,
+            setLoginOutput,
+            setLoginError,
+            setLoginRunning,
+            setLoginMonitoring,
+            setLoginCompleted,
+            setLoginLinked,
+            setLoginRestartingGateway,
+            setLoginRestartedGateway,
+          });
+        }}
+        runDisabled=${loginRunning || loginRestartingGateway || loginRestartedGateway}
+        runLabel=${loginLinked
+          ? loginRestartingGateway
+            ? "Restarting..."
+            : loginRestartedGateway
+              ? "Linked"
+              : "Awaiting restart..."
+          : "Generate QR"}
+        runLoadingLabel=${loginRestartingGateway ? "Restarting..." : "Running..."}
+        closeLabel=${loginRestartedGateway ? "Done" : "Close"}
+      />
     </div>
   `;
 };

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

@@ -5,6 +5,7 @@ import { Channels } from "../channels.js";
 import { ChannelOperationsPanel } from "../channel-operations-panel.js";
 import { Pairings } from "../pairings.js";
 import { DevicePairings } from "../device-pairings.js";
+import { ActionButton } from "../action-button.js";
 import { Google } from "../google/index.js";
 import { Features } from "../features.js";
 import { GeneralDoctorWarning } from "../doctor/general-warning.js";
@@ -14,6 +15,11 @@ import { useGeneralTab } from "./use-general-tab.js";
 
 const html = htm.bind(h);
 
+const openWhatsAppQrModal = () => {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent("alphaclaw:open-whatsapp-qr"));
+};
+
 export const GeneralTab = ({
   statusData = null,
   watchdogData = null,
@@ -39,6 +45,23 @@ export const GeneralTab = ({
     isActive,
     restartSignal,
   });
+  const whatsappStatus = state.channels?.whatsapp || null;
+  const whatsappAccounts =
+    whatsappStatus?.accounts && typeof whatsappStatus.accounts === "object"
+      ? whatsappStatus.accounts
+      : {};
+  const hasWhatsAppAwaitingPairing =
+    Object.keys(whatsappAccounts).length > 0
+      ? Object.values(whatsappAccounts).some(
+          (account) => account && account.status !== "paired",
+        )
+      : String(whatsappStatus?.status || "").trim() === "configured";
+  const showWhatsAppPairingCard =
+    state.hasUnpaired &&
+    !state.pairingStatusRefreshing &&
+    Array.isArray(state.pending) &&
+    state.pending.length === 0 &&
+    hasWhatsAppAwaitingPairing;
 
   return html`
     <div class="space-y-4">
@@ -64,17 +87,42 @@ export const GeneralTab = ({
             agents=${agents}
             onNavigate=${onNavigate}
             onRefreshStatuses=${onRefreshStatuses}
+            onRestartGateway=${onRestartGateway}
           />
         `}
         pairingsSection=${html`
-          <${Pairings}
-            pending=${state.pending}
-            channels=${state.channels}
-            visible=${state.hasUnpaired}
-            statusRefreshing=${state.pairingStatusRefreshing}
-            onApprove=${actions.handleApprove}
-            onReject=${actions.handleReject}
-          />
+          ${showWhatsAppPairingCard
+            ? html`
+                <div class="bg-surface border border-border rounded-xl p-4">
+                  <h2 class="card-label mb-3">Pending Pairings</h2>
+                  <div class="text-center py-4 space-y-3">
+                    <img
+                      src="/assets/icons/whatsapp.svg"
+                      alt=""
+                      class="w-10 h-10 mx-auto"
+                      aria-hidden="true"
+                    />
+                    <p class="text-body text-sm font-medium">WhatsApp needs to be linked</p>
+                    <p class="text-fg-dim text-xs">Scan the QR code to finish pairing this channel.</p>
+                    <${ActionButton}
+                      onClick=${openWhatsAppQrModal}
+                      tone="primary"
+                      size="sm"
+                      idleLabel="Open QR Code"
+                    />
+                  </div>
+                </div>
+              `
+            : html`
+                <${Pairings}
+                  pending=${state.pending}
+                  channels=${state.channels}
+                  visible=${state.hasUnpaired}
+                  statusRefreshing=${state.pairingStatusRefreshing}
+                  onApprove=${actions.handleApprove}
+                  onReject=${actions.handleReject}
+                />
+              `}
         `}
       />
       <${Features} onSwitchTab=${onSwitchTab} />