<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ABI Service Portal</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
      :root {
        color-scheme: dark;
        --bg: #07111f;
        --bg-accent: #11243d;
        --surface: rgba(12, 25, 44, 0.78);
        --surface-border: rgba(148, 192, 255, 0.2);
        --text: #e7eefc;
        --text-muted: #a8b6ce;
        --link: #79d8ff;
        --link-hover: #c0ecff;
        --badge-bg: rgba(125, 211, 252, 0.16);
        --badge-text: #bfeaff;
        --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
      }
      body {
        font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
        margin: 0;
        padding: 24px;
        background:
          radial-gradient(circle at 8% -5%, rgba(121, 216, 255, 0.22), transparent 34%),
          radial-gradient(circle at 90% 105%, rgba(79, 138, 255, 0.2), transparent 40%),
          linear-gradient(140deg, var(--bg) 0%, var(--bg-accent) 48%, #081426 100%);
        color: var(--text);
        min-height: 100vh;
      }
      a {
        color: var(--link);
        text-decoration: none;
        transition: color 0.2s ease;
      }
      a:hover {
        color: var(--link-hover);
        text-decoration: underline;
      }
      .container {
        max-width: 1000px;
        margin: 0 auto;
      }
      .header {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
      }
      .header h1 {
        margin: 0;
        font-size: 30px;
        letter-spacing: -0.02em;
      }
      .hint {
        font-size: 14px;
        color: var(--text-muted);
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 16px;
      }
      .section {
        margin-bottom: 24px;
      }
      .section-title {
        margin: 0 0 12px 0;
        font-size: 13px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-muted);
      }
      .section-title .badge {
        margin-left: 8px;
        vertical-align: middle;
      }
      .card {
        border: 1px solid var(--surface-border);
        border-radius: 14px;
        padding: 14px;
        background: var(--surface);
        box-shadow: var(--shadow);
        backdrop-filter: blur(6px);
        transition: transform 0.18s ease, border-color 0.18s ease;
      }
      .card:hover {
        transform: translateY(-2px);
        border-color: rgba(192, 236, 255, 0.52);
      }
      .card h2 {
        margin: 0 0 8px 0;
        font-size: 18px;
        letter-spacing: -0.01em;
      }
      .card p {
        margin: 0 0 10px 0;
        font-size: 13px;
        color: var(--text-muted);
      }
      .links {
        display: flex;
        flex-direction: column;
        gap: 6px;
        font-size: 14px;
      }
      .badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 999px;
        font-size: 11px;
        background: var(--badge-bg);
        color: var(--badge-text);
        margin-left: 6px;
      }
      .footer {
        margin-top: 24px;
        font-size: 12px;
        color: var(--text-muted);
      }
      @media (prefers-color-scheme: light) {
        :root {
          color-scheme: light;
          --bg: #eaf1ff;
          --bg-accent: #dbe8ff;
          --surface: rgba(255, 255, 255, 0.82);
          --surface-border: rgba(16, 48, 96, 0.14);
          --text: #0f1f3a;
          --text-muted: #4a5f83;
          --link: #005bc1;
          --link-hover: #003d88;
          --badge-bg: rgba(0, 91, 193, 0.11);
          --badge-text: #124581;
          --shadow: 0 10px 24px rgba(16, 46, 92, 0.1);
        }
        body {
          background:
            radial-gradient(circle at 10% -10%, rgba(255, 255, 255, 0.95), transparent 40%),
            radial-gradient(circle at 92% 112%, rgba(160, 197, 255, 0.38), transparent 42%),
            linear-gradient(145deg, var(--bg) 0%, var(--bg-accent) 52%, #f5f9ff 100%);
        }
        .card:hover {
          border-color: rgba(0, 91, 193, 0.34);
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>ABI Service Portal</h1>
        <div class="hint">Grouped by typology for faster local navigation</div>
      </div>

      <div class="section">
        <h2 class="section-title">Essentials <span class="badge">our tools</span></h2>
        <div class="grid">
          <div class="card">
            <h2>ABI API</h2>
            <p>Core ABI service and operator UI.</p>
            <div class="links">
              <a href="http://localhost:9879" target="_blank" rel="noreferrer">REST API</a>
              <a href="http://localhost:8501" target="_blank" rel="noreferrer">Streamlit UI</a>
            </div>
          </div>

          <div class="card">
            <h2>Nexus</h2>
            <p>Artifact repository manager.</p>
            <div class="links">
              <a href="http://127.0.0.1:3042" target="_blank" rel="noreferrer">Nexus UI</a>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">Databases</h2>
        <div class="grid">
          <div class="card">
            <h2>PostgreSQL</h2>
            <p>Agent memory database.</p>
            <div class="links">
              <span>postgresql://abi_user:abi_password@localhost:5432/abi_memory</span>
              <span class="badge">non-HTTP</span>
            </div>
          </div>

          <div class="card">
            <h2>Qdrant</h2>
            <p>Vector database API and dashboard.</p>
            <div class="links">
              <a href="http://localhost:6333/dashboard" target="_blank" rel="noreferrer">Dashboard</a>
              <a href="http://localhost:6333" target="_blank" rel="noreferrer">REST API</a>
              <span>gRPC: localhost:6334 <span class="badge">non-HTTP</span></span>
            </div>
          </div>

          <div class="card">
            <h2>Apache Jena TDB2</h2>
            <p>RDF triple store with HTTP SPARQL query access.</p>
            <div class="links">
              <a href="http://localhost:3030/" target="_blank" rel="noreferrer">Fuseki Admin UI</a>
              <a href="http://localhost:3030/ds" target="_blank" rel="noreferrer">Dataset endpoint</a>
              <a href="http://localhost:3030/ds/query" target="_blank" rel="noreferrer">SPARQL Query</a>
              <a href="http://localhost:3000" target="_blank" rel="noreferrer">SPARQL HTTP Query UI</a>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">Storage</h2>
        <div class="grid">
          <div class="card">
            <h2>MinIO</h2>
            <p>S3-compatible object storage.</p>
            <div class="links">
              <a href="http://localhost:9001" target="_blank" rel="noreferrer">Console</a>
              <a href="http://localhost:9000" target="_blank" rel="noreferrer">S3 API</a>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">Messaging and Cache</h2>
        <div class="grid">
          <div class="card">
            <h2>RabbitMQ</h2>
            <p>AMQP message bus with UI.</p>
            <div class="links">
              <a href="http://localhost:15672" target="_blank" rel="noreferrer">Management UI</a>
              <span>AMQP: localhost:5672 <span class="badge">non-HTTP</span></span>
            </div>
          </div>

          <div class="card">
            <h2>Redis</h2>
            <p>In-memory cache and broker.</p>
            <div class="links">
              <a href="http://localhost:8082" target="_blank" rel="noreferrer">Redis Commander UI</a>
              <span>redis://localhost:6379 <span class="badge">non-HTTP</span></span>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">Orchestration</h2>
        <div class="grid">
          <div class="card">
            <h2>Dagster</h2>
            <p>Workflow orchestration UI.</p>
            <div class="links">
              <a href="http://localhost:3001" target="_blank" rel="noreferrer">Dagster UI</a>
            </div>
          </div>
        </div>
      </div>

      <div class="section">
        <h2 class="section-title">Matrix</h2>
        <div class="grid">
          <div class="card">
            <h2>Synapse (Matrix)</h2>
            <p>Homeserver APIs for result distribution.</p>
            <div class="links">
              <a href="http://localhost:8008" target="_blank" rel="noreferrer">Client-Server API</a>
              <span>Federation: localhost:8448 <span class="badge">non-HTTP</span></span>
            </div>
          </div>

          <div class="card">
            <h2>Element Web</h2>
            <p>Matrix web client for consuming outputs.</p>
            <div class="links">
              <a href="http://localhost:8081" target="_blank" rel="noreferrer">Element UI</a>
            </div>
          </div>
        </div>
      </div>

      <div class="footer">
        If a link fails, the service may not be running in your active profile.
      </div>
    </div>
  </body>
</html>
