zero-doc 1.0.0

package/viewer/src/App.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import { APIInventory, RouteEndpoint } from './types';
+import { ThemeProvider } from './contexts/ThemeContext';
+import Sidebar from './components/Sidebar';
+import EndpointView from './components/EndpointView';
+
+function App() {
+  const [inventory, setInventory] = useState<APIInventory | null>(null);
+  const [selectedEndpoint, setSelectedEndpoint] = useState<RouteEndpoint | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('/api-inventory.json')
+      .then(res => res.json())
+      .then((data: APIInventory) => {
+        setInventory(data);
+        if (data.endpoints.length > 0) {
+          setSelectedEndpoint(data.endpoints[0]);
+        }
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error('Failed to load API inventory:', err);
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <ThemeProvider>
+        <div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
+          <div className="text-center">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 dark:border-blue-400 mx-auto mb-4"></div>
+            <p className="text-gray-600 dark:text-gray-400">Loading documentation...</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  if (!inventory) {
+    return (
+      <ThemeProvider>
+        <div className="flex items-center justify-center h-screen bg-gray-50 dark:bg-gray-900">
+          <div className="text-center">
+            <p className="text-red-600 dark:text-red-400 mb-2">Failed to load API inventory</p>
+            <p className="text-gray-600 dark:text-gray-400 text-sm">Make sure api-inventory.json exists in the public folder</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider>
+      <div className="flex h-screen bg-gray-50 dark:bg-gray-900">
+        <Sidebar 
+          endpoints={inventory.endpoints}
+          selectedId={selectedEndpoint?.id}
+          onSelect={setSelectedEndpoint}
+        />
+        <div className="flex-1 flex overflow-hidden">
+          <div className="flex-1 overflow-y-auto">
+            {selectedEndpoint ? (
+              <EndpointView endpoint={selectedEndpoint} />
+            ) : (
+              <div className="p-12 text-center text-gray-500 dark:text-gray-400">
+                Select an endpoint from the sidebar
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+

package/viewer/src/components/CodeSnippet.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { RouteEndpoint } from '../types';
+
+interface CodeSnippetProps {
+  endpoint: RouteEndpoint;
+}
+
+const CodeSnippet: React.FC<CodeSnippetProps> = ({ endpoint }) => {
+  const [showToast, setShowToast] = useState(false);
+
+  const pathParams = endpoint.parameters.filter(p => p.in === 'path');
+  const queryParams = endpoint.parameters.filter(p => p.in === 'query');
+  const bodyParams = endpoint.parameters.filter(p => p.in === 'body');
+
+  // Build URL with path params
+  let url = endpoint.path;
+  pathParams.forEach(param => {
+    url = url.replace(`:${param.name}`, `{${param.name}}`);
+  });
+
+  // Build query string
+  const queryString = queryParams.length > 0
+    ? '?' + queryParams.map(p => `${p.name}={${p.name}}`).join('&')
+    : '';
+
+  // Build cURL command
+  const baseUrl = `https://api.example.com${url}${queryString}`;
+  let curlCommand = `curl -X ${endpoint.method} \\\n  '${baseUrl}'`;
+
+  if (bodyParams.length > 0) {
+    const bodyJson = bodyParams.reduce((acc, param, index) => {
+      const comma = index < bodyParams.length - 1 ? ',' : '';
+      const value = param.inferredType === 'number' ? '0' : 
+                   param.inferredType === 'boolean' ? 'true' : 
+                   'value';
+      return acc + `    "${param.name}": "${value}"${comma}\n`;
+    }, '');
+    
+    curlCommand += ` \\\n  -H 'Content-Type: application/json' \\\n  -d '{\n${bodyJson}  }'`;
+  }
+
+  const copyToClipboard = async (curlCommand: string) => {
+    try {
+      await navigator.clipboard.writeText(curlCommand);
+      setShowToast(true);
+      setTimeout(() => setShowToast(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  return (
+    <>
+      <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden shadow-lg">
+        <div className="flex items-center justify-between px-4 py-3 border-b border-gray-700 bg-gray-800/50">
+          <div className="flex items-center gap-2">
+            <div className="flex gap-1.5">
+              <div className="w-3 h-3 rounded-full bg-red-500"></div>
+              <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
+              <div className="w-3 h-3 rounded-full bg-green-500"></div>
+            </div>
+            <span className="text-xs font-medium text-gray-400 uppercase tracking-wider">curl</span>
+          </div>
+          <button
+            onClick={() => copyToClipboard(curlCommand)}
+            className="px-3 py-1.5 text-xs text-gray-400 hover:text-white transition-colors rounded hover:bg-gray-700/50 border border-gray-700 hover:border-gray-600"
+            title="Copy to clipboard"
+          >
+            📋 Copy
+          </button>
+        </div>
+        <div className="p-5 overflow-x-auto bg-gray-950">
+          <pre className="text-sm text-gray-100 font-mono leading-relaxed whitespace-pre-wrap">
+            <code className="block">
+              <span className="text-green-400 select-none">$ </span>
+              <span className="text-blue-400">curl</span>
+              <span className="text-gray-300"> -X </span>
+              <span className="text-yellow-400 font-semibold">{endpoint.method}</span>
+              <span className="text-gray-300"> \</span>
+              <br />
+              <span className="text-gray-500 ml-4">  </span>
+              <span className="text-purple-300">'{baseUrl}'</span>
+              {bodyParams.length > 0 && (
+                <>
+                  <span className="text-gray-300"> \</span>
+                  <br />
+                  <span className="text-gray-500 ml-4">  </span>
+                  <span className="text-blue-400">-H</span>
+                  <span className="text-gray-300"> </span>
+                  <span className="text-purple-300">'Content-Type: application/json'</span>
+                  <span className="text-gray-300"> \</span>
+                  <br />
+                  <span className="text-gray-500 ml-4">  </span>
+                  <span className="text-blue-400">-d</span>
+                  <span className="text-gray-300"> </span>
+                  <span className="text-purple-300">'{'{'}</span>
+                  <br />
+                  {bodyParams.map((param, index) => {
+                    const value = param.inferredType === 'number' ? '0' : 
+                                 param.inferredType === 'boolean' ? 'true' : 
+                                 'value';
+                    const comma = index < bodyParams.length - 1 ? ',' : '';
+                    return (
+                      <React.Fragment key={param.name}>
+                        <span className="text-gray-500 ml-8">    </span>
+                        <span className="text-yellow-300">"{param.name}"</span>
+                        <span className="text-gray-300">: </span>
+                        <span className="text-green-300">"{value}"</span>
+                        <span className="text-gray-300">{comma}</span>
+                        <br />
+                      </React.Fragment>
+                    );
+                  })}
+                  <span className="text-gray-500 ml-8">  </span>
+                  <span className="text-purple-300">{'}'}'</span>
+                </>
+              )}
+            </code>
+          </pre>
+        </div>
+      </div>
+
+      {/* Toast Notification */}
+      {showToast && (
+        <div className="fixed bottom-4 right-4 bg-green-600 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-2 z-50 animate-fade-in">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+          </svg>
+          <span className="text-sm font-medium">Copied to clipboard!</span>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default CodeSnippet;

package/viewer/src/components/EndpointView.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { RouteEndpoint } from '../types';
+import ParameterTable from './ParameterTable';
+import CodeSnippet from './CodeSnippet';
+
+interface EndpointViewProps {
+  endpoint: RouteEndpoint;
+}
+
+const EndpointView: React.FC<EndpointViewProps> = ({ endpoint }) => {
+  const getMethodColor = (method: string) => {
+    const colors: Record<string, string> = {
+      GET: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-300 dark:border-green-700',
+      POST: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-300 dark:border-blue-700',
+      PUT: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-300 dark:border-yellow-700',
+      PATCH: 'bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-300 dark:border-orange-700',
+      DELETE: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-300 dark:border-red-700',
+    };
+    return colors[method] || 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300 border-gray-300 dark:border-gray-700';
+  };
+
+  const pathParams = endpoint.parameters.filter(p => p.in === 'path');
+  const queryParams = endpoint.parameters.filter(p => p.in === 'query');
+  const bodyParams = endpoint.parameters.filter(p => p.in === 'body');
+
+  return (
+    <div className="flex-1 overflow-y-auto bg-gray-50 dark:bg-gray-900">
+      <div className="max-w-7xl mx-auto px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-3 mb-4">
+            <span className={`px-3 py-1 rounded font-semibold text-sm border ${getMethodColor(endpoint.method)}`}>
+              {endpoint.method}
+            </span>
+            <code className="text-2xl font-mono text-gray-900 dark:text-white">{endpoint.path}</code>
+          </div>
+          
+          {endpoint.metadata?.title && (
+            <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-3">
+              {endpoint.metadata.title}
+            </h1>
+          )}
+          
+          {endpoint.metadata?.description && (
+            <p className="text-gray-600 dark:text-gray-300 text-lg leading-relaxed">
+              {endpoint.metadata.description}
+            </p>
+          )}
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Main Content */}
+          <div className="lg:col-span-2 space-y-8">
+            {/* Path Parameters */}
+            {pathParams.length > 0 && (
+              <section>
+                <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Path Parameters</h2>
+                <ParameterTable parameters={pathParams} />
+              </section>
+            )}
+
+            {/* Query Parameters */}
+            {queryParams.length > 0 && (
+              <section>
+                <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Query Parameters</h2>
+                <ParameterTable parameters={queryParams} />
+              </section>
+            )}
+
+            {/* Request Body */}
+            {bodyParams.length > 0 && (
+              <section>
+                <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Request Body</h2>
+                <ParameterTable parameters={bodyParams} />
+              </section>
+            )}
+
+            {/* Response */}
+            <section>
+              <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">Response</h2>
+              <div className="bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <p className="text-gray-600 dark:text-gray-300">
+                  {endpoint.method === 'GET' ? 'Returns the requested resource.' : 
+                   endpoint.method === 'POST' ? 'Returns the created resource.' :
+                   endpoint.method === 'PUT' ? 'Returns the updated resource.' :
+                   endpoint.method === 'DELETE' ? 'Returns 204 No Content on success.' :
+                   'Returns the result of the operation.'}
+                </p>
+              </div>
+            </section>
+          </div>
+
+          {/* Code Snippet Sidebar */}
+          <div className="lg:col-span-1">
+            <div className="sticky top-8">
+              <CodeSnippet endpoint={endpoint} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EndpointView;
+

package/viewer/src/components/ParameterTable.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { RouteParameter } from '../types';
+
+interface ParameterTableProps {
+  parameters: RouteParameter[];
+}
+
+const ParameterTable: React.FC<ParameterTableProps> = ({ parameters }) => {
+  const getTypeColor = (type?: string) => {
+    const colors: Record<string, string> = {
+      string: 'bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
+      number: 'bg-green-50 dark:bg-green-900/30 text-green-700 dark:text-green-300',
+      boolean: 'bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
+      object: 'bg-orange-50 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
+      array: 'bg-pink-50 dark:bg-pink-900/30 text-pink-700 dark:text-pink-300',
+    };
+    return colors[type || 'string'] || 'bg-gray-50 dark:bg-gray-800 text-gray-700 dark:text-gray-300';
+  };
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+      <table className="w-full">
+        <thead className="bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <tr>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+              Parameter
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+              Type
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+              Required
+            </th>
+            <th className="px-4 py-3 text-left text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
+              Description
+            </th>
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+          {parameters.map((param, index) => (
+            <tr key={index} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
+              <td className="px-4 py-3">
+                <code className="text-sm font-mono text-gray-900 dark:text-white">{param.name}</code>
+              </td>
+              <td className="px-4 py-3">
+                {param.inferredType && (
+                  <span className={`inline-block px-2 py-1 rounded text-xs font-medium ${getTypeColor(param.inferredType)}`}>
+                    {param.inferredType}
+                  </span>
+                )}
+              </td>
+              <td className="px-4 py-3">
+                {param.required ? (
+                  <span className="text-xs text-red-600 dark:text-red-400 font-medium">Required</span>
+                ) : (
+                  <span className="text-xs text-gray-400 dark:text-gray-500">Optional</span>
+                )}
+              </td>
+              <td className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
+                {param.description || 'No description available'}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ParameterTable;
+

package/viewer/src/components/Sidebar.tsx

@@ -0,0 +1,244 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { RouteEndpoint } from '../types';
+import { useTheme } from '../contexts/ThemeContext';
+
+interface SidebarProps {
+  endpoints: RouteEndpoint[];
+  selectedId?: string;
+  onSelect: (endpoint: RouteEndpoint) => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ endpoints, selectedId, onSelect }) => {
+  const { isDark, toggleTheme } = useTheme();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+
+  // Initialize with all groups expanded
+  useEffect(() => {
+    const groups = endpoints.reduce((acc, endpoint) => {
+      const group = endpoint.group || 'Other';
+      acc.add(group);
+      return acc;
+    }, new Set<string>());
+    setExpandedGroups(groups);
+  }, [endpoints]);
+
+  // Filter endpoints based on search
+  const filteredEndpoints = useMemo(() => {
+    if (!searchQuery.trim()) return endpoints;
+
+    const query = searchQuery.toLowerCase();
+    return endpoints.filter(endpoint => {
+      // Search in title
+      if (endpoint.metadata?.title?.toLowerCase().includes(query)) return true;
+      
+      // Search in group
+      if (endpoint.group?.toLowerCase().includes(query)) return true;
+      
+      // Search in path/URL
+      if (endpoint.path.toLowerCase().includes(query)) return true;
+      
+      // Search in description
+      if (endpoint.metadata?.description?.toLowerCase().includes(query)) return true;
+      
+      // Search in method
+      if (endpoint.method.toLowerCase().includes(query)) return true;
+      
+      // Search in parameters
+      if (endpoint.parameters.some(p => 
+        p.name.toLowerCase().includes(query) || 
+        p.description?.toLowerCase().includes(query)
+      )) return true;
+      
+      return false;
+    });
+  }, [endpoints, searchQuery]);
+
+  const groupedByCategory = useMemo(() => {
+    return filteredEndpoints.reduce((acc, endpoint) => {
+      const group = endpoint.group || 'Other';
+      if (!acc[group]) acc[group] = {};
+      
+      const method = endpoint.method;
+      if (!acc[group][method]) acc[group][method] = [];
+      acc[group][method].push(endpoint);
+      
+      return acc;
+    }, {} as Record<string, Record<string, RouteEndpoint[]>>);
+  }, [filteredEndpoints]);
+
+  useEffect(() => {
+    if (searchQuery.trim()) {
+      const groups = Object.keys(groupedByCategory);
+      setExpandedGroups(new Set(groups));
+    }
+  }, [searchQuery, groupedByCategory]);
+
+  const toggleGroup = (groupName: string) => {
+    setExpandedGroups(prev => {
+      const next = new Set(prev);
+      if (next.has(groupName)) {
+        next.delete(groupName);
+      } else {
+        next.add(groupName);
+      }
+      return next;
+    });
+  };
+
+  const getMethodColor = (method: string) => {
+    const colors: Record<string, string> = {
+      GET: 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 border-green-200 dark:border-green-700',
+      POST: 'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 border-blue-200 dark:border-blue-700',
+      PUT: 'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300 border-yellow-200 dark:border-yellow-700',
+      PATCH: 'bg-orange-100 dark:bg-orange-900/30 text-orange-800 dark:text-orange-300 border-orange-200 dark:border-orange-700',
+      DELETE: 'bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 border-red-200 dark:border-red-700',
+    };
+    return colors[method] || 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-300 border-gray-200 dark:border-gray-700';
+  };
+
+  // Sort groups alphabetically
+  const sortedGroups = Object.keys(groupedByCategory).sort();
+
+  return (
+    <div className="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 overflow-y-auto flex flex-col h-full">
+      {/* Header */}
+      <div className="p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <div className="flex items-center justify-between mb-2">
+          <h1 className="text-xl font-bold text-gray-900 dark:text-white">API Reference</h1>
+          <button
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              toggleTheme();
+            }}
+            className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+            type="button"
+          >
+            {isDark ? (
+              <svg className="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+              </svg>
+            ) : (
+              <svg className="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+              </svg>
+            )}
+          </button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          {filteredEndpoints.length} of {endpoints.length} endpoints
+        </p>
+      </div>
+
+      {/* Search Bar */}
+      <div className="p-3 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search endpoints..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="w-full px-3 py-2 pl-9 text-sm border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          />
+          <svg
+            className="absolute left-2.5 top-2.5 h-4 w-4 text-gray-400 dark:text-gray-500"
+            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>
+          {searchQuery && (
+            <button
+              onClick={() => setSearchQuery('')}
+              className="absolute right-2.5 top-2.5 text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+      </div>
+      
+      {/* Navigation */}
+      <nav className="flex-1 overflow-y-auto p-2">
+        {sortedGroups.length === 0 ? (
+          <div className="p-4 text-center text-gray-500 dark:text-gray-400 text-sm">
+            No endpoints found
+          </div>
+        ) : (
+          sortedGroups.map((groupName) => {
+            const groupEndpoints = groupedByCategory[groupName];
+            const methodKeys = Object.keys(groupEndpoints).sort();
+            const isExpanded = expandedGroups.has(groupName);
+            const totalInGroup = Object.values(groupEndpoints).flat().length;
+            
+            return (
+              <div key={groupName} className="mb-2">
+                {/* Collapsible Group Header */}
+                <button
+                  onClick={() => toggleGroup(groupName)}
+                  className="w-full flex items-center justify-between px-2 py-2 mb-1 rounded hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+                >
+                  <div className="text-left">
+                    <h2 className="text-sm font-bold text-gray-900 dark:text-white">{groupName}</h2>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">
+                      {totalInGroup} endpoint{totalInGroup !== 1 ? 's' : ''}
+                    </p>
+                  </div>
+                  <svg
+                    className={`h-4 w-4 text-gray-400 dark:text-gray-500 transition-transform ${isExpanded ? '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>
+                
+                {/* Collapsible Content */}
+                {isExpanded && (
+                  <div className="ml-2">
+                    {methodKeys.map((method) => {
+                      const methodEndpoints = groupEndpoints[method];
+                      return (
+                        <div key={`${groupName}-${method}`} className="mb-3">
+                          <div className="px-2 py-1 mb-1">
+                            <span className={`text-xs font-semibold px-2 py-1 rounded border ${getMethodColor(method)}`}>
+                              {method}
+                            </span>
+                          </div>
+                          {methodEndpoints.map((endpoint) => (
+                            <button
+                              key={endpoint.id}
+                              onClick={() => onSelect(endpoint)}
+                              className={`w-full text-left px-3 py-2 mb-1 rounded text-sm transition-colors ${
+                                selectedId === endpoint.id
+                                  ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-900 dark:text-blue-300 border-l-2 border-blue-600 dark:border-blue-500'
+                                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'
+                              }`}
+                            >
+                              <div className="font-mono text-xs">{endpoint.path}</div>
+                              {endpoint.metadata?.title && (
+                                <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate">
+                                  {endpoint.metadata.title}
+                                </div>
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            );
+          })
+        )}
+      </nav>
+    </div>
+  );
+};
+
+export default Sidebar;