@bluefly/openstandardagents 0.2.4 → 0.2.7

package/website/app/ecosystem/page.tsx

@@ -1,5 +1,6 @@
 import Link from 'next/link';
 import type { Metadata } from 'next';
+import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
 
 export const metadata: Metadata = {
   title: 'Ecosystem - Open Standard Agents',
@@ -209,14 +210,14 @@ export default function EcosystemPage() {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
             {runtimes.map((runtime) => (
-              <div key={runtime.name} className="card p-6 hover:shadow-lg transition-shadow">
+              <Card key={runtime.name} variant="default" padding="md" elevation={1} hover>
                 <div className="flex items-center justify-between mb-4">
                   <span className="text-4xl">{runtime.logo}</span>
                   <StatusBadge status={runtime.status} />
                 </div>
                 <h3 className="text-xl font-semibold mb-2">{runtime.name}</h3>
                 <p className="text-gray-600">{runtime.notes}</p>
-              </div>
+              </Card>
             ))}
           </div>
         </section>
@@ -225,109 +226,125 @@ export default function EcosystemPage() {
         <section className="mb-16">
           <h2 className="text-4xl font-bold mb-6 text-primary">Integration Ecosystem</h2>
           <div className="grid md:grid-cols-2 gap-6">
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">Tool Integration</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>MCP Servers:</strong> Native Model Context Protocol support</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>OpenAPI/REST:</strong> Standard HTTP API integration</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>GraphQL:</strong> Query-based data fetching</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>gRPC:</strong> High-performance RPC protocols</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>WebSockets:</strong> Real-time bidirectional communication</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">Tool Integration</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>MCP Servers:</strong> Native Model Context Protocol support</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>OpenAPI/REST:</strong> Standard HTTP API integration</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>GraphQL:</strong> Query-based data fetching</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>gRPC:</strong> High-performance RPC protocols</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>WebSockets:</strong> Real-time bidirectional communication</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
 
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">Data Integration</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Vector Databases:</strong> Pinecone, Weaviate, Qdrant</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>SQL Databases:</strong> PostgreSQL, MySQL, SQLite</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>NoSQL:</strong> MongoDB, Redis, DynamoDB</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Message Queues:</strong> RabbitMQ, Kafka, SQS</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Object Storage:</strong> S3, GCS, Azure Blob</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">Data Integration</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Vector Databases:</strong> Pinecone, Weaviate, Qdrant</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>SQL Databases:</strong> PostgreSQL, MySQL, SQLite</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>NoSQL:</strong> MongoDB, Redis, DynamoDB</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Message Queues:</strong> RabbitMQ, Kafka, SQS</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Object Storage:</strong> S3, GCS, Azure Blob</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
 
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">Monitoring & Observability</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>OpenTelemetry:</strong> Distributed tracing support</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Prometheus:</strong> Metrics collection and alerting</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Grafana:</strong> Visualization and dashboards</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Sentry:</strong> Error tracking and reporting</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>DataDog:</strong> Full-stack monitoring</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">Monitoring & Observability</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>OpenTelemetry:</strong> Distributed tracing support</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Prometheus:</strong> Metrics collection and alerting</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Grafana:</strong> Visualization and dashboards</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Sentry:</strong> Error tracking and reporting</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>DataDog:</strong> Full-stack monitoring</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
 
-            <div className="card p-6">
-              <h3 className="text-2xl font-semibold mb-4 text-primary">CI/CD & DevOps</h3>
-              <ul className="space-y-3 text-gray-700">
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>GitHub Actions:</strong> Automated testing and deployment</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>GitLab CI/CD:</strong> Pipeline automation</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Jenkins:</strong> Continuous integration server</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>ArgoCD:</strong> GitOps continuous delivery</span>
-                </li>
-                <li className="flex items-start">
-                  <span className="text-green-500 mr-2">✓</span>
-                  <span><strong>Terraform:</strong> Infrastructure as code</span>
-                </li>
-              </ul>
-            </div>
+            <Card variant="default" padding="md" elevation={1}>
+              <CardHeader>
+                <CardTitle className="text-primary">CI/CD & DevOps</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ul className="space-y-3 text-gray-700">
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>GitHub Actions:</strong> Automated testing and deployment</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>GitLab CI/CD:</strong> Pipeline automation</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Jenkins:</strong> Continuous integration server</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>ArgoCD:</strong> GitOps continuous delivery</span>
+                  </li>
+                  <li className="flex items-start">
+                    <span className="text-green-500 mr-2">✓</span>
+                    <span><strong>Terraform:</strong> Infrastructure as code</span>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
           </div>
         </section>
 
@@ -335,17 +352,35 @@ export default function EcosystemPage() {
         <section className="mb-16">
           <h2 className="text-4xl font-bold mb-6 text-primary">Community & Resources</h2>
           <div className="grid md:grid-cols-3 gap-6">
-            <Link href="/docs/ecosystem/overview" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Ecosystem Overview</h3>
-              <p className="text-gray-700">Learn about the OSSA ecosystem architecture and integration patterns.</p>
+            <Link href="/docs/ecosystem/overview">
+              <Card variant="interactive" padding="md" elevation={1} className="h-full">
+                <CardHeader>
+                  <CardTitle className="text-primary">Ecosystem Overview</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-700">Learn about the OSSA ecosystem architecture and integration patterns.</p>
+                </CardContent>
+              </Card>
             </Link>
-            <Link href="/docs/ecosystem/framework-support" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Framework Support Guide</h3>
-              <p className="text-gray-700">Detailed compatibility information and migration guides for each framework.</p>
+            <Link href="/docs/ecosystem/framework-support">
+              <Card variant="interactive" padding="md" elevation={1} className="h-full">
+                <CardHeader>
+                  <CardTitle className="text-primary">Framework Support Guide</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-700">Detailed compatibility information and migration guides for each framework.</p>
+                </CardContent>
+              </Card>
             </Link>
-            <Link href="/examples" className="card-hover p-6">
-              <h3 className="text-xl font-semibold mb-2 text-primary">Integration Examples</h3>
-              <p className="text-gray-700">Real-world examples of OSSA integrations across frameworks and platforms.</p>
+            <Link href="/examples">
+              <Card variant="interactive" padding="md" elevation={1} className="h-full">
+                <CardHeader>
+                  <CardTitle className="text-primary">Integration Examples</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-gray-700">Real-world examples of OSSA integrations across frameworks and platforms.</p>
+                </CardContent>
+              </Card>
             </Link>
           </div>
         </section>

package/website/app/examples/page.tsx

@@ -11,49 +11,40 @@ interface ExampleFile {
 }
 
 function getAllExamples(): ExampleFile[] {
-  // Check for mounted examples directory (Docker) or local development
-  const examplesDir = fs.existsSync('/examples')
-    ? '/examples'
-    : path.join(process.cwd(), '../examples');
-  const examples: ExampleFile[] = [];
-
-  if (!fs.existsSync(examplesDir)) {
-    return examples;
-  }
-
-  function traverseDir(dir: string, category = ''): void {
-    const entries = fs.readdirSync(dir, { withFileTypes: true });
-
-    for (const entry of entries) {
-      const fullPath = path.join(dir, entry.name);
-      const relativePath = path.relative(examplesDir, fullPath);
-
-      if (entry.isDirectory()) {
-        traverseDir(fullPath, entry.name);
-      } else if (
-        entry.isFile() &&
-        (entry.name.endsWith('.yml') ||
-          entry.name.endsWith('.yaml') ||
-          entry.name.endsWith('.json') ||
-          entry.name.endsWith('.ts'))
-      ) {
-        try {
-          const content = fs.readFileSync(fullPath, 'utf8');
-          examples.push({
-            name: entry.name,
-            path: relativePath,
-            content,
-            category: category || 'root',
-          });
-        } catch (error) {
-          // Skip files that can't be read
+  try {
+    // Try multiple absolute paths
+    const paths = [
+      path.resolve(process.cwd(), 'public', 'examples.json'),
+      path.join(process.cwd(), 'public', 'examples.json'),
+      path.resolve(__dirname, '..', '..', 'public', 'examples.json'),
+    ];
+    
+    for (const examplesJsonPath of paths) {
+      if (fs.existsSync(examplesJsonPath)) {
+        const content = fs.readFileSync(examplesJsonPath, 'utf8');
+        const examples = JSON.parse(content);
+        if (Array.isArray(examples) && examples.length > 0) {
+          return examples;
         }
       }
     }
+    
+    // If still not found, try reading from public directory directly
+    const publicDir = path.resolve(process.cwd(), 'public');
+    const directPath = path.join(publicDir, 'examples.json');
+    if (fs.existsSync(directPath)) {
+      const content = fs.readFileSync(directPath, 'utf8');
+      const examples = JSON.parse(content);
+      if (Array.isArray(examples)) {
+        return examples;
+      }
+    }
+    
+    return [];
+  } catch (error) {
+    console.error('Error loading examples:', error);
+    return [];
   }
-
-  traverseDir(examplesDir);
-  return examples;
 }
 
 export default function ExamplesPage() {
@@ -65,10 +56,29 @@ export default function ExamplesPage() {
     return acc;
   }, {} as Record<string, number>);
 
+  // Extract unique frameworks from example paths and content
+  const frameworkNames = [
+    'kagent', 'langchain', 'crewai', 'openai', 'anthropic', 
+    'autogen', 'langflow', 'langgraph', 'llamaindex', 'cursor', 
+    'vercel', 'drupal', 'mcp', 'huggingface', 'google', 'aws', 
+    'azure', 'github', 'docker', 'kubernetes'
+  ];
+  
+  const frameworksInExamples = new Set<string>();
+  examples.forEach(ex => {
+    const pathLower = ex.path.toLowerCase();
+    const contentLower = ex.content.toLowerCase();
+    frameworkNames.forEach(fw => {
+      if (pathLower.includes(fw) || contentLower.includes(`"${fw}"`) || contentLower.includes(`'${fw}'`)) {
+        frameworksInExamples.add(fw);
+      }
+    });
+  });
+
   return (
     <>
       {/* Hero Section */}
-      <div className="bg-gradient-to-br from-primary via-accent to-secondary text-white py-16 px-4">
+      <div className="bg-gradient-to-br from-blue-600 via-primary to-secondary 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">
@@ -100,7 +110,7 @@ export default function ExamplesPage() {
             </div>
             <div className="w-px h-12 bg-gray-300"></div>
             <div className="text-center">
-              <div className="text-3xl font-bold text-primary">15+</div>
+              <div className="text-3xl font-bold text-primary">{frameworksInExamples.size}</div>
               <div className="text-sm text-gray-600">Frameworks</div>
             </div>
           </div>