@bhooai/nexus-cli 2.0.6 → 2.0.7

package/templates/base/apps/admin/src/pages/monitoring/RequestSeriesChart.tsx

@@ -0,0 +1,70 @@
+import React, { useState, useRef } from 'react';
+import { formatPointTime } from '../../lib/utils.js';
+import type { RequestSeries, RequestSeriesRange } from '../../api.js';
+
+export function RequestSeriesChart({ series }: { series: RequestSeries | null }) {
+  const W = 720;
+  const H = 96;
+  const PAD = 4;
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const [tip, setTip] = useState<{ x: number; y: number; label: string; count: number } | null>(null);
+  const pts = series?.points?.length ? series.points : [];
+  if (!series || !pts.length) {
+    return (
+      <div className="traffic-chart">
+        <div className="traffic-chart-body">
+          <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" role="img" aria-label="No request data">
+            <line x1={PAD} y1={H - PAD} x2={W - PAD} y2={H - PAD} stroke="var(--admin-border, rgba(125,174,235,0.2))" strokeWidth="1" />
+          </svg>
+        </div>
+        <div className="traffic-meta"><span>no data for this range yet</span></div>
+      </div>
+    );
+  }
+  const max = Math.max(1, ...pts.map((p) => p.count));
+  const minT = pts[0].t;
+  const maxT = pts[pts.length - 1].t;
+  const span = Math.max(1, maxT - minT);
+  const coords = pts.map((p) => [PAD + ((p.t - minT) / span) * (W - PAD * 2), H - PAD - (p.count / max) * (H - PAD * 2)] as const);
+  const line = coords.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+  const area = `${line} L${(W - PAD).toFixed(1)},${H - PAD} L${PAD},${H - PAD} Z`;
+  const showTip = (e: React.MouseEvent<SVGCircleElement>, i: number) => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const rect = svg.getBoundingClientRect();
+    const [vx, vy] = coords[i];
+    setTip({
+      x: (vx / W) * rect.width,
+      y: (vy / H) * rect.height,
+      label: formatPointTime(pts[i].t, series.range),
+      count: pts[i].count,
+    });
+  };
+  return (
+    <div className="traffic-chart">
+      <div className="traffic-chart-body">
+        <svg ref={svgRef} viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" role="img" aria-label="HTTP request traffic">
+          <defs>
+            <linearGradient id="seriesFill" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stopColor="var(--admin-violet, #9f7bff)" stopOpacity="0.35" />
+              <stop offset="100%" stopColor="var(--admin-violet, #9f7bff)" stopOpacity="0" />
+            </linearGradient>
+          </defs>
+          <line x1={PAD} y1={H - PAD} x2={W - PAD} y2={H - PAD} stroke="var(--admin-border, rgba(125,174,235,0.2))" strokeWidth="1" />
+          <path d={area} fill="url(#seriesFill)" />
+          <path d={line} fill="none" stroke="var(--admin-violet, #9f7bff)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+          {pts.map((p, i) => (
+            <circle key={i} cx={coords[i][0]} cy={coords[i][1]} r="7" fill="transparent" style={{ cursor: 'crosshair' }} onMouseEnter={(e) => showTip(e, i)} onMouseMove={(e) => showTip(e, i)} onMouseLeave={() => setTip(null)} />
+          ))}
+        </svg>
+        {tip && (
+          <div className="traffic-tip" style={{ left: tip.x, top: tip.y }}>
+            <span className="traffic-tip-time">{tip.label}</span>
+            <span className="traffic-tip-count">{tip.count} req</span>
+          </div>
+        )}
+      </div>
+      <div className="traffic-meta"><span>{series.total} requests in range</span><span>peak {max} / bucket</span></div>
+    </div>
+  );
+}

package/templates/base/apps/admin/src/pages/overview/TrafficChart.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Tab } from '../../lib/types.js';
+
+export function TrafficChart({ samples, total, last, onNavigate }: { samples: number[]; total: number; last: number; onNavigate: (tab: Tab) => void }) {
+  const W = 720;
+  const H = 96;
+  const PAD = 4;
+  const pts = samples.length ? samples : [0, 0];
+  const max = Math.max(4, ...pts);
+  const stepX = (W - PAD * 2) / (Math.max(pts.length - 1, 1));
+  const coords = pts.map((v, i) => [PAD + i * stepX, H - PAD - (v / max) * (H - PAD * 2)] as const);
+  const line = coords.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`).join(' ');
+  const area = `${line} L${(W - PAD).toFixed(1)},${H - PAD} L${PAD},${H - PAD} Z`;
+  const lastPt = coords[coords.length - 1];
+  return (
+    <div className="traffic-chart">
+      <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" role="img" aria-label="Live HTTP request rate">
+        <defs>
+          <linearGradient id="trafficFill" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="var(--admin-blue, #54b7ff)" stopOpacity="0.35" />
+            <stop offset="100%" stopColor="var(--admin-blue, #54b7ff)" stopOpacity="0" />
+          </linearGradient>
+        </defs>
+        <line x1={PAD} y1={H - PAD} x2={W - PAD} y2={H - PAD} stroke="var(--admin-border, rgba(125,174,235,0.2))" strokeWidth="1" />
+        <path d={area} fill="url(#trafficFill)" />
+        <path d={line} fill="none" stroke="var(--admin-blue, #54b7ff)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+        <circle cx={lastPt[0]} cy={lastPt[1]} r="3.5" fill="var(--admin-blue, #54b7ff)" />
+      </svg>
+      <div className="traffic-meta"><span>{last} req / 5s</span><span>{total} since boot</span><button onClick={() => onNavigate('monitoring')} className="text-action">Open monitoring →</button></div>
+    </div>
+  );
+}

package/templates/base/apps/admin/src/pages/payments/OrdersTable.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { PaymentOrder } from '../../lib/types.js';
+
+export function OrdersTable({ orders }: { orders: PaymentOrder[] }) {
+  const statusColor = (s: string) => (['paid', 'captured'].includes(s) ? 'text-emerald-400' : ['failed', 'refunded', 'cancelled'].includes(s) ? 'text-rose-400' : 'text-slate-300');
+  return (
+    <section className="glass-panel overflow-hidden p-2">
+      <table className="glass-table">
+        <thead><tr><th>Provider</th><th>Order</th><th>Reference</th><th className="text-center">Status</th><th className="text-right">Amount</th><th>Payment ID</th><th>Created</th></tr></thead>
+        <tbody>
+          {orders.map((o, i) => (
+            <tr key={`${o.orderId}-${i}`}>
+              <td><span className="chip">{o.provider}</span></td>
+              <td className="font-mono text-slate-200">{o.orderId || '—'}</td>
+              <td className="font-mono text-slate-400">{o.reference || '—'}</td>
+              <td className={`text-center ${statusColor(o.status)}`}>{o.status}</td>
+              <td className="text-right font-medium text-slate-200">{o.currency} {o.amount}</td>
+              <td className="font-mono text-slate-400">{o.paymentId || '—'}</td>
+              <td className="text-slate-400">{o.createdAt ? new Date(o.createdAt).toLocaleString() : '—'}</td>
+            </tr>
+          ))}
+          {!orders.length && <tr><td colSpan={7} className="py-8 text-center text-slate-500">No orders recorded yet.</td></tr>}
+        </tbody>
+      </table>
+    </section>
+  );
+}

package/templates/base/apps/admin/src/pages/payments/PaymentKeysDialog.tsx

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import type { PaymentProviderStatus } from '../../api.js';
+
+export function PaymentKeysDialog({ provider, value, onChange, onSave, onCancel, busy, msg, msgKind }: {
+  provider: PaymentProviderStatus;
+  value: Record<string, string>;
+  onChange: (v: Record<string, string>) => void;
+  onSave: () => void;
+  onCancel: () => void;
+  busy: boolean;
+  msg: string;
+  msgKind: 'ok' | 'err';
+}) {
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => { if (event.key === 'Escape') onCancel(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onCancel]);
+
+  const fields = provider.fields?.length ? provider.fields : (provider.name === 'skrill' ? [{ field: 'merchantEmail', label: 'Merchant email', hasValue: false }] : []);
+
+  return (
+    <div className="provider-modal-backdrop" onClick={onCancel}>
+      <div className="provider-modal space-y-4" role="dialog" aria-modal="true" aria-labelledby="payment-keys-title" onClick={(event) => event.stopPropagation()}>
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <span className="admin-overline">PAYMENT CREDENTIAL</span>
+            <h3 id="payment-keys-title" className="mt-1 text-base font-semibold text-slate-100">{provider.name}</h3>
+            <code className="text-xs text-slate-500">{provider.name}</code>
+          </div>
+          <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn text-xs" aria-label="Close payment keys dialog">✕</button>
+        </div>
+
+        <div className="rounded-xl border border-sky-400/20 bg-black/20 px-3 py-2 text-xs text-slate-400">
+          Keys are stored server-side in <code className="font-mono">.env</code> as <code className="font-mono">NEXUS_PAYMENTS_{provider.name.toUpperCase()}_*</code> and never written to the config file.
+        </div>
+
+        {msg && (
+          <div role="alert" className={`rounded-lg border px-3 py-1.5 text-sm ${msgKind === 'ok' ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-300' : 'border-rose-500/30 bg-rose-500/10 text-rose-300'}`}>
+            {msg}
+          </div>
+        )}
+
+        <div className="space-y-3">
+          {fields.map((f) => (
+            <label key={f.field} className="block">
+              <span className="admin-overline">{f.label}</span>
+              <input
+                className="glass-input mt-1 text-sm font-mono"
+                type="password"
+                id={`payment-${f.field}`}
+                name={`payment-${f.field}`}
+                autoComplete="new-password"
+                placeholder={f.hasValue ? `•••••••• (enter new to replace)` : `paste ${f.label.toLowerCase()}`}
+                value={value[f.field] ?? ''}
+                onChange={(event) => onChange({ ...value, [f.field]: event.target.value })}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' && !busy) { event.preventDefault(); onSave(); }
+                }}
+              />
+            </label>
+          ))}
+        </div>
+
+        <div className="flex justify-end gap-2 border-t border-sky-400/20 pt-3">
+          <button type="button" onClick={onCancel} disabled={busy} className="glass-chip-btn">Cancel</button>
+          <button type="button" onClick={onSave} disabled={busy || fields.length === 0} className="glass-chip-btn-primary">
+            {busy ? 'Saving…' : 'Save keys'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/base/apps/admin/src/pages/payments/TestConsole.tsx

@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+import { Icon } from '../../icons.js';
+import {
+  createPaymentOrder, updatePaymentProvider, savePaymentProviderKeys,
+  type PaymentProviderStatus,
+} from '../../api.js';
+import type { ToggleStyle } from '../../lib/types.js';
+import { PaymentKeysDialog } from './PaymentKeysDialog.js';
+
+export function TestConsole({ toggle, status, onRun, onNotice, onCreated }: { toggle: ToggleStyle; status: PaymentProviderStatus[]; onRun: () => Promise<void> | void; onNotice: (msg: string) => void; onCreated: () => void }) {
+  const [probeBusy, setProbeBusy] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [toggleBusy, setToggleBusy] = useState<string>('');
+  const [switchAnim, setSwitchAnim] = useState<Record<string, 'out' | 'in' | null>>({});
+  const [provider, setProvider] = useState('');
+  const [amount, setAmount] = useState('100');
+  const [currency, setCurrency] = useState('INR');
+  const [err, setErr] = useState('');
+  const [result, setResult] = useState<any>(null);
+  const [keyProvider, setKeyProvider] = useState<PaymentProviderStatus | null>(null);
+  const [keyDraft, setKeyDraft] = useState<Record<string, string>>({});
+  const [keyBusy, setKeyBusy] = useState(false);
+  const [keyMsg, setKeyMsg] = useState('');
+  const [keyMsgKind, setKeyMsgKind] = useState<'ok' | 'err'>('ok');
+
+  const openKeys = (p: PaymentProviderStatus) => {
+    setKeyProvider(p);
+    setKeyDraft({});
+    setKeyMsg('');
+    setKeyMsgKind('ok');
+  };
+
+  const saveKeys = async () => {
+    if (!keyProvider) return;
+    setKeyBusy(true); setKeyMsg(''); setKeyMsgKind('ok');
+    try {
+      const res = await savePaymentProviderKeys(keyProvider.name, keyDraft);
+      setKeyProvider(null);
+      setKeyMsg('');
+      await onRun();
+      onNotice(`Payment provider "${keyProvider.name}" keys saved. Enabled state persisted.`);
+    } catch (e: any) { setKeyMsg(String(e?.message ?? e)); setKeyMsgKind('err'); }
+    finally { setKeyBusy(false); }
+  };
+
+  const testOrder = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setBusy(true); setErr(''); setResult(null);
+    try {
+      const res = await createPaymentOrder({ provider, amount: Number(amount), currency });
+      setResult(res.order ?? res);
+      onCreated();
+    } catch (e: any) { setErr(String(e?.message ?? e)); }
+    finally { setBusy(false); }
+  };
+
+  const toggleProvider = async (p: PaymentProviderStatus) => {
+    setToggleBusy(p.name);
+    setSwitchAnim((prev) => ({ ...prev, [p.name]: 'out' }));
+    await new Promise<void>((r) => window.setTimeout(r, 280));
+    try {
+      await updatePaymentProvider(p.name, { enabled: !p.enabled });
+      setSwitchAnim((prev) => ({ ...prev, [p.name]: 'in' }));
+      await onRun();
+    } catch { /* non-fatal */ }
+    finally {
+      setToggleBusy('');
+      await new Promise<void>((r) => window.setTimeout(r, 420));
+      setSwitchAnim((prev) => { const next = { ...prev }; delete next[p.name]; return next; });
+    }
+  };
+
+  const selected = status.find((p) => p.name === provider);
+
+  return (
+    <div className="space-y-6">
+      <section className="glass-card space-y-3">
+        <div className="flex items-center justify-between">
+          <h3 className="glass-h3">Provider status</h3>
+          <button onClick={async () => { setProbeBusy(true); try { await onRun(); } finally { setProbeBusy(false); } }} className="glass-chip-btn" disabled={probeBusy}>
+            {probeBusy ? 'checking…' : <><Icon name="refresh" size={12} /> re-run checks</>}
+          </button>
+        </div>
+        <div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
+          {status.map((p) => {
+            const anim = switchAnim[p.name] ?? null;
+            return (
+              <div key={p.name} className={`provider-card ${p.enabled ? 'is-on' : 'is-off'}${anim === 'out' ? ' is-switch-out' : ''}${anim === 'in' ? ' is-switch-in' : ''}`}>
+                <div className="flex items-center gap-2.5">
+                  <button
+                    onClick={() => toggleProvider(p)}
+                    disabled={!!toggleBusy || !!anim}
+                    className={`ai-toggle tg-${toggle} ${p.enabled ? 'is-on' : ''}`}
+                    title={p.enabled ? 'Enabled — click to disable' : 'Disabled — click to enable'}
+                  >
+                    <span className="ai-toggle-knob" />
+                  </button>
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-sm text-slate-200 truncate">{p.name}</div>
+                    <div className="text-[11px] text-slate-500 font-mono truncate">{p.sandbox ? 'sandbox mode' : 'live mode'}</div>
+                  </div>
+                  <span className={p.ok ? 'dot-ok' : 'dot-bad'} title={p.ok ? 'working' : 'not working'} />
+                  <button onClick={() => openKeys(p)} className="glass-chip-btn shrink-0 text-[10px]" title="Set API key / secret"><Icon name="key" size={11} /> keys</button>
+                </div>
+                <div className="flex flex-wrap items-center gap-1.5">
+                  {p.enabled
+                    ? <span className="provider-badge-ok">enabled</span>
+                    : <span className="provider-badge-mute">disabled</span>}
+                  {p.sandbox && <span className="provider-badge-warn">sandbox</span>}
+                  {p.configured
+                    ? <span className="provider-badge-ok">keys configured</span>
+                    : <span className="provider-badge-warn">missing keys</span>}
+                </div>
+                {p.detail && <div className="text-xs text-emerald-400">{p.detail}</div>}
+                {p.error && <div className="text-xs text-rose-400">{p.error}</div>}
+                {p.note && <div className="text-xs text-slate-500">{p.note}</div>}
+              </div>
+            );
+          })}
+        </div>
+      </section>
+
+      <section className="glass-card space-y-3">
+        <div>
+          <h3 className="glass-h3">Create a test order</h3>
+          <p className="mt-1 text-sm text-slate-400">Creates a real order through the selected provider (hosted checkout, no charge) and records it in the orders table — verifies keys, upstream reachability and persistence.</p>
+        </div>
+        <form onSubmit={testOrder} className="flex flex-wrap items-end gap-3">
+          <label className="text-sm text-slate-300">Provider
+            <select value={provider} onChange={(e) => setProvider(e.target.value)} required className="glass-input mt-1 block w-44">
+              <option value="" disabled className="bg-slate-900">choose…</option>
+              {status.map((p) => (
+                <option key={p.name} value={p.name} className="bg-slate-900">{p.enabled ? p.name : `${p.name} (disabled)`}</option>
+              ))}
+            </select>
+          </label>
+          <label className="text-sm text-slate-300">Amount
+            <input type="number" step="0.01" min="0.01" value={amount} onChange={(e) => setAmount(e.target.value)} className="glass-input mt-1 block w-28" />
+          </label>
+          <label className="text-sm text-slate-300">Currency
+            <input value={currency} maxLength={3} onChange={(e) => setCurrency(e.target.value.toUpperCase())} className="glass-input mt-1 block w-20" />
+          </label>
+          <button type="submit" disabled={busy || !provider} className="glass-btn-primary">
+            {busy ? 'Creating…' : 'Create test order'}
+          </button>
+        </form>
+        {err && <p className="text-sm text-rose-400">{err}</p>}
+        {selected && !selected.enabled && (
+          <p className="rounded-lg border border-amber-400/30 bg-amber-400/10 px-3 py-2 text-xs text-amber-200">
+            “{selected.name}” is disabled in the config — it will be rejected by the backend. To enable it, set{' '}
+            <code className="font-mono">NEXUS_PAYMENTS_{selected.name.toUpperCase()}_ENABLED=true</code> (plus its keys) in the project <code className="font-mono">.env</code>, or <code className="font-mono">payments.{selected.name}.enabled: true</code> in <code className="font-mono">nexus.config.ts</code>, then restart the backend. A provider also activates automatically once its keys are present.
+          </p>
+        )}
+        {result && (
+          <pre className="glass-code max-h-64 overflow-auto p-3">{JSON.stringify(result, null, 2)}</pre>
+        )}
+      </section>
+
+      {keyProvider && (
+        <PaymentKeysDialog
+          provider={keyProvider}
+          value={keyDraft}
+          onChange={setKeyDraft}
+          onSave={saveKeys}
+          onCancel={() => { setKeyProvider(null); setKeyMsg(''); }}
+          busy={keyBusy}
+          msg={keyMsg}
+          msgKind={keyMsgKind}
+        />
+      )}
+    </div>
+  );
+}

package/templates/base/apps/admin/src/pages/payments/TransactionsTable.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { PaymentTransaction } from '../../lib/types.js';
+
+export function TransactionsTable({ transactions }: { transactions: PaymentTransaction[] }) {
+  return (
+    <section className="glass-panel overflow-hidden p-2">
+      <table className="glass-table">
+        <thead><tr><th>Provider</th><th>Event</th><th className="text-center">Verified</th><th>Order</th><th>Payment</th><th className="text-right">Amount</th><th>Created</th></tr></thead>
+        <tbody>
+          {transactions.map((t, i) => (
+            <tr key={i}>
+              <td><span className="chip">{t.provider}</span></td>
+              <td className="font-mono text-slate-200">{t.event}</td>
+              <td className={`text-center ${t.verified ? 'text-emerald-400' : 'text-rose-400'}`}>{t.verified ? '✓' : '✗'}</td>
+              <td className="font-mono text-slate-400">{t.orderId || '—'}</td>
+              <td className="font-mono text-slate-400">{t.paymentId || '—'}</td>
+              <td className="text-right text-slate-200">{t.currency ? `${t.currency} ${t.amount ?? ''}` : '—'}</td>
+              <td className="text-slate-400">{t.createdAt ? new Date(t.createdAt).toLocaleString() : '—'}</td>
+            </tr>
+          ))}
+          {!transactions.length && <tr><td colSpan={7} className="py-8 text-center text-slate-500">No webhook transactions yet.</td></tr>}
+        </tbody>
+      </table>
+    </section>
+  );
+}