From 48a7d51a7f5adb8a9655aa1f03484525cc785a7b Mon Sep 17 00:00:00 2001
From: Neo <neo@corestory.ai>
Date: Sun, 26 Apr 2026 13:17:44 +0000
Subject: [PATCH] feat: add Admin SSO section (Nomad, Consul, OpenBao)

- New Admin section with SSO badge
- nomad.lab.corestory.ai, consul.lab.corestory.ai, bao.lab.corestory.ai
- Footer updated to note SSO requirement
- pki/openbao card updated to separate pki from bao
---
 index.html | 136 ++++++++++++++++++++---------------------------------
 1 file changed, 51 insertions(+), 85 deletions(-)

diff --git a/index.html b/index.html
index 9b512ee..31be447 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,6 @@
   <title>corestory Lab</title>
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       background: #0a0a0f;
@@ -14,31 +13,10 @@
       min-height: 100vh;
       padding: 48px 24px;
     }
-
-    header {
-      text-align: center;
-      margin-bottom: 56px;
-    }
-
-    header h1 {
-      font-size: 2rem;
-      font-weight: 700;
-      letter-spacing: -0.02em;
-      color: #fff;
-    }
-
-    header h1 span {
-      color: #6366f1;
-    }
-
-    header p {
-      margin-top: 8px;
-      font-size: 0.9rem;
-      color: #64748b;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-    }
-
+    header { text-align: center; margin-bottom: 56px; }
+    header h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
+    header h1 span { color: #6366f1; }
+    header p { margin-top: 8px; font-size: 0.9rem; color: #64748b; letter-spacing: 0.08em; text-transform: uppercase; }
     .grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -46,7 +24,6 @@
       max-width: 1100px;
       margin: 0 auto;
     }
-
     .section-label {
       grid-column: 1 / -1;
       font-size: 0.72rem;
@@ -58,7 +35,6 @@
       border-bottom: 1px solid #1e293b;
       margin-top: 8px;
     }
-
     a.card {
       display: flex;
       align-items: center;
@@ -71,67 +47,24 @@
       color: inherit;
       transition: border-color 0.15s, background 0.15s, transform 0.1s;
     }
-
-    a.card:hover {
-      border-color: #6366f1;
-      background: #13141f;
-      transform: translateY(-1px);
-    }
-
+    a.card:hover { border-color: #6366f1; background: #13141f; transform: translateY(-1px); }
     .card-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 10px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 1.3rem;
-      flex-shrink: 0;
+      width: 40px; height: 40px; border-radius: 10px;
+      display: flex; align-items: center; justify-content: center;
+      font-size: 1.3rem; flex-shrink: 0;
     }
-
     .card-body { flex: 1; min-width: 0; }
-
-    .card-name {
-      font-size: 0.95rem;
-      font-weight: 600;
-      color: #f1f5f9;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .card-desc {
-      font-size: 0.78rem;
-      color: #64748b;
-      margin-top: 2px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .card-url {
-      font-size: 0.7rem;
-      color: #334155;
-      margin-top: 4px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .arrow {
-      color: #334155;
-      font-size: 1rem;
-      flex-shrink: 0;
-      transition: color 0.15s;
-    }
+    .card-name { font-size: 0.95rem; font-weight: 600; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .card-desc { font-size: 0.78rem; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .card-url { font-size: 0.7rem; color: #334155; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .arrow { color: #334155; font-size: 1rem; flex-shrink: 0; transition: color 0.15s; }
     a.card:hover .arrow { color: #6366f1; }
-
-    footer {
-      text-align: center;
-      margin-top: 64px;
-      font-size: 0.75rem;
-      color: #1e293b;
+    .badge {
+      font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
+      text-transform: uppercase; padding: 2px 6px; border-radius: 4px;
+      background: #1e293b; color: #6366f1; margin-left: 6px; vertical-align: middle;
     }
+    footer { text-align: center; margin-top: 64px; font-size: 0.75rem; color: #1e293b; }
   </style>
 </head>
 <body>
@@ -278,9 +211,42 @@
     <span class="arrow">→</span>
   </a>
 
+  <!-- ADMIN (Keycloak SSO) -->
+  <div class="section-label">Admin <span class="badge">SSO</span></div>
+
+  <a class="card" href="https://nomad.lab.corestory.ai" target="_blank">
+    <div class="card-icon" style="background:#1a0a1a;">🧱</div>
+    <div class="card-body">
+      <div class="card-name">Nomad</div>
+      <div class="card-desc">Workload orchestration</div>
+      <div class="card-url">nomad.lab.corestory.ai</div>
+    </div>
+    <span class="arrow">→</span>
+  </a>
+
+  <a class="card" href="https://consul.lab.corestory.ai" target="_blank">
+    <div class="card-icon" style="background:#0a1a1a;">🌐</div>
+    <div class="card-body">
+      <div class="card-name">Consul</div>
+      <div class="card-desc">Service mesh & discovery</div>
+      <div class="card-url">consul.lab.corestory.ai</div>
+    </div>
+    <span class="arrow">→</span>
+  </a>
+
+  <a class="card" href="https://bao.lab.corestory.ai" target="_blank">
+    <div class="card-icon" style="background:#1a1a0a;">🗝️</div>
+    <div class="card-body">
+      <div class="card-name">OpenBao</div>
+      <div class="card-desc">Secrets management UI</div>
+      <div class="card-url">bao.lab.corestory.ai</div>
+    </div>
+    <span class="arrow">→</span>
+  </a>
+
 </div>
 
-<footer>corestory lab · *.lab.corestory.ai · 3-node Nomad cluster</footer>
+<footer>corestory lab · *.lab.corestory.ai · 3-node Nomad cluster · Admin routes require Keycloak SSO</footer>
 
 </body>
 </html>