@bluefly/openstandardagents 0.2.7 → 0.2.9

package/website/app/schema/page.tsx

@@ -1,1001 +0,0 @@
-import Link from 'next/link';
-import { SchemaExplorer } from '@/components/schema/SchemaExplorer';
-import { SchemaComponentsAccordion } from '@/components/schema/SchemaComponentsAccordion';
-import { STABLE_VERSION, STABLE_VERSION_TAG, getSchemaPath } from '@/lib/version';
-import { Logo } from '@/components/Logo';
-import fs from 'fs';
-import path from 'path';
-
-// Get actual stable version from versions.json (not website package.json)
-function getStableVersion(): string {
-  try {
-    const versionsPath = path.join(process.cwd(), 'lib', 'versions.json');
-    if (fs.existsSync(versionsPath)) {
-      const versions = JSON.parse(fs.readFileSync(versionsPath, 'utf8'));
-      return versions.stable || '0.2.6';
-    }
-  } catch (error) {
-    console.error('Error reading versions.json:', error);
-  }
-  // Fallback to 0.2.6 if versions.json not available
-  return '0.2.6';
-}
-
-// Try to load schema dynamically - fallback to stable version
-function loadSchema(version?: string): any {
-  const stableVersion = version || getStableVersion();
-  try {
-    // Try to load from public/schemas first
-    const publicSchemaPath = path.join(process.cwd(), 'public', 'schemas', `ossa-${stableVersion}.schema.json`);
-    if (fs.existsSync(publicSchemaPath)) {
-      return JSON.parse(fs.readFileSync(publicSchemaPath, 'utf8'));
-    }
-    
-    // Fallback to spec directory
-    const specSchemaPath = path.join(process.cwd(), '..', 'spec', `v${stableVersion}`, `ossa-${stableVersion}.schema.json`);
-    if (fs.existsSync(specSchemaPath)) {
-      return JSON.parse(fs.readFileSync(specSchemaPath, 'utf8'));
-    }
-    
-    // Final fallback - try to require (for build time)
-    try {
-      return require(`../../public/schemas/ossa-${stableVersion}.schema.json`);
-    } catch {
-      // If all else fails, return null
-      return null;
-    }
-  } catch (error) {
-    console.error('Error loading schema:', error);
-    return null;
-  }
-}
-
-export default function SchemaPage() {
-  const stableVersion = getStableVersion();
-  const schema = loadSchema(stableVersion);
-
-  if (!schema) {
-    return (
-      <div className="container mx-auto max-w-7xl px-4 py-8">
-        <h1 className="text-4xl font-bold mb-4">Schema Explorer</h1>
-        <p className="text-lg text-gray-600">
-          Schema file not found. Please ensure the OSSA schema is available.
-        </p>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      {/* Hero Section */}
-      <div className="bg-gradient-to-br from-secondary via-primary to-accent text-white py-16 px-4">
-        <div className="container mx-auto max-w-6xl text-center">
-          <div className="inline-flex items-center justify-center w-20 h-20 bg-white/20 backdrop-blur-sm rounded-full mb-6">
-            <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-            </svg>
-          </div>
-          <h1 className="text-5xl font-bold mb-4">OSSA Schema Reference</h1>
-          <p className="text-xl text-white/90 mb-2">
-            Complete JSON Schema for defining portable, framework-agnostic AI agents
-          </p>
-          <p className="text-lg text-white/80">
-            Version v{stableVersion} • The OpenAPI for AI Agents
-          </p>
-        </div>
-      </div>
-
-      <div className="container mx-auto max-w-7xl px-4 py-12">
-        {/* Schema Architecture Diagram - MOVED TO TOP */}
-        <section className="mb-16">
-          <div className="bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 rounded-2xl p-8 mb-8">
-            <div className="flex items-start mb-6">
-              <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4 flex-shrink-0">
-                <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                </svg>
-              </div>
-              <div>
-                <h2 className="text-3xl font-bold mb-4 text-gray-900">Why This Schema?</h2>
-                <div className="space-y-4 text-lg text-gray-700">
-                  <p>
-                    <strong className="text-primary">The Problem:</strong> Every AI framework defines agents differently.
-                    LangChain has "chains," CrewAI has "crews," OpenAI has "assistants," Anthropic has different tools.
-                    This creates <span className="text-red-600 font-semibold">vendor lock-in</span> and makes it impossible to share agents between teams or frameworks.
-                  </p>
-                  <p>
-                    <strong className="text-secondary">The Solution:</strong> OSSA provides a single, standard way to describe agents that works everywhere.
-                    Like OpenAPI revolutionized REST APIs, OSSA revolutionizes AI agents.
-                  </p>
-                  <p>
-                    <strong className="text-primary">The Result:</strong> Write your agent definition once, deploy it to any framework.
-                    Switch providers without rewriting code. Share agents across organizations. True portability.
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Schema Architecture Diagram */}
-        <section className="mb-16">
-          <div className="flex items-center mb-8">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-primary">Schema Architecture</h2>
-          </div>
-
-          {/* Visual Structure Diagram with HTML/CSS */}
-          <div className="bg-white rounded-2xl shadow-lg p-8 mb-8 border-2 border-gray-300">
-            <h3 className="text-2xl font-bold mb-4 text-center text-gray-900">OSSA Agent Manifest Structure</h3>
-            <p className="text-center text-gray-600 mb-8 text-base">
-              Complete breakdown of all manifest components and their relationships
-            </p>
-
-            <div className="space-y-6">
-              {/* Root */}
-              <div className="bg-gradient-to-r from-secondary via-primary to-accent text-white rounded-xl p-6 text-center shadow-md">
-                <div className="font-bold text-2xl mb-2">OSSA Agent Manifest</div>
-                <div className="text-base opacity-90">agent.yaml / agent.json</div>
-              </div>
-
-              {/* Top Level Fields */}
-              <div className="grid md:grid-cols-3 gap-6">
-                <div className="bg-blue-50/50 border-2 border-blue-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                  <div className="font-bold text-gray-900 mb-2 text-xl">apiVersion</div>
-                  <div className="text-base text-gray-600 mb-3">Specifies the OSSA specification version</div>
-                  <div className="text-lg text-gray-800 font-mono">ossa/v{stableVersion}</div>
-                </div>
-                <div className="bg-green-50/50 border-2 border-green-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                  <div className="font-bold text-gray-900 mb-2 text-xl">kind</div>
-                  <div className="text-base text-gray-600 mb-3">Resource type identifier that specifies what type of OSSA resource this manifest defines.</div>
-                  <div className="text-lg text-gray-800 font-mono mb-3">Agent</div>
-                  <div className="text-sm text-gray-700 space-y-2 pt-3 border-t border-green-200">
-                    <p><strong className="text-gray-900">Agent</strong> is the primary resource type in OSSA. An Agent represents an autonomous AI system that can:</p>
-                    <ul className="list-disc list-inside space-y-1 text-gray-600 ml-2">
-                      <li>Process natural language instructions</li>
-                      <li>Make decisions and take actions</li>
-                      <li>Use tools and interact with external systems</li>
-                      <li>Maintain context and state across interactions</li>
-                    </ul>
-                    <p className="text-gray-600">Think of an Agent as a reusable, portable definition of an AI assistant that can be deployed to any framework.</p>
-                  </div>
-                </div>
-                <div className="bg-purple-50/50 border-2 border-purple-200 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
-                  <div className="font-bold text-gray-900 mb-2 text-xl">metadata</div>
-                  <div className="text-base text-gray-600 mb-3">Agent identification and labeling</div>
-                  <div className="text-base text-gray-700 space-y-1.5 mt-3">
-                    <div>• name - Unique agent identifier</div>
-                    <div>• version - Agent version number</div>
-                    <div>• description - Human-readable description</div>
-                    <div>• labels - Key-value metadata tags</div>
-                    <div>• annotations - Additional metadata</div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Main Content: spec and extensions - STACKED */}
-              <div className="space-y-6">
-                {/* spec */}
-                <div className="bg-gradient-to-br from-blue-50/30 to-indigo-50/30 border-2 border-blue-200 rounded-xl p-6 shadow-md">
-                  <div className="font-bold text-primary text-2xl mb-3">spec</div>
-                  <div className="text-base text-gray-700 mb-6">Core agent configuration including behavior, capabilities, and operational settings.</div>
-                  <div className="space-y-3">
-                    {/* role */}
-                    <div className="bg-white rounded-lg p-5 border-2 border-gray-200 shadow-sm hover:shadow-md transition-all">
-                      <div className="font-bold text-gray-900 text-lg mb-2">role</div>
-                      <div className="text-base text-gray-700 mb-3">Defines the agent's system prompt and identity. This is the core instruction that tells the agent who it is and how it should behave.</div>
-                      <div className="text-sm text-gray-600 bg-gray-50 rounded p-3 font-mono border border-gray-200">
-                        type: string (multi-line)
-                      </div>
-                    </div>
-
-                    {/* llm */}
-                    <div className="bg-white rounded-lg p-5 border-2 border-gray-200 shadow-sm hover:shadow-md transition-all">
-                      <div className="font-bold text-gray-900 text-lg mb-2">llm</div>
-                      <div className="text-base text-gray-700 mb-4">Configuration for the Large Language Model that powers the agent's reasoning and responses.</div>
-                      <div className="grid grid-cols-2 gap-3 text-base text-gray-700">
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">provider</strong>
-                          <div className="text-sm text-gray-600 mt-1">openai | anthropic | azure</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">model</strong>
-                          <div className="text-sm text-gray-600 mt-1">gpt-4, claude-3, etc.</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">temperature</strong>
-                          <div className="text-sm text-gray-600 mt-1">0.0 - 2.0 (creativity level)</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">max_tokens</strong>
-                          <div className="text-sm text-gray-600 mt-1">Maximum response length</div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* tools */}
-                    <div className="bg-white rounded-lg p-5 border-2 border-gray-200 shadow-sm hover:shadow-md transition-all">
-                      <div className="font-bold text-gray-900 text-lg mb-2">tools</div>
-                      <div className="text-base text-gray-700 mb-4">Capabilities the agent can use to interact with external systems and perform actions.</div>
-                      <div className="text-base text-gray-700 space-y-2.5">
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">http</strong>
-                          <div className="text-sm text-gray-600 mt-1">Make REST API calls to external services</div>
-                        </div>
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">code</strong>
-                          <div className="text-sm text-gray-600 mt-1">Execute Python, JavaScript, or Shell scripts</div>
-                        </div>
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">database</strong>
-                          <div className="text-sm text-gray-600 mt-1">Run SQL queries against databases</div>
-                        </div>
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">file</strong>
-                          <div className="text-sm text-gray-600 mt-1">Read and write file system operations</div>
-                        </div>
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">search</strong>
-                          <div className="text-sm text-gray-600 mt-1">Web search and vector similarity search</div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* taxonomy */}
-                    <div className="bg-white rounded-lg p-5 border-2 border-gray-200 shadow-sm hover:shadow-md transition-all">
-                      <div className="font-bold text-gray-900 text-lg mb-2">taxonomy</div>
-                      <div className="text-base text-gray-700 mb-4">Categorization metadata for organizing and discovering agents across domains and use cases.</div>
-                      <div className="grid grid-cols-2 gap-3 text-base">
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">domain</strong>
-                          <div className="text-sm text-gray-600 mt-1">customer_service, engineering, etc.</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">subdomain</strong>
-                          <div className="text-sm text-gray-600 mt-1">technical_support, devops, etc.</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">use_case</strong>
-                          <div className="text-sm text-gray-600 mt-1">troubleshooting, automation</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">industry</strong>
-                          <div className="text-sm text-gray-600 mt-1">saas, healthcare, finance</div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* autonomy */}
-                    <div className="bg-white rounded-lg p-5 border-2 border-gray-200 shadow-sm hover:shadow-md transition-all">
-                      <div className="font-bold text-gray-900 text-lg mb-2">autonomy</div>
-                      <div className="text-base text-gray-700 mb-4">Controls how independently the agent can operate, from fully manual (L0) to fully autonomous (L5).</div>
-                      <div className="space-y-2.5 text-base">
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">level</strong>
-                          <div className="text-sm text-gray-600 mt-1">L0 (no autonomy) → L5 (full autonomy)</div>
-                        </div>
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">approval_required</strong>
-                          <div className="text-sm text-gray-600 mt-1">List of actions that require human approval before execution</div>
-                        </div>
-                        <div className="bg-gray-50 border border-gray-200 rounded-lg p-3">
-                          <strong className="text-gray-900">human_in_loop</strong>
-                          <div className="text-sm text-gray-600 mt-1">Notification and escalation settings for human oversight</div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* observability */}
-                    <div className="bg-white rounded-lg p-5 border-2 border-gray-200 shadow-sm hover:shadow-md transition-all">
-                      <div className="font-bold text-gray-900 text-lg mb-2">observability</div>
-                      <div className="text-base text-gray-700 mb-4">Monitoring and debugging capabilities for tracking agent behavior and performance.</div>
-                      <div className="grid grid-cols-3 gap-3 text-base">
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200 text-center">
-                          <div className="font-bold text-gray-900">logging</div>
-                          <div className="text-sm text-gray-600 mt-1">Logs & audit trails</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200 text-center">
-                          <div className="font-bold text-gray-900">metrics</div>
-                          <div className="text-sm text-gray-600 mt-1">Performance data</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200 text-center">
-                          <div className="font-bold text-gray-900">tracing</div>
-                          <div className="text-sm text-gray-600 mt-1">Execution paths</div>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* constraints (additional) */}
-                    <div className="bg-white rounded-lg p-5 border-2 border-gray-200 shadow-sm hover:shadow-md transition-all">
-                      <div className="font-bold text-gray-900 text-lg mb-2 flex items-center gap-2">
-                        constraints
-                        <span className="text-sm bg-gray-200 text-gray-700 px-2 py-1 rounded font-normal">Optional</span>
-                      </div>
-                      <div className="text-base text-gray-700 mb-4">Resource limits and operational boundaries to ensure safe and controlled agent execution.</div>
-                      <div className="grid grid-cols-2 gap-3 text-base">
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">cost</strong>
-                          <div className="text-sm text-gray-600 mt-1">Budget and spending limits</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">performance</strong>
-                          <div className="text-sm text-gray-600 mt-1">Timeout and rate limiting</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">resources</strong>
-                          <div className="text-sm text-gray-600 mt-1">Memory and CPU constraints</div>
-                        </div>
-                        <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
-                          <strong className="text-gray-900">security</strong>
-                          <div className="text-sm text-gray-600 mt-1">Access control and permissions</div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                {/* extensions */}
-                <div className="bg-gradient-to-br from-purple-50/30 to-pink-50/30 border-2 border-purple-200 rounded-xl p-6 shadow-md">
-                  <div className="font-bold text-secondary text-2xl mb-3">extensions</div>
-                  <div className="text-base text-gray-700 mb-6">Optional framework-specific configurations that extend the core OSSA specification for platform-specific features.</div>
-                  <div className="text-base text-gray-800 mb-6 font-semibold">Supported frameworks:</div>
-                  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
-                    <Logo domain="kagent.dev" name="kAgent" />
-                    <Logo domain="langchain.com" name="LangChain" />
-                    <Logo domain="crewai.com" name="CrewAI" />
-                    <Logo domain="openai.com" name="OpenAI" />
-                    <Logo domain="anthropic.com" name="Anthropic" />
-                    <Logo domain="cursor.sh" name="Cursor" />
-                    <Logo domain="langflow.com" name="Langflow" />
-                    <Logo domain="microsoft.com" name="AutoGen" />
-                    <Logo domain="vercel.com" name="Vercel AI" />
-                    <Logo domain="llamaindex.ai" name="LlamaIndex" />
-                    <Logo domain="langchain.com" name="LangGraph" />
-                    <Logo domain="drupal.org" name="Drupal" />
-                    <Logo domain="librechat.com" name="LibreChat" />
-                    <Logo domain="modelcontextprotocol.io" name="MCP" />
-                    <Logo domain="huggingface.co" name="Hugging Face" />
-                    <Logo domain="google.com" name="Google" />
-                    <Logo domain="aws.amazon.com" name="AWS" />
-                    <Logo domain="azure.com" name="Azure" />
-                    <Logo domain="github.com" name="GitHub" />
-                    <Logo domain="docker.com" name="Docker" />
-                    <Logo domain="kubernetes.io" name="Kubernetes" />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Data Flow Diagram */}
-        <section className="mb-16">
-          <div className="flex items-center mb-8">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-secondary">Data Flow: How OSSA Works</h2>
-          </div>
-
-          <div className="grid md:grid-cols-2 gap-6 mb-8">
-            {/* Flow 1: Agent Definition to Execution */}
-            <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
-              <h3 className="text-lg font-bold mb-4 text-primary">1. Definition → Execution</h3>
-              <div className="bg-gray-50 rounded-lg p-4 font-mono text-xs space-y-2">
-                <div className="flex items-center">
-                  <div className="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">1</div>
-                  <div>
-                    <div className="font-semibold">Write agent.yaml</div>
-                    <div className="text-gray-600">Define role, LLM, tools</div>
-                  </div>
-                </div>
-                <div className="ml-4 border-l-2 border-primary h-4"></div>
-                <div className="flex items-center">
-                  <div className="w-8 h-8 bg-secondary text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">2</div>
-                  <div>
-                    <div className="font-semibold">Validate schema</div>
-                    <div className="text-gray-600">JSON Schema validation</div>
-                  </div>
-                </div>
-                <div className="ml-4 border-l-2 border-secondary h-4"></div>
-                <div className="flex items-center">
-                  <div className="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">3</div>
-                  <div>
-                    <div className="font-semibold">Load into runtime</div>
-                    <div className="text-gray-600">kAgent / LangChain / etc</div>
-                  </div>
-                </div>
-                <div className="ml-4 border-l-2 border-primary h-4"></div>
-                <div className="flex items-center">
-                  <div className="w-8 h-8 bg-secondary text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">4</div>
-                  <div>
-                    <div className="font-semibold">Execute agent</div>
-                    <div className="text-gray-600">Run tasks, call LLM, use tools</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Flow 2: Cross-Framework Portability */}
-            <div className="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
-              <h3 className="text-lg font-bold mb-4 text-secondary">2. Cross-Framework Portability</h3>
-              <div className="bg-gray-50 rounded-lg p-4 font-mono text-xs space-y-2">
-                <div className="flex items-center">
-                  <div className="w-8 h-8 bg-primary text-white rounded-full flex items-center justify-center mr-3 flex-shrink-0">A</div>
-                  <div>
-                    <div className="font-semibold">agent.yaml (OSSA)</div>
-                    <div className="text-gray-600">Framework-agnostic definition</div>
-                  </div>
-                </div>
-                <div className="ml-4 border-l-2 border-dashed border-primary h-4"></div>
-                <div className="text-center text-gray-500 font-bold">↓ Export to ↓</div>
-                <div className="ml-4 border-l-2 border-dashed border-primary h-4"></div>
-                <div className="space-y-2">
-                  <div className="bg-blue-50 p-2 rounded border-l-2 border-blue-500">
-                    <strong>LangChain</strong>: chains.json
-                  </div>
-                  <div className="bg-purple-50 p-2 rounded border-l-2 border-purple-500">
-                    <strong>CrewAI</strong>: crew_config.yaml
-                  </div>
-                  <div className="bg-green-50 p-2 rounded border-l-2 border-green-500">
-                    <strong>OpenAI</strong>: assistant_config.json
-                  </div>
-                  <div className="bg-orange-50 p-2 rounded border-l-2 border-orange-500">
-                    <strong>Anthropic</strong>: claude_tools.json
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Visual Data Flow Diagram - Clean HTML/CSS Version */}
-          <div className="bg-gradient-to-br from-gray-50 to-gray-100 rounded-2xl p-8 border-2 border-gray-300">
-            <h3 className="text-2xl font-bold mb-4 text-center text-gray-900">Complete Agent Lifecycle</h3>
-            <p className="text-center text-gray-600 mb-8 text-base">From development to deployment across any framework</p>
-
-            <div className="space-y-6">
-              {/* Step 1: Developer */}
-              <div className="flex flex-col items-center">
-                <div className="bg-white border-2 border-gray-300 rounded-xl p-6 shadow-md w-full max-w-md text-center">
-                  <div className="text-lg font-bold mb-2 text-gray-900">Developer</div>
-                  <div className="text-base text-gray-700">Writes OSSA Manifest</div>
-                  <div className="text-sm mt-2 text-gray-600 font-mono">agent.yaml</div>
-                </div>
-                <div className="w-0.5 h-12 bg-gray-300"></div>
-              </div>
-
-              {/* Step 2: Validation */}
-              <div className="flex flex-col items-center">
-                <div className="grid md:grid-cols-2 gap-4 w-full max-w-4xl">
-                  <div className="bg-gray-800 text-white rounded-xl p-6 shadow-lg">
-                    <div className="text-lg font-bold mb-2">OSSA Schema Validator</div>
-                    <div className="text-sm opacity-90">JSON Schema validation engine</div>
-                  </div>
-                  <div className="bg-white border-2 border-gray-300 rounded-xl p-6 shadow-md">
-                    <div className="text-base font-bold text-gray-900 mb-3">Validation Checks:</div>
-                    <div className="space-y-2 text-sm text-gray-700">
-                      <div className="flex items-center">
-                        <span className="text-green-600 mr-2">✓</span>
-                        <span>Required fields present</span>
-                      </div>
-                      <div className="flex items-center">
-                        <span className="text-green-600 mr-2">✓</span>
-                        <span>Correct types</span>
-                      </div>
-                      <div className="flex items-center">
-                        <span className="text-green-600 mr-2">✓</span>
-                        <span>Value constraints</span>
-                      </div>
-                      <div className="flex items-center">
-                        <span className="text-green-600 mr-2">✓</span>
-                        <span>Schema compliance</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="w-0.5 h-12 bg-gray-300"></div>
-                <div className="bg-gray-800 text-white px-6 py-2 rounded-full font-bold shadow-md">
-                  Valid Manifest
-                </div>
-                <div className="w-0.5 h-12 bg-gray-300"></div>
-              </div>
-
-              {/* Step 3: Framework Adapter Layer */}
-              <div className="flex flex-col items-center">
-                <div className="bg-gray-800 text-white rounded-xl p-6 shadow-lg w-full max-w-3xl text-center">
-                  <div className="text-xl font-bold mb-2">Framework Adapter Layer</div>
-                  <div className="text-base opacity-90">Converts OSSA → Framework-Specific Config</div>
-                </div>
-                <div className="flex space-x-2 mt-4">
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                </div>
-              </div>
-
-              {/* Step 4: Runtimes */}
-              <div className="flex flex-col items-center">
-                <div className="grid md:grid-cols-4 gap-4 w-full max-w-5xl">
-                  <div className="bg-white border-2 border-gray-300 rounded-xl p-5 shadow-md text-center">
-                    <div className="text-base font-bold mb-2 text-gray-900">kAgent</div>
-                    <div className="text-xs text-gray-600">Runtime</div>
-                  </div>
-                  <div className="bg-white border-2 border-gray-300 rounded-xl p-5 shadow-md text-center">
-                    <div className="text-base font-bold mb-2 text-gray-900">LangChain</div>
-                    <div className="text-xs text-gray-600">Runtime</div>
-                  </div>
-                  <div className="bg-white border-2 border-gray-300 rounded-xl p-5 shadow-md text-center">
-                    <div className="text-base font-bold mb-2 text-gray-900">CrewAI</div>
-                    <div className="text-xs text-gray-600">Runtime</div>
-                  </div>
-                  <div className="bg-white border-2 border-gray-300 rounded-xl p-5 shadow-md text-center">
-                    <div className="text-base font-bold mb-2 text-gray-900">OpenAI</div>
-                    <div className="text-xs text-gray-600">Runtime</div>
-                  </div>
-                </div>
-                <div className="flex justify-center mt-4 space-x-2">
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                  <div className="w-0.5 h-12 bg-gray-300"></div>
-                </div>
-              </div>
-
-              {/* Step 5: Agent Execution */}
-              <div className="flex flex-col items-center">
-                <div className="bg-white border-2 border-gray-300 rounded-xl p-6 shadow-md w-full max-w-2xl">
-                  <div className="text-xl font-bold mb-4 text-center text-gray-900">Agent Execution</div>
-                  <div className="grid grid-cols-3 gap-3 text-base">
-                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
-                      <div className="font-bold mb-1 text-gray-900">LLM Calls</div>
-                      <div className="text-sm text-gray-600">GPT-4, Claude, etc.</div>
-                    </div>
-                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
-                      <div className="font-bold mb-1 text-gray-900">Tool Usage</div>
-                      <div className="text-sm text-gray-600">APIs, Code, DB</div>
-                    </div>
-                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
-                      <div className="font-bold mb-1 text-gray-900">Task Processing</div>
-                      <div className="text-sm text-gray-600">Execute workflows</div>
-                    </div>
-                  </div>
-                </div>
-                <div className="w-0.5 h-12 bg-gray-300"></div>
-              </div>
-
-              {/* Step 6: Observability */}
-              <div className="flex flex-col items-center">
-                <div className="bg-white border-2 border-gray-300 rounded-xl p-6 shadow-md w-full max-w-2xl">
-                  <div className="text-xl font-bold mb-4 text-center text-gray-900">Observability</div>
-                  <div className="grid grid-cols-3 gap-3 text-base">
-                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
-                      <div className="font-bold mb-1 text-gray-900">Logs</div>
-                      <div className="text-sm text-gray-600">Debug & audit</div>
-                    </div>
-                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
-                      <div className="font-bold mb-1 text-gray-900">Metrics</div>
-                      <div className="text-sm text-gray-600">Performance data</div>
-                    </div>
-                    <div className="bg-gray-50 border border-gray-200 rounded-lg p-3 text-center">
-                      <div className="font-bold mb-1 text-gray-900">Traces</div>
-                      <div className="text-sm text-gray-600">Execution paths</div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        {/* Core Components Breakdown */}
-        <section className="mb-16">
-          <div className="flex items-center mb-6">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-primary">Schema Components</h2>
-          </div>
-
-          <p className="text-lg text-gray-700 mb-8 max-w-4xl">
-            The OSSA schema is organized into core components that define every aspect of an AI agent.
-            Each component serves a specific purpose in creating portable, framework-agnostic agent definitions.
-            Click on any component below to learn more about its structure, purpose, and usage.
-          </p>
-
-          <SchemaComponentsAccordion
-            items={[
-              {
-                id: 'apiversion-kind',
-                title: 'apiVersion & kind',
-                borderColor: 'border-primary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">Version identifier and resource type for the manifest.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">Enables schema evolution while maintaining backward compatibility. Like Kubernetes resources or OpenAPI specs, agents can evolve without breaking existing definitions.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`apiVersion: ossa/v${stableVersion}
-kind: Agent`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'metadata',
-                title: 'metadata',
-                borderColor: 'border-secondary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">Identification and classification information: name, version, description, labels, annotations.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        <strong>Discovery:</strong> Find agents by name/labels in catalogs.<br/>
-                        <strong>Versioning:</strong> Track changes over time.<br/>
-                        <strong>Organization:</strong> Group agents by team, project, environment.<br/>
-                        <strong>Documentation:</strong> Human-readable descriptions and URLs.
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`metadata:
-  name: customer-support-agent
-  version: 2.1.0
-  description: Handles tier-1 support tickets with sentiment analysis
-  labels:
-    team: support
-    environment: production
-  annotations:
-    docs: https://docs.example.com/agents/support
-    owner: support-team@example.com`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'spec-role',
-                title: 'spec.role',
-                borderColor: 'border-primary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">The system prompt / role definition that guides the agent's behavior and personality.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        Defines <strong>who</strong> the agent is, <strong>what</strong> it can do, and <strong>how</strong> it should behave.
-                        This is the agent's identity and primary instruction set that shapes all interactions.
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`spec:
-  role: |
-    You are a senior software architect specializing in distributed systems.
-    Your role is to review code for scalability, security, and best practices.
-    You provide constructive feedback with specific examples and recommendations.
-    You communicate in a professional but friendly tone.`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'spec-llm',
-                title: 'spec.llm',
-                borderColor: 'border-secondary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">LLM provider configuration: model, temperature, max_tokens, top_p, and other parameters.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        <strong>Portability:</strong> Switch from OpenAI to Anthropic without changing agent logic.<br/>
-                        <strong>Optimization:</strong> Tune temperature for creativity vs consistency.<br/>
-                        <strong>Cost Control:</strong> Set token limits and choose appropriate model sizes.<br/>
-                        <strong>Quality:</strong> Configure sampling parameters for best results.
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`spec:
-  llm:
-    provider: openai
-    model: gpt-4-turbo
-    temperature: 0.7
-    max_tokens: 2000
-    top_p: 0.9
-    frequency_penalty: 0.0
-    presence_penalty: 0.6`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'spec-tools',
-                title: 'spec.tools',
-                borderColor: 'border-primary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">Array of tools/functions the agent can call: HTTP APIs, code execution, database queries, file operations, etc.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        Agents need to <strong>take action</strong>, not just respond with text. Tools enable agents to:
-                        interact with APIs, query databases, run code, search the web, manipulate files, and integrate with external systems.
-                        Standardizing tool definitions ensures portability across frameworks.
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">TYPES:</p>
-                      <ul className="list-disc list-inside text-gray-700 space-y-1 ml-4">
-                        <li><strong>http:</strong> REST API calls</li>
-                        <li><strong>code:</strong> Execute Python/JS/etc</li>
-                        <li><strong>database:</strong> SQL queries</li>
-                        <li><strong>file:</strong> Read/write files</li>
-                        <li><strong>search:</strong> Web/vector search</li>
-                        <li><strong>custom:</strong> Framework-specific tools</li>
-                      </ul>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`spec:
-  tools:
-    - type: http
-      name: search_issues
-      endpoint: https://api.github.com/search/issues
-      method: GET
-      auth:
-        type: bearer
-        token: \${GITHUB_TOKEN}
-
-    - type: code
-      name: analyze_logs
-      language: python
-      allowed_libraries: [pandas, numpy]`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'spec-taxonomy',
-                title: 'spec.taxonomy',
-                borderColor: 'border-secondary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">Classification of agent purpose: domain, subdomain, use_case, and industry.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        <strong>Discoverability:</strong> Find agents for specific use cases in catalogs.<br/>
-                        <strong>Organization:</strong> Group similar agents together.<br/>
-                        <strong>Routing:</strong> Automatically route tasks to appropriate agents.<br/>
-                        <strong>Analytics:</strong> Track agent usage by domain/industry.
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`spec:
-  taxonomy:
-    domain: customer_service
-    subdomain: technical_support
-    use_case: troubleshooting
-    industry: saas
-    tags: [support, automation, tier1]`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'spec-autonomy',
-                title: 'spec.autonomy',
-                borderColor: 'border-primary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">Defines how much independence the agent has: level (L0-L5), approval_required, human_in_loop settings.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        <strong>Safety:</strong> Prevent agents from taking destructive actions without oversight.<br/>
-                        <strong>Compliance:</strong> Require approvals for regulated operations.<br/>
-                        <strong>Trust:</strong> Gradually increase autonomy as agents prove reliable.<br/>
-                        <strong>Audit:</strong> Track which actions required human approval.
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">LEVELS:</p>
-                      <ul className="list-disc list-inside text-gray-700 space-y-1 ml-4">
-                        <li><strong>L0:</strong> No autonomy (human controls everything)</li>
-                        <li><strong>L1:</strong> Suggestions only (human approves all actions)</li>
-                        <li><strong>L2:</strong> Conditional autonomy (human approves risky actions)</li>
-                        <li><strong>L3:</strong> High autonomy (human approves critical actions)</li>
-                        <li><strong>L4:</strong> Full autonomy (human notified of actions)</li>
-                        <li><strong>L5:</strong> Complete autonomy (no human oversight)</li>
-                      </ul>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`spec:
-  autonomy:
-    level: L2
-    approval_required:
-      - delete_operations
-      - financial_transactions
-      - user_data_access
-    human_in_loop:
-      notification_channels: [slack, email]
-      timeout_seconds: 300`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'spec-observability',
-                title: 'spec.observability',
-                borderColor: 'border-secondary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">Logging, metrics, and tracing configuration for monitoring agent behavior.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        <strong>Debugging:</strong> Understand what went wrong when agents fail.<br/>
-                        <strong>Performance:</strong> Track response times, token usage, costs.<br/>
-                        <strong>Quality:</strong> Monitor success rates and user satisfaction.<br/>
-                        <strong>Compliance:</strong> Audit trails for regulated industries.
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`spec:
-  observability:
-    logging:
-      level: info
-      include_prompts: true
-      include_responses: true
-    metrics:
-      enabled: true
-      export_to: prometheus
-    tracing:
-      enabled: true
-      provider: opentelemetry
-      sample_rate: 1.0`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-              {
-                id: 'extensions',
-                title: 'extensions',
-                borderColor: 'border-primary',
-                content: (
-                  <div className="space-y-4">
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHAT:</p>
-                      <p className="text-gray-700">Framework-specific configuration blocks: kagent, buildkit, langchain, crewai, openai, anthropic, cursor, langflow, autogen, etc.</p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">WHY:</p>
-                      <p className="text-gray-700">
-                        While OSSA provides a <strong>common core</strong>, each framework has unique features. Extensions allow you to:
-                        leverage framework-specific capabilities, maintain compatibility with existing code, and gradually migrate from proprietary formats.
-                        <strong className="block mt-2">The core spec ensures portability. Extensions provide power.</strong>
-                      </p>
-                    </div>
-                    <div>
-                      <p className="font-semibold text-gray-900 mb-2">EXAMPLE:</p>
-                      <div className="bg-gray-900 rounded-lg p-4 mt-2">
-                        <pre className="text-green-400 text-sm font-mono"><code>{`extensions:
-  kagent:
-    mesh_discovery: true
-    routing_strategy: round_robin
-
-  langchain:
-    memory_type: conversation_buffer_window
-    memory_window_size: 5
-
-  openai_agents:
-    code_interpreter: true
-    file_search: true`}</code></pre>
-                      </div>
-                    </div>
-                  </div>
-                ),
-              },
-            ]}
-          />
-        </section>
-
-        {/* Interactive Schema Explorer */}
-        <section className="mb-16">
-          <div className="flex items-center mb-8">
-            <div className="w-12 h-12 bg-gradient-to-br from-secondary via-primary to-accent rounded-lg flex items-center justify-center mr-4">
-              <svg className="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
-            </div>
-            <h2 className="text-3xl font-bold text-primary">Interactive Schema Explorer</h2>
-          </div>
-          <p className="text-lg text-gray-700 mb-6">
-            Explore the complete JSON Schema interactively. Click on any property to see its type, description, and validation rules.
-          </p>
-          <SchemaExplorer schema={schema} />
-        </section>
-
-        {/* Next Steps */}
-        <section className="mb-8">
-          <div className="bg-gradient-to-br from-primary/10 via-accent/10 to-secondary/10 rounded-2xl p-8">
-            <h2 className="text-3xl font-bold mb-6 text-center">Ready to Build Agents?</h2>
-            <div className="grid md:grid-cols-3 gap-4">
-              <Link href="/playground" className="card-hover p-6 text-center border-l-4 border-primary hover:-translate-y-1 transition-all duration-300">
-                <div className="text-4xl mb-3">🎮</div>
-                <h3 className="text-xl font-semibold text-primary mb-2">Try the Playground</h3>
-                <p className="text-gray-700">Write and validate your first agent manifest</p>
-              </Link>
-              <Link href="/examples" className="card-hover p-6 text-center border-l-4 border-secondary hover:-translate-y-1 transition-all duration-300">
-                <div className="text-4xl mb-3">📚</div>
-                <h3 className="text-xl font-semibold text-secondary mb-2">Browse Examples</h3>
-                <p className="text-gray-700">See 58+ real-world agent definitions</p>
-              </Link>
-              <Link href="/docs" className="card-hover p-6 text-center border-l-4 border-primary hover:-translate-y-1 transition-all duration-300">
-                <div className="text-4xl mb-3">📖</div>
-                <h3 className="text-xl font-semibold text-primary mb-2">Read the Docs</h3>
-                <p className="text-gray-700">Comprehensive guides and tutorials</p>
-              </Link>
-            </div>
-          </div>
-        </section>
-      </div>
-    </>
-  );
-}