Add WhatsApp channel support and QR login flow parity

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

@@ -15,6 +15,7 @@ const kChannelEnvKeys = {
   telegram: "TELEGRAM_BOT_TOKEN",
   discord: "DISCORD_BOT_TOKEN",
   slack: "SLACK_BOT_TOKEN",
+  whatsapp: "WHATSAPP_OWNER_NUMBER",
 };
 
 const kChannelExtraEnvKeys = {
@@ -152,10 +153,13 @@ export const CreateChannelModal = ({
     }
     setName(providerLabel);
   }, [provider, providerHasAccounts, nameEditedManually, isEditMode]);
+  const normalizedProvider = String(provider || "").trim();
   const isSingleAccountProvider =
-    String(provider || "").trim() === "discord" ||
-    String(provider || "").trim() === "slack";
-  const needsAppToken = String(provider || "").trim() === "slack";
+    normalizedProvider === "discord" ||
+    normalizedProvider === "slack" ||
+    normalizedProvider === "whatsapp";
+  const needsAppToken = normalizedProvider === "slack";
+  const isWhatsApp = normalizedProvider === "whatsapp";
 
   const accountId = useMemo(() => {
     if (isEditMode) {
@@ -326,20 +330,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>
 

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}>
+  `;
+};