agent-nuvira 2.7.0 → 2.7.2

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

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ContactsPage;
+const react_1 = require("react");
+const api_1 = require("../api");
+function ContactsPage() {
+    const [contacts, setContacts] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [filter, setFilter] = (0, react_1.useState)('all');
+    const [editingContact, setEditingContact] = (0, react_1.useState)(null);
+    const [editName, setEditName] = (0, react_1.useState)('');
+    const [editPhone, setEditPhone] = (0, react_1.useState)('');
+    const [msg, setMsg] = (0, react_1.useState)(null);
+    const refresh = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        const result = await api_1.dashboardAPI.getContacts();
+        if (result.ok && result.contacts) {
+            setContacts(result.contacts);
+        }
+        setLoading(false);
+    }, []);
+    (0, react_1.useEffect)(() => { void refresh(); }, [refresh]);
+    const filtered = contacts.filter((c) => filter === 'all' || c.status === filter);
+    const handleApprove = async (c) => {
+        setMsg(null);
+        const r = await api_1.dashboardAPI.approveContact(c.platform, c.name);
+        setMsg(r.ok ? { kind: 'ok', text: `✅ ${c.name} approved.` } : { kind: 'err', text: r.error || 'Failed.' });
+        void refresh();
+    };
+    const handleReject = async (c) => {
+        setMsg(null);
+        const r = await api_1.dashboardAPI.rejectContact(c.platform, c.name);
+        setMsg(r.ok ? { kind: 'ok', text: `🚫 ${c.name} rejected.` } : { kind: 'err', text: r.error || 'Failed.' });
+        void refresh();
+    };
+    const handleDelete = async (c) => {
+        setMsg(null);
+        const r = await api_1.dashboardAPI.deleteContact(c.platform, c.name);
+        setMsg(r.ok ? { kind: 'ok', text: `🗑️ ${c.name} deleted.` } : { kind: 'err', text: r.error || 'Failed.' });
+        void refresh();
+    };
+    const handleSaveEdit = async () => {
+        if (!editingContact)
+            return;
+        setMsg(null);
+        const r = await api_1.dashboardAPI.updateContact(editingContact.platform, editingContact.id, { name: editName, phone: editPhone });
+        setMsg(r.ok ? { kind: 'ok', text: `✅ ${editName} updated.` } : { kind: 'err', text: r.error || 'Failed.' });
+        setEditingContact(null);
+        void refresh();
+    };
+    const statusBadge = (status) => {
+        if (status === 'approved')
+            return <span className="contact-status-badge approved">✅ Approved</span>;
+        if (status === 'pending')
+            return <span className="contact-status-badge pending">⏳ Pending</span>;
+        return <span className="contact-status-badge rejected">🚫 Rejected</span>;
+    };
+    const platformIcon = (p) => {
+        const icons = { telegram: '✈️', whatsapp: '📱', whatsapp_cloud: '📱', email: '📧', slack: '💬', discord: '🎮' };
+        return icons[p] || '🔌';
+    };
+    const formatDate = (ms) => ms ? new Date(ms).toLocaleString() : '—';
+    return (<div className="panel contacts-page">
+      <div className="panel-header">
+        <h2>📇 Contacts — Outbound Messaging Directory</h2>
+        <p className="admin-hint">Manage who the bot can send messages to. Users auto-register on first Telegram message.</p>
+      </div>
+
+      {msg && (<div className={`admin-row-msg ${msg.kind === 'err' ? 'admin-row-msg-err' : ''}`}>
+          {msg.text}
+          <button className="admin-mini-btn" onClick={() => setMsg(null)}>✕</button>
+        </div>)}
+
+      <div className="contacts-filters">
+        {['all', 'approved', 'pending', 'rejected'].map((f) => (<button key={f} type="button" className={filter === f ? 'platforms-filter-btn active' : 'platforms-filter-btn'} onClick={() => setFilter(f)}>
+            {f === 'all' ? `All (${contacts.length})` : f === 'approved' ? `✅ Approved (${contacts.filter((c) => c.status === 'approved').length})` : f === 'pending' ? `⏳ Pending (${contacts.filter((c) => c.status === 'pending').length})` : `🚫 Rejected (${contacts.filter((c) => c.status === 'rejected').length})`}
+          </button>))}
+        <button type="button" className="admin-refresh-btn" onClick={() => void refresh()}>🔄 Refresh</button>
+      </div>
+
+      {loading ? (<div className="empty-state">Loading contacts...</div>) : filtered.length === 0 ? (<div className="empty-state">
+          <p>No contacts{filter !== 'all' ? ` with status "${filter}"` : ''}.</p>
+          <p className="admin-hint">Contacts auto-register when users message the bot on Telegram. They appear here as "Pending" until you approve them.</p>
+        </div>) : (<div className="contacts-table-wrapper">
+          <table className="contacts-table">
+            <thead>
+              <tr>
+                <th>Platform</th>
+                <th>Name</th>
+                <th>ID</th>
+                <th>Phone</th>
+                <th>Status</th>
+                <th>Registered</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((c) => (<tr key={`${c.platform}:${c.id}`} className={`contact-row status-${c.status}`}>
+                  <td>{platformIcon(c.platform)} {c.platform}</td>
+                  <td className="contact-name">{c.name}</td>
+                  <td className="contact-id"><code>{c.id}</code></td>
+                  <td className="contact-phone">{c.phone || '—'}</td>
+                  <td>{statusBadge(c.status)}</td>
+                  <td className="contact-date">{formatDate(c.registeredAt || c.addedAt)}</td>
+                  <td className="contact-actions">
+                    {c.status !== 'approved' && (<button className="admin-mini-btn contact-approve-btn" onClick={() => void handleApprove(c)}>✅ Approve</button>)}
+                    {c.status !== 'rejected' && (<button className="admin-mini-btn contact-reject-btn" onClick={() => void handleReject(c)}>🚫 Reject</button>)}
+                    <button className="admin-mini-btn" onClick={() => { setEditingContact(c); setEditName(c.name); setEditPhone(c.phone || ''); }}>✏️ Edit</button>
+                    <button className="admin-mini-btn contact-delete-btn" onClick={() => void handleDelete(c)}>🗑️</button>
+                  </td>
+                </tr>))}
+            </tbody>
+          </table>
+        </div>)}
+
+      {editingContact && (<div className="wizard-overlay" onClick={() => setEditingContact(null)}>
+          <div className="wizard-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="wizard-header">
+              <span className="wizard-icon">✏️</span>
+              <span className="wizard-title">Edit Contact: {editingContact.name}</span>
+              <button type="button" className="admin-mini-btn" onClick={() => setEditingContact(null)}>✕</button>
+            </div>
+            <div className="wizard-body">
+              <label className="hub-send-target">
+                <span className="admin-hint">Name</span>
+                <input type="text" value={editName} onChange={(e) => setEditName(e.target.value)}/>
+              </label>
+              <label className="hub-send-target">
+                <span className="admin-hint">Phone (optional, for flexible lookup)</span>
+                <input type="text" value={editPhone} onChange={(e) => setEditPhone(e.target.value)} placeholder="+918800123456"/>
+              </label>
+              <p className="admin-hint">Platform: <strong>{editingContact.platform}</strong> | ID: <code>{editingContact.id}</code></p>
+              <div className="wizard-nav">
+                <button type="button" className="admin-mini-btn" onClick={() => setEditingContact(null)}>Cancel</button>
+                <button type="button" className="admin-refresh-btn" onClick={() => void handleSaveEdit()}>Save</button>
+              </div>
+            </div>
+          </div>
+        </div>)}
+    </div>);
+}

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

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = CostDashboard;
+function formatCost(usd) {
+    if (usd === undefined || usd === null)
+        return '$0.00';
+    if (usd < 0.00001)
+        return '$0.00';
+    if (usd < 0.01)
+        return '$' + usd.toFixed(6);
+    return '$' + usd.toFixed(4);
+}
+function formatNumber(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 n.toLocaleString();
+}
+function formatTime(ts) {
+    const d = new Date(ts);
+    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+}
+function CostDashboard({ data }) {
+    if (!data) {
+        return <div className="loading-state"><p>Loading cost data...</p></div>;
+    }
+    const { cost } = data;
+    const byProvider = Object.entries(cost.byProvider || {}).sort(([, a], [, b]) => b - a);
+    const byModel = Object.entries(cost.byModel || {}).sort(([, a], [, b]) => b - a).slice(0, 10);
+    const providerTotal = byProvider.reduce((s, [, v]) => s + v, 0);
+    return (<>
+      <h2 className="section-title">💰 Cost Tracking</h2>
+
+      <div className="cost-summary">
+        <div className="cost-total">
+          <span className="cost-label">Total Spent</span>
+          <span className="cost-amount">{formatCost(cost.totalCost)}</span>
+        </div>
+        <div className="cost-total">
+          <span className="cost-label">Total Tokens</span>
+          <span className="cost-amount">{formatNumber(cost.totalTokens)}</span>
+        </div>
+        <div className="cost-total">
+          <span className="cost-label">Total Requests</span>
+          <span className="cost-amount">{formatNumber(cost.totalRequests)}</span>
+        </div>
+      </div>
+
+      <div className="cost-summary cost-summary-sub">
+        <div className="cost-total">
+          <span className="cost-label">📏 Measured (exact wire tokens)</span>
+          <span className="cost-amount">{formatCost(cost.measuredCost)}</span>
+          <span className="cost-label">{formatNumber(cost.measuredCalls)} calls</span>
+        </div>
+        <div className="cost-total">
+          <span className="cost-label">📐 Estimated (length-based)</span>
+          <span className="cost-amount">{formatCost(cost.estimatedCost)}</span>
+          <span className="cost-label">{formatNumber(cost.estimatedCalls)} calls</span>
+        </div>
+      </div>
+
+      <h3 className="section-subtitle">By Provider</h3>
+      <div className="cost-list">
+        {byProvider.length === 0 ? (<div className="empty-state">No costs recorded yet.</div>) : (byProvider.map(([provider, amount]) => {
+            const pct = providerTotal > 0 ? ((amount / providerTotal) * 100).toFixed(1) : '0';
+            return (<div className="cost-row" key={provider}>
+                <span className="cost-row-name">{provider}</span>
+                <div className="cost-row-bar">
+                  <div className="cost-row-fill" style={{ width: `${pct}%` }}/>
+                </div>
+                <span className="cost-row-value">{formatCost(amount)}</span>
+              </div>);
+        }))}
+      </div>
+
+      <h3 className="section-subtitle">By Model</h3>
+      <div className="cost-list">
+        {byModel.length === 0 ? (<div className="empty-state">No model costs recorded yet.</div>) : (byModel.map(([model, amount]) => {
+            const pct = providerTotal > 0 ? ((amount / providerTotal) * 100).toFixed(1) : '0';
+            const displayModel = model.length > 30 ? model.slice(0, 28) + '..' : model;
+            return (<div className="cost-row" key={model}>
+                <span className="cost-row-name">{displayModel}</span>
+                <div className="cost-row-bar">
+                  <div className="cost-row-fill" style={{ width: `${pct}%` }}/>
+                </div>
+                <span className="cost-row-value">{formatCost(amount)}</span>
+              </div>);
+        }))}
+      </div>
+
+      <h3 className="section-subtitle">Recent Requests</h3>
+      <div className="request-list">
+        {(!cost.recent || cost.recent.length === 0) ? (<div className="empty-state">No requests recorded yet.</div>) : (cost.recent.slice(0, 30).map((req, i) => (<div className="request-row" key={i}>
+              <span className="request-time">{formatTime(req.timestamp)}</span>
+              <span className="request-provider">{req.provider || '--'}</span>
+              <span className="request-model">{req.model || '--'}</span>
+              <span className="request-cost">{formatCost(req.costUsd)}</span>
+              <span className="request-tokens">{formatNumber(req.totalTokens)} tok</span>
+            </div>)))}
+      </div>
+    </>);
+}