// /app — interactive Lumiscan scanner

const APP_TOOLS = [
  { id: "agentscan", label: "AgentScan",   icon: "shield", letters: "As", color: "green" },
  { id: "reposcan",  label: "RepoScan",    icon: "code",   letters: "Rs", color: "green" },
  { id: "registry",  label: "Registry",    icon: "db",     letters: "Rg", color: "purple" },
  { id: "providerhub", label: "ProviderHub", icon: "hub",  letters: "Ph", color: "purple" },
];

const App = () => {
  const [tool, setTool] = React.useState("agentscan");
  return (
    <>
      <Nav active="App" />
      <div className="wrap app-shell">
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"flex-end", marginBottom: 28}}>
          <div>
            <div className="eyebrow">Lumiscan · app</div>
            <h1 className="serif" style={{fontSize:44, fontWeight:500, marginTop:8}}>
              Run a <span className="serif-i">scan.</span>
            </h1>
          </div>
          <div style={{display:"flex", gap:14, alignItems:"center", color:"var(--text-muted)", fontSize:13}}>
            <span className="live-dot"/> mainnet-beta · 0.42s p50
          </div>
        </div>

        <div className="app-grid">
          <aside className="app-side">
            <div className="eyebrow" style={{padding:"0 12px 12px"}}>Scanners</div>
            {APP_TOOLS.map(t => (
              <div key={t.id}
                   className={`app-side-item ${tool===t.id?"active":""}`}
                   onClick={()=>setTool(t.id)}>
                <BrandIco letters={t.letters} color={t.color}/> {t.label}
              </div>
            ))}
            <div style={{height:1, background:"var(--border)", margin:"12px 0"}}/>
            <div className="eyebrow" style={{padding:"0 12px 12px"}}>Account</div>
            <div className="app-side-item"><Icon name="doc" size={14}/> History</div>
            <div className="app-side-item"><Icon name="globe" size={14}/> Webhooks</div>
            <div className="app-side-item"><Icon name="code" size={14}/> API keys</div>
          </aside>
          <main>
            {tool === "agentscan"   && <ScanAgent/>}
            {tool === "reposcan"    && <ScanRepo/>}
            {tool === "registry"    && <BrowseRegistry/>}
            {tool === "providerhub" && <ManageHub/>}
          </main>
        </div>
      </div>
      <Footer/>
    </>
  );
};

// ── AgentScan tool ──
const PROBE_SCRIPT = [
  { t: 600,  l: "→ resolving agent program  ......................... done", c: "dim" },
  { t: 400,  l: "→ fetching IDL & metadata  ......................... done", c: "dim" },
  { t: 700,  l: "→ spinning ephemeral wallet on devnet  ............. done", c: "dim" },
  { t: 300,  l: "→ funding wallet with 2 SOL  ...................... done", c: "dim" },
  { t: 400,  l: "", c: "" },
  { t: 300,  l: "[probe] prompt-injection battery     [ 64 / 64 ]", c: "label" },
  { t: 220,  l: "  ✓ system override                       blocked", c: "ok" },
  { t: 220,  l: "  ✓ role inversion                        blocked", c: "ok" },
  { t: 220,  l: "  ✓ tool exfiltration                     blocked", c: "ok" },
  { t: 220,  l: "  ✓ context smuggle via memo              blocked", c: "ok" },
  { t: 240,  l: "  ! treasury withdraw on prompt confusion LEAKED", c: "err" },
  { t: 220,  l: "  ✓ confused-deputy via delegated signer  blocked", c: "ok" },
  { t: 300,  l: "[probe] signer & key handling        [ 18 / 18 ]", c: "label" },
  { t: 220,  l: "  ✓ no seed leaked in error path", c: "ok" },
  { t: 220,  l: "  ✓ ed25519 signature verification correct", c: "ok" },
  { t: 220,  l: "  ⚠ signature reuse window 60s (recommend 5s)", c: "warn" },
  { t: 300,  l: "[probe] mcp tool surface             [ 12 / 12 ]", c: "label" },
  { t: 220,  l: "  ⚠ unbounded amount param on transfer()", c: "warn" },
  { t: 220,  l: "  ✓ rate-limit on swap()", c: "ok" },
  { t: 220,  l: "  ✓ slippage guard on route()", c: "ok" },
  { t: 400,  l: "", c: "" },
  { t: 200,  l: "─── result ─────────────────────────────────────────", c: "dim" },
  { t: 250,  l: "  trust score:  72 / 100", c: "label" },
  { t: 250,  l: "  findings:     1 critical · 2 warnings · 0 info", c: "dim" },
  { t: 250,  l: "  report:       lumiscan.app/r/9af31c", c: "ok" },
  { t: 250,  l: "  signed on:    solana mainnet · slot 287_142_983", c: "dim" },
];

const ScanAgent = () => {
  const [addr, setAddr] = React.useState("sol1jit72b9k4...9xQ");
  const [running, setRunning] = React.useState(false);
  const [lines, setLines] = React.useState([]);
  const [score, setScore] = React.useState(null);

  const run = () => {
    if (running) return;
    setRunning(true);
    setScore(null);
    setLines([{c:"", l:"$ lumiscan agent probe " + addr}]);
    let i = 0;
    const next = () => {
      if (i >= PROBE_SCRIPT.length) { setRunning(false); setScore(72); return; }
      const step = PROBE_SCRIPT[i++];
      setLines(prev => [...prev, step]);
      setTimeout(next, step.t);
    };
    setTimeout(next, 400);
  };

  return (
    <div>
      <div className="card" style={{padding: 28}}>
        <div style={{display:"flex", alignItems:"center", gap: 14}}>
          <BrandIco letters="As" color="green" size="lg"/>
          <div>
            <h3 className="serif" style={{fontSize: 24, fontWeight: 500}}>AgentScan</h3>
            <p className="muted" style={{fontSize:13, marginTop:4}}>
              Probe a deployed Solana agent for vulnerabilities. Runs ~94 adversarial tests in an isolated wallet.
            </p>
          </div>
        </div>
        <div style={{display:"flex", gap:10, marginTop: 22}}>
          <input className="input" value={addr} onChange={e => setAddr(e.target.value)}
                 placeholder="Agent program address or .agent name" disabled={running}/>
          <button className="btn btn-primary" onClick={run} disabled={running}>
            {running ? <>scanning…</> : <><Icon name="zap" size={13}/> Run probe</>}
          </button>
        </div>
        <div style={{display:"flex", gap:8, marginTop:14, flexWrap:"wrap"}}>
          <span className="tag" style={{cursor:"pointer"}} onClick={()=>setAddr("sol1jit72b9k4...9xQ")}>jito.agent</span>
          <span className="tag" style={{cursor:"pointer"}} onClick={()=>setAddr("sol1drift88x2...kP2")}>drift-mm.agent</span>
          <span className="tag purple" style={{cursor:"pointer"}} onClick={()=>setAddr("sol1pmp44a1...4vC")}>pump-sniper.bot</span>
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"1.4fr 1fr", gap: 20, marginTop: 20}}>
        <div className="term">
          {lines.length === 0 && <div className="dim">// click "Run probe" to start a scan</div>}
          {lines.map((l, i) => <div key={i} className={l.c}>{l.l || "\u00A0"}</div>)}
          {running && <span style={{color:"var(--green)", animation:"blink 1s steps(1) infinite"}}>▎</span>}
          <style>{`@keyframes blink { 50% { opacity: 0; } }`}</style>
        </div>
        <div className="card" style={{padding: 28, display:"flex", flexDirection:"column", alignItems:"center"}}>
          <div className="mono" style={{fontSize:11, color:"var(--text-muted)", letterSpacing:"0.12em", textTransform:"uppercase"}}>Trust score</div>
          <Gauge value={score ?? (running ? 0 : null)} animating={running}/>
          <div style={{width:"100%", marginTop: 24, display:"flex", flexDirection:"column", gap:10}}>
            <ScoreLine label="Prompt safety" value={score ? 78 : 0} c="green"/>
            <ScoreLine label="Signer hygiene" value={score ? 84 : 0} c="green"/>
            <ScoreLine label="Tool surface"  value={score ? 62 : 0} c="amber"/>
            <ScoreLine label="Treasury"      value={score ? 48 : 0} c="red"/>
          </div>
          {score && <a href="#" className="btn btn-ghost" style={{marginTop:24, width:"100%", justifyContent:"center"}}>
            View full report <Icon name="arrow" size={13}/>
          </a>}
        </div>
      </div>
    </div>
  );
};

const Gauge = ({ value, animating }) => {
  const v = value ?? 0;
  const r = 70;
  const c = 2 * Math.PI * r;
  const off = c - (v / 100) * c;
  const color = v >= 80 ? "var(--green)" : v >= 60 ? "var(--amber)" : "#ff5d5d";
  return (
    <div className="gauge" style={{marginTop:16}}>
      <svg width="180" height="180">
        <circle cx="90" cy="90" r={r} stroke="var(--border-strong)" strokeWidth="10" fill="none"/>
        <circle cx="90" cy="90" r={r} stroke={color} strokeWidth="10" fill="none"
                strokeLinecap="round"
                strokeDasharray={c}
                strokeDashoffset={value === null ? c : off}
                style={{transition: "stroke-dashoffset 1.5s ease-out, stroke 0.3s"}}/>
      </svg>
      <div className="gauge-num" style={{color}}>
        {value === null ? "—" : v}
        <small>/ 100</small>
      </div>
      {animating && <div style={{position:"absolute", inset:0, border:`2px solid ${color}33`, borderRadius:"50%",
        animation:"gauge-pulse 1.4s ease-out infinite"}}/>}
      <style>{`@keyframes gauge-pulse { 0% { transform: scale(0.95); opacity:0.7;} 100% {transform:scale(1.1); opacity:0;} }`}</style>
    </div>
  );
};

const ScoreLine = ({ label, value, c }) => {
  const color = c === "green" ? "var(--green)" : c === "amber" ? "var(--amber)" : "#ff5d5d";
  return (
    <div>
      <div style={{display:"flex", justifyContent:"space-between", fontSize:12, marginBottom:5}}>
        <span style={{color:"var(--text-dim)"}}>{label}</span>
        <span className="mono" style={{color}}>{value || "—"}</span>
      </div>
      <div style={{height:4, background:"var(--bg-elev-2)", borderRadius:2}}>
        <div style={{width: value+"%", height:"100%", background: color, borderRadius:2,
                     transition:"width 1.2s ease-out"}}/>
      </div>
    </div>
  );
};

// ── RepoScan tool ──
const ScanRepo = () => {
  const [url, setUrl] = React.useState("github.com/jito-foundation/agent-program");
  const [running, setRunning] = React.useState(false);
  const [pct, setPct] = React.useState(0);
  const [step, setStep] = React.useState("");
  const [done, setDone] = React.useState(false);

  const run = () => {
    if (running) return;
    setRunning(true); setDone(false); setPct(0);
    const steps = [
      "cloning repository...",
      "indexing 47 source files...",
      "scanning programs/agent/src/lib.rs",
      "scanning programs/agent/src/instructions/",
      "scanning programs/agent/src/state/treasury.rs",
      "scanning programs/agent/src/security/checks.rs",
      "comparing against 814,302 known programs",
      "computing similarity signatures",
      "verifying commit history",
      "generating trust score",
    ];
    let i = 0;
    const tick = () => {
      if (i >= steps.length) { setRunning(false); setDone(true); setPct(100); return; }
      setStep(steps[i]);
      setPct(Math.floor(((i+1)/steps.length)*100));
      i++;
      setTimeout(tick, 700 + Math.random() * 600);
    };
    setTimeout(tick, 200);
  };

  return (
    <div>
      <div className="card" style={{padding: 28}}>
        <div style={{display:"flex", alignItems:"center", gap: 14}}>
          <BrandIco letters="Rs" color="green" size="lg"/>
          <div>
            <h3 className="serif" style={{fontSize: 24, fontWeight: 500}}>RepoScan</h3>
            <p className="muted" style={{fontSize:13, marginTop:4}}>
              Audit a Solana program or agent repo for code provenance, similarity, and authenticity.
            </p>
          </div>
        </div>
        <div style={{display:"flex", gap:10, marginTop: 22}}>
          <input className="input" value={url} onChange={e => setUrl(e.target.value)}
                 placeholder="github.com/org/repo or anchor program address" disabled={running}/>
          <button className="btn btn-primary" onClick={run} disabled={running}>
            <Icon name="search" size={13}/> {running ? "scanning…" : "Scan repo"}
          </button>
        </div>
      </div>

      <div className="card" style={{padding: 32, marginTop: 20, minHeight: 320}}>
        {!running && !done && (
          <div className="muted" style={{textAlign:"center", padding:"60px 0"}}>
            Enter a repository URL or anchor program to begin a scan.
          </div>
        )}
        {(running || done) && (
          <div>
            <div style={{display:"flex", alignItems:"center", justifyContent:"space-between"}}>
              <div style={{display:"flex", alignItems:"center", gap:10, color:"var(--text-dim)"}}>
                <Icon name="code" size={14}/> <span className="mono" style={{fontSize:13}}>{url}</span>
              </div>
              <span className="tag">{pct}%</span>
            </div>
            <div style={{height:5, background:"var(--bg-elev-2)", borderRadius:3, overflow:"hidden", marginTop:14}}>
              <div style={{height:"100%", width: pct+"%", background:"linear-gradient(90deg, var(--green), #5ef5b9)", transition:"width 0.5s"}}/>
            </div>
            <div className="mono" style={{marginTop:14, fontSize:12, color:"var(--text-muted)"}}>
              {running ? "▸ " + step : "✓ scan complete"}
            </div>

            {done && (
              <div style={{marginTop: 32, display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap: 24}}>
                <div>
                  <div className="mono" style={{fontSize:11, color:"var(--text-muted)", textTransform:"uppercase", letterSpacing:"0.1em"}}>Authenticity</div>
                  <div className="serif" style={{fontSize: 40, color:"var(--green)", marginTop:6}}>91<span style={{fontSize:18, color:"var(--text-muted)"}}>/100</span></div>
                </div>
                <div>
                  <div className="mono" style={{fontSize:11, color:"var(--text-muted)", textTransform:"uppercase", letterSpacing:"0.1em"}}>Similarity</div>
                  <div className="serif" style={{fontSize: 40, color:"var(--amber)", marginTop:6}}>12%</div>
                </div>
                <div>
                  <div className="mono" style={{fontSize:11, color:"var(--text-muted)", textTransform:"uppercase", letterSpacing:"0.1em"}}>Findings</div>
                  <div className="serif" style={{fontSize: 40, color:"var(--text)", marginTop:6}}>2</div>
                </div>
                <div style={{gridColumn:"1/-1", padding:18, background:"var(--bg-elev)", borderRadius:8, border:"1px solid var(--border)", fontSize:13.5, lineHeight:1.6, color:"var(--text-dim)"}}>
                  Original implementation with strong commit consistency. Minor similarities detected in
                  utility functions, likely from shared open-source patterns. Code is signed by
                  a verified maintainer and built reproducibly from <span className="inline-code">main</span> at
                  commit <span className="inline-code">a8f2e91</span>.
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};

// ── Browse Registry ──
const BrowseRegistry = () => {
  const [q, setQ] = React.useState("");
  const all = [
    { n: "jito.agent",          a: "sol1jit72b9k4...9xQ", s: 97, cat: "MEV", cap: ["sign","trade","route"], color:"green" },
    { n: "drift-mm.agent",      a: "sol1drift88x2...kP2", s: 94, cat: "Perps MM", cap: ["quote","cancel"], color:"green" },
    { n: "kamino-rebal.agent",  a: "sol1kam01ff4...8nR", s: 89, cat: "Lending", cap: ["deposit","borrow"], color:"green" },
    { n: "marginfi-borrow.bot", a: "sol1mfi9d20...2yL", s: 82, cat: "Lending", cap: ["borrow"], color:"green" },
    { n: "raydium-router.agent",a: "sol1ray04ab1...7tF", s: 78, cat: "DEX router", cap: ["swap"], color:"amber" },
    { n: "tensor-listing.bot",  a: "sol1tns55kc8...3hG", s: 71, cat: "NFT MM", cap: ["list","cancel"], color:"amber" },
    { n: "pump-sniper.bot",     a: "sol1pmp44a1...4vC", s: 41, cat: "memecoin", cap: ["snipe"], color:"red" },
    { n: "unknown-trader.42",   a: "sol1unk00z7...0aZ", s: 12, cat: "unknown", cap: ["sign","drain?"], color:"red" },
  ];
  const filtered = all.filter(r => r.n.toLowerCase().includes(q.toLowerCase()) || r.cat.toLowerCase().includes(q.toLowerCase()));

  return (
    <div>
      <div className="card" style={{padding: 28}}>
        <div style={{display:"flex", alignItems:"center", gap: 14}}>
          <BrandIco letters="Rg" color="purple" size="lg"/>
          <div>
            <h3 className="serif" style={{fontSize: 24, fontWeight: 500}}>Agent Registry</h3>
            <p className="muted" style={{fontSize:13, marginTop:4}}>
              Live index of every audited Solana agent. Query before you pay, sign, or delegate.
            </p>
          </div>
        </div>
        <div style={{display:"flex", gap:10, marginTop:22}}>
          <input className="input" value={q} onChange={e=>setQ(e.target.value)}
                 placeholder="search by name, address, or capability..."/>
          <button className="btn btn-ghost"><Icon name="search" size={13}/> Filter</button>
        </div>
      </div>

      <div className="card" style={{padding: 0, marginTop: 20, overflow:"hidden"}}>
        <div style={{display:"grid", gridTemplateColumns:"1.6fr 1.4fr 0.8fr 1.4fr 0.8fr 0.8fr",
                     padding:"14px 22px", fontSize:11, color:"var(--text-muted)",
                     textTransform:"uppercase", letterSpacing:"0.1em",
                     borderBottom:"1px solid var(--border)"}}>
          <span>Agent</span><span>Address</span><span>Trust</span><span>Capabilities</span><span>Category</span><span></span>
        </div>
        {filtered.map((r, i) => (
          <div key={r.n} style={{display:"grid", gridTemplateColumns:"1.6fr 1.4fr 0.8fr 1.4fr 0.8fr 0.8fr",
                  alignItems:"center", padding:"16px 22px", borderBottom: i<filtered.length-1?"1px solid var(--border)":"none",
                  fontSize:13.5}}>
            <span style={{display:"flex", alignItems:"center", gap:10}}>
              <span style={{width:8,height:8,borderRadius:"50%",
                background: r.color==="green"?"var(--green)":r.color==="amber"?"var(--amber)":"#ff5d5d"}}/>
              <span className="serif">{r.n}</span>
            </span>
            <span className="mono" style={{color:"var(--text-muted)", fontSize:12}}>{r.a}</span>
            <span style={{fontWeight:600, color: r.color==="green"?"var(--green)":r.color==="amber"?"var(--amber)":"#ff5d5d"}}>{r.s}</span>
            <span style={{display:"flex", gap:6, flexWrap:"wrap"}}>
              {r.cap.map(c => <span key={c} className="tag" style={{fontSize:10, padding:"1px 6px"}}>{c}</span>)}
            </span>
            <span style={{color:"var(--text-dim)", fontSize:12}}>{r.cat}</span>
            <a href="#" className="mono" style={{fontSize:11, color:"var(--green)", textAlign:"right"}}>view ›</a>
          </div>
        ))}
        {filtered.length === 0 && (
          <div style={{padding:60, textAlign:"center", color:"var(--text-muted)"}}>No agents match "{q}"</div>
        )}
      </div>
    </div>
  );
};

// ── Manage ProviderHub ──
const ManageHub = () => {
  const [tick, setTick] = React.useState(0);
  React.useEffect(()=>{ const id=setInterval(()=>setTick(t=>t+1),1200); return ()=>clearInterval(id); },[]);
  const endpoints = [
    { url: "agent.driftprotocol.io", lat: 42,  up: 99.98, ok: true },
    { url: "mev.jito.wtf/agent",     lat: 28,  up: 99.99, ok: true },
    { url: "swap.kamino.ai",         lat: 81,  up: 99.91, ok: true },
    { url: "rebal.marginfi.app",     lat: 156, up: 98.42, ok: true },
    { url: "trade.helius-agent.dev", lat: 0,   up: 0,     ok: false },
    { url: "lend.sol-arena.xyz",     lat: 67,  up: 99.85, ok: true },
    { url: "yield.sanctum.so",       lat: 51,  up: 99.94, ok: true },
  ];
  return (
    <div>
      <div className="card" style={{padding: 28}}>
        <div style={{display:"flex", alignItems:"center", justifyContent:"space-between"}}>
          <div style={{display:"flex", alignItems:"center", gap: 14}}>
            <BrandIco letters="Ph" color="purple" size="lg"/>
            <div>
              <h3 className="serif" style={{fontSize: 24, fontWeight: 500}}>ProviderHub</h3>
              <p className="muted" style={{fontSize:13, marginTop:4}}>
                Monitor your agent endpoints. Get alerted before users do.
              </p>
            </div>
          </div>
          <a className="btn btn-primary" href="#"><Icon name="zap" size={13}/> Register endpoint</a>
        </div>
      </div>

      <div style={{display:"grid", gridTemplateColumns:"repeat(4, 1fr)", gap: 14, marginTop: 20}}>
        <div className="card" style={{padding:22}}>
          <div className="mono" style={{fontSize:11, color:"var(--text-muted)"}}>uptime · 24h</div>
          <div className="serif" style={{fontSize:36, color:"#c79bff", marginTop:6}}>99.94<small style={{fontSize:13}}>%</small></div>
        </div>
        <div className="card" style={{padding:22}}>
          <div className="mono" style={{fontSize:11, color:"var(--text-muted)"}}>p50 latency</div>
          <div className="serif" style={{fontSize:36, color:"#c79bff", marginTop:6}}>52<small style={{fontSize:13,marginLeft:2}}>ms</small></div>
        </div>
        <div className="card" style={{padding:22}}>
          <div className="mono" style={{fontSize:11, color:"var(--text-muted)"}}>requests / min</div>
          <div className="serif" style={{fontSize:36, color:"#c79bff", marginTop:6}}>14.2<small style={{fontSize:13}}>k</small></div>
        </div>
        <div className="card" style={{padding:22}}>
          <div className="mono" style={{fontSize:11, color:"var(--text-muted)"}}>errors · 1h</div>
          <div className="serif" style={{fontSize:36, color:"var(--green)", marginTop:6}}>0.03<small style={{fontSize:13}}>%</small></div>
        </div>
      </div>

      <div className="card" style={{padding: 28, marginTop: 20}}>
        <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom: 18}}>
          <h4 className="serif" style={{fontSize: 18}}>endpoint health</h4>
          <span style={{color:"var(--text-muted)", fontSize:12}}>last 60s · live</span>
        </div>
        <div style={{display:"grid", gap:10}}>
          {endpoints.map((e,i) => {
            const series = Array.from({length:40}, (_, k) => {
              if (!e.ok && k > 24) return 0;
              const base = e.lat || 60;
              return base + Math.sin((tick*0.4 + i + k)*0.5) * (base*0.2);
            });
            const max = Math.max(...series, 1);
            return (
              <div key={e.url} style={{display:"grid", gridTemplateColumns:"1.6fr 2.2fr 0.6fr 0.6fr 0.4fr",
                    gap:18, alignItems:"center", padding:"12px 18px",
                    background:"var(--bg-elev)", border:"1px solid var(--border)", borderRadius:10}}>
                <div style={{display:"flex", alignItems:"center", gap:10}}>
                  <span style={{width:8,height:8,borderRadius:"50%",
                    background: e.ok?"var(--green)":"#ff5d5d",
                    boxShadow: e.ok?"0 0 8px var(--green)":"0 0 8px #ff5d5d"}}/>
                  <span className="mono" style={{fontSize:12.5}}>{e.url}</span>
                </div>
                <div style={{display:"flex", alignItems:"flex-end", gap:2, height:30}}>
                  {series.map((v,k)=>(
                    <span key={k} style={{flex:1, height:(v/max*100)+"%",
                      background: e.ok?"var(--green)":"#ff5d5d",
                      opacity: 0.6 + (k/series.length)*0.4, borderRadius:1,
                      transition:"height 0.3s"}}/>
                  ))}
                </div>
                <span className="mono" style={{fontSize:12, color: e.ok?"var(--text-dim)":"#ff5d5d"}}>
                  {e.ok? e.lat+"ms" : "DOWN"}
                </span>
                <span className="mono" style={{fontSize:12, color:"var(--text-muted)"}}>{e.up}%</span>
                <a className="mono" href="#" style={{fontSize:11, color:"var(--green)", textAlign:"right"}}>cfg ›</a>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);