@bluefly/openstandardagents 0.2.4

package/website/app/sitemap.ts

@@ -0,0 +1,56 @@
+import { MetadataRoute } from 'next';
+import fs from 'fs';
+import path from 'path';
+
+export const dynamic = 'force-static';
+
+function getAllPages(): string[] {
+  const pages: string[] = ['', '/docs', '/playground', '/examples', '/schema', '/blog'];
+
+  // Add blog posts
+  const blogDir = path.join(process.cwd(), '../content/blog');
+  if (fs.existsSync(blogDir)) {
+    const files = fs.readdirSync(blogDir);
+    files
+      .filter((file) => file.endsWith('.md'))
+      .forEach((file) => {
+        pages.push(`/blog/${file.replace(/\.md$/, '')}`);
+      });
+  }
+
+  // Add docs pages
+  const docsDir = path.join(process.cwd(), '../../.gitlab/wiki-content');
+  if (fs.existsSync(docsDir)) {
+    const traverseDir = (dir: string, basePath = ''): void => {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      for (const entry of entries) {
+        if (entry.isDirectory()) {
+          traverseDir(path.join(dir, entry.name), `${basePath}/${entry.name}`);
+        } else if (entry.isFile() && entry.name.endsWith('.md')) {
+          const slug = entry.name.replace(/\.md$/, '');
+          if (slug !== 'index') {
+            pages.push(`/docs${basePath}/${slug}`);
+          } else if (basePath) {
+            pages.push(`/docs${basePath}`);
+          }
+        }
+      }
+    }
+    traverseDir(docsDir);
+  }
+
+  return pages;
+}
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  const baseUrl = 'https://openstandardagents.org';
+  const pages = getAllPages();
+
+  return pages.map((page) => ({
+    url: `${baseUrl}${page === '' ? '' : page}`,
+    lastModified: new Date(),
+    changeFrequency: page.startsWith('/blog') ? 'weekly' : 'monthly',
+    priority: page === '' ? 1.0 : page.startsWith('/docs') ? 0.9 : 0.8,
+  }));
+}
+

package/website/app/specification/page.tsx

@@ -0,0 +1,211 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Specification - Open Standard Agents',
+  description: 'The complete Open Standard Agents specification documentation.',
+};
+
+export default function SpecificationPage() {
+  return (
+    <div className="container mx-auto max-w-7xl px-4 py-12">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-5xl font-bold mb-4">Open Standard Agents Specification</h1>
+        <p className="text-xl text-gray-600 mb-12">
+          The complete technical specification for defining, validating, and deploying AI agents.
+        </p>
+
+        <section className="mb-12">
+          <h2 className="text-3xl font-semibold mb-6 text-primary">Current Version</h2>
+          <div className="card p-6 mb-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="text-2xl font-semibold mb-2">v0.2.3</h3>
+                <p className="text-gray-700">Latest stable release</p>
+              </div>
+              <Link href="/schema" className="btn-primary">
+                View Schema
+              </Link>
+            </div>
+            <div className="grid md:grid-cols-2 gap-4 mt-4">
+              <div>
+                <h4 className="font-semibold mb-2">Release Date</h4>
+                <p className="text-gray-700">November 2024</p>
+              </div>
+              <div>
+                <h4 className="font-semibold mb-2">Status</h4>
+                <span className="inline-block px-3 py-1 bg-success/20 text-success rounded-full text-sm font-medium">
+                  Stable
+                </span>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section className="mb-12">
+          <h2 className="text-3xl font-semibold mb-6 text-primary">Specification Structure</h2>
+          <div className="space-y-4">
+            <div className="card p-6">
+              <h3 className="text-xl font-semibold mb-3 text-primary">1. Core Specification</h3>
+              <p className="text-gray-700 mb-4">
+                The fundamental structure of an OSA agent manifest, including metadata, specification,
+                and extensions.
+              </p>
+              <Link href="/docs/getting-started/first-agent" className="text-primary hover:underline">
+                Read Core Specification →
+              </Link>
+            </div>
+
+            <div className="card p-6">
+              <h3 className="text-xl font-semibold mb-3 text-primary">2. Schema Reference</h3>
+              <p className="text-gray-700 mb-4">
+                Complete JSON Schema definition with all properties, types, constraints, and validation rules.
+              </p>
+              <Link href="/schema" className="text-primary hover:underline">
+                Explore Schema →
+              </Link>
+            </div>
+
+            <div className="card p-6">
+              <h3 className="text-xl font-semibold mb-3 text-primary">3. Platform Extensions</h3>
+              <p className="text-gray-700 mb-4">
+                Framework-specific extensions for Cursor, OpenAI, CrewAI, LangChain, Anthropic,
+                Langflow, AutoGen, and more.
+              </p>
+              <Link href="/docs/examples/migration-guides" className="text-primary hover:underline">
+                View Extensions →
+              </Link>
+            </div>
+
+            <div className="card p-6">
+              <h3 className="text-xl font-semibold mb-3 text-primary">4. Validation Rules</h3>
+              <p className="text-gray-700 mb-4">
+                Comprehensive validation rules, error messages, and best practices for creating valid agent manifests.
+              </p>
+              <Link href="/playground" className="text-primary hover:underline">
+                Try Validation →
+              </Link>
+            </div>
+          </div>
+        </section>
+
+        <section className="mb-12">
+          <h2 className="text-3xl font-semibold mb-6 text-primary">Key Concepts</h2>
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-xl font-semibold mb-2 text-primary">Agent Manifest</h3>
+              <p className="text-gray-700 mb-2">
+                A YAML or JSON file that describes an AI agent, including its role, LLM configuration,
+                tools, and deployment requirements.
+              </p>
+              <div className="bg-code-bg rounded-lg p-4 mt-3">
+                <pre className="text-code-text text-sm overflow-x-auto">
+                  <code>{`apiVersion: ossa/v0.2.3
+kind: Agent
+metadata:
+  name: my-agent
+spec:
+  role: You are a helpful assistant
+  llm:
+    provider: openai
+    model: gpt-4`}</code>
+                </pre>
+              </div>
+            </div>
+
+            <div>
+              <h3 className="text-xl font-semibold mb-2 text-primary">Schema Validation</h3>
+              <p className="text-gray-700">
+                Every agent manifest must conform to the OSA JSON Schema. Validation ensures correctness,
+                completeness, and compatibility before deployment.
+              </p>
+            </div>
+
+            <div>
+              <h3 className="text-xl font-semibold mb-2 text-primary">Platform Extensions</h3>
+              <p className="text-gray-700">
+                Framework-specific extensions allow agents to leverage platform-specific features while
+                maintaining core OSA compatibility.
+              </p>
+            </div>
+
+            <div>
+              <h3 className="text-xl font-semibold mb-2 text-primary">Export/Import</h3>
+              <p className="text-gray-700">
+                Convert OSA manifests to framework-specific formats (export) or import existing agents
+                into OSA format for standardization.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section className="mb-12">
+          <h2 className="text-3xl font-semibold mb-6 text-primary">Version History</h2>
+          <div className="space-y-4">
+            <div className="card p-6">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-xl font-semibold">v0.2.3</h3>
+                <span className="px-3 py-1 bg-success/20 text-success rounded-full text-sm font-medium">
+                  Current
+                </span>
+              </div>
+              <p className="text-gray-700 mb-2">November 2024</p>
+              <p className="text-gray-700">
+                Enhanced platform extensions, improved validation, and expanded tool support.
+              </p>
+            </div>
+
+            <div className="card p-6 bg-gray-50">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-xl font-semibold">v0.2.2</h3>
+                <span className="px-3 py-1 bg-gray-500/20 text-gray-700 rounded-full text-sm font-medium">
+                  Previous
+                </span>
+              </div>
+              <p className="text-gray-700 mb-2">October 2024</p>
+              <p className="text-gray-700">
+                Initial platform extensions and improved schema structure.
+              </p>
+            </div>
+
+            <div className="card p-6 bg-gray-50">
+              <div className="flex items-center justify-between mb-2">
+                <h3 className="text-xl font-semibold">v0.1.9</h3>
+                <span className="px-3 py-1 bg-gray-500/20 text-gray-700 rounded-full text-sm font-medium">
+                  Legacy
+                </span>
+              </div>
+              <p className="text-gray-700 mb-2">September 2024</p>
+              <p className="text-gray-700">
+                Initial release with basic agent definition structure.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        <section className="mb-12">
+          <h2 className="text-3xl font-semibold mb-6 text-primary">Resources</h2>
+          <div className="grid md:grid-cols-2 gap-4">
+            <Link href="/schema" className="card-hover p-6">
+              <h3 className="text-xl font-semibold mb-2 text-primary">Interactive Schema Explorer</h3>
+              <p className="text-gray-700">Explore the complete JSON Schema interactively.</p>
+            </Link>
+            <Link href="/playground" className="card-hover p-6">
+              <h3 className="text-xl font-semibold mb-2 text-primary">Validation Playground</h3>
+              <p className="text-gray-700">Test and validate your agent manifests in real-time.</p>
+            </Link>
+            <Link href="/examples" className="card-hover p-6">
+              <h3 className="text-xl font-semibold mb-2 text-primary">Examples Gallery</h3>
+              <p className="text-gray-700">Browse real-world examples and use cases.</p>
+            </Link>
+            <Link href="/docs" className="card-hover p-6">
+              <h3 className="text-xl font-semibold mb-2 text-primary">Full Documentation</h3>
+              <p className="text-gray-700">Comprehensive guides and tutorials.</p>
+            </Link>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+}
+

package/website/components/InstallCommand.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import { useState } from 'react';
+
+export function InstallCommand() {
+  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
+
+  const steps = [
+    {
+      title: '1. Install',
+      command: 'npm install -g @bluefly/openstandardagents',
+    },
+    {
+      title: '2. Create',
+      command: 'osa init my-agent',
+    },
+    {
+      title: '3. Validate',
+      command: 'osa validate my-agent.ossa.yaml',
+    },
+    {
+      title: '4. Export',
+      command: 'osa export --to langchain',
+    },
+  ];
+
+  const copyToClipboard = async (command: string, index: number) => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopiedIndex(index);
+      setTimeout(() => setCopiedIndex(null), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <div className="bg-gradient-to-r from-primary to-secondary text-white rounded-lg p-8 shadow-xl">
+      <div className="container mx-auto max-w-6xl">
+        <h3 className="text-2xl font-bold mb-2">Get Started in Minutes</h3>
+        <p className="text-lg mb-6 opacity-90">
+          Install the CLI, create your first agent, and start building with OSSA
+        </p>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+          {steps.map((step, index) => (
+            <div key={index} className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
+              <h4 className="font-semibold mb-2 text-sm">{step.title}</h4>
+              <div className="bg-black/30 rounded p-2 flex items-start justify-between gap-2">
+                <code className="text-xs font-mono text-white flex-1 break-all">
+                  {step.command}
+                </code>
+                <button
+                  onClick={() => copyToClipboard(step.command, index)}
+                  className="flex-shrink-0 p-1 hover:bg-white/20 rounded transition-colors"
+                  aria-label="Copy command"
+                >
+                  {copiedIndex === index ? (
+                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                    </svg>
+                  ) : (
+                    <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <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>
+                  )}
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex flex-wrap gap-4 text-sm">
+          <a href="/docs/getting-started/5-minute-overview" className="text-white hover:underline flex items-center gap-2">
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            Quick Start Guide
+          </a>
+          <a href="/examples" className="text-white hover:underline flex items-center gap-2">
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+            </svg>
+            View Examples
+          </a>
+          <a href="/docs" className="text-white hover:underline flex items-center gap-2">
+            <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+            </svg>
+            Full Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}

package/website/components/Logo.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+interface LogoProps {
+  domain: string;
+  name: string;
+}
+
+export function Logo({ domain, name }: LogoProps) {
+  const handleError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    e.currentTarget.src = `https://www.google.com/s2/favicons?sz=256&domain=${domain}`;
+  };
+
+  return (
+    <div className="flex flex-col items-center gap-3 p-4 hover:bg-white rounded-lg transition-all">
+      <img
+        src={`https://logo.clearbit.com/${domain}`}
+        alt={name}
+        className="h-12 w-12 object-contain"
+        onError={handleError}
+      />
+      <span className="text-sm font-medium text-gray-600">{name}</span>
+    </div>
+  );
+}

package/website/components/StructuredData.tsx

@@ -0,0 +1,65 @@
+interface StructuredDataProps {
+  type: 'Organization' | 'WebSite' | 'Article';
+  data: Record<string, any>;
+}
+
+export function StructuredData({ type, data }: StructuredDataProps) {
+  const baseUrl = 'https://openstandardagents.org';
+
+  const getStructuredData = (): object => {
+    switch (type) {
+      case 'Organization':
+        return {
+          '@context': 'https://schema.org',
+          '@type': 'Organization',
+          name: 'OSSA Standards Team',
+          url: baseUrl,
+          logo: `${baseUrl}/assets/brand/ossa-logo.svg`,
+          sameAs: [
+            'https://github.com/blueflyio/openstandardagents',
+            'https://www.npmjs.com/package/@bluefly/openstandardagents',
+          ],
+          ...data,
+        };
+      case 'WebSite':
+        return {
+          '@context': 'https://schema.org',
+          '@type': 'WebSite',
+          name: 'OSSA',
+          url: baseUrl,
+          description: 'Open Standard for Scalable AI Agents - The OpenAPI for AI Agents',
+          ...data,
+        };
+      case 'Article':
+        return {
+          '@context': 'https://schema.org',
+          '@type': 'Article',
+          headline: data.title,
+          datePublished: data.date,
+          author: {
+            '@type': 'Person',
+            name: data.author || 'OSSA Team',
+          },
+          publisher: {
+            '@type': 'Organization',
+            name: 'OSSA Standards Team',
+            logo: {
+              '@type': 'ImageObject',
+              url: `${baseUrl}/logo.png`,
+            },
+          },
+          ...data,
+        };
+      default:
+        return {};
+    }
+  };
+
+  return (
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(getStructuredData()) }}
+    />
+  );
+}
+

package/website/components/docs/DocsSearch.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+
+interface SearchResult {
+  title: string;
+  href: string;
+  category: string;
+}
+
+const allDocs: SearchResult[] = [
+  { title: '5-Minute Overview', href: '/docs/getting-started/5-minute-overview', category: 'Getting Started' },
+  { title: 'Installation', href: '/docs/getting-started/installation', category: 'Getting Started' },
+  { title: 'Hello World', href: '/docs/getting-started/hello-world', category: 'Getting Started' },
+  { title: 'First Agent', href: '/docs/getting-started/first-agent', category: 'Getting Started' },
+  { title: 'For Developers', href: '/docs/for-audiences/developers', category: 'For Audiences' },
+  { title: 'For Architects', href: '/docs/for-audiences/architects', category: 'For Audiences' },
+  { title: 'For Enterprises', href: '/docs/for-audiences/enterprises', category: 'For Audiences' },
+  { title: 'For Students & Researchers', href: '/docs/for-audiences/students-researchers', category: 'For Audiences' },
+  { title: 'Migration Guides', href: '/docs/examples/migration-guides', category: 'Examples' },
+];
+
+export function DocsSearch() {
+  const [query, setQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const results = useMemo(() => {
+    if (!query.trim()) {
+      return [];
+    }
+
+    const lowerQuery = query.toLowerCase();
+    return allDocs.filter(
+      (doc) =>
+        doc.title.toLowerCase().includes(lowerQuery) ||
+        doc.category.toLowerCase().includes(lowerQuery)
+    );
+  }, [query]);
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <input
+          type="search"
+          placeholder="Search documentation..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => setTimeout(() => setIsOpen(false), 200)}
+          className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
+          aria-label="Search documentation"
+          aria-describedby="search-description"
+          role="searchbox"
+        />
+        <svg
+          className="absolute right-3 top-1/2 transform -translate-y-1/2 w-5 h-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>
+
+      {isOpen && results.length > 0 && (
+        <div
+          className="absolute z-50 w-full mt-2 bg-white border border-gray-300 rounded-lg shadow-lg max-h-96 overflow-y-auto"
+          role="listbox"
+          aria-label="Search results"
+        >
+          {results.map((result) => (
+            <Link
+              key={result.href}
+              href={result.href}
+              className="block px-4 py-3 hover:bg-gray-100 transition-colors focus:outline-none focus:ring-2 focus:ring-primary"
+              onClick={() => {
+                setQuery('');
+                setIsOpen(false);
+              }}
+              role="option"
+              aria-label={`${result.title} in ${result.category}`}
+            >
+              <div className="font-semibold text-gray-900">{result.title}</div>
+              <div className="text-sm text-gray-500">{result.category}</div>
+            </Link>
+          ))}
+        </div>
+      )}
+
+      {isOpen && query.trim() && results.length === 0 && (
+        <div className="absolute z-50 w-full mt-2 bg-white border border-gray-300 rounded-lg shadow-lg p-4">
+          <p className="text-gray-500">No results found</p>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/website/components/docs/DocsSidebar.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState } from 'react';
+import { DocsSearch } from './DocsSearch';
+import { VersionSelector } from './VersionSelector';
+
+const navigation = [
+  {
+    title: 'Getting Started',
+    items: [
+      { href: '/docs/getting-started/5-minute-overview', label: '5-Minute Overview' },
+      { href: '/docs/getting-started/installation', label: 'Installation' },
+      { href: '/docs/getting-started/hello-world', label: 'Hello World' },
+      { href: '/docs/getting-started/first-agent', label: 'First Agent' },
+    ],
+  },
+  {
+    title: 'For Audiences',
+    items: [
+      { href: '/docs/for-audiences/developers', label: 'Developers' },
+      { href: '/docs/for-audiences/architects', label: 'Architects' },
+      { href: '/docs/for-audiences/enterprises', label: 'Enterprises' },
+      { href: '/docs/for-audiences/students-researchers', label: 'Students & Researchers' },
+    ],
+  },
+  {
+    title: 'Migration Guides',
+    items: [
+      { href: '/docs/migration-guides/anthropic-mcp-to-ossa', label: 'Anthropic MCP to OSSA' },
+      { href: '/docs/migration-guides/openai-to-ossa', label: 'OpenAI to OSSA' },
+      { href: '/docs/migration-guides/langchain-to-ossa', label: 'LangChain to OSSA' },
+      { href: '/docs/migration-guides/crewai-to-ossa', label: 'CrewAI to OSSA' },
+      { href: '/docs/migration-guides/langflow-to-ossa', label: 'Langflow to OSSA' },
+      { href: '/docs/migration-guides/drupal-eca-to-ossa', label: 'Drupal ECA to OSSA' },
+    ],
+  },
+  {
+    title: 'Reference',
+    items: [
+      { href: '/docs/openapi-extensions', label: 'OpenAPI Extensions' },
+      { href: '/docs/quick-reference', label: 'Quick Reference' },
+      { href: '/docs/changelog', label: 'Changelog' },
+    ],
+  },
+  {
+    title: 'Contributing',
+    items: [
+      { href: '/docs/contributing', label: 'Contributing Guide' },
+      { href: '/docs/aiflow-framework-integration-with-ossa', label: 'AIFlow Framework Integration' },
+    ],
+  },
+];
+
+export function DocsSidebar() {
+  const pathname = usePathname();
+  const [openSections, setOpenSections] = useState<string[]>(['Getting Started']);
+
+  const toggleSection = (title: string): void => {
+    setOpenSections((prev) =>
+      prev.includes(title)
+        ? prev.filter((t) => t !== title)
+        : [...prev, title]
+    );
+  };
+
+  return (
+    <aside className="w-64 bg-gray-100 border-r border-gray-300 p-4 overflow-y-auto h-screen sticky top-0">
+      <nav>
+        <Link href="/docs" className="block mb-6 font-semibold text-primary hover:text-primary-dark">
+          Documentation
+        </Link>
+        <div className="mb-6">
+          <DocsSearch />
+        </div>
+        <div className="mb-6">
+          <VersionSelector />
+        </div>
+        {navigation.map((section) => (
+          <div key={section.title} className="mb-4">
+            <button
+              onClick={() => toggleSection(section.title)}
+              className="w-full text-left font-semibold text-gray-900 mb-2 flex items-center justify-between"
+            >
+              <span>{section.title}</span>
+              <span className="text-gray-500">
+                {openSections.includes(section.title) ? '−' : '+'}
+              </span>
+            </button>
+            {openSections.includes(section.title) && (
+              <ul className="space-y-1 ml-2">
+                {section.items.map((item) => {
+                  const isActive = pathname === item.href;
+                  return (
+                    <li key={item.href}>
+                      <Link
+                        href={item.href}
+                        className={`block px-2 py-1 rounded text-sm transition-colors ${
+                          isActive
+                            ? 'bg-primary text-white'
+                            : 'text-gray-700 hover:bg-gray-200'
+                        }`}
+                      >
+                        {item.label}
+                      </Link>
+                    </li>
+                  );
+                })}
+              </ul>
+            )}
+          </div>
+        ))}
+      </nav>
+    </aside>
+  );
+}
+