@bluefly/openstandardagents 0.2.4

package/website/components/docs/MarkdownContent.tsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+import remarkGfm from 'remark-gfm';
+
+interface MarkdownContentProps {
+  content: string;
+}
+
+export function MarkdownContent({ content }: MarkdownContentProps) {
+  return (
+    <div className="markdown-content">
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Headings
+          h1: ({ children }) => (
+            <h1 className="text-3xl font-bold text-gray-900 mt-8 mb-4 pb-2 border-b border-gray-200">
+              {children}
+            </h1>
+          ),
+          h2: ({ children }) => (
+            <h2 className="text-2xl font-semibold text-gray-900 mt-8 mb-4">
+              {children}
+            </h2>
+          ),
+          h3: ({ children }) => (
+            <h3 className="text-xl font-semibold text-gray-900 mt-6 mb-3">
+              {children}
+            </h3>
+          ),
+          h4: ({ children }) => (
+            <h4 className="text-lg font-semibold text-gray-900 mt-4 mb-2">
+              {children}
+            </h4>
+          ),
+
+          // Paragraphs
+          p: ({ children }) => (
+            <p className="text-gray-700 leading-7 mb-4">
+              {children}
+            </p>
+          ),
+
+          // Links
+          a: ({ href, children }) => (
+            <a
+              href={href}
+              className="text-blue-600 hover:text-blue-800 underline"
+              target={href?.startsWith('http') ? '_blank' : undefined}
+              rel={href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+            >
+              {children}
+            </a>
+          ),
+
+          // Lists
+          ul: ({ children }) => (
+            <ul className="list-disc list-inside mb-4 space-y-2 text-gray-700">
+              {children}
+            </ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="list-decimal list-inside mb-4 space-y-2 text-gray-700">
+              {children}
+            </ol>
+          ),
+          li: ({ children }) => (
+            <li className="leading-7">
+              {children}
+            </li>
+          ),
+
+          // Blockquotes
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-4 border-blue-500 pl-4 py-2 my-4 bg-blue-50 text-gray-700 italic">
+              {children}
+            </blockquote>
+          ),
+
+          // Tables
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-6">
+              <table className="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg">
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-gray-50">
+              {children}
+            </thead>
+          ),
+          th: ({ children }) => (
+            <th className="px-4 py-3 text-left text-sm font-semibold text-gray-900 border-b">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="px-4 py-3 text-sm text-gray-700 border-b border-gray-100">
+              {children}
+            </td>
+          ),
+          tr: ({ children }) => (
+            <tr className="hover:bg-gray-50">
+              {children}
+            </tr>
+          ),
+
+          // Code
+          code({ className, children }) {
+            const match = /language-(\w+)/.exec(className || '');
+            const isInline = !match;
+
+            if (match) {
+              return (
+                <div className="my-4 rounded-lg overflow-hidden">
+                  <SyntaxHighlighter
+                    style={vscDarkPlus as any}
+                    language={match[1]}
+                    PreTag="div"
+                    customStyle={{
+                      margin: 0,
+                      borderRadius: '0.5rem',
+                      fontSize: '0.875rem',
+                    }}
+                  >
+                    {String(children).replace(/\n$/, '')}
+                  </SyntaxHighlighter>
+                </div>
+              );
+            }
+
+            return (
+              <code className="bg-gray-100 text-red-600 px-1.5 py-0.5 rounded text-sm font-mono">
+                {children}
+              </code>
+            );
+          },
+
+          // Pre (for code blocks without language)
+          pre: ({ children }) => (
+            <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4 text-sm">
+              {children}
+            </pre>
+          ),
+
+          // Horizontal rule
+          hr: () => (
+            <hr className="my-8 border-t border-gray-200" />
+          ),
+
+          // Strong/Bold
+          strong: ({ children }) => (
+            <strong className="font-semibold text-gray-900">
+              {children}
+            </strong>
+          ),
+
+          // Emphasis/Italic
+          em: ({ children }) => (
+            <em className="italic">
+              {children}
+            </em>
+          ),
+
+          // Images
+          img: ({ src, alt }) => (
+            <img
+              src={src}
+              alt={alt || ''}
+              className="max-w-full h-auto rounded-lg my-4 shadow-sm"
+            />
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+

package/website/components/docs/VersionSelector.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { OSSA_VERSION_TAG } from '@/lib/version';
+
+const versions = [
+  { value: OSSA_VERSION_TAG, label: `${OSSA_VERSION_TAG} (Current)`, default: true },
+  { value: 'v1.0', label: 'v1.0 (Coming Soon)', disabled: true },
+];
+
+export function VersionSelector() {
+  const [selectedVersion, setSelectedVersion] = useState(OSSA_VERSION_TAG);
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const handleVersionChange = (version: string): void => {
+    setSelectedVersion(version);
+    // In the future, this could navigate to version-specific docs
+    // For now, we just update the UI
+  };
+
+  return (
+    <div className="mb-4">
+      <label htmlFor="version-select" className="block text-sm font-medium text-gray-700 mb-2">
+        Version
+      </label>
+      <select
+        id="version-select"
+        value={selectedVersion}
+        onChange={(e) => handleVersionChange(e.target.value)}
+        className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary bg-white"
+        aria-label="Select OSSA version"
+        aria-describedby="version-description"
+      >
+        {versions.map((version) => (
+          <option
+            key={version.value}
+            value={version.value}
+            disabled={version.disabled}
+          >
+            {version.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}
+

package/website/components/examples/ExamplesViewer.tsx

@@ -0,0 +1,293 @@
+'use client';
+
+import { useState, useMemo, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+interface ExampleFile {
+  name: string;
+  path: string;
+  content: string;
+  category: string;
+}
+
+interface ExamplesViewerProps {
+  examples: ExampleFile[];
+}
+
+export function ExamplesViewer({ examples }: ExamplesViewerProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [selectedExample, setSelectedExample] = useState<ExampleFile | null>(null);
+  const [filter, setFilter] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  // Initialize from URL parameters
+  useEffect(() => {
+    const exampleParam = searchParams.get('example');
+    const categoryParam = searchParams.get('category');
+    const searchParam = searchParams.get('search');
+
+    if (exampleParam) {
+      const example = examples.find(ex => ex.path === exampleParam);
+      if (example) setSelectedExample(example);
+    } else if (examples.length > 0) {
+      setSelectedExample(examples[0]);
+    }
+
+    if (categoryParam) setFilter(categoryParam);
+    if (searchParam) setSearchQuery(searchParam);
+  }, [examples, searchParams]);
+
+  // Update URL when selection changes
+  const handleSelectExample = (example: ExampleFile) => {
+    setSelectedExample(example);
+    const params = new URLSearchParams(searchParams.toString());
+    params.set('example', example.path);
+    if (filter !== 'all') params.set('category', filter);
+    if (searchQuery) params.set('search', searchQuery);
+    router.push(`/examples?${params.toString()}`, { scroll: false });
+  };
+
+  const handleFilterChange = (newFilter: string) => {
+    setFilter(newFilter);
+    const params = new URLSearchParams(searchParams.toString());
+    if (newFilter !== 'all') {
+      params.set('category', newFilter);
+    } else {
+      params.delete('category');
+    }
+    router.push(`/examples?${params.toString()}`, { scroll: false });
+  };
+
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+    const params = new URLSearchParams(searchParams.toString());
+    if (query) {
+      params.set('search', query);
+    } else {
+      params.delete('search');
+    }
+    router.push(`/examples?${params.toString()}`, { scroll: false });
+  };
+
+  const categories = useMemo(() => {
+    const cats = new Set(examples.map((ex) => ex.category));
+    return Array.from(cats).sort();
+  }, [examples]);
+
+  const filteredExamples = useMemo(() => {
+    let filtered = examples;
+
+    if (filter !== 'all') {
+      filtered = filtered.filter((ex) => ex.category === filter);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      filtered = filtered.filter(
+        (ex) =>
+          ex.name.toLowerCase().includes(query) ||
+          ex.path.toLowerCase().includes(query) ||
+          ex.content.toLowerCase().includes(query)
+      );
+    }
+
+    return filtered;
+  }, [examples, filter, searchQuery]);
+
+  const getLanguage = (filename: string): string => {
+    if (filename.endsWith('.ts')) return 'typescript';
+    if (filename.endsWith('.json')) return 'json';
+    if (filename.endsWith('.yml') || filename.endsWith('.yaml')) return 'yaml';
+    return 'text';
+  };
+
+  const copyToClipboard = async (text: string): Promise<void> => {
+    try {
+      await navigator.clipboard.writeText(text);
+      // Could add a toast notification here
+    } catch (error) {
+      console.error('Failed to copy:', error);
+    }
+  };
+
+  return (
+    <div className="grid lg:grid-cols-3 gap-6">
+      {/* Sidebar */}
+      <div className="lg:col-span-1">
+        <div className="card border-2 border-gray-300 sticky top-4">
+          <div className="flex items-center mb-4">
+            <svg className="w-6 h-6 text-primary mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+            </svg>
+            <h2 className="text-2xl font-bold text-gray-900">Browse Examples</h2>
+          </div>
+
+          {/* Search */}
+          <div className="relative mb-4">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg className="h-5 w-5 text-gray-400" 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>
+            <input
+              type="search"
+              placeholder="Search examples..."
+              value={searchQuery}
+              onChange={(e) => handleSearchChange(e.target.value)}
+              className="w-full pl-10 pr-3 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-base"
+              aria-label="Search examples"
+            />
+          </div>
+
+          {/* Category Filter */}
+          <div className="relative mb-4">
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+              </svg>
+            </div>
+            <select
+              value={filter}
+              onChange={(e) => handleFilterChange(e.target.value)}
+              className="w-full pl-10 pr-3 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary text-base appearance-none bg-white"
+            >
+              <option value="all">All Categories ({filteredExamples.length})</option>
+              {categories.map((cat) => (
+                <option key={cat} value={cat}>
+                  {cat} ({examples.filter(ex => ex.category === cat).length})
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Results Count */}
+          <div className="mb-3 px-2">
+            <span className="text-sm font-semibold text-gray-700">
+              {filteredExamples.length} {filteredExamples.length === 1 ? 'example' : 'examples'} found
+            </span>
+          </div>
+
+          {/* Example List */}
+          <div className="space-y-2 max-h-96 overflow-y-auto pr-2">
+            {filteredExamples.map((example) => (
+              <button
+                key={example.path}
+                onClick={() => handleSelectExample(example)}
+                className={`w-full text-left px-4 py-3 rounded-lg text-sm transition-all border-2 ${
+                  selectedExample?.path === example.path
+                    ? 'bg-gradient-to-r from-primary to-primary-dark text-white border-primary shadow-md'
+                    : 'bg-white border-gray-200 hover:border-primary/50 hover:shadow-md'
+                }`}
+              >
+                <div className="font-bold mb-1 truncate">{example.name}</div>
+                <div
+                  className={`text-xs truncate flex items-center ${
+                    selectedExample?.path === example.path
+                      ? 'text-white/80'
+                      : 'text-gray-500'
+                  }`}
+                >
+                  <svg className="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+                  </svg>
+                  {example.category}
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="lg:col-span-2">
+        {selectedExample ? (
+          <div className="card border-2 border-gray-300 shadow-lg">
+            <div className="flex flex-col md:flex-row md:items-center justify-between mb-6 gap-4">
+              <div className="flex-1">
+                <div className="flex items-center mb-2">
+                  <svg className="w-6 h-6 text-primary mr-2" 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>
+                  <h2 className="text-3xl font-bold text-gray-900">{selectedExample.name}</h2>
+                </div>
+                <div className="flex items-center gap-3 text-sm">
+                  <span className="flex items-center text-gray-600">
+                    <svg className="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                    </svg>
+                    {selectedExample.path}
+                  </span>
+                  <span className="text-gray-400">•</span>
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-primary/10 text-primary border border-primary/20">
+                    {selectedExample.category}
+                  </span>
+                  <span className="text-gray-400">•</span>
+                  <span className="text-gray-600">{selectedExample.content.split('\n').length} lines</span>
+                </div>
+              </div>
+              <button
+                onClick={() => copyToClipboard(selectedExample.content)}
+                className="bg-gradient-to-r from-primary to-primary-dark text-white px-6 py-3 rounded-lg font-medium hover:shadow-lg transition-all flex items-center gap-2"
+                aria-label="Copy example code to clipboard"
+                title="Copy code"
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+                Copy Code
+              </button>
+            </div>
+
+            <div className="border-2 border-gray-300 rounded-xl overflow-hidden shadow-md">
+              <SyntaxHighlighter
+                language={getLanguage(selectedExample.name)}
+                style={vscDarkPlus}
+                customStyle={{
+                  margin: 0,
+                  borderRadius: 0,
+                  fontSize: '15px',
+                  padding: '1.5rem',
+                }}
+                showLineNumbers
+                wrapLines
+              >
+                {selectedExample.content}
+              </SyntaxHighlighter>
+            </div>
+
+            {/* Quick Actions */}
+            <div className="mt-6 bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl p-5 border border-blue-200">
+              <h3 className="font-bold text-blue-900 mb-3 flex items-center">
+                <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                </svg>
+                Quick Actions
+              </h3>
+              <div className="grid md:grid-cols-2 gap-3">
+                <a href={`/playground?source=examples&example=${encodeURIComponent(selectedExample.name)}`} className="bg-white border-2 border-blue-200 rounded-lg p-3 hover:border-blue-400 hover:shadow-md transition-all">
+                  <div className="font-semibold text-blue-900">✏️ Try in Playground</div>
+                  <div className="text-xs text-gray-600 mt-1">Test and modify this example</div>
+                </a>
+                <a href="/schema#components" className="bg-white border-2 border-blue-200 rounded-lg p-3 hover:border-blue-400 hover:shadow-md transition-all">
+                  <div className="font-semibold text-blue-900">📖 View Schema Reference</div>
+                  <div className="text-xs text-gray-600 mt-1">Learn about all fields</div>
+                </a>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="card border-2 border-dashed border-gray-300 text-center py-20">
+            <div className="text-6xl mb-4">👈</div>
+            <p className="text-gray-600 text-lg font-semibold mb-2">Select an example to view</p>
+            <p className="text-gray-500">Choose from {examples.length} examples on the left</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/website/components/layout/Footer.tsx

@@ -0,0 +1,111 @@
+import Link from 'next/link';
+
+export function Footer() {
+  return (
+    <footer className="bg-gray-900 text-gray-300 py-12 px-4">
+      <div className="container mx-auto max-w-6xl">
+        <div className="grid md:grid-cols-4 gap-8 mb-8">
+          <div>
+            <h3 className="text-white font-semibold mb-4">Open Standard Agents</h3>
+            <p className="text-sm">
+              Industry Standard for Agent Orchestration. The vendor-neutral specification for multi-agent systems.
+            </p>
+          </div>
+          <div>
+            <h4 className="text-white font-semibold mb-4">Documentation</h4>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <Link href="/docs/getting-started" className="hover:text-white transition-colors">
+                  Getting Started
+                </Link>
+              </li>
+              <li>
+                <Link href="/docs" className="hover:text-white transition-colors">
+                  Full Documentation
+                </Link>
+              </li>
+              <li>
+                <Link href="/schema" className="hover:text-white transition-colors">
+                  Schema Reference
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-white font-semibold mb-4">Resources</h4>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <Link href="/examples" className="hover:text-white transition-colors">
+                  Examples
+                </Link>
+              </li>
+              <li>
+                <Link href="/playground" className="hover:text-white transition-colors">
+                  Playground
+                </Link>
+              </li>
+              <li>
+                <Link href="/blog" className="hover:text-white transition-colors">
+                  Blog
+                </Link>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="text-white font-semibold mb-4">Community</h4>
+            <ul className="space-y-2 text-sm">
+              <li>
+                <a
+                  href="https://github.com/blueflyio/openstandardagents"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-white transition-colors flex items-center gap-2"
+                >
+                  <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+                  </svg>
+                  GitHub
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://github.com/blueflyio/openstandardagents/issues"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-white transition-colors"
+                >
+                  Issues
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://www.npmjs.com/package/@bluefly/openstandardagents"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="hover:text-white transition-colors"
+                >
+                  npm Package
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div className="border-t border-gray-700 pt-8 text-sm text-center">
+          <p>
+            © {new Date().getFullYear()} Open Standard Agents Organization. Licensed under{' '}
+            <a
+              href="https://www.apache.org/licenses/LICENSE-2.0"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-white transition-colors"
+            >
+              Apache 2.0
+            </a>
+            .
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+