@bhooai/nexus-admin 2.0.2 → 2.0.4

package/src/components/components.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-export function Card({ title, children, className = '' }: { title?: string; children: React.ReactNode; className?: string }) {
-  return (
-    <section className={`admin-card ${className}`}>
-      {title && <div className="admin-card-title">{title}</div>}
-      {children}
-    </section>
-  );
-}
-
-export function Pill({ ok, label }: { ok: boolean | null; label: string }) {
-  const cls = ok === null ? 'pill-unknown' : ok ? 'pill-ok' : 'pill-bad';
-  return <span className={`pill ${cls}`}>{label}</span>;
-}
-
-export function BackendSelector({ apps, active, onSelect }: { apps: AppEntry[]; active: number | null; onSelect: (port: number | null) => void }) {
-  return (
-    <select
-      className="backend-selector"
-      value={active ?? ''}
-      onChange={(e) => onSelect(e.target.value ? parseInt(e.target.value, 10) : null)}
-      title="Active backend for per-backend tabs"
-    >
-      <option value="">All (current backend)</option>
-      {apps
-        .filter((a) => a.kind === 'backend')
-        .map((a) => (
-          <option key={a.name} value={a.port}>
-            {a.name} :{a.port}
-          </option>
-        ))}
-    </select>
-  );
-}
-
-export interface AppEntry {
-  name: string;
-  port: number;
-  healthy: boolean | null;
-  kind: string;
-}
-
-export function ErrorCard({ message }: { message: string }) {
-  return (
-    <div className="error-card">
-      <strong>Not available</strong>
-      <span>{message}</span>
-    </div>
-  );
-}

package/src/tabs/Ai.tsx

@@ -1,70 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { adminGet, adminPost } from '../api.js';
-
-interface AiModelsResp { ok: boolean; models?: { data?: Array<{ id: string }> }; reason?: string }
-interface AiChatResp { ok: boolean; choices?: Array<{ message: { role: string; content: string } }>; reason?: string }
-
-export function Ai() {
-  const [models, setModels] = useState<string[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [prompt, setPrompt] = useState('');
-  const [model, setModel] = useState('');
-  const [reply, setReply] = useState('');
-  const [busy, setBusy] = useState(false);
-
-  useEffect(() => {
-    let alive = true;
-    void (async () => {
-      try {
-        const data = await adminGet<AiModelsResp>('/ai/models');
-        if (!alive) return;
-        if (data?.ok) {
-          const ids = (data.models?.data ?? []).map((m) => m.id);
-          setModels(ids);
-          if (ids[0]) setModel(ids[0]);
-        } else {
-          setError(data?.reason ?? 'AI server not reachable');
-        }
-      } catch (e) {
-        if (alive) setError(String((e as Error).message));
-      }
-    })();
-    return () => { alive = false; };
-  }, []);
-
-  const send = async () => {
-    if (!prompt.trim() || busy) return;
-    setBusy(true);
-    setReply('');
-    try {
-      const data = await adminPost<AiChatResp>('/ai/chat', { model: model || undefined, messages: [{ role: 'user', content: prompt }] });
-      if (data?.ok) {
-        setReply(data.choices?.[0]?.message?.content ?? '(empty reply)');
-      } else {
-        setReply(`Error: ${data?.reason ?? 'AI server not reachable'}`);
-      }
-    } catch (e) {
-      setReply(`Error: ${String((e as Error).message)}`);
-    }
-    setBusy(false);
-  };
-
-  return (
-    <div>
-      <h2>AI</h2>
-      {error && <div className="error-card"><strong>AI server not reachable</strong><span>{error} — start it with <code>docker compose --profile ai up</code> or <code>nexus dev</code>.</span></div>}
-      {models && (
-        <div style={{ marginBottom: '1rem' }}>
-          <label className="muted">Model: </label>
-          <select value={model} onChange={(e) => setModel(e.target.value)}>
-            {models.map((m) => <option key={m} value={m}>{m}</option>)}
-          </select>
-          <div className="model-count muted">{models.length} models</div>
-        </div>
-      )}
-      <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} placeholder="Ask the AI server…" rows={3} style={{ width: '100%' }} />
-      <button onClick={send} disabled={busy || !models}>{busy ? 'Thinking…' : 'Send'}</button>
-      {reply && <pre className="config-tree" style={{ marginTop: '1rem' }}>{reply}</pre>}
-    </div>
-  );
-}

package/src/tabs/Apps.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { getRegistry, probeApp, type AppEntry } from '../api.js';
-import { Pill } from '../components/components.js';
-
-export function Apps() {
-  const [apps, setApps] = useState<Array<AppEntry & { live: boolean }> | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    const load = async () => {
-      try {
-        const reg = await getRegistry();
-        const probed = await Promise.all(
-          reg.map(async (a) => ({ ...a, live: (await probeApp(a.port)).ok })),
-        );
-        if (alive) setApps(probed);
-        setError(null);
-      } catch (e) {
-        if (alive) setError(String((e as Error).message));
-      }
-    };
-    void load();
-    const id = setInterval(load, 5000);
-    return () => { alive = false; clearInterval(id); };
-  }, []);
-
-  return (
-    <div>
-      <h2>Apps</h2>
-      <p className="muted">Registry from <code>.nexus-ports.json</code>, liveness probed every 5s.</p>
-      {error && <div className="error-card"><strong>Error</strong><span>{error}</span></div>}
-      {!apps && !error && <p>Loading…</p>}
-      {apps && apps.length === 0 && (
-        <p>No apps registered. Run <code>nexus add backend &lt;name&gt;</code> to add one.</p>
-      )}
-      <div className="app-grid">
-        {apps?.map((a) => (
-          <div key={a.name} className="app-card">
-            <div className="app-card-head">
-              <strong>{a.name}</strong>
-              <Pill ok={a.live} label={a.live ? '● healthy' : '● down'} />
-            </div>
-            <div className="app-card-body">
-              <div>port <code>{a.port}</code></div>
-              <div>kind <code>{a.kind}</code></div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/tabs/Config.tsx

@@ -1,31 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { adminGet } from '../api.js';
-
-export function Config() {
-  const [tree, setTree] = useState<Record<string, unknown> | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    void (async () => {
-      try {
-        const data = await adminGet<{ config: Record<string, unknown> }>('/admin/config');
-        if (alive) setTree(data?.config ?? null);
-      } catch (e) {
-        if (alive) setError(String((e as Error).message));
-      }
-    })();
-    return () => { alive = false; };
-  }, []);
-
-  return (
-    <div>
-      <h2>Config</h2>
-      <p className="muted">Read-only; secrets are masked.</p>
-      {error && <div className="error-card"><strong>Not available</strong><span>{error}</span></div>}
-      {tree && (
-        <pre className="config-tree">{JSON.stringify(tree, null, 2)}</pre>
-      )}
-    </div>
-  );
-}

package/src/tabs/Health.tsx

@@ -1,38 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { adminGet } from '../api.js';
-import { Card, Pill } from '../components/components.js';
-
-interface ServiceState { id: string; label: string; ok: boolean; detail?: string }
-
-export function Health() {
-  const [services, setServices] = useState<ServiceState[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    void (async () => {
-      try {
-        const data = await adminGet<{ services: ServiceState[] }>('/admin/health/services');
-        if (alive) setServices(data?.services ?? []);
-      } catch (e) {
-        if (alive) setError(String((e as Error).message));
-      }
-    })();
-    return () => { alive = false; };
-  }, []);
-
-  return (
-    <div>
-      <h2>Health</h2>
-      {error && <div className="error-card"><strong>Not available</strong><span>{error}</span></div>}
-      <div className="stat-row">
-        {services?.map((s) => (
-          <Card key={s.id} title={s.label}>
-            <div className="stat-num"><Pill ok={s.ok} label={s.ok ? 'OK' : 'DOWN'} /></div>
-            <div className="muted">{s.detail}</div>
-          </Card>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/tabs/Logs.tsx

@@ -1,52 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { adminGet, adminPost } from '../api.js';
-
-interface LogEntry { ts: number; method: string; path: string; status: number; latencyMs: number }
-
-export function Logs() {
-  const [entries, setEntries] = useState<LogEntry[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  const load = async () => {
-    try {
-      const data = await adminGet<{ entries: LogEntry[] }>('/admin/logs/tail?lines=200');
-      setEntries(data?.entries ?? []);
-      setError(null);
-    } catch (e) {
-      setError(String((e as Error).message));
-    }
-  };
-
-  useEffect(() => {
-    void load();
-    const id = setInterval(load, 3000);
-    return () => clearInterval(id);
-  }, []);
-
-  const clear = async () => {
-    await adminPost('/admin/logs/clear');
-    setEntries([]);
-  };
-
-  return (
-    <div>
-      <h2>Request logs <button className="btn-ghost small" onClick={clear}>clear</button></h2>
-      {error && <div className="error-card"><strong>Not available</strong><span>{error}</span></div>}
-      <table className="log-table">
-        <thead><tr><th>time</th><th>method</th><th>path</th><th>status</th><th>ms</th></tr></thead>
-        <tbody>
-          {entries?.map((e, i) => (
-            <tr key={i}>
-              <td>{new Date(e.ts).toLocaleTimeString()}</td>
-              <td><code>{e.method}</code></td>
-              <td>{e.path}</td>
-              <td><span className={e.status >= 500 ? 'status-err' : e.status >= 400 ? 'status-warn' : ''}>{e.status}</span></td>
-              <td>{e.latencyMs}</td>
-            </tr>
-          ))}
-          {entries?.length === 0 && <tr><td colSpan={5} className="muted">No requests yet.</td></tr>}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/src/tabs/Overview.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { getRegistry, probeApp, type AppEntry } from '../api.js';
-import { Card, Pill } from '../components/components.js';
-
-export function Overview() {
-  const [apps, setApps] = useState<AppEntry[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    void (async () => {
-      try {
-        const reg = await getRegistry();
-        const probed = await Promise.all(
-          reg.map(async (a) => ({ ...a, healthy: (await probeApp(a.port)).ok })),
-        );
-        if (alive) setApps(probed);
-      } catch (e) {
-        if (alive) setError(String((e as Error).message));
-      }
-    })();
-    return () => { alive = false; };
-  }, []);
-
-  const healthy = apps?.filter((a) => a.healthy).length ?? 0;
-  const backends = apps?.filter((a) => a.kind === 'backend').length ?? 0;
-
-  return (
-    <div>
-      <h2>Overview</h2>
-      {error && <div className="error-card"><strong>Error</strong><span>{error}</span></div>}
-      <div className="stat-row">
-        <Card title="Apps"><div className="stat-num">{apps?.length ?? '…'}</div></Card>
-        <Card title="Healthy"><div className="stat-num">{apps ? healthy : '…'}</div></Card>
-        <Card title="Backends"><div className="stat-num">{apps ? backends : '…'}</div></Card>
-        <Card title="Ports"><div className="stat-num">{apps?.map((a) => a.port).join(' · ') ?? '…'}</div></Card>
-      </div>
-      {apps && apps.length === 0 && (
-        <p>No apps registered. Run <code>nexus add backend &lt;name&gt;</code> to create one.</p>
-      )}
-    </div>
-  );
-}

package/src/tabs/Payments.tsx

@@ -1,62 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { adminGet } from '../api.js';
-import { Pill } from '../components/components.js';
-
-interface OrderRow { id: string; userId?: string; provider?: string; amount?: number; currency?: string; status?: string; createdAt?: string }
-interface ProviderView { id: string; enabled: boolean; sandbox: boolean }
-
-export function Payments() {
-  const [orders, setOrders] = useState<OrderRow[] | null>(null);
-  const [providers, setProviders] = useState<ProviderView[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    void (async () => {
-      try {
-        const data = await adminGet<{ ok: boolean; orders?: OrderRow[]; providers?: ProviderView[]; reason?: string }>('/admin/payments');
-        if (!alive) return;
-        if (data?.ok) {
-          setOrders(data.orders ?? []);
-          setProviders(data.providers ?? []);
-        } else {
-          setError(data?.reason ?? 'MongoDB not reachable');
-        }
-      } catch (e) {
-        if (alive) setError(String((e as Error).message));
-      }
-    })();
-    return () => { alive = false; };
-  }, []);
-
-  return (
-    <div>
-      <h2>Payments</h2>
-      {error && <div className="error-card"><strong>Not available</strong><span>{error}</span></div>}
-      {providers && (
-        <div className="stat-row">
-          {providers.map((p) => (
-            <div key={p.id} className="app-card" style={{ padding: '1rem' }}>
-              <div className="app-card-head"><strong>{p.id}</strong><Pill ok={p.enabled} label={p.enabled ? 'enabled' : 'disabled'} /></div>
-              <div className="app-card-body muted">{p.sandbox ? 'sandbox mode' : 'live mode'}</div>
-            </div>
-          ))}
-        </div>
-      )}
-      <table className="data-table" style={{ marginTop: '1rem' }}>
-        <thead><tr><th>id</th><th>provider</th><th>amount</th><th>status</th></tr></thead>
-        <tbody>
-          {orders?.map((o) => (
-            <tr key={o.id}>
-              <td><code>{o.id.slice(0, 12)}…</code></td>
-              <td>{o.provider ?? '—'}</td>
-              <td>{o.currency ?? ''} {o.amount ?? '—'}</td>
-              <td>{o.status ?? '—'}</td>
-            </tr>
-          ))}
-          {orders?.length === 0 && !error && <tr><td colSpan={4} className="muted">No orders yet.</td></tr>}
-        </tbody>
-      </table>
-    </div>
-  );
-}

package/src/tabs/Users.tsx

@@ -1,45 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { adminGet } from '../api.js';
-
-interface UserRow { id: string; email?: string; name?: string; roles: string[]; createdAt?: string }
-
-export function Users() {
-  const [users, setUsers] = useState<UserRow[] | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let alive = true;
-    void (async () => {
-      try {
-        const data = await adminGet<{ ok: boolean; users?: UserRow[]; reason?: string }>('/admin/users');
-        if (!alive) return;
-        if (data?.ok) setUsers(data.users ?? []);
-        else setError(data?.reason ?? 'MongoDB not reachable');
-      } catch (e) {
-        if (alive) setError(String((e as Error).message));
-      }
-    })();
-    return () => { alive = false; };
-  }, []);
-
-  return (
-    <div>
-      <h2>Users</h2>
-      {error && <div className="error-card"><strong>MongoDB not reachable</strong><span>{error} — start Mongo or add a <code>users</code> collection.</span></div>}
-      <table className="data-table">
-        <thead><tr><th>id</th><th>email</th><th>name</th><th>roles</th></tr></thead>
-        <tbody>
-          {users?.map((u) => (
-            <tr key={u.id}>
-              <td><code>{u.id.slice(0, 12)}…</code></td>
-              <td>{u.email ?? '—'}</td>
-              <td>{u.name ?? '—'}</td>
-              <td>{u.roles.map((r) => <span key={r} className="role-chip">{r}</span>)}</td>
-            </tr>
-          ))}
-          {users?.length === 0 && !error && <tr><td colSpan={4} className="muted">No users yet.</td></tr>}
-        </tbody>
-      </table>
-    </div>
-  );
-}