@bluefly/openstandardagents 0.1.9 → 0.2.5-RC

package/website/components/layout/Header.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+
+export function Header() {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <header className="bg-white border-b border-gray-300 sticky top-0 z-50">
+      <nav className="container mx-auto max-w-6xl px-4">
+        <div className="flex items-center justify-between h-16">
+          <Link href="/" className="flex items-center space-x-3 group">
+            <img
+              src="/assets/brand/ossa-logo.svg"
+              alt="OSSA Logo"
+              className="h-10 w-10 transition-transform group-hover:scale-110"
+            />
+            <span className="text-2xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
+              OSSA
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden md:flex items-center space-x-3 lg:space-x-6 text-sm lg:text-base">
+            <Link href="/about" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+              About
+            </Link>
+            <Link href="/specification" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+              Specification
+            </Link>
+            <Link href="/schema" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+              Schema
+            </Link>
+            <Link href="/docs" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+              Docs
+            </Link>
+            <Link href="/blog" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+              Blog
+            </Link>
+            <Link href="/playground" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+              Playground
+            </Link>
+            <Link href="/examples" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
+              Examples
+            </Link>
+            <a
+              href="https://github.com/blueflyio/openstandardagents"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-gray-600 hover:text-primary transition-colors flex items-center font-medium"
+              title="View on GitHub"
+            >
+              <svg className="w-5 h-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>
+            </a>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="md:hidden p-2 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 rounded"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+            aria-label="Toggle menu"
+            aria-expanded={mobileMenuOpen}
+            aria-controls="mobile-menu"
+          >
+            <svg
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              {mobileMenuOpen ? (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              ) : (
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M4 6h16M4 12h16M4 18h16"
+                />
+              )}
+            </svg>
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {mobileMenuOpen && (
+          <div
+            id="mobile-menu"
+            className="md:hidden py-4 border-t border-gray-300"
+            role="navigation"
+            aria-label="Mobile navigation"
+          >
+            <Link
+              href="/about"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              About
+            </Link>
+            <Link
+              href="/specification"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Specification
+            </Link>
+            <Link
+              href="/schema"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Schema
+            </Link>
+            <Link
+              href="/docs"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Docs
+            </Link>
+            <Link
+              href="/blog"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Blog
+            </Link>
+            <Link
+              href="/playground"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Playground
+            </Link>
+            <Link
+              href="/examples"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              Examples
+            </Link>
+            <a
+              href="https://github.com/blueflyio/openstandardagents"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 py-2 text-gray-600 hover:text-primary transition-colors font-medium"
+              onClick={() => setMobileMenuOpen(false)}
+              title="View on GitHub"
+            >
+              <svg className="w-5 h-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>
+            </a>
+          </div>
+        )}
+      </nav>
+    </header>
+  );
+}
+

package/website/components/schema/SchemaComponentsAccordion.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+
+interface AccordionItemProps {
+  title: string;
+  children: React.ReactNode;
+  isOpen: boolean;
+  onToggle: () => void;
+  borderColor: string;
+  bgColor: string;
+}
+
+function AccordionItem({ title, children, isOpen, onToggle, borderColor, bgColor }: AccordionItemProps) {
+  return (
+    <div className={`bg-white rounded-lg border-l-4 ${borderColor} shadow-md transition-all`}>
+      <button
+        onClick={onToggle}
+        className="w-full flex items-center justify-between p-6 text-left hover:bg-gray-50 transition-colors"
+        aria-expanded={isOpen}
+      >
+        <h3 className="text-xl font-bold text-gray-900">{title}</h3>
+        <svg
+          className={`w-5 h-5 text-gray-600 transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {isOpen && (
+        <div className="px-6 pb-6 border-t border-gray-200">
+          <div className="pt-4">
+            {children}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface SchemaComponentsAccordionProps {
+  items: Array<{
+    id: string;
+    title: string;
+    content: React.ReactNode;
+    borderColor: string;
+  }>;
+}
+
+export function SchemaComponentsAccordion({ items }: SchemaComponentsAccordionProps) {
+  const [openItems, setOpenItems] = useState<Set<string>>(new Set([items[0]?.id]));
+
+  const toggleItem = (id: string) => {
+    setOpenItems(prev => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  return (
+    <div className="space-y-4">
+      {items.map((item) => (
+        <AccordionItem
+          key={item.id}
+          title={item.title}
+          isOpen={openItems.has(item.id)}
+          onToggle={() => toggleItem(item.id)}
+          borderColor={item.borderColor}
+          bgColor="bg-white"
+        >
+          {item.content}
+        </AccordionItem>
+      ))}
+    </div>
+  );
+}
+

package/website/components/schema/SchemaExplorer.tsx

@@ -0,0 +1,213 @@
+'use client';
+
+import { useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+interface SchemaExplorerProps {
+  schema: any;
+}
+
+interface PropertyInfo {
+  name: string;
+  type: string;
+  description?: string;
+  required?: boolean;
+  properties?: PropertyInfo[];
+}
+
+function extractProperties(schema: any, path = ''): PropertyInfo[] {
+  if (!schema || typeof schema !== 'object') {
+    return [];
+  }
+
+  const properties: PropertyInfo[] = [];
+
+  if (schema.properties) {
+    for (const [key, value] of Object.entries(schema.properties)) {
+      const prop = value as any;
+      const propInfo: PropertyInfo = {
+        name: key,
+        type: prop.type || 'object',
+        description: prop.description,
+        required: schema.required?.includes(key),
+      };
+
+      if (prop.properties || prop.items) {
+        propInfo.properties = extractProperties(
+          prop.properties || prop.items,
+          `${path}.${key}`
+        );
+      }
+
+      properties.push(propInfo);
+    }
+  }
+
+  return properties;
+}
+
+export function SchemaExplorer({ schema }: SchemaExplorerProps) {
+  const [selectedPath, setSelectedPath] = useState<string>('');
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(
+    new Set([''])
+  );
+
+  const rootProperties = extractProperties(schema);
+
+  const togglePath = (path: string): void => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+
+  const renderProperty = (
+    prop: PropertyInfo,
+    depth = 0,
+    currentPath = ''
+  ) => {
+    const fullPath = currentPath ? `${currentPath}.${prop.name}` : prop.name;
+    const isExpanded = expandedPaths.has(fullPath);
+    const hasChildren = prop.properties && prop.properties.length > 0;
+
+    return (
+      <div key={prop.name} className="ml-4">
+        <div
+          className={`flex items-start py-2 ${
+            selectedPath === fullPath ? 'bg-primary/10' : ''
+          }`}
+        >
+          {hasChildren && (
+            <button
+              onClick={() => togglePath(fullPath)}
+              className="mr-2 text-gray-500 hover:text-gray-700"
+              aria-label={isExpanded ? 'Collapse' : 'Expand'}
+            >
+              {isExpanded ? '−' : '+'}
+            </button>
+          )}
+          <div
+            className="flex-1 cursor-pointer"
+            onClick={() => setSelectedPath(fullPath)}
+          >
+            <div className="flex items-center gap-2">
+              <span className="font-semibold text-gray-900">{prop.name}</span>
+              <span className="text-sm text-gray-500">({prop.type})</span>
+              {prop.required && (
+                <span className="text-xs bg-error/20 text-error px-2 py-0.5 rounded">
+                  required
+                </span>
+              )}
+            </div>
+            {prop.description && (
+              <p className="text-sm text-gray-600 mt-1">{prop.description}</p>
+            )}
+          </div>
+        </div>
+        {hasChildren && isExpanded && (
+          <div className="ml-6 border-l-2 border-gray-200">
+            {prop.properties?.map((child) =>
+              renderProperty(child, depth + 1, fullPath)
+            )}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  const getPropertyAtPath = (path: string): any => {
+    const parts = path.split('.').filter(Boolean);
+    let current: any = schema;
+
+    for (const part of parts) {
+      if (current?.properties?.[part]) {
+        current = current.properties[part];
+      } else {
+        return null;
+      }
+    }
+
+    return current;
+  };
+
+  const selectedProperty = selectedPath
+    ? getPropertyAtPath(selectedPath)
+    : schema;
+
+  return (
+    <div className="space-y-6">
+      {/* Property Tree - Row 1 */}
+      <div className="card">
+        <h2 className="text-xl font-semibold mb-4">Schema Structure</h2>
+        <div className="space-y-1 max-h-[400px] overflow-y-auto">
+          {rootProperties.map((prop) => renderProperty(prop))}
+        </div>
+      </div>
+
+      {/* Property Details - Row 2 */}
+      <div className="card">
+        <h2 className="text-xl font-semibold mb-4">
+          {selectedPath || 'Schema Overview'}
+        </h2>
+        {selectedProperty && (
+          <div className="space-y-4">
+            <div>
+              <h3 className="font-semibold mb-2">Type</h3>
+              <p className="text-gray-700">{selectedProperty.type || 'object'}</p>
+            </div>
+
+            {selectedProperty.description && (
+              <div>
+                <h3 className="font-semibold mb-2">Description</h3>
+                <p className="text-gray-700">{selectedProperty.description}</p>
+              </div>
+            )}
+
+            {selectedProperty.enum && (
+              <div>
+                <h3 className="font-semibold mb-2">Allowed Values</h3>
+                <ul className="list-disc list-inside text-gray-700">
+                  {selectedProperty.enum.map((value: any, index: number) => (
+                    <li key={index}>{String(value)}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+
+            {selectedProperty.default !== undefined && (
+              <div>
+                <h3 className="font-semibold mb-2">Default Value</h3>
+                <p className="text-gray-700">
+                  {JSON.stringify(selectedProperty.default)}
+                </p>
+              </div>
+            )}
+
+            <div>
+              <h3 className="font-semibold mb-2">JSON Schema</h3>
+              <div className="border border-gray-300 rounded-lg overflow-hidden">
+                <SyntaxHighlighter
+                  language="json"
+                  style={vscDarkPlus}
+                  customStyle={{
+                    margin: 0,
+                    fontSize: '12px',
+                  }}
+                >
+                  {JSON.stringify(selectedProperty, null, 2)}
+                </SyntaxHighlighter>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+