@bluefly/openstandardagents 0.2.4

package/website/app/ecosystem/page.tsx

@@ -0,0 +1,375 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Ecosystem - Open Standard Agents',
+  description: 'Explore OSSA framework support, integrations, and runtime compatibility across the AI agent ecosystem.',
+};
+
+interface FrameworkSupport {
+  name: string;
+  status: 'Supported' | 'Native' | 'Planned';
+  migrationGuide?: string;
+  example?: string;
+  notes: string;
+  logo?: string;
+}
+
+const frameworks: FrameworkSupport[] = [
+  {
+    name: 'kAgent',
+    status: 'Native',
+    example: '/examples#kagent',
+    notes: 'Native OSSA implementation - built from the ground up on OSSA specification',
+    logo: '🚀',
+  },
+  {
+    name: 'LangChain',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#langchain',
+    example: '/examples#langchain',
+    notes: 'Full support for LangChain agents with OSSA manifest compatibility',
+    logo: '🦜',
+  },
+  {
+    name: 'CrewAI',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#crewai',
+    example: '/examples#crewai',
+    notes: 'Multi-agent crew orchestration with OSSA coordination',
+    logo: '⚓',
+  },
+  {
+    name: 'Anthropic MCP',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#mcp',
+    example: '/examples#mcp',
+    notes: 'Model Context Protocol integration for Claude and other models',
+    logo: '🔌',
+  },
+  {
+    name: 'Langflow',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#langflow',
+    example: '/examples#langflow',
+    notes: 'Visual flow-based agent builder with OSSA export',
+    logo: '🌊',
+  },
+  {
+    name: 'Drupal ECA',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#drupal-eca',
+    example: '/examples#drupal',
+    notes: 'Event-Condition-Action framework integration for Drupal CMS',
+    logo: '💧',
+  },
+  {
+    name: 'OpenAI Assistants',
+    status: 'Supported',
+    migrationGuide: '/docs/ecosystem/framework-support#openai-assistants',
+    example: '/examples#openai',
+    notes: 'OpenAI Assistants API with OSSA manifest support',
+    logo: '🤖',
+  },
+];
+
+interface RuntimeSupport {
+  name: string;
+  status: 'Supported' | 'Beta' | 'Planned';
+  notes: string;
+  logo: string;
+}
+
+const runtimes: RuntimeSupport[] = [
+  {
+    name: 'Docker',
+    status: 'Supported',
+    notes: 'Container-based deployment with full OSSA manifest support',
+    logo: '🐳',
+  },
+  {
+    name: 'Kubernetes',
+    status: 'Supported',
+    notes: 'Cloud-native orchestration with autoscaling and service mesh',
+    logo: '☸️',
+  },
+  {
+    name: 'AWS Lambda',
+    status: 'Supported',
+    notes: 'Serverless execution with event-driven agent invocation',
+    logo: '⚡',
+  },
+  {
+    name: 'Google Cloud Functions',
+    status: 'Supported',
+    notes: 'Serverless deployment on Google Cloud Platform',
+    logo: '☁️',
+  },
+  {
+    name: 'Azure Functions',
+    status: 'Supported',
+    notes: 'Serverless compute service on Microsoft Azure',
+    logo: '🔷',
+  },
+  {
+    name: 'Cloudflare Workers',
+    status: 'Beta',
+    notes: 'Edge computing with global distribution',
+    logo: '🌐',
+  },
+];
+
+function StatusBadge({ status }: { status: string }) {
+  const colors = {
+    Supported: 'bg-green-100 text-green-800 border-green-300',
+    Native: 'bg-blue-100 text-blue-800 border-blue-300',
+    Planned: 'bg-gray-100 text-gray-800 border-gray-300',
+    Beta: 'bg-yellow-100 text-yellow-800 border-yellow-300',
+  };
+
+  return (
+    <span className={`px-3 py-1 rounded-full text-sm font-medium border ${colors[status as keyof typeof colors] || 'bg-gray-100 text-gray-800'}`}>
+      {status}
+    </span>
+  );
+}
+
+export default function EcosystemPage() {
+  return (
+    <div className="container mx-auto max-w-7xl px-4 py-12">
+      <div className="max-w-6xl mx-auto">
+        <h1 className="text-5xl font-bold mb-6">OSSA Ecosystem</h1>
+        <p className="text-xl text-gray-700 mb-12">
+          Explore framework support, integrations, and runtime compatibility across the Open Standard Agents ecosystem.
+          OSSA enables interoperability between AI agent frameworks and deployment flexibility across cloud platforms.
+        </p>
+
+        {/* Framework Support Matrix */}
+        <section className="mb-16">
+          <h2 className="text-4xl font-bold mb-6 text-primary">Framework Support</h2>
+          <p className="text-lg text-gray-700 mb-8">
+            OSSA provides compatibility layers for popular AI agent frameworks, enabling you to standardize
+            agent definitions while preserving framework-specific features.
+          </p>
+
+          <div className="overflow-x-auto">
+            <table className="w-full border-collapse bg-white shadow-sm rounded-lg overflow-hidden">
+              <thead>
+                <tr className="bg-gray-100 border-b border-gray-200">
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Framework</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Status</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Migration Guide</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Example</th>
+                  <th className="px-6 py-4 text-left font-semibold text-gray-700">Notes</th>
+                </tr>
+              </thead>
+              <tbody>
+                {frameworks.map((framework, index) => (
+                  <tr key={framework.name} className={index % 2 === 0 ? 'bg-white' : 'bg-gray-50'}>
+                    <td className="px-6 py-4 font-medium">
+                      <span className="text-2xl mr-2">{framework.logo}</span>
+                      {framework.name}
+                    </td>
+                    <td className="px-6 py-4">
+                      <StatusBadge status={framework.status} />
+                    </td>
+                    <td className="px-6 py-4">
+                      {framework.migrationGuide ? (
+                        <Link href={framework.migrationGuide} className="text-primary hover:underline">
+                          View Guide
+                        </Link>
+                      ) : (
+                        <span className="text-gray-400">N/A</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4">
+                      {framework.example ? (
+                        <Link href={framework.example} className="text-primary hover:underline">
+                          View Example
+                        </Link>
+                      ) : (
+                        <span className="text-gray-400">Coming Soon</span>
+                      )}
+                    </td>
+                    <td className="px-6 py-4 text-gray-600">{framework.notes}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        {/* Runtime Compatibility */}
+        <section className="mb-16">
+          <h2 className="text-4xl font-bold mb-6 text-primary">Runtime Compatibility</h2>
+          <p className="text-lg text-gray-700 mb-8">
+            Deploy OSSA-compliant agents across multiple cloud platforms and execution environments.
+            The specification ensures consistent behavior regardless of deployment target.
+          </p>
+
+          <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">
+                <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>
+            ))}
+          </div>
+        </section>
+
+        {/* Integration Ecosystem */}
+        <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>
+
+            <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>
+
+            <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>
+
+            <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>
+          </div>
+        </section>
+
+        {/* Community & Resources */}
+        <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>
+            <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>
+            <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>
+          </div>
+        </section>
+
+        {/* Call to Action */}
+        <section className="bg-gradient-to-r from-primary to-blue-600 rounded-lg p-8 text-white">
+          <h2 className="text-3xl font-bold mb-4">Build on OSSA</h2>
+          <p className="text-lg mb-6">
+            Ready to integrate OSSA into your framework or platform? Our specification is open source
+            and designed for extensibility.
+          </p>
+          <div className="flex flex-wrap gap-4">
+            <Link href="/docs/getting-started/5-minute-overview" className="btn-secondary">
+              Get Started
+            </Link>
+            <Link href="/specification" className="bg-white text-primary px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
+              Read Specification
+            </Link>
+            <Link href="https://github.com/blueflyio/openstandardagents/issues" target="_blank" rel="noopener noreferrer" className="border-2 border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-primary transition-colors">
+              Request Integration
+            </Link>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}

package/website/app/examples/page.tsx

@@ -0,0 +1,123 @@
+import fs from 'fs';
+import path from 'path';
+import { Suspense } from 'react';
+import { ExamplesViewer } from '@/components/examples/ExamplesViewer';
+
+interface ExampleFile {
+  name: string;
+  path: string;
+  content: string;
+  category: string;
+}
+
+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
+        }
+      }
+    }
+  }
+
+  traverseDir(examplesDir);
+  return examples;
+}
+
+export default function ExamplesPage() {
+  const examples = getAllExamples();
+
+  // Group examples by category with counts
+  const categoryStats = examples.reduce((acc, ex) => {
+    acc[ex.category] = (acc[ex.category] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  return (
+    <>
+      {/* Hero Section */}
+      <div className="bg-gradient-to-br from-primary via-accent 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">
+              <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>
+          <h1 className="text-5xl font-bold mb-4">OSSA Examples Gallery</h1>
+          <p className="text-xl text-white/90 mb-2">
+            {examples.length}+ real-world Open Standard Agents manifests
+          </p>
+          <p className="text-base text-white/80">
+            Learn from production-ready implementations across multiple frameworks
+          </p>
+        </div>
+      </div>
+
+      {/* Stats Bar */}
+      <div className="bg-gradient-to-r from-primary/5 to-secondary/5 border-b border-primary/20">
+        <div className="container mx-auto max-w-7xl px-4 py-6">
+          <div className="flex flex-wrap gap-6 justify-center items-center">
+            <div className="text-center">
+              <div className="text-3xl font-bold text-primary">{examples.length}</div>
+              <div className="text-sm text-gray-600">Total Examples</div>
+            </div>
+            <div className="w-px h-12 bg-gray-300"></div>
+            <div className="text-center">
+              <div className="text-3xl font-bold text-secondary">{Object.keys(categoryStats).length}</div>
+              <div className="text-sm text-gray-600">Categories</div>
+            </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-sm text-gray-600">Frameworks</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="container mx-auto max-w-7xl px-4 py-12">
+        <Suspense fallback={
+          <div className="text-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
+            <p className="mt-4 text-gray-600">Loading examples...</p>
+          </div>
+        }>
+          <ExamplesViewer examples={examples} />
+        </Suspense>
+      </div>
+    </>
+  );
+}
+

package/website/app/globals.css

@@ -0,0 +1,108 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    /* OSSA Brand Colors - from logo design */
+    --ossa-primary: #0066CC;        /* Main blue - OSSA hub/standard */
+    --ossa-secondary: #00B8D4;      /* Cyan - Agent nodes */
+    --ossa-accent: #0099E6;         /* Light blue accent */
+    --ossa-success: #28a745;
+    --ossa-warning: #ffc107;
+    --ossa-error: #dc3545;
+    --ossa-info: #17a2b8;
+    --ossa-dark: #212529;
+    --ossa-gray-900: #343a40;
+    --ossa-gray-700: #495057;
+    --ossa-gray-500: #6c757d;
+    --ossa-gray-300: #dee2e6;
+    --ossa-gray-100: #f8f9fa;
+    --ossa-white: #ffffff;
+
+    /* Brand gradients */
+    --gradient-brand: linear-gradient(135deg, #0066CC 0%, #00B8D4 100%);
+    --gradient-hero: linear-gradient(135deg, #0052A3 0%, #0066CC 50%, #00B8D4 100%);
+
+    /* Code syntax highlighting */
+    --code-bg: #1e1e1e;
+    --code-text: #d4d4d4;
+    --code-keyword: #569cd6;
+    --code-string: #ce9178;
+    --code-comment: #6a9955;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply font-sans text-gray-900 bg-white antialiased;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    @apply font-sans font-semibold;
+  }
+
+  code {
+    @apply font-mono;
+  }
+
+  pre {
+    @apply bg-code-bg text-code-text rounded-lg p-4 overflow-x-auto;
+  }
+
+  pre code {
+    @apply text-code-text;
+  }
+
+  a {
+    cursor: pointer;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .focus\:not-sr-only:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: inherit;
+    margin: inherit;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary-dark transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-secondary focus:ring-offset-2;
+  }
+
+  .btn-outline {
+    @apply border-2 border-primary text-primary px-6 py-3 rounded-lg font-medium hover:bg-primary hover:text-white transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
+  }
+
+  .card {
+    @apply bg-white rounded-lg shadow-md p-6 border border-gray-300;
+  }
+
+  .card-hover {
+    @apply card hover:shadow-lg transition-shadow;
+  }
+}
+