agent-nuvira 2.7.0 → 2.7.2

package/dist/web-dashboard/src/components/TracePanel.js

@@ -0,0 +1,306 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = TracePanel;
+const react_1 = require("react");
+const api_1 = require("../api");
+// ─── Helpers ────────────────────────────────────────────────────────────────
+const PROVIDER_ICONS = {
+    local: '💻', groq: '🟢', nim: '🔶', gemini: '🔷', openrouter: '🟣',
+};
+const AGENT_ICONS = {
+    planner: '🗺️', writer: '✍️', reviewer: '🔎', tester: '🧪', debugger: '🐛',
+    runner: '🏃', 'context-gatherer': '📂', memory: '🧠', 'self-improver': '📈',
+};
+function providerIcon(provider) {
+    return PROVIDER_ICONS[provider] || '🔌';
+}
+function agentIcon(agent) {
+    return AGENT_ICONS[agent] || '🤖';
+}
+function timeAgo(ts) {
+    const diff = Date.now() - ts;
+    if (diff < 60_000)
+        return 'just now';
+    if (diff < 3_600_000)
+        return `${Math.floor(diff / 60_000)}m ago`;
+    if (diff < 86_400_000)
+        return `${Math.floor(diff / 3_600_000)}h ago`;
+    return `${new Date(ts).toLocaleDateString()}`;
+}
+function fmtDuration(ms) {
+    if (ms === undefined)
+        return '—';
+    if (ms < 1000)
+        return `${ms}ms`;
+    if (ms < 60_000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.floor(ms / 60_000)}m ${Math.floor((ms % 60_000) / 1000)}s`;
+}
+function fmtTokens(n) {
+    if (n === undefined || n === null)
+        return '0';
+    if (n >= 1_000_000)
+        return `${(n / 1_000_000).toFixed(1)}M`;
+    if (n >= 1_000)
+        return `${(n / 1_000).toFixed(1)}K`;
+    return String(n);
+}
+function SectionCard({ icon, title, subtitle, children }) {
+    return (<div style={{
+            background: '#161b22', borderRadius: 12,
+            border: '1px solid #21262d', padding: '18px 20px', marginBottom: 16,
+        }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
+        <span style={{ fontSize: 20 }}>{icon}</span>
+        <h3 style={{ fontSize: 15, fontWeight: 600, color: '#e6edf3', margin: 0 }}>{title}</h3>
+      </div>
+      {subtitle && <p style={{ fontSize: 12, color: '#8b949e', margin: '2px 0 12px 0' }}>{subtitle}</p>}
+      {!subtitle && <div style={{ height: 6 }}/>}
+      {children}
+    </div>);
+}
+function EmptyNote() {
+    return (<div style={{
+            background: '#0d1117', border: '1px dashed #30363d', borderRadius: 10,
+            padding: '18px 20px', color: '#8b949e', fontSize: 13, textAlign: 'center',
+        }}>
+      🔍 No reasoning traces yet — every LLM call in a <code style={{ color: '#58a6ff' }}>buff execute</code> pipeline
+      is recorded to <code style={{ color: '#58a6ff' }}>reasoning-traces.json</code>. Run a pipeline, then replay
+      it here or with <code style={{ color: '#58a6ff' }}>buff trace replay &lt;id&gt;</code>.
+    </div>);
+}
+function StepRow({ step }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const statusColor = step.success ? '#3fb950' : '#f85149';
+    const statusLabel = step.success ? 'ok' : 'failed';
+    return (<div style={{
+            background: '#0d1117', border: '1px solid #21262d', borderRadius: 8,
+            marginBottom: 8, overflow: 'hidden',
+        }}>
+      <button onClick={() => setOpen(!open)} style={{
+            width: '100%', background: 'none', border: 'none', cursor: 'pointer',
+            padding: '10px 14px', textAlign: 'left', display: 'flex',
+            alignItems: 'center', gap: 10, color: 'inherit',
+        }}>
+        <span style={{ width: 26, fontSize: 16 }}>{agentIcon(step.agentType)}</span>
+        <span style={{
+            width: 130, fontSize: 12, fontWeight: 600, color: '#e6edf3',
+            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+        }} title={step.agentType}>
+          {step.agentType}
+        </span>
+        <span style={{
+            flex: 1, fontSize: 12, color: '#8b949e', fontFamily: "'SFMono-Regular', Consolas, monospace",
+            whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+        }} title={`${step.provider}/${step.model}`}>
+          {providerIcon(step.provider)} {step.provider}/{step.model}
+        </span>
+        <span style={{ width: 70, fontSize: 11, color: '#6e7681', textAlign: 'right' }}>
+          {fmtDuration(step.latencyMs)}
+        </span>
+        <span style={{
+            width: 86, fontSize: 11, color: '#6e7681', fontFamily: "'SFMono-Regular', Consolas, monospace", textAlign: 'right',
+        }}>
+          {fmtTokens(step.inputTokens)}→{fmtTokens(step.outputTokens)} tok
+        </span>
+        <span style={{ width: 46, fontSize: 11, color: statusColor, textAlign: 'right' }}>
+          {statusLabel}
+        </span>
+        <span style={{ width: 22, fontSize: 11, textAlign: 'right' }}>
+          {step.escalated ? <span title="Repair escalated to a stronger routed model (v1.60.4)">🚀</span> : ''}
+        </span>
+        <span style={{ fontSize: 11, color: '#6e7681' }}>{open ? '▾' : '▸'}</span>
+      </button>
+
+      {open && (<div style={{ padding: '0 14px 12px 50px', fontSize: 12 }}>
+          {step.taskId && (<div style={{ color: '#6e7681', marginBottom: 4 }}>
+              Task: <span style={{ color: '#8b949e', fontFamily: "'SFMono-Regular', Consolas, monospace" }}>{step.taskId}</span>
+            </div>)}
+          {step.description && (<div style={{ color: '#8b949e', marginBottom: 6 }}>{step.description}</div>)}
+          {step.routing && (<div style={{ marginBottom: 6 }}>
+              <span style={{
+                    fontSize: 10, padding: '1px 8px', borderRadius: 10,
+                    background: step.escalated ? '#3d2c00' : '#1c2128',
+                    border: step.escalated ? '1px solid #d29922' : '1px solid #58a6ff',
+                    color: step.escalated ? '#d29922' : '#58a6ff',
+                }}>
+                {step.escalated ? '🚀 escalated auto → ' : '🤖 auto → '}{step.routing.provider}/{step.routing.model} · score {step.routing.score.toFixed(3)} · {step.routing.complexity}
+              </span>
+              {step.escalated && (<div style={{ color: '#d29922', marginTop: 4, fontSize: 11 }}>
+                  Repair escalated to a stronger routed model (next complexity level).
+                </div>)}
+              {step.routing.explanation && (<div style={{ color: '#6e7681', marginTop: 4, fontSize: 11 }}>
+                  {step.routing.explanation}
+                </div>)}
+            </div>)}
+          {step.error && (<div style={{ color: '#f85149', marginBottom: 6 }}>⚠️ {step.error.slice(0, 300)}</div>)}
+          <div style={{ color: '#6e7681', margin: '6px 0 3px 0' }}>
+            Prompt <span style={{ fontFamily: "'SFMono-Regular', Consolas, monospace" }}>#{step.promptDigest}</span> · {step.promptPreview.length}+ chars:
+          </div>
+          <pre style={{
+                background: '#161b22', border: '1px solid #21262d', borderRadius: 6,
+                padding: 8, margin: 0, color: '#8b949e', whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word', maxHeight: 180, overflowY: 'auto',
+                fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 11,
+            }}>
+            {step.promptPreview.slice(0, 900)}
+          </pre>
+          <div style={{ color: '#6e7681', margin: '8px 0 3px 0' }}>
+            Response ({fmtTokens(step.responseLength)} chars):
+          </div>
+          <pre style={{
+                background: '#161b22', border: '1px solid #21262d', borderRadius: 6,
+                padding: 8, margin: 0, color: '#c9d1d9', whiteSpace: 'pre-wrap',
+                wordBreak: 'break-word', maxHeight: 240, overflowY: 'auto',
+                fontFamily: "'SFMono-Regular', Consolas, monospace", fontSize: 11,
+            }}>
+            {step.responsePreview.slice(0, 1200)}
+          </pre>
+        </div>)}
+    </div>);
+}
+function TraceDetail({ trace }) {
+    const [steps, setSteps] = (0, react_1.useState)(trace.steps ?? null);
+    const [error, setError] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (trace.steps) {
+            setSteps(trace.steps);
+            return;
+        }
+        let cancelled = false;
+        api_1.dashboardAPI.fetchTraceDetail(trace.id).then((detail) => {
+            if (cancelled)
+                return;
+            if (detail?.steps)
+                setSteps(detail.steps);
+            else
+                setError(true);
+        });
+        return () => { cancelled = true; };
+    }, [trace.id, trace.steps]);
+    const statusIcon = trace.success === true ? '✅' : trace.success === false ? '❌' : '⏳';
+    const statusLabel = trace.success === true ? 'success' : trace.success === false ? 'failed' : 'in progress';
+    return (<SectionCard icon={statusIcon} title={`${trace.id} — ${statusLabel}`} subtitle={trace.goal}>
+      <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 12 }}>
+        <span style={{ fontSize: 11, padding: '2px 10px', borderRadius: 12, background: '#0d1117', border: '1px solid #30363d', color: '#8b949e' }}>
+          🕓 {timeAgo(trace.startedAt)}
+        </span>
+        <span style={{ fontSize: 11, padding: '2px 10px', borderRadius: 12, background: '#0d1117', border: '1px solid #30363d', color: '#8b949e' }}>
+          ⏱ {fmtDuration(trace.durationMs)}
+        </span>
+        <span style={{ fontSize: 11, padding: '2px 10px', borderRadius: 12, background: '#0d1117', border: '1px solid #30363d', color: '#8b949e' }}>
+          🔢 {steps?.length ?? '?'} call(s)
+        </span>
+        {steps && steps.some((s) => s.escalated) && (<span style={{ fontSize: 11, padding: '2px 10px', borderRadius: 12, background: '#3d2c00', border: '1px solid #d29922', color: '#d29922' }}>
+            🚀 {steps.filter((s) => s.escalated).length} escalated repair(s)
+          </span>)}
+        {trace.totalTokens !== undefined && (<span style={{ fontSize: 11, padding: '2px 10px', borderRadius: 12, background: '#0d1117', border: '1px solid #30363d', color: '#8b949e' }}>
+            🧮 {fmtTokens(trace.totalTokens)} tok
+          </span>)}
+      </div>
+
+      {error && (<div style={{ color: '#f85149', fontSize: 12, marginBottom: 10 }}>
+          Could not load trace steps (trace may have been deleted).
+        </div>)}
+      {steps === null && !error && (<div style={{ color: '#8b949e', fontSize: 12 }}>Loading steps…</div>)}
+      {steps && steps.length === 0 && (<div style={{ color: '#8b949e', fontSize: 12 }}>No LLM calls recorded in this trace.</div>)}
+      {steps && steps.map((step) => <StepRow key={step.seq} step={step}/>)}
+    </SectionCard>);
+}
+function TraceList({ traces }) {
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    if (selected) {
+        return (<>
+        <button onClick={() => setSelected(null)} style={{
+                background: '#21262d', border: '1px solid #30363d', color: '#e6edf3',
+                borderRadius: 8, padding: '6px 14px', fontSize: 12, cursor: 'pointer',
+                marginBottom: 12,
+            }}>
+          ← Back to traces
+        </button>
+        <TraceDetail trace={selected}/>
+      </>);
+    }
+    return (<div>
+      {traces.map((trace) => {
+            const icon = trace.success === true ? '✅' : trace.success === false ? '❌' : '⏳';
+            const agents = trace.steps ? [...new Set(trace.steps.map((s) => s.agentType))].join(', ') : '';
+            return (<button key={trace.id} onClick={() => setSelected(trace)} style={{
+                    width: '100%', background: '#0d1117', border: '1px solid #21262d',
+                    borderRadius: 10, padding: '12px 16px', marginBottom: 8,
+                    cursor: 'pointer', textAlign: 'left', color: 'inherit',
+                    transition: 'border-color 0.2s, box-shadow 0.2s',
+                }} onMouseEnter={(e) => {
+                    e.currentTarget.style.borderColor = '#58a6ff';
+                    e.currentTarget.style.boxShadow = '0 2px 10px #58a6ff22';
+                }} onMouseLeave={(e) => {
+                    e.currentTarget.style.borderColor = '#21262d';
+                    e.currentTarget.style.boxShadow = 'none';
+                }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+              <span>{icon}</span>
+              <span style={{
+                    fontSize: 11, color: '#58a6ff', fontFamily: "'SFMono-Regular', Consolas, monospace",
+                }}>
+                {trace.id}
+              </span>
+              <span style={{ fontSize: 11, color: '#6e7681', marginLeft: 'auto' }}>
+                {timeAgo(trace.startedAt)}
+              </span>
+            </div>
+            <div style={{ fontSize: 13, color: '#e6edf3', marginBottom: 6 }}>{trace.goal}</div>
+            <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', fontSize: 11, color: '#8b949e' }}>
+              <span>🔢 {trace.stepCount ?? 0} call(s)</span>
+              <span>⏱ {fmtDuration(trace.durationMs)}</span>
+              {trace.failedSteps ? <span style={{ color: '#f85149' }}>❌ {trace.failedSteps} failed</span> : <span style={{ color: '#3fb950' }}>✓ all ok</span>}
+              {trace.totalTokens !== undefined && <span>🧮 {fmtTokens(trace.totalTokens)} tok</span>}
+              {agents && <span>🤖 {agents.slice(0, 60)}</span>}
+            </div>
+          </button>);
+        })}
+    </div>);
+}
+function TracePanel() {
+    const [traces, setTraces] = (0, react_1.useState)(null);
+    const [loadError, setLoadError] = (0, react_1.useState)(false);
+    const load = (0, react_1.useCallback)(() => {
+        api_1.dashboardAPI.fetchTraces().then((t) => {
+            if (t) {
+                setTraces(t);
+                setLoadError(false);
+            }
+            else {
+                // Server unreachable or empty payload — surface a clear error state
+                // instead of showing the spinner forever.
+                setLoadError(true);
+            }
+        });
+    }, []);
+    (0, react_1.useEffect)(() => {
+        load();
+        const interval = setInterval(load, 15_000);
+        return () => clearInterval(interval);
+    }, [load]);
+    return (<div className="panel">
+      <div style={{ marginBottom: 16 }}>
+        <h2 style={{ margin: 0, fontSize: 18, color: '#e6edf3' }}>
+          🔍 Reasoning Traces
+        </h2>
+        <p style={{ margin: '4px 0 0 0', fontSize: 12, color: '#8b949e' }}>
+          Every LLM call in each pipeline — agent × model × prompt digest × response × tokens × latency × routing snapshot (assessment P0).
+        </p>
+      </div>
+
+      {traces === null && !loadError && (<SectionCard icon="⏳" title="Loading…">
+          <div style={{ color: '#8b949e', fontSize: 13 }}>Fetching reasoning traces…</div>
+        </SectionCard>)}
+      {loadError && traces === null && (<SectionCard icon="⚠️" title="Could not reach the dashboard server">
+          <div style={{ color: '#8b949e', fontSize: 13 }}>
+            The traces endpoint is unavailable right now — retrying automatically. Run{' '}
+            <code style={{ color: '#58a6ff' }}>buff trace list</code> in the terminal to inspect traces directly.
+          </div>
+        </SectionCard>)}
+      {traces !== null && traces.length === 0 && <EmptyNote />}
+      {traces !== null && traces.length > 0 && <TraceList traces={traces}/>}
+    </div>);
+}

package/dist/web-dashboard/src/components/WhatsAppPanel.js

@@ -0,0 +1,195 @@
+"use strict";
+/**
+ * WhatsAppPanel — P2 in-page WhatsApp bridge pairing (GUI parity with
+ * `buff whatsapp pair`).
+ *
+ * Lives in the Agent Hub → Channels tab. Shows the bridge pairing state,
+ * starts a pairing session (QR mode or phone-number code mode), streams the
+ * live QR into an <img> (the QR auto-refreshes as WhatsApp rotates it), shows
+ * the 8-char code for phone mode, cancels, and un-pairs. Everything rides the
+ * real BaileysBridge in the dashboard process via /api/whatsapp — the same
+ * engine the CLI's `buff whatsapp pair` uses, so a QR scanned here is the
+ * same session the gateway uses.
+ *
+ * Pair/cancel/unpair are write actions → gated behind the admin session +
+ * routing.operate (admin or operator), like the other Channels-tab actions.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = WhatsAppPanel;
+const react_1 = require("react");
+const api_1 = require("../api");
+const mask_1 = require("../mask");
+const STATE_LABEL = {
+    idle: 'Not paired',
+    pairing: '⏳ Pairing…',
+    paired: '✅ Paired',
+    failed: '❌ Pairing failed',
+    cancelled: '⏹ Cancelled',
+    error: '💥 Pairing error',
+};
+function WhatsAppPanel({ authed, canWrite, sessionExpired, reveal = false }) {
+    const [status, setStatus] = (0, react_1.useState)(null);
+    const [contacts, setContacts] = (0, react_1.useState)({});
+    const [phone, setPhone] = (0, react_1.useState)('');
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [msg, setMsg] = (0, react_1.useState)(null);
+    const subRef = (0, react_1.useRef)(null);
+    const refresh = (0, react_1.useCallback)(async () => {
+        const s = await api_1.dashboardAPI.getWhatsAppStatus();
+        if (s) {
+            setStatus(s.status);
+            setContacts(s.contacts ?? {});
+        }
+    }, []);
+    // Fetch once + subscribe to live events (QR data URLs, codes, status) via
+    // SSE — the QR refreshes automatically as WhatsApp rotates it.
+    (0, react_1.useEffect)(() => {
+        void refresh();
+        if (!authed)
+            return;
+        // EventSource may be missing (jsdom/SSR-ish environments) — the panel
+        // still shows the last-fetched status, it just won't live-update.
+        if (typeof EventSource === 'undefined')
+            return;
+        const off = api_1.dashboardAPI.subscribeWhatsApp({
+            onQr: (qr) => setStatus((s) => (s ? { ...s, qr, state: 'pairing' } : s)),
+            onCode: (code) => setStatus((s) => (s ? { ...s, pairingCode: code } : s)),
+            onStatus: (s) => {
+                setStatus(s);
+                if (s.state === 'paired' || s.state === 'failed' || s.state === 'error' || s.state === 'cancelled') {
+                    setBusy(false);
+                }
+            },
+        });
+        subRef.current = off;
+        return () => {
+            off();
+            subRef.current = null;
+        };
+    }, [authed, refresh]);
+    const runWrite = async (action) => {
+        setBusy(true);
+        setMsg(null);
+        const r = await action();
+        if (!r.ok && r.error && /Not authenticated|Session expired/i.test(r.error)) {
+            sessionExpired();
+            setBusy(false);
+            return;
+        }
+        if (r.ok) {
+            setMsg({ kind: 'ok', text: 'Done.' });
+            await refresh();
+        }
+        else {
+            setMsg({ kind: 'err', text: r.error || 'Action failed.' });
+        }
+        setBusy(false);
+    };
+    const startPair = (withPhone) => {
+        setMsg(null);
+        void runWrite(() => api_1.dashboardAPI.startWhatsAppPair(withPhone ? phone.trim() : undefined)).then(() => setPhone(''));
+    };
+    const cancelPair = () => {
+        setMsg(null);
+        void runWrite(() => api_1.dashboardAPI.cancelWhatsAppPair());
+    };
+    const unpair = () => {
+        if (!window.confirm('Remove the paired WhatsApp session from this machine? You will need to scan a QR to pair again.'))
+            return;
+        setMsg(null);
+        void runWrite(() => api_1.dashboardAPI.unpairWhatsApp());
+    };
+    const state = status?.state ?? 'idle';
+    const pairing = state === 'pairing';
+    return (<div className="wa-panel">
+      <div className="wa-panel-head">
+        <span className="wa-panel-title">🟢 WhatsApp bridge</span>
+        {status ? (<span className={`wa-badge ${status.paired ? 'wa-badge-paired' : pairing ? 'wa-badge-pairing' : ''}`}>
+            {STATE_LABEL[state]}
+          </span>) : (<span className="admin-hint">loading…</span>)}
+      </div>
+      <p className="admin-hint">
+        The personal Baileys bridge (no Meta Business account) — pair once, and the gateway can send &amp; receive
+        WhatsApp. Session: <code>{status?.sessionDir ?? '~/.buff/whatsapp/session'}</code>. Same engine as{' '}
+        <code>buff whatsapp pair</code>.
+      </p>
+
+      {pairing ? (<div className="wa-pairing">
+          {status?.qr ? (<div className="wa-qr-box">
+              <img className="wa-qr-img" src={status.qr} alt="WhatsApp pairing QR code"/>
+              <p className="admin-hint">
+                Open WhatsApp on the phone → <strong>Linked devices → Link a device → scan</strong>. The QR refreshes
+                automatically while this window is open.
+              </p>
+            </div>) : status?.phone ? (<div className="wa-code-box">
+              <p className="admin-hint">
+                On the phone with <strong>{status.phone}</strong>: WhatsApp → Linked devices → Link a device →{' '}
+                <strong>“Link with phone number instead”</strong> → enter:
+              </p>
+              <div className="wa-code">{status.pairingCode ?? '… waiting for code'}</div>
+            </div>) : (<div className="wa-code-box">
+              <p className="admin-hint">Waiting for WhatsApp to hand over a QR… (it usually appears within a few seconds)</p>
+            </div>)}
+          {status?.phone ? null : (<div className="admin-hint">
+              Tip: on a phone, “Link with phone number instead” needs the number format{' '}
+              <code>918844433322</code> (country code included) — enter it below instead of scanning.
+            </div>)}
+          {status?.error ? <div className="admin-row-msg admin-row-msg-err">{status.error}</div> : null}
+          {canWrite && authed ? (<button className="admin-refresh-btn" type="button" onClick={cancelPair} disabled={busy}>
+              {busy ? '⏳…' : '⏹ Cancel pairing'}
+            </button>) : null}
+        </div>) : (<div className="wa-actions">
+          {canWrite && authed ? (!status?.paired ? (<>
+                <div className="wa-action-row">
+                  <button className="admin-refresh-btn" type="button" onClick={() => startPair(false)} disabled={busy}>
+                    {busy ? '⏳…' : '🔳 Pair with a QR'}
+                  </button>
+                  <span className="admin-hint">Scans from the phone you want to link.</span>
+                </div>
+                <div className="wa-action-row wa-phone-row">
+                  <input type="text" className="wa-phone-input" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="or pair with a number — e.g. 918844433322" disabled={busy} maxLength={16}/>
+                  <button className="admin-refresh-btn" type="button" onClick={() => startPair(true)} disabled={busy || !phone.trim()}>
+                    Pair by number
+                  </button>
+                </div>
+              </>) : (<div className="wa-action-row">
+                <button className="admin-refresh-btn wa-unpair-btn" type="button" onClick={unpair} disabled={busy}>
+                  {busy ? '⏳…' : '🗑 Unpair (remove session)'}
+                </button>
+                <span className="admin-hint">Removes creds.json — you will need to scan a QR again.</span>
+              </div>)) : null}
+          {state === 'failed' || state === 'error' || state === 'cancelled' ? (<div className="admin-row-msg admin-row-msg-err">
+              {status?.error || (state === 'cancelled' ? 'Pairing cancelled.' : 'Pairing failed — try again.')}
+            </div>) : null}
+          {!authed ? (<div className="admin-row-msg">Log in (admin or operator) to pair, cancel, or unpair.</div>) : !canWrite ? (<div className="admin-row-msg">Your role can view pairing status but not change it (requires admin or operator).</div>) : null}
+          {msg ? <div className={`admin-row-msg${msg.kind === 'ok' ? '' : ' admin-row-msg-err'}`}>{msg.text}</div> : null}
+        </div>)}
+
+      {/* Send-by-name contacts — the mapping behind `buff whatsapp contact add`.
+            These are for SENDING by name only; they do NOT grant inbound access.
+            The verified list (Permissions tab / `buff config gateway allow`) is
+            what decides who may TRIGGER the agent. */}
+      <div className="wa-contacts">
+        <div className="wa-contacts-head">
+          <span className="wa-panel-title">📇 Send-by-name contacts</span>
+          <span className="admin-hint">{Object.keys(contacts).length} mapped</span>
+        </div>
+        <p className="admin-hint">
+          These names are for <strong>sending messages by name</strong> (e.g.{' '}
+          <code>buff gateway send whatsapp:Name "…"</code>) — they do{' '}
+          <strong>NOT</strong> let these numbers trigger the agent.
+        </p>
+        <div className="hub-alias-list">
+          {Object.keys(contacts).length === 0 ? (<span className="admin-hint">(none — add one with <code>buff whatsapp contact add &lt;Name&gt; &lt;number&gt;</code>)</span>) : (Object.entries(contacts).map(([name, number]) => (<div className="hub-alias-row" key={name}>
+                <span className="hub-chip">{name}</span>
+                <span className="admin-hint">→ {reveal ? number : (0, mask_1.maskSenderId)(number)}</span>
+              </div>)))}
+        </div>
+        <p className="admin-hint" style={{ marginTop: 8 }}>
+          To let a number <strong>trigger the agent</strong> (respond to its messages), add it to the{' '}
+          <strong>verified list</strong> in the <strong>Permissions tab above</strong>, or run{' '}
+          <code>buff config gateway allow whatsapp user &lt;number&gt;</code>.
+        </p>
+      </div>
+    </div>);
+}

package/dist/web-dashboard/src/components/WhatsAppPanel.test.js

@@ -0,0 +1,122 @@
+"use strict";
+/**
+ * P2 — WhatsAppPanel tests (in-page pairing UI).
+ *
+ * The panel renders the bridge pairing state, gates pair/cancel/unpair behind
+ * the admin session + routing.operate, and shows the live QR / pairing code
+ * while a session is active. API calls are mocked — no server, no network.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vitest_1 = require("vitest");
+const react_1 = require("@testing-library/react");
+const WhatsAppPanel_1 = __importDefault(require("./WhatsAppPanel"));
+const api_1 = require("../api");
+const IDLE = {
+    state: 'idle',
+    paired: false,
+    sessionDir: '/tmp/wa-session',
+    qr: null,
+    qrRaw: null,
+    pairingCode: null,
+    phone: null,
+    error: null,
+    startedAt: null,
+};
+const PAIRED = { ...IDLE, state: 'paired', paired: true };
+const PAIRING_QR = {
+    ...IDLE,
+    state: 'pairing',
+    qr: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUg==',
+    qrRaw: '2@payload',
+    startedAt: Date.now(),
+};
+function mockStatus(status, contacts = {}) {
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'getWhatsAppStatus').mockResolvedValue({ status, contacts });
+    vitest_1.vi.spyOn(api_1.dashboardAPI, 'subscribeWhatsApp').mockReturnValue(() => { });
+}
+(0, vitest_1.afterEach)(() => {
+    (0, react_1.cleanup)();
+    vitest_1.vi.restoreAllMocks();
+    (0, api_1.setAdminToken)(null);
+});
+(0, vitest_1.describe)('WhatsAppPanel', () => {
+    (0, vitest_1.it)('shows the idle state with a pair button for an admin', async () => {
+        mockStatus(IDLE);
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText('Not paired')).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Pair with a QR/ })).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByPlaceholderText(/918844433322/)).toBeTruthy();
+        // The pair-by-number button is disabled until a number is typed.
+        (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: 'Pair by number' })).toHaveProperty('disabled', true);
+    });
+    (0, vitest_1.it)('gates writes behind the admin session', async () => {
+        mockStatus(IDLE);
+        (0, react_1.render)(<WhatsAppPanel_1.default authed={false} canWrite={false} sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText('Not paired')).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.queryByRole('button', { name: /Pair with a QR/ })).toBeNull();
+        (0, vitest_1.expect)(react_1.screen.getByText(/Log in \(admin or operator\)/)).toBeTruthy();
+    });
+    (0, vitest_1.it)('lets a viewer read status but not change it', async () => {
+        mockStatus(PAIRED);
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite={false} sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText('✅ Paired')).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.getByText(/can view pairing status but not change it/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.queryByRole('button', { name: /Unpair/ })).toBeNull();
+    });
+    (0, vitest_1.it)('renders the live QR image during a pairing session', async () => {
+        mockStatus(PAIRING_QR);
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByAltText('WhatsApp pairing QR code')).toBeTruthy());
+        const img = react_1.screen.getByAltText('WhatsApp pairing QR code');
+        (0, vitest_1.expect)(img.src).toContain('data:image/png;base64');
+        (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Cancel pairing/ })).toBeTruthy();
+    });
+    (0, vitest_1.it)('starts a QR pairing on button click', async () => {
+        mockStatus(IDLE);
+        const start = vitest_1.vi.spyOn(api_1.dashboardAPI, 'startWhatsAppPair').mockResolvedValue({ ok: true });
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Pair with a QR/ })).toBeTruthy());
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Pair with a QR/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(start).toHaveBeenCalledWith(undefined));
+    });
+    (0, vitest_1.it)('starts a phone pairing with the typed number', async () => {
+        mockStatus(IDLE);
+        const start = vitest_1.vi.spyOn(api_1.dashboardAPI, 'startWhatsAppPair').mockResolvedValue({ ok: true });
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByPlaceholderText(/918844433322/)).toBeTruthy());
+        react_1.fireEvent.change(react_1.screen.getByPlaceholderText(/918844433322/), { target: { value: '918844433322' } });
+        const btn = react_1.screen.getByRole('button', { name: 'Pair by number' });
+        (0, vitest_1.expect)(btn.disabled).toBe(false);
+        react_1.fireEvent.click(btn);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(start).toHaveBeenCalledWith('918844433322'));
+    });
+    (0, vitest_1.it)('offers unpair when paired', async () => {
+        mockStatus(PAIRED);
+        const unpair = vitest_1.vi.spyOn(api_1.dashboardAPI, 'unpairWhatsApp').mockResolvedValue({ ok: true });
+        vitest_1.vi.spyOn(window, 'confirm').mockReturnValue(true);
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByRole('button', { name: /Unpair/ })).toBeTruthy());
+        react_1.fireEvent.click(react_1.screen.getByRole('button', { name: /Unpair/ }));
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(unpair).toHaveBeenCalled());
+    });
+    (0, vitest_1.it)('lists send-by-name contacts and clarifies they do NOT grant trigger access', async () => {
+        mockStatus(PAIRED, { Alex: '919876543210', Ria: '918877766655' });
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText('📇 Send-by-name contacts')).toBeTruthy());
+        (0, vitest_1.expect)(react_1.screen.getByText('2 mapped')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('Alex')).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText('Ria')).toBeTruthy();
+        // The clarity note — send-by-name ≠ trigger access.
+        (0, vitest_1.expect)(react_1.screen.getByText(/let these numbers trigger the agent/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/verified list/)).toBeTruthy();
+        (0, vitest_1.expect)(react_1.screen.getByText(/buff config gateway allow whatsapp user/)).toBeTruthy();
+    });
+    (0, vitest_1.it)('shows an empty state when no contacts are mapped', async () => {
+        mockStatus(PAIRED, {});
+        (0, react_1.render)(<WhatsAppPanel_1.default authed canWrite sessionExpired={() => { }}/>);
+        await (0, react_1.waitFor)(() => (0, vitest_1.expect)(react_1.screen.getByText(/none — add one with/)).toBeTruthy());
+    });
+});