@bhooai/nexus-admin 2.0.0 → 2.0.2

package/src/tabs/Ai.tsx

@@ -0,0 +1,70 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,43 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,45 @@
+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>
+  );
+}

package/src/alertCenter.tsx

@@ -1,150 +0,0 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
-
-export type AlertKind = 'ok' | 'err' | 'warn';
-
-export interface AdminAlert {
-  id: string;
-  kind: AlertKind;
-  message: string;
-  source: string;
-  at: string;
-}
-
-interface AlertContextValue {
-  alerts: AdminAlert[];
-  toasts: AdminAlert[];
-  push: (kind: AlertKind, message: string, source: string) => void;
-  clear: () => void;
-  dismiss: (id: string) => void;
-  dismissToast: (id: string) => void;
-}
-
-export const TOAST_TTL = 4500;
-
-const ALERTS_KEY = 'nexus-admin-alerts';
-const MAX_ALERTS = 50;
-
-const AlertContext = createContext<AlertContextValue | null>(null);
-
-function loadAlerts(): AdminAlert[] {
-  if (typeof window === 'undefined') return [];
-  try {
-    const raw = window.localStorage.getItem(ALERTS_KEY);
-    if (!raw) return [];
-    const parsed = JSON.parse(raw) as AdminAlert[];
-    if (!Array.isArray(parsed)) return [];
-    return parsed
-      .filter((a) => a && typeof a.message === 'string' && typeof a.source === 'string')
-      .slice(0, MAX_ALERTS);
-  } catch { /* ignore corrupt value */ }
-  return [];
-}
-
-export function AlertProvider({ children }: { children: ReactNode }) {
-  const [alerts, setAlerts] = useState<AdminAlert[]>(() => loadAlerts());
-  const [toasts, setToasts] = useState<AdminAlert[]>([]);
-  const idRef = useRef(0);
-
-  useEffect(() => {
-    try { window.localStorage.setItem(ALERTS_KEY, JSON.stringify(alerts)); } catch { /* storage unavailable */ }
-  }, [alerts]);
-
-  const push = useCallback((kind: AlertKind, message: string, source: string) => {
-    const text = String(message ?? '').trim();
-    if (!text) return;
-    idRef.current += 1;
-    const alert: AdminAlert = {
-      id: `${Date.now()}-${idRef.current}`,
-      kind,
-      message: text,
-      source: source || 'admin',
-      at: new Date().toLocaleString(),
-    };
-    setAlerts((prev) => [alert, ...prev].slice(0, MAX_ALERTS));
-    setToasts((prev) => [...prev.slice(-3), alert]);
-    window.setTimeout(() => {
-      setToasts((prev) => prev.filter((t) => t.id !== alert.id));
-    }, TOAST_TTL);
-  }, []);
-
-  const clear = useCallback(() => setAlerts([]), []);
-
-  const dismiss = useCallback((id: string) => {
-    setAlerts((prev) => prev.filter((a) => a.id !== id));
-  }, []);
-
-  const dismissToast = useCallback((id: string) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-
-  return (
-    <AlertContext.Provider value={{ alerts, toasts, push, clear, dismiss, dismissToast }}>
-      {children}
-    </AlertContext.Provider>
-  );
-}
-
-export function useAlerts(): AlertContextValue {
-  const ctx = useContext(AlertContext);
-  if (!ctx) throw new Error('useAlerts must be used within <AlertProvider>');
-  return ctx;
-}
-
-/** Pages that default their action messages to "warn" unless they look like errors. */
-const WARN_SOURCES = new Set<string>([]);
-
-function kindFor(source: string, value: string): AlertKind {
-  if (WARN_SOURCES.has(source)) return 'warn';
-  return /fail|error|could not|no .* (found|available)|unavailable|invalid|missing|rejected|failed|did not|unreachable/i.test(value) ? 'err' : 'ok';
-}
-
-export function useAdminAlert(source: string): [
-  string | null,
-  (value: string | { kind: AlertKind; text: string } | null) => void,
-] {
-  const { push } = useAlerts();
-  const [msg, setMsg] = useState<string | null>(null);
-  const currentRef = useRef<string | null>(null);
-
-  const set = useCallback((value: string | { kind: AlertKind; text: string } | null) => {
-    if (!value) { currentRef.current = null; setMsg(null); return; }
-    if (typeof value === 'object') {
-      const text = String(value.text ?? '').trim();
-      if (!text) return;
-      if (text === currentRef.current) { setMsg(text); return; }
-      currentRef.current = text;
-      setMsg(text);
-      push(value.kind, text, source);
-      return;
-    }
-    const text = String(value).trim();
-    const current = currentRef.current;
-    currentRef.current = text || null;
-    setMsg(text || null);
-    if (text && text !== current) push(kindFor(source, text), text, source);
-  }, [push, source]);
-
-  return [msg, set];
-}
-
-const TOAST_ICONS: Record<AlertKind, string> = { ok: '✓', err: '✕', warn: '!' };
-
-/** Floating alert popups, top-right, themed via the surrounding admin shell. */
-export function ToastStack() {
-  const { toasts, dismissToast } = useAlerts();
-  if (!toasts.length) return null;
-  return (
-    <div className="admin-toasts" role="region" aria-label="Notifications">
-      {toasts.map((t) => (
-        <div key={t.id} className={`admin-toast is-${t.kind}`} role="status">
-          <span className="admin-toast-icon">{TOAST_ICONS[t.kind]}</span>
-          <span className="admin-toast-body">
-            <b>{t.message}</b>
-            <small>{t.source} · {t.at}</small>
-          </span>
-          <button type="button" className="admin-toast-x" aria-label="Dismiss notification" onClick={() => dismissToast(t.id)}>×</button>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/assets/bhooai-nexus-logo.svg

@@ -1,25 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1024" viewBox="0 0 1920 1024" role="img" aria-labelledby="title desc">
-  <title id="title">BhooAI Nexus</title>
-  <desc id="desc">BhooAI Nexus futuristic hexagonal logo and wordmark.</desc>
-  <defs>
-    <linearGradient id="edge" x1="140" y1="120" x2="820" y2="900" gradientUnits="userSpaceOnUse"><stop stop-color="#67e8f9"/><stop offset=".5" stop-color="#818cf8"/><stop offset="1" stop-color="#d8b4fe"/></linearGradient>
-    <linearGradient id="word" x1="900" y1="360" x2="1740" y2="680" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset=".55" stop-color="#a5f3fc"/><stop offset="1" stop-color="#c4b5fd"/></linearGradient>
-    <radialGradient id="core" cx="50%" cy="42%" r="65%"><stop stop-color="#172554"/><stop offset=".72" stop-color="#081326"/><stop offset="1" stop-color="#030712"/></radialGradient>
-    <filter id="glow" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation="16" result="blur"/><feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
-  </defs>
-  <g transform="translate(95 72)">
-    <path d="M385 0 770 222v444L385 888 0 666V222z" fill="url(#core)" stroke="url(#edge)" stroke-width="18" stroke-linejoin="round"/>
-    <path d="M385 58 710 246v376L385 810 60 622V246z" fill="none" stroke="#67e8f9" stroke-opacity=".22" stroke-width="6"/>
-    <path d="M385 118 654 273v318L385 746 116 591V273z" fill="none" stroke="#a78bfa" stroke-opacity=".16" stroke-width="4"/>
-    <path d="M192 660V240l386 420V240" fill="none" stroke="url(#edge)" stroke-linecap="round" stroke-linejoin="round" stroke-width="76" filter="url(#glow)"/>
-    <path d="M192 660V240l386 420V240" fill="none" stroke="#071225" stroke-linecap="round" stroke-linejoin="round" stroke-width="38"/>
-    <circle cx="192" cy="240" r="30" fill="#67e8f9" filter="url(#glow)"/><circle cx="578" cy="660" r="30" fill="#f0abfc" filter="url(#glow)"/>
-    <circle cx="192" cy="240" r="12" fill="#fff"/><circle cx="578" cy="660" r="12" fill="#fff"/>
-  </g>
-  <g transform="translate(980 250)">
-    <text x="0" y="270" fill="url(#word)" font-family="Arial, Helvetica, sans-serif" font-size="230" font-weight="800" letter-spacing="10">BhooAI</text>
-    <text x="16" y="465" fill="url(#edge)" font-family="Arial, Helvetica, sans-serif" font-size="126" font-weight="700" letter-spacing="38">NEXUS</text>
-    <path d="M18 550h840" stroke="url(#edge)" stroke-width="8" stroke-linecap="round"/><circle cx="890" cy="550" r="11" fill="#d8b4fe"/>
-    <text x="18" y="620" fill="#9ab0c9" font-family="Arial, Helvetica, sans-serif" font-size="27" font-weight="500" letter-spacing="8">ONE RUNTIME. EVERY SIGNAL.</text>
-  </g>
-</svg>

package/src/vite-env.d.ts

@@ -1,19 +0,0 @@
-// Ambient declarations that keep `@bhooai/admin` self-contained: it does
-// not depend on the consumer having `vite/client` types installed. Vite /
-// esbuild inject `import.meta.env` and resolve asset imports at runtime; the
-// host project's build (vite build) handles actual bundling.
-interface ImportMetaEnv {
-  readonly VITE_SUPERVISOR_URL?: string;
-  readonly [key: string]: string | undefined;
-}
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}
-declare module '*.svg' {
-  const src: string;
-  export default src;
-}
-declare module '*.png' {
-  const src: string;
-  export default src;
-}