access fix

frontend/src/App.tsx

@@ -19,8 +19,10 @@ import { TestingCenterPage } from './features/testing/TestingCenterPage'
 import { LogsPage } from './features/logs/LogsPage'
 import { AnalyticsPage } from './features/analytics/AnalyticsPage'
 import { WhatsAppSetupPage } from './features/whatsapp/WhatsAppSetupPage'
+import { WhatsAppTokenPage } from './features/whatsapp/WhatsAppTokenPage'
 import { MetaOverviewPage } from './features/meta/OverviewPage'
 import { MetaConnectionsPage } from './features/meta/ConnectionsPage'
+import { MetaTokenPage } from './features/meta/TokenPage'
 import { MetaPagesPage } from './features/meta/PagesPage'
 import { MetaAdAccountsPage } from './features/meta/AdAccountsPage'
 import { MetaCampaignsPage } from './features/meta/CampaignsPage'
@@ -72,8 +74,10 @@ export default function App() {
               <Route path="templates" element={<TemplatesPage />} />
               <Route path="messaging" element={<ComposeMessage />} />
               <Route path="whatsapp" element={<WhatsAppSetupPage />} />
+              <Route path="whatsapp/token" element={<WhatsAppTokenPage />} />
               <Route path="meta" element={<MetaOverviewPage />} />
               <Route path="meta/connections" element={<MetaConnectionsPage />} />
+              <Route path="meta/token" element={<MetaTokenPage />} />
               <Route path="meta/pages" element={<MetaPagesPage />} />
               <Route path="meta/pages/:pageId" element={<MetaPagesPage />} />
               <Route path="meta/ad-accounts" element={<MetaAdAccountsPage />} />

frontend/src/components/AppShell.tsx

@@ -30,13 +30,15 @@ const groups = [
   ]},
   { label: 'Messages', links: [
     { label: 'Send a message', path: '/console/messaging', icon: MessageSquareText },
-    { label: 'WhatsApp', path: '/console/whatsapp', icon: MessageCircle },
+    { label: 'WhatsApp', path: '/console/whatsapp', icon: MessageCircle, end: true },
+    { label: 'WhatsApp token', path: '/console/whatsapp/token', icon: KeyRound },
     { label: 'Campaigns', path: '/console/campaigns', icon: Zap },
     { label: 'Templates', path: '/console/templates', icon: BookOpen },
   ]},
   { label: 'Advertising', links: [
     { label: 'Overview', path: '/console/meta', icon: LayoutDashboard, end: true },
     { label: 'Facebook connection', path: '/console/meta/connections', icon: Link2 },
+    { label: 'Facebook token', path: '/console/meta/token', icon: KeyRound },
     { label: 'Facebook Pages', path: '/console/meta/pages', icon: Globe },
     { label: 'Ad accounts', path: '/console/meta/ad-accounts', icon: CircleDollarSign },
     { label: 'Ad campaigns', path: '/console/meta/campaigns', icon: Megaphone },

frontend/src/features/meta/ConnectionsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, type FormEvent } from 'react'
+import { useState } from 'react'
 import { Copy } from 'lucide-react'
 import { useSearchParams } from 'react-router-dom'
 import { metaApi, type MetaConnection, MetaRequestError } from './api'
@@ -35,22 +35,13 @@ export function MetaConnectionsPage() {
   return (
     <MetaScreen
       title="Facebook connection"
-      subtitle="Sign in, or paste an access token. Urmi keeps the connection private and does not show the token here."
+      subtitle="Sign in once for this workspace. Urmi keeps the connection private and does not show it here."
       actions={<button className="primary-button" type="button" onClick={connect} disabled={busy}>{connection?.connected ? 'Reconnect' : 'Connect Facebook'}</button>}
     >
       {params.get('connected') && <p className="meta-banner">Facebook is connected for this workspace.</p>}
       {params.get('error') && <p className="meta-banner is-error">{params.get('error')}</p>}
       {error && <MetaState error={error} />}
       {connection?.oauth_redirect_uri && <MetaOAuthSetup redirectUri={connection.oauth_redirect_uri} />}
-      <MetaTokenSetup
-        onSaved={() => {
-          status.reload()
-          businesses.reload()
-          pages.reload()
-          accounts.reload()
-        }}
-        onError={setError}
-      />
       {status.loading || !connection ? <MetaLoading /> : (
         <div className="meta-split">
           <article className="panel">
@@ -63,7 +54,7 @@ export function MetaConnectionsPage() {
                 <p><span>Selected Page</span><strong>{connection.selected_page_name || 'Not selected'}</strong></p>
                 <p><span>Selected ad account</span><strong>{connection.selected_ad_account_name || 'Not selected'}</strong></p>
               </div>
-            ) : <MetaEmpty title="Facebook is not connected" body="Sign in with Facebook, or save an access token above. Urmi only lists the Pages and ad accounts that connection allows." />}
+            ) : <MetaEmpty title="Facebook is not connected" body="Sign in with Facebook. Urmi only lists the Pages and ad accounts that login allows." />}
           </article>
           <article className="panel">
             <div className="panel-heading"><h2>Granted permissions</h2></div>
@@ -105,51 +96,6 @@ export function MetaConnectionsPage() {
   )
 }
 
-function MetaTokenSetup({ onSaved, onError }: { onSaved: () => void; onError: (error: MetaRequestError | null) => void }) {
-  const [token, setToken] = useState('')
-  const [saving, setSaving] = useState(false)
-  const [saved, setSaved] = useState(false)
-
-  async function submit(event: FormEvent) {
-    event.preventDefault()
-    setSaving(true)
-    setSaved(false)
-    onError(null)
-    try {
-      await metaApi.saveToken(token.trim())
-      setToken('')
-      setSaved(true)
-      onSaved()
-    } catch (err) {
-      onError(err instanceof MetaRequestError ? err : new MetaRequestError('This token could not be saved'))
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <form className="panel meta-token-setup" onSubmit={submit}>
-      <div className="panel-heading">
-        <div>
-          <h2>Use an access token</h2>
-          <p>Paste a user access token from Meta instead of signing in here. Urmi checks it, stores it for this workspace, and does not show it again.</p>
-        </div>
-      </div>
-      <label className="explorer-input">
-        <strong>Access token</strong>
-        <span>It needs permission to see your Pages, business, or ad accounts.</span>
-        <input type="password" value={token} onChange={(event) => setToken(event.target.value)} autoComplete="off" required />
-      </label>
-      <div className="meta-token-actions">
-        <button className="primary-button" type="submit" disabled={saving || token.trim().length < 20}>
-          {saving ? 'Checking token…' : 'Save token'}
-        </button>
-        {saved && <span>Token saved for this workspace.</span>}
-      </div>
-    </form>
-  )
-}
-
 function MetaOAuthSetup({ redirectUri }: { redirectUri: string }) {
   const [copied, setCopied] = useState(false)
 

frontend/src/features/meta/TokenPage.tsx

@@ -0,0 +1,52 @@
+import { useState, type FormEvent } from 'react'
+import { metaApi, MetaRequestError, type MetaConnection } from './api'
+import { MetaScreen, MetaState, StatusPill } from './ui'
+
+export function MetaTokenPage() {
+  const [token, setToken] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<MetaRequestError | null>(null)
+  const [connection, setConnection] = useState<MetaConnection | null>(null)
+
+  async function submit(event: FormEvent) {
+    event.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      setConnection(await metaApi.saveToken(token.trim()))
+      setToken('')
+    } catch (err) {
+      setConnection(null)
+      setError(err instanceof MetaRequestError ? err : new MetaRequestError('This token could not be saved'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <MetaScreen
+      title="Facebook token"
+      subtitle="Paste a user access token for Pages and ads. This stays separate from Facebook sign-in."
+    >
+      {error && <MetaState error={error} />}
+      <form className="panel meta-token-setup" onSubmit={submit}>
+        <label className="explorer-input">
+          <strong>Access token</strong>
+          <span>It needs permission to see your Pages, business, or ad accounts. Urmi stores it and does not show it again.</span>
+          <input type="password" value={token} onChange={(event) => setToken(event.target.value)} autoComplete="off" required />
+        </label>
+        <div className="meta-token-actions">
+          <button className="primary-button" type="submit" disabled={saving || token.trim().length < 20}>
+            {saving ? 'Checking token…' : 'Save token'}
+          </button>
+        </div>
+      </form>
+      {connection && (
+        <article className="panel">
+          <div className="panel-heading"><h2>{connection.user_name || 'Facebook user'}</h2><StatusPill value={connection.status} /></div>
+          <p className="meta-muted">This token is saved for the workspace. Pages and ad accounts now use it.</p>
+        </article>
+      )}
+    </MetaScreen>
+  )
+}

frontend/src/features/whatsapp/WhatsAppSetupPage.tsx

@@ -1,6 +1,7 @@
 import { Check, ChevronLeft, Copy, ExternalLink, Loader2, MessageCircle, MoreHorizontal, Plus, RefreshCw } from 'lucide-react'
+import { Link } from 'react-router-dom'
 import { CustomerWhatsAppInbox } from './CustomerWhatsAppInbox'
-import { useEffect, useRef, useState, type FormEvent } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   whatsappApi,
   type WhatsAppAccount,
@@ -138,10 +139,6 @@ export function WhatsAppSetupPage() {
   const [developer, setDeveloper] = useState<WhatsAppDeveloperConfig | null>(null)
   const [logs, setLogs] = useState<WhatsAppAccountLogs | null>(null)
   const [copied, setCopied] = useState(false)
-  const [showToken, setShowToken] = useState(false)
-  const [tokenValue, setTokenValue] = useState('')
-  const [wabaId, setWabaId] = useState('')
-  const [phoneNumberId, setPhoneNumberId] = useState('')
   const [pins, setPins] = useState<Record<string, string>>({})
   const sessionRef = useRef<SignupSession | null>(null)
   const codeRef = useRef<string | null>(null)
@@ -261,41 +258,6 @@ export function WhatsAppSetupPage() {
   reportRef.current = reportSession
   finishRef.current = finishIfReady
 
-  function mergeAccounts(incoming: WhatsAppAccount[]) {
-    if (!incoming.length) return
-    setAccounts((current) => {
-      const byId = new Map(incoming.map((account) => [account.id, account]))
-      const merged = current.map((account) => byId.get(account.id) || account)
-      for (const account of incoming) {
-        if (!merged.some((item) => item.id === account.id)) merged.unshift(account)
-      }
-      return merged
-    })
-  }
-
-  async function submitToken(event: FormEvent) {
-    event.preventDefault()
-    setBusy(true)
-    setError('')
-    setNotice('')
-    try {
-      const payload = await whatsappApi.connectToken({
-        access_token: tokenValue.trim(),
-        waba_id: wabaId.trim(),
-        phone_number_id: phoneNumberId.trim() || null,
-      })
-      setResult(payload)
-      mergeAccounts(payload.accounts)
-      setTokenValue('')
-      setShowToken(false)
-      setPhase('result')
-    } catch (reason) {
-      setError(reason instanceof Error ? reason.message : 'WhatsApp could not be connected')
-    } finally {
-      setBusy(false)
-    }
-  }
-
   async function finishIfReady() {
     const session = sessionRef.current
     const code = codeRef.current
@@ -437,26 +399,9 @@ export function WhatsAppSetupPage() {
               </p>
             </div>
             {accounts.length > 0 && phase !== 'provisioning' && (
-              <div className="wa-biz-heading-actions">
-                <button
-                  className="secondary-button"
-                  type="button"
-                  disabled={busy}
-                  onClick={() => {
-                    if (phase === 'list' && showToken) {
-                      setShowToken(false)
-                      return
-                    }
-                    setShowToken(true)
-                    if (phase === 'result') setPhase('list')
-                  }}
-                >
-                  {phase === 'list' && showToken ? 'Hide token setup' : 'Use a token'}
-                </button>
-                <button className="primary-button" type="button" onClick={() => void startEmbeddedSignup()} disabled={busy}>
-                  <Plus size={16} /> Connect account
-                </button>
-              </div>
+              <button className="primary-button" type="button" onClick={() => void startEmbeddedSignup()} disabled={busy}>
+                <Plus size={16} /> Connect account
+              </button>
             )}
           </div>
         </div>
@@ -480,10 +425,7 @@ export function WhatsAppSetupPage() {
               {busy ? <Loader2 size={16} className="wa-spin" /> : null}
               Continue with Facebook
             </button>
-            <button className="text-button wa-token-toggle" type="button" onClick={() => setShowToken((open) => !open)}>
-              {showToken ? 'Hide token setup' : 'Use an access token instead'}
-            </button>
-            {showToken && <TokenConnectForm embedded busy={busy} tokenValue={tokenValue} wabaId={wabaId} phoneNumberId={phoneNumberId} onToken={setTokenValue} onWaba={setWabaId} onPhone={setPhoneNumberId} onSubmit={submitToken} />}
+            <Link className="text-button wa-token-toggle" to="/console/whatsapp/token">Have an access token? Connect it separately</Link>
             <small>
               {config?.ready
                 ? 'Setup usually takes a few minutes. Facebook decides which businesses, accounts, and numbers you can use.'
@@ -546,10 +488,6 @@ export function WhatsAppSetupPage() {
         </section>
       )}
 
-      {phase === 'list' && showToken && (
-        <TokenConnectForm busy={busy} tokenValue={tokenValue} wabaId={wabaId} phoneNumberId={phoneNumberId} onToken={setTokenValue} onWaba={setWabaId} onPhone={setPhoneNumberId} onSubmit={submitToken} />
-      )}
-
       {phase === 'list' && (
         <div className="wa-biz-list">
           {accounts.map((account) => (
@@ -819,56 +757,6 @@ export function WhatsAppSetupPage() {
   )
 }
 
-function TokenConnectForm({
-  embedded = false,
-  busy,
-  tokenValue,
-  wabaId,
-  phoneNumberId,
-  onToken,
-  onWaba,
-  onPhone,
-  onSubmit,
-}: {
-  embedded?: boolean
-  busy: boolean
-  tokenValue: string
-  wabaId: string
-  phoneNumberId: string
-  onToken: (value: string) => void
-  onWaba: (value: string) => void
-  onPhone: (value: string) => void
-  onSubmit: (event: FormEvent) => void
-}) {
-  return (
-    <form className={embedded ? 'wa-token-embed' : 'wa-biz-card wa-token-card'} onSubmit={onSubmit}>
-      <h2>Use your own access token</h2>
-      <p>Paste the token and WhatsApp Business account ID from Meta. Urmi stores them for this workspace and does not show the token again.</p>
-      <div className="wa-token-form">
-        <label className="explorer-input">
-          <strong>Access token</strong>
-          <span>A token that can manage this WhatsApp account and send messages.</span>
-          <input type="password" value={tokenValue} onChange={(event) => onToken(event.target.value)} autoComplete="off" required />
-        </label>
-        <label className="explorer-input">
-          <strong>WhatsApp Business account ID</strong>
-          <span>The account ID Meta shows for this business.</span>
-          <input value={wabaId} onChange={(event) => onWaba(event.target.value)} inputMode="numeric" required />
-        </label>
-        <label className="explorer-input">
-          <strong>Phone number ID</strong>
-          <span>Optional. Add it if you want a specific number connected with this account.</span>
-          <input value={phoneNumberId} onChange={(event) => onPhone(event.target.value)} inputMode="numeric" />
-        </label>
-        <button className="primary-button" type="submit" disabled={busy}>
-          {busy ? <Loader2 size={16} className="wa-spin" /> : null}
-          Save and connect
-        </button>
-      </div>
-    </form>
-  )
-}
-
 function StatusDot({ status, label }: { status: string; label?: string }) {
   const tone = status === 'connected' || status === 'active' ? 'ok' : status === 'unavailable' || status === 'failed' || status === 'expired' || status === 'disconnected' ? 'bad' : 'wait'
   return (

frontend/src/features/whatsapp/WhatsAppTokenPage.tsx

@@ -0,0 +1,86 @@
+import { Loader2 } from 'lucide-react'
+import { useState, type FormEvent } from 'react'
+import { Link } from 'react-router-dom'
+import { whatsappApi, type WhatsAppSignupResult } from '../../lib/api'
+
+export function WhatsAppTokenPage() {
+  const [token, setToken] = useState('')
+  const [wabaId, setWabaId] = useState('')
+  const [phoneNumberId, setPhoneNumberId] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<WhatsAppSignupResult | null>(null)
+
+  async function submit(event: FormEvent) {
+    event.preventDefault()
+    setBusy(true)
+    setError('')
+    setResult(null)
+    try {
+      const payload = await whatsappApi.connectToken({
+        access_token: token.trim(),
+        waba_id: wabaId.trim(),
+        phone_number_id: phoneNumberId.trim() || null,
+      })
+      setResult(payload)
+      setToken('')
+      if (payload.status === 'failed' || payload.status === 'expired') setError(payload.message)
+    } catch (reason) {
+      setError(reason instanceof Error ? reason.message : 'This token could not be saved')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const account = result?.accounts[0]
+
+  return (
+    <div className="wa-biz wa-token-page">
+      <div className="account-heading">
+        <span className="eyebrow">Messages</span>
+        <h1>WhatsApp token</h1>
+        <p>Paste a token from Meta. This is separate from Facebook signup and does not ask Meta for signup-only fields.</p>
+      </div>
+
+      {error && <p className="auth-error">{error}</p>}
+
+      <form className="wa-biz-card" onSubmit={submit}>
+        <div className="wa-token-form">
+          <label className="explorer-input">
+            <strong>Access token</strong>
+            <span>From WhatsApp → API Setup, or a system user token that can send on this account.</span>
+            <input type="password" value={token} onChange={(event) => setToken(event.target.value)} autoComplete="off" required />
+          </label>
+          <label className="explorer-input">
+            <strong>WhatsApp Business account ID</strong>
+            <span>The numeric ID on the same API Setup page.</span>
+            <input value={wabaId} onChange={(event) => setWabaId(event.target.value)} inputMode="numeric" required />
+          </label>
+          <label className="explorer-input">
+            <strong>Phone number ID</strong>
+            <span>Optional. Use it when the account has more than one number.</span>
+            <input value={phoneNumberId} onChange={(event) => setPhoneNumberId(event.target.value)} inputMode="numeric" />
+          </label>
+          <button className="primary-button" type="submit" disabled={busy}>
+            {busy ? <Loader2 size={16} className="wa-spin" /> : null}
+            Save token
+          </button>
+        </div>
+      </form>
+
+      {result && !error && (
+        <section className="wa-biz-card wa-token-result">
+          <h2>{result.status === 'connected' ? 'Token saved' : 'Token saved, one step left'}</h2>
+          <p>{result.message}</p>
+          {account && (
+            <dl className="wa-biz-facts">
+              <div><dt>Account</dt><dd>{account.name}</dd></div>
+              <div><dt>Phone</dt><dd>{account.primary_phone?.display_phone || account.primary_phone?.phone_number_id || 'Not added yet'}</dd></div>
+            </dl>
+          )}
+          <Link className="primary-button" to="/console/whatsapp">Open WhatsApp</Link>
+        </section>
+      )}
+    </div>
+  )
+}

frontend/src/index.css

@@ -1839,6 +1839,9 @@ main { padding: 30px clamp(20px, 3vw, 44px) 50px; }
 .wa-token-embed h2 { margin-top: 0; }
 .wa-token-form { display: grid; gap: 12px; margin-top: 16px; }
 .wa-token-form .primary-button { justify-self: start; display: inline-flex; align-items: center; gap: 8px; }
+.wa-token-page { max-width: 720px; }
+.wa-token-result { margin-top: 16px; }
+.wa-token-result .primary-button { margin-top: 8px; text-decoration: none; display: inline-flex; }
 .wa-biz-heading h1 { margin: 6px 0; }
 .wa-biz-heading p { max-width: 640px; }
 .wa-biz-notice { margin: 0 0 16px; padding: 12px 14px; border: 1px solid #d7e6ff; border-radius: 12px; background: #f4f8ff; color: #1d4f91; font-size: 13px; }