@bluefly/openstandardagents 0.2.4 → 0.2.5-RC

package/website/components/layout/Header.tsx

@@ -16,45 +16,44 @@ export function Header() {
               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-[#0066CC] to-[#00B8D4] bg-clip-text text-transparent">
+            <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-6">
-            <Link href="/about" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+          <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-[#0066CC] transition-colors font-medium">
+            <Link href="/specification" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
               Specification
             </Link>
-            <Link href="/docs" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
-              Documentation
-            </Link>
-            <Link href="/schema" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+            <Link href="/schema" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
               Schema
             </Link>
-            <Link href="/playground" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
+            <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-[#0066CC] transition-colors font-medium">
+            <Link href="/examples" className="text-gray-600 hover:text-primary transition-colors font-medium whitespace-nowrap">
               Examples
             </Link>
-            <Link href="/blog" className="text-gray-600 hover:text-[#0066CC] transition-colors font-medium">
-              Blog
-            </Link>
             <a
               href="https://github.com/blueflyio/openstandardagents"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-gray-600 hover:text-[#0066CC] transition-colors flex items-center gap-1 font-medium"
+              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>
-              GitHub
             </a>
           </div>
 
@@ -101,65 +100,64 @@ export function Header() {
           >
             <Link
               href="/about"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              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-[#0066CC] transition-colors font-medium"
+              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-[#0066CC] transition-colors font-medium"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
               onClick={() => setMobileMenuOpen(false)}
             >
-              Documentation
+              Docs
             </Link>
             <Link
-              href="/schema"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              href="/blog"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
               onClick={() => setMobileMenuOpen(false)}
             >
-              Schema
+              Blog
             </Link>
             <Link
               href="/playground"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
+              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-[#0066CC] transition-colors font-medium"
+              className="block py-2 text-gray-600 hover:text-primary transition-colors font-medium"
               onClick={() => setMobileMenuOpen(false)}
             >
               Examples
             </Link>
-            <Link
-              href="/blog"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors font-medium"
-              onClick={() => setMobileMenuOpen(false)}
-            >
-              Blog
-            </Link>
             <a
               href="https://github.com/blueflyio/openstandardagents"
               target="_blank"
               rel="noopener noreferrer"
-              className="block py-2 text-gray-600 hover:text-[#0066CC] transition-colors flex items-center gap-2 font-medium"
+              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>
-              GitHub
             </a>
           </div>
         )}

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

@@ -141,16 +141,16 @@ export function SchemaExplorer({ schema }: SchemaExplorerProps) {
     : schema;
 
   return (
-    <div className="grid lg:grid-cols-2 gap-6">
-      {/* Property Tree */}
+    <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-[600px] overflow-y-auto">
+        <div className="space-y-1 max-h-[400px] overflow-y-auto">
           {rootProperties.map((prop) => renderProperty(prop))}
         </div>
       </div>
 
-      {/* Property Details */}
+      {/* Property Details - Row 2 */}
       <div className="card">
         <h2 className="text-xl font-semibold mb-4">
           {selectedPath || 'Schema Overview'}