@opensearch-project/agent-health 0.0.1 → 0.1.0

package/dist/06363ae0dcb276526e56d844ae57f1eb2e16d1dc.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 8.75 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVG">
+<path id="Vector" d="M6.74455 8.49137C7.08635 8.14957 7.08635 7.59449 6.74455 7.25269L3.24455 3.75269C2.99299 3.50113 2.61838 3.4273 2.29025 3.56402C1.96213 3.70074 1.74885 4.01793 1.74885 4.3734L1.75158 11.3734C1.75158 11.7261 1.96486 12.0461 2.29299 12.1828C2.62111 12.3195 2.99572 12.2429 3.24728 11.9941L6.74728 8.4941L6.74455 8.49137" fill="var(--fill-0, #9CA3AF)"/>
+</g>
+</svg>

package/dist/17cc03b81ececabf3c8b3c3bf4b8203cd3028613.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVG">
+<path id="Vector" d="M6 0C9.31149 0 12 2.68851 12 6C12 9.31149 9.31149 12 6 12C2.68851 12 0 9.31149 0 6C0 2.68851 2.68851 0 6 0V0M5.4375 2.8125V6C5.4375 6.1875 5.53125 6.36328 5.68828 6.46875L7.93828 7.96875C8.19609 8.14219 8.54531 8.07188 8.71875 7.81172Cnan nan 8.82188 7.20469 8.56172 7.03125L6.5625 5.7V2.8125C6.5625 2.50078 6.31172 2.25 6 2.25Cnan nan 5.4375 2.50078 5.4375 2.8125V2.8125" fill="var(--fill-0, #6B7280)"/>
+</g>
+</svg>

package/dist/25f48f7350a1cb261d7ab5492972b53a075f1716.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVG">
+<path id="Vector" d="M6.375 0H9.28359C9.58125 0 9.86719 0.119531 10.0781 0.330469L11.6695 1.92188C11.8805 2.13281 12 2.41875 12 2.71641V7.875C12 8.49609 11.4961 9 10.875 9H6.375C5.75391 9 5.25 8.49609 5.25 7.875V1.125C5.25 0.503906 5.75391 0 6.375 0V0M1.125 3H4.5V4.5H1.5V10.5H6V9.75H7.5V10.875C7.5 11.4961 6.99609 12 6.375 12H1.125C0.503906 12 0 11.4961 0 10.875V4.125C0 3.50391 0.503906 3 1.125 3V3" fill="var(--fill-0, #9CA3AF)"/>
+</g>
+</svg>

package/dist/3d66ad340959f7e4ae00687e9f14adbd930abe01.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVG">
+<path id="Vector" d="M5.47031 9.52969C5.76328 9.82266 6.23906 9.82266 6.53203 9.52969L11.032 5.02969C11.325 4.73672 11.325 4.26094 11.032 3.96797C10.7391 3.675 10.2633 3.675 9.97031 3.96797L6 7.93828L2.02969 3.97031C1.73672 3.67734 1.26094 3.67734 0.967969 3.97031C0.675 4.26328 0.675 4.73906 0.967969 5.03203L5.46797 9.53203L5.47031 9.52969" fill="var(--fill-0, #6B7280)"/>
+</g>
+</svg>

package/dist/621824624feb2bb70de09132809d9cce164b8bcb.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 13.5 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVG">
+<path id="Vector" d="M12.0445 5.29453C12.484 4.85508 12.484 4.14141 12.0445 3.70195C11.6051 3.2625 10.8914 3.2625 10.452 3.70195L6.75 7.40742L3.04453 3.70547C2.60508 3.26602 1.89141 3.26602 1.45195 3.70547C1.0125 4.14492 1.0125 4.85859 1.45195 5.29805L5.15742 9L1.45547 12.7055C1.01602 13.1449 1.01602 13.8586 1.45547 14.298C1.89492 14.7375 2.60859 14.7375 3.04805 14.298L6.75 10.5926L10.4555 14.2945C10.8949 14.734 11.6086 14.734 12.048 14.2945C12.4875 13.8551 12.4875 13.1414 12.048 12.702L8.34258 9L12.0445 5.29453V5.29453" fill="var(--fill-0, #9CA3AF)"/>
+</g>
+</svg>

package/dist/81a42dbbd00769e7d823c228f5193c23f6c35e20.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 8.75365 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="SVG">
+<path id="Vector" d="M3.75855 10.243C4.10035 10.5848 4.65543 10.5848 4.99723 10.243L8.49723 6.74297C8.74879 6.49141 8.82262 6.1168 8.6859 5.78867C8.54918 5.46055 8.23199 5.24727 7.87652 5.24727L0.876522 5.25C0.523788 5.25 0.203866 5.46328 0.0671472 5.79141C-0.0695715 6.11953 0.00699096 6.49414 0.255819 6.7457L3.75582 10.2457L3.75855 10.243" fill="var(--fill-0, #9CA3AF)"/>
+</g>
+</svg>

package/dist/agent-health-style-guide.html

@@ -0,0 +1,415 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Agent Health - Style Guide</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          colors: {
+            'opensearch-blue': '#005EB8',
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    body {
+      font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    .code-font {
+      font-family: 'Source Code Pro', 'Monaco', 'Courier New', monospace;
+    }
+  </style>
+</head>
+<body class="bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors">
+  <div class="max-w-7xl mx-auto p-8">
+    <!-- Theme Toggle -->
+    <div class="fixed top-4 right-4 z-50">
+      <button 
+        onclick="toggleTheme()" 
+        class="px-4 py-2 bg-slate-200 dark:bg-slate-800 rounded-lg border border-slate-300 dark:border-slate-700 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors"
+      >
+        <span class="dark:hidden">🌙 Dark Mode</span>
+        <span class="hidden dark:inline">☀️ Light Mode</span>
+      </button>
+    </div>
+
+    <!-- Header -->
+    <header class="mb-12">
+      <h1 class="text-4xl font-bold mb-2">Agent Health Style Guide</h1>
+      <p class="text-slate-600 dark:text-slate-400">Comprehensive color and component reference</p>
+    </header>
+
+    <!-- Badges Section -->
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-slate-200 dark:border-slate-800">Badges & Pills</h2>
+      
+      <div class="space-y-8">
+        <!-- Status Badges -->
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Status Badges</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Built-in (Current)</p>
+              <span class="text-[10px] px-1.5 py-0.5 bg-muted text-muted-foreground border border-border rounded inline-block">built-in</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Running</p>
+              <span class="text-xs px-2 py-1 bg-blue-500/20 text-blue-400 border border-blue-500/30 rounded inline-block">Running</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Latest</p>
+              <span class="text-xs px-2 py-1 bg-blue-500/10 text-blue-400 border border-blue-500/30 rounded inline-block">Latest</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">New</p>
+              <span class="text-xs px-2 py-1 bg-green-500/20 text-green-400 border border-green-500/30 rounded inline-block">new</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Passed</p>
+              <span class="text-xs px-2 py-1 bg-green-500/20 text-green-400 border border-green-500/30 rounded inline-block">PASSED</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Failed</p>
+              <span class="text-xs px-2 py-1 bg-red-500/20 text-red-400 border border-red-500/30 rounded inline-block">FAILED</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Pending</p>
+              <span class="text-xs px-2 py-1 bg-amber-500/20 text-amber-400 border border-amber-500/30 rounded inline-block">PENDING</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Outdated</p>
+              <span class="text-xs px-2 py-1 bg-yellow-500/10 text-yellow-400 border border-yellow-500/30 rounded inline-block">v1.0</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Event Type Badges -->
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Event Type Badges</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">ERROR</p>
+              <span class="text-xs px-2 py-1 text-red-400 bg-red-500/10 rounded inline-block">ERROR</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">TOOL</p>
+              <span class="text-xs px-2 py-1 text-blue-400 bg-blue-500/10 rounded inline-block">TOOL</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">TEXT</p>
+              <span class="text-xs px-2 py-1 text-blue-600 bg-blue-500/10 rounded inline-block">TEXT</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">RUN</p>
+              <span class="text-xs px-2 py-1 text-purple-400 bg-purple-500/10 rounded inline-block">RUN</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">ACTIVITY</p>
+              <span class="text-xs px-2 py-1 text-amber-400 bg-amber-500/10 rounded inline-block">ACTIVITY</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Span Category Pills -->
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Span Category Pills</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">LLM</p>
+              <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 border border-purple-300 dark:bg-purple-500/10 dark:text-purple-300 dark:border-purple-500/30 rounded inline-block">LLM</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Agent</p>
+              <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 border border-blue-300 dark:bg-blue-500/10 dark:text-blue-300 dark:border-blue-500/30 rounded inline-block">Agent</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Tool Calls</p>
+              <span class="text-xs px-2 py-1 bg-amber-100 text-amber-800 border border-amber-300 dark:bg-amber-500/10 dark:text-amber-300 dark:border-amber-500/30 rounded inline-block">Tool Calls</span>
+            </div>
+            
+            <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+              <p class="text-xs text-slate-600 dark:text-slate-400 mb-2">Error(s)</p>
+              <span class="text-xs px-2 py-1 bg-red-100 text-red-800 border border-red-300 dark:bg-red-500/10 dark:text-red-300 dark:border-red-500/30 rounded inline-block">Error(s)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Alert Banners Section -->
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-slate-200 dark:border-slate-800">Alert Banners</h2>
+      
+      <div class="space-y-4">
+        <div class="p-4 bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-300 dark:border-yellow-500/30 rounded-lg">
+          <div class="flex items-center gap-3">
+            <span class="text-yellow-700 dark:text-yellow-400">⚠️</span>
+            <div>
+              <div class="text-sm font-medium text-yellow-700 dark:text-yellow-400">Warning Banner</div>
+              <div class="text-xs text-slate-600 dark:text-slate-400">This is a warning message</div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="p-4 bg-red-50 dark:bg-red-500/10 border border-red-300 dark:border-red-500/30 rounded-lg">
+          <div class="flex items-center gap-3">
+            <span class="text-red-700 dark:text-red-400">❌</span>
+            <div>
+              <div class="text-sm font-medium text-red-700 dark:text-red-400">Error Banner</div>
+              <div class="text-xs text-slate-600 dark:text-slate-400">This is an error message</div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="p-4 bg-green-500/10 border border-green-500/20 rounded-lg">
+          <div class="flex items-center gap-3 text-green-400">
+            <span>✓</span>
+            <div>
+              <div class="text-sm font-medium">Success Banner</div>
+              <div class="text-xs text-slate-600 dark:text-slate-400">This is a success message</div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+          <div class="flex items-center gap-3 text-blue-400">
+            <span>ℹ️</span>
+            <div>
+              <div class="text-sm font-medium">Info Banner</div>
+              <div class="text-xs text-slate-600 dark:text-slate-400">This is an info message</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Metric Cards Section -->
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-slate-200 dark:border-slate-800">Metric Cards</h2>
+      
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="text-[10px] text-slate-600 dark:text-slate-400 mb-1">Accuracy</div>
+          <div class="text-xs font-semibold text-blue-700 dark:text-blue-400">95.2%</div>
+        </div>
+        
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="text-[10px] text-slate-600 dark:text-slate-400 mb-1">Latency</div>
+          <div class="text-xs font-semibold text-amber-700 dark:text-amber-400">1.2s</div>
+        </div>
+        
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="text-[10px] text-slate-600 dark:text-slate-400 mb-1">Duration</div>
+          <div class="text-xs font-semibold text-purple-700 dark:text-purple-400">4m 47s</div>
+        </div>
+        
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="text-[10px] text-slate-600 dark:text-slate-400 mb-1">Error Rate</div>
+          <div class="text-xs font-semibold text-red-700 dark:text-red-400">2.1%</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Buttons Section -->
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-slate-200 dark:border-slate-800">Buttons</h2>
+      
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Primary Actions</h3>
+          <div class="flex flex-wrap gap-4">
+            <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">
+              Primary Button
+            </button>
+            <button class="px-4 py-2 bg-slate-200 dark:bg-slate-800 hover:bg-slate-300 dark:hover:bg-slate-700 rounded-lg border border-slate-300 dark:border-slate-700 transition-colors">
+              Secondary Button
+            </button>
+            <button class="px-4 py-2 text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors">
+              Ghost Button
+            </button>
+          </div>
+        </div>
+        
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Destructive Actions</h3>
+          <div class="flex flex-wrap gap-4">
+            <button class="px-4 py-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 border border-red-500/30 rounded-lg transition-colors">
+              Delete
+            </button>
+            <button class="px-4 py-2 text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded-lg transition-colors">
+              Cancel
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Status Indicators Section -->
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-slate-200 dark:border-slate-800">Status Indicators</h2>
+      
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-green-500"></span>
+            <span class="text-sm">Online</span>
+          </div>
+        </div>
+        
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="flex items-center gap-2">
+            <span class="w-2 h-2 rounded-full bg-red-500"></span>
+            <span class="text-sm">Offline</span>
+          </div>
+        </div>
+        
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="flex items-center gap-2">
+            <span class="text-green-700 dark:text-green-400">✓</span>
+            <span class="text-sm">Success</span>
+          </div>
+        </div>
+        
+        <div class="p-4 bg-slate-50 dark:bg-slate-900 rounded-lg border border-slate-200 dark:border-slate-800">
+          <div class="flex items-center gap-2">
+            <span class="text-red-700 dark:text-red-400">✗</span>
+            <span class="text-sm">Error</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Typography Section -->
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-slate-200 dark:border-slate-800">Typography</h2>
+      
+      <div class="space-y-4">
+        <div>
+          <h1 class="text-4xl font-bold mb-2">Heading 1</h1>
+          <p class="text-slate-600 dark:text-slate-400 text-sm">text-4xl font-bold</p>
+        </div>
+        
+        <div>
+          <h2 class="text-2xl font-bold mb-2">Heading 2</h2>
+          <p class="text-slate-600 dark:text-slate-400 text-sm">text-2xl font-bold</p>
+        </div>
+        
+        <div>
+          <h3 class="text-lg font-semibold mb-2">Heading 3</h3>
+          <p class="text-slate-600 dark:text-slate-400 text-sm">text-lg font-semibold</p>
+        </div>
+        
+        <div>
+          <p class="text-base mb-2">Body text - Regular paragraph text that appears throughout the application.</p>
+          <p class="text-slate-600 dark:text-slate-400 text-sm">text-base</p>
+        </div>
+        
+        <div>
+          <p class="text-sm text-slate-600 dark:text-slate-400 mb-2">Secondary text - Used for descriptions and helper text.</p>
+          <p class="text-slate-600 dark:text-slate-400 text-sm">text-sm text-slate-600 dark:text-slate-400</p>
+        </div>
+        
+        <div>
+          <p class="text-xs text-slate-500 dark:text-slate-500 mb-2">Tertiary text - Used for labels and metadata.</p>
+          <p class="text-slate-600 dark:text-slate-400 text-sm">text-xs text-slate-500</p>
+        </div>
+        
+        <div>
+          <code class="code-font text-sm bg-slate-100 dark:bg-slate-900 px-2 py-1 rounded">const example = "code";</code>
+          <p class="text-slate-600 dark:text-slate-400 text-sm mt-2">Source Code Pro - Monospace font</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Color Palette Section -->
+    <section class="mb-12">
+      <h2 class="text-2xl font-bold mb-6 pb-2 border-b border-slate-200 dark:border-slate-800">Color Palette</h2>
+      
+      <div class="space-y-6">
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Primary Colors</h3>
+          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <div>
+              <div class="h-20 bg-blue-600 rounded-lg mb-2"></div>
+              <p class="text-sm font-medium">Blue 600</p>
+              <p class="text-xs text-slate-600 dark:text-slate-400">#2563eb</p>
+            </div>
+            <div>
+              <div class="h-20 bg-[#005EB8] rounded-lg mb-2"></div>
+              <p class="text-sm font-medium">OpenSearch Blue</p>
+              <p class="text-xs text-slate-600 dark:text-slate-400">#005EB8</p>
+            </div>
+          </div>
+        </div>
+        
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Semantic Colors</h3>
+          <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
+            <div>
+              <div class="h-20 bg-green-500 rounded-lg mb-2"></div>
+              <p class="text-sm font-medium">Success</p>
+              <p class="text-xs text-slate-600 dark:text-slate-400">green-500</p>
+            </div>
+            <div>
+              <div class="h-20 bg-red-500 rounded-lg mb-2"></div>
+              <p class="text-sm font-medium">Error</p>
+              <p class="text-xs text-slate-600 dark:text-slate-400">red-500</p>
+            </div>
+            <div>
+              <div class="h-20 bg-yellow-500 rounded-lg mb-2"></div>
+              <p class="text-sm font-medium">Warning</p>
+              <p class="text-xs text-slate-600 dark:text-slate-400">yellow-500</p>
+            </div>
+            <div>
+              <div class="h-20 bg-amber-500 rounded-lg mb-2"></div>
+              <p class="text-sm font-medium">Caution</p>
+              <p class="text-xs text-slate-600 dark:text-slate-400">amber-500</p>
+            </div>
+            <div>
+              <div class="h-20 bg-purple-500 rounded-lg mb-2"></div>
+              <p class="text-sm font-medium">Info</p>
+              <p class="text-xs text-slate-600 dark:text-slate-400">purple-500</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <script>
+    function toggleTheme() {
+      document.documentElement.classList.toggle('dark');
+    }
+    
+    // Check for saved theme preference or default to light mode
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark');
+    }
+    
+    // Save theme preference when toggled
+    const observer = new MutationObserver(() => {
+      localStorage.theme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+    });
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+  </script>
+</body>
+</html>