@bluefly/openstandardagents 0.2.4 → 0.2.5-RC

package/website/app/specification/page.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import type { Metadata } from 'next';
+import { STABLE_VERSION_TAG, STABLE_VERSION } from '@/lib/version';
 
 export const metadata: Metadata = {
   title: 'Specification - Open Standard Agents',
@@ -8,99 +9,159 @@ export const metadata: Metadata = {
 
 export default function SpecificationPage() {
   return (
-    <div className="container mx-auto max-w-7xl px-4 py-12">
-      <div className="max-w-4xl mx-auto">
-        <h1 className="text-5xl font-bold mb-4">Open Standard Agents Specification</h1>
-        <p className="text-xl text-gray-600 mb-12">
-          The complete technical specification for defining, validating, and deploying AI agents.
-        </p>
-
-        <section className="mb-12">
-          <h2 className="text-3xl font-semibold mb-6 text-primary">Current Version</h2>
-          <div className="card p-6 mb-6">
-            <div className="flex items-center justify-between mb-4">
-              <div>
-                <h3 className="text-2xl font-semibold mb-2">v0.2.3</h3>
-                <p className="text-gray-700">Latest stable release</p>
-              </div>
-              <Link href="/schema" className="btn-primary">
-                View Schema
-              </Link>
-            </div>
-            <div className="grid md:grid-cols-2 gap-4 mt-4">
-              <div>
-                <h4 className="font-semibold mb-2">Release Date</h4>
-                <p className="text-gray-700">November 2024</p>
+    <>
+      {/* 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 Specification</h1>
+          <p className="text-xl text-white/90 mb-2">
+            Complete technical specification for defining, validating, and deploying AI agents
+          </p>
+          <p className="text-lg text-white/80">
+            Version {STABLE_VERSION_TAG} • The OpenAPI for AI Agents
+          </p>
+        </div>
+      </div>
+
+      <div className="container mx-auto max-w-7xl px-4 py-12">
+        <div className="max-w-4xl mx-auto">
+          {/* Current Version Highlighted Block */}
+          <section className="mb-12">
+            <div className="bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 rounded-2xl p-8 border-2 border-blue-200 shadow-lg">
+              <div className="flex items-center justify-between mb-6">
+                <div>
+                  <h2 className="text-3xl font-bold mb-2 text-primary">Current Version</h2>
+                  <h3 className="text-2xl font-semibold mb-2 text-gray-900">{STABLE_VERSION_TAG}</h3>
+                  <p className="text-gray-700">Latest stable release</p>
+                </div>
+                <Link href="/schema" className="btn-primary whitespace-nowrap">
+                  View Schema
+                </Link>
               </div>
-              <div>
-                <h4 className="font-semibold mb-2">Status</h4>
-                <span className="inline-block px-3 py-1 bg-success/20 text-success rounded-full text-sm font-medium">
-                  Stable
-                </span>
+              <div className="grid md:grid-cols-2 gap-6 mt-6 pt-6 border-t-2 border-blue-200">
+                <div>
+                  <h4 className="font-bold mb-2 text-gray-900">Release Date</h4>
+                  <p className="text-gray-700 text-lg">November 2024</p>
+                </div>
+                <div>
+                  <h4 className="font-bold mb-2 text-gray-900">Status</h4>
+                  <span className="inline-block px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm font-semibold border-2 border-green-300">
+                    Stable
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-3xl font-semibold mb-6 text-primary">Specification Structure</h2>
-          <div className="space-y-4">
-            <div className="card p-6">
-              <h3 className="text-xl font-semibold mb-3 text-primary">1. Core Specification</h3>
-              <p className="text-gray-700 mb-4">
-                The fundamental structure of an OSA agent manifest, including metadata, specification,
-                and extensions.
-              </p>
-              <Link href="/docs/getting-started/first-agent" className="text-primary hover:underline">
-                Read Core Specification →
-              </Link>
+          </section>
+
+          {/* Why This Specification? */}
+          <section className="mb-16">
+            <div className="bg-gradient-to-br from-amber-50 via-orange-50 to-yellow-50 rounded-2xl p-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 Specification?</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 with a vendor-neutral specification.
+                    </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 and interoperability.
+                    </p>
+                  </div>
+                </div>
+              </div>
             </div>
+          </section>
 
-            <div className="card p-6">
-              <h3 className="text-xl font-semibold mb-3 text-primary">2. Schema Reference</h3>
-              <p className="text-gray-700 mb-4">
-                Complete JSON Schema definition with all properties, types, constraints, and validation rules.
-              </p>
-              <Link href="/schema" className="text-primary hover:underline">
-                Explore Schema →
-              </Link>
+          <section className="mb-12">
+            <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">Specification Structure</h2>
             </div>
+            <div className="space-y-4">
+              <div className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-3 text-primary">1. Core Specification</h3>
+                <p className="text-gray-700 mb-4">
+                  The fundamental structure of an OSA agent manifest, including metadata, specification,
+                  and extensions.
+                </p>
+                <Link href="/docs/getting-started/first-agent" className="text-primary hover:text-secondary font-semibold inline-flex items-center">
+                  Read Core Specification →
+                </Link>
+              </div>
 
-            <div className="card p-6">
-              <h3 className="text-xl font-semibold mb-3 text-primary">3. Platform Extensions</h3>
-              <p className="text-gray-700 mb-4">
-                Framework-specific extensions for Cursor, OpenAI, CrewAI, LangChain, Anthropic,
-                Langflow, AutoGen, and more.
-              </p>
-              <Link href="/docs/examples/migration-guides" className="text-primary hover:underline">
-                View Extensions →
-              </Link>
+              <div className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-3 text-primary">2. Schema Reference</h3>
+                <p className="text-gray-700 mb-4">
+                  Complete JSON Schema definition with all properties, types, constraints, and validation rules.
+                </p>
+                <Link href="/schema" className="text-primary hover:text-secondary font-semibold inline-flex items-center">
+                  Explore Schema →
+                </Link>
+              </div>
+
+              <div className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-3 text-primary">3. Platform Extensions</h3>
+                <p className="text-gray-700 mb-4">
+                  Framework-specific extensions for Cursor, OpenAI, CrewAI, LangChain, Anthropic,
+                  Langflow, AutoGen, and more.
+                </p>
+                <Link href="/docs/examples/migration-guides" className="text-primary hover:text-secondary font-semibold inline-flex items-center">
+                  View Extensions →
+                </Link>
+              </div>
+
+              <div className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-3 text-primary">4. Validation Rules</h3>
+                <p className="text-gray-700 mb-4">
+                  Comprehensive validation rules, error messages, and best practices for creating valid agent manifests.
+                </p>
+                <Link href="/playground" className="text-primary hover:text-secondary font-semibold inline-flex items-center">
+                  Try Validation →
+                </Link>
+              </div>
             </div>
+          </section>
 
-            <div className="card p-6">
-              <h3 className="text-xl font-semibold mb-3 text-primary">4. Validation Rules</h3>
-              <p className="text-gray-700 mb-4">
-                Comprehensive validation rules, error messages, and best practices for creating valid agent manifests.
-              </p>
-              <Link href="/playground" className="text-primary hover:underline">
-                Try Validation →
-              </Link>
+          <section className="mb-12">
+            <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="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>
+              <h2 className="text-3xl font-bold text-primary">Key Concepts</h2>
             </div>
-          </div>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-3xl font-semibold mb-6 text-primary">Key Concepts</h2>
-          <div className="space-y-6">
-            <div>
-              <h3 className="text-xl font-semibold mb-2 text-primary">Agent Manifest</h3>
-              <p className="text-gray-700 mb-2">
-                A YAML or JSON file that describes an AI agent, including its role, LLM configuration,
-                tools, and deployment requirements.
-              </p>
-              <div className="bg-code-bg rounded-lg p-4 mt-3">
-                <pre className="text-code-text text-sm overflow-x-auto">
-                  <code>{`apiVersion: ossa/v0.2.3
+            <div className="space-y-6">
+              <div className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-md">
+                <h3 className="text-xl font-bold mb-3 text-primary">Agent Manifest</h3>
+                <p className="text-gray-700 mb-4">
+                  A YAML or JSON file that describes an AI agent, including its role, LLM configuration,
+                  tools, and deployment requirements.
+                </p>
+                <div className="bg-gray-900 rounded-lg p-4 mt-3 border-2 border-gray-700">
+                  <pre className="text-green-400 text-sm overflow-x-auto font-mono">
+                    <code>{`apiVersion: ossa/v${STABLE_VERSION}
 kind: Agent
 metadata:
   name: my-agent
@@ -109,103 +170,118 @@ spec:
   llm:
     provider: openai
     model: gpt-4`}</code>
-                </pre>
+                  </pre>
+                </div>
               </div>
-            </div>
 
-            <div>
-              <h3 className="text-xl font-semibold mb-2 text-primary">Schema Validation</h3>
-              <p className="text-gray-700">
-                Every agent manifest must conform to the OSA JSON Schema. Validation ensures correctness,
-                completeness, and compatibility before deployment.
-              </p>
-            </div>
+              <div className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-md">
+                <h3 className="text-xl font-bold mb-3 text-primary">Schema Validation</h3>
+                <p className="text-gray-700">
+                  Every agent manifest must conform to the OSA JSON Schema. Validation ensures correctness,
+                  completeness, and compatibility before deployment.
+                </p>
+              </div>
 
-            <div>
-              <h3 className="text-xl font-semibold mb-2 text-primary">Platform Extensions</h3>
-              <p className="text-gray-700">
-                Framework-specific extensions allow agents to leverage platform-specific features while
-                maintaining core OSA compatibility.
-              </p>
-            </div>
+              <div className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-md">
+                <h3 className="text-xl font-bold mb-3 text-primary">Platform Extensions</h3>
+                <p className="text-gray-700">
+                  Framework-specific extensions allow agents to leverage platform-specific features while
+                  maintaining core OSA compatibility.
+                </p>
+              </div>
 
-            <div>
-              <h3 className="text-xl font-semibold mb-2 text-primary">Export/Import</h3>
-              <p className="text-gray-700">
-                Convert OSA manifests to framework-specific formats (export) or import existing agents
-                into OSA format for standardization.
-              </p>
+              <div className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-md">
+                <h3 className="text-xl font-bold mb-3 text-primary">Export/Import</h3>
+                <p className="text-gray-700">
+                  Convert OSA manifests to framework-specific formats (export) or import existing agents
+                  into OSA format for standardization.
+                </p>
+              </div>
             </div>
-          </div>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-3xl font-semibold mb-6 text-primary">Version History</h2>
-          <div className="space-y-4">
-            <div className="card p-6">
-              <div className="flex items-center justify-between mb-2">
-                <h3 className="text-xl font-semibold">v0.2.3</h3>
-                <span className="px-3 py-1 bg-success/20 text-success rounded-full text-sm font-medium">
-                  Current
-                </span>
-              </div>
-              <p className="text-gray-700 mb-2">November 2024</p>
-              <p className="text-gray-700">
-                Enhanced platform extensions, improved validation, and expanded tool support.
-              </p>
+          </section>
+
+          <section className="mb-12">
+            <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <h2 className="text-3xl font-bold text-primary">Version History</h2>
             </div>
+            <div className="space-y-4">
+              <div className="bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-primary rounded-xl p-6 shadow-lg">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-xl font-bold text-gray-900">{STABLE_VERSION_TAG}</h3>
+                  <span className="px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm font-semibold border-2 border-green-300">
+                    Current
+                  </span>
+                </div>
+                <p className="text-gray-700 mb-2 font-medium">November 2024</p>
+                <p className="text-gray-700">
+                  Enhanced platform extensions, improved validation, and expanded tool support.
+                </p>
+              </div>
 
-            <div className="card p-6 bg-gray-50">
-              <div className="flex items-center justify-between mb-2">
-                <h3 className="text-xl font-semibold">v0.2.2</h3>
-                <span className="px-3 py-1 bg-gray-500/20 text-gray-700 rounded-full text-sm font-medium">
-                  Previous
-                </span>
-              </div>
-              <p className="text-gray-700 mb-2">October 2024</p>
-              <p className="text-gray-700">
-                Initial platform extensions and improved schema structure.
-              </p>
+              <div className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-md">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-xl font-semibold text-gray-900">v0.2.2</h3>
+                  <span className="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm font-medium">
+                    Previous
+                  </span>
+                </div>
+                <p className="text-gray-700 mb-2">October 2024</p>
+                <p className="text-gray-700">
+                  Initial platform extensions and improved schema structure.
+                </p>
+              </div>
+
+              <div className="bg-white border-2 border-gray-200 rounded-xl p-6 shadow-md">
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="text-xl font-semibold text-gray-900">v0.1.9</h3>
+                  <span className="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm font-medium">
+                    Legacy
+                  </span>
+                </div>
+                <p className="text-gray-700 mb-2">September 2024</p>
+                <p className="text-gray-700">
+                  Initial release with basic agent definition structure.
+                </p>
+              </div>
             </div>
+          </section>
 
-            <div className="card p-6 bg-gray-50">
-              <div className="flex items-center justify-between mb-2">
-                <h3 className="text-xl font-semibold">v0.1.9</h3>
-                <span className="px-3 py-1 bg-gray-500/20 text-gray-700 rounded-full text-sm font-medium">
-                  Legacy
-                </span>
-              </div>
-              <p className="text-gray-700 mb-2">September 2024</p>
-              <p className="text-gray-700">
-                Initial release with basic agent definition structure.
-              </p>
+          <section className="mb-12">
+            <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                </svg>
+              </div>
+              <h2 className="text-3xl font-bold text-primary">Resources</h2>
             </div>
-          </div>
-        </section>
-
-        <section className="mb-12">
-          <h2 className="text-3xl font-semibold mb-6 text-primary">Resources</h2>
-          <div className="grid md:grid-cols-2 gap-4">
-            <Link href="/schema" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Interactive Schema Explorer</h3>
-              <p className="text-gray-700">Explore the complete JSON Schema interactively.</p>
-            </Link>
-            <Link href="/playground" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Validation Playground</h3>
-              <p className="text-gray-700">Test and validate your agent manifests in real-time.</p>
-            </Link>
-            <Link href="/examples" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Examples Gallery</h3>
-              <p className="text-gray-700">Browse real-world examples and use cases.</p>
-            </Link>
-            <Link href="/docs" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Full Documentation</h3>
-              <p className="text-gray-700">Comprehensive guides and tutorials.</p>
-            </Link>
-          </div>
-        </section>
+            <div className="grid md:grid-cols-2 gap-4">
+              <Link href="/schema" className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-2 text-primary">Interactive Schema Explorer</h3>
+                <p className="text-gray-700">Explore the complete JSON Schema interactively.</p>
+              </Link>
+              <Link href="/playground" className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-2 text-primary">Validation Playground</h3>
+                <p className="text-gray-700">Test and validate your agent manifests in real-time.</p>
+              </Link>
+              <Link href="/examples" className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-2 text-primary">Examples Gallery</h3>
+                <p className="text-gray-700">Browse real-world examples and use cases.</p>
+              </Link>
+              <Link href="/docs" className="bg-white border-2 border-blue-100 rounded-xl p-6 shadow-md hover:shadow-xl hover:border-primary transition-all duration-300">
+                <h3 className="text-xl font-bold mb-2 text-primary">Full Documentation</h3>
+                <p className="text-gray-700">Comprehensive guides and tutorials.</p>
+              </Link>
+            </div>
+          </section>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
 

package/website/components/Logo.tsx

@@ -5,17 +5,90 @@ interface LogoProps {
   name: string;
 }
 
+// Special handling for domains that don't work with clearbit
+// Use SimpleIcons or direct logo URLs where available
+const LOGO_FALLBACKS: Record<string, string> = {
+  'kagent.dev': 'https://www.google.com/s2/favicons?sz=256&domain=kagent.dev',
+  'langchain.com': 'https://simpleicons.org/icons/langchain.svg',
+  'crewai.com': 'https://www.google.com/s2/favicons?sz=128&domain=crewai.com',
+  'llamaindex.ai': 'https://www.google.com/s2/favicons?sz=128&domain=llamaindex.ai',
+  'modelcontextprotocol.io': 'https://simpleicons.org/icons/anthropic.svg',
+  'librechat.com': 'https://simpleicons.org/icons/react.svg',
+  'langflow.com': 'https://simpleicons.org/icons/python.svg',
+  'openai.com': 'https://simpleicons.org/icons/openai.svg',
+  'anthropic.com': 'https://simpleicons.org/icons/anthropic.svg',
+  'cursor.sh': 'https://simpleicons.org/icons/cursor.svg',
+  'microsoft.com': 'https://www.google.com/s2/favicons?sz=256&domain=microsoft.com',
+  'vercel.com': 'https://simpleicons.org/icons/vercel.svg',
+  'drupal.org': 'https://simpleicons.org/icons/drupal.svg',
+  'huggingface.co': 'https://simpleicons.org/icons/huggingface.svg',
+  'google.com': 'https://simpleicons.org/icons/google.svg',
+  'deepmind.google': 'https://www.google.com/s2/favicons?sz=256&domain=deepmind.google',
+  'aws.amazon.com': 'https://www.google.com/s2/favicons?sz=128&domain=aws.amazon.com',
+  'azure.com': 'https://simpleicons.org/icons/microsoftazure.svg',
+  'github.com': 'https://simpleicons.org/icons/github.svg',
+  'docker.com': 'https://simpleicons.org/icons/docker.svg',
+  'kubernetes.io': 'https://simpleicons.org/icons/kubernetes.svg',
+};
+
 export function Logo({ domain, name }: LogoProps) {
+  const getLogoSrc = () => {
+    // Check for name-based fallbacks first (for cases where domain is shared)
+    if (name === 'LangGraph' && domain === 'langchain.com') {
+      return 'https://simpleicons.org/icons/langchain.svg';
+    }
+    if (name === 'LlamaIndex') {
+      return 'https://www.google.com/s2/favicons?sz=128&domain=llamaindex.ai';
+    }
+    if (name === 'CrewAI') {
+      return 'https://www.google.com/s2/favicons?sz=128&domain=crewai.com';
+    }
+    if (name === 'AutoGen') {
+      return 'https://www.google.com/s2/favicons?sz=256&domain=microsoft.com';
+    }
+    if (name === 'Vercel AI') {
+      return 'https://simpleicons.org/icons/vercel.svg';
+    }
+    if (name === 'MCP') {
+      return 'https://simpleicons.org/icons/anthropic.svg';
+    }
+    if (name === 'Kagent' || name === 'kAgent') {
+      return 'https://www.google.com/s2/favicons?sz=256&domain=kagent.dev';
+    }
+    if (name === 'AWS') {
+      return 'https://www.google.com/s2/favicons?sz=128&domain=aws.amazon.com';
+    }
+    if (name === 'Microsoft') {
+      return 'https://www.google.com/s2/favicons?sz=256&domain=microsoft.com';
+    }
+    if (name === 'Gemini') {
+      return 'https://www.google.com/s2/favicons?sz=256&domain=deepmind.google';
+    }
+    // Check domain-based fallbacks
+    if (LOGO_FALLBACKS[domain]) {
+      return LOGO_FALLBACKS[domain];
+    }
+    return `https://logo.clearbit.com/${domain}`;
+  };
+
   const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
-    e.currentTarget.src = `https://www.google.com/s2/favicons?sz=256&domain=${domain}`;
+    // Try Google favicon service as fallback
+    const fallbackSrc = `https://www.google.com/s2/favicons?sz=256&domain=${domain}`;
+    if (e.currentTarget.src !== fallbackSrc) {
+      e.currentTarget.src = fallbackSrc;
+    } else {
+      // If both fail, use a placeholder
+      e.currentTarget.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iI0U1RTdFQiIvPgo8cGF0aCBkPSJNMTIgOEMxMy4xIDggMTQgOC45IDE0IDEwQzE0IDExLjEgMTMuMSAxMiAxMiAxMkMxMC45IDEyIDEwIDExLjEgMTAgMTBDMTAgOC45IDEwLjkgOCAxMiA4Wk0xMiAxNEMxMy4xIDE0IDE0IDE0LjkgMTQgMTZDMTQgMTcuMSAxMy4xIDE4IDEyIDE4QzEwLjkgMTggMTAgMTcuMSAxMCAxNkMxMCAxNC45IDEwLjkgMTQgMTIgMTRaIiBmaWxsPSIjOUI5Q0E0Ii8+Cjwvc3ZnPgo=';
+    }
   };
 
   return (
     <div className="flex flex-col items-center gap-3 p-4 hover:bg-white rounded-lg transition-all">
       <img
-        src={`https://logo.clearbit.com/${domain}`}
+        src={getLogoSrc()}
         alt={name}
         className="h-12 w-12 object-contain"
+        style={{ filter: 'grayscale(100%) contrast(1.2)' }}
         onError={handleError}
       />
       <span className="text-sm font-medium text-gray-600">{name}</span>