froggy-docs 1.1.1 → 1.1.3

package/frontend/lib/app.dart

@@ -1,9 +1,12 @@
+import 'dart:async';
+import 'dart:convert';
+
+import 'package:http/http.dart' as http;
 import 'package:jaspr/dom.dart';
 import 'package:jaspr/jaspr.dart';
-import 'package:http/http.dart' as http;
-import 'dart:convert';
-import 'dart:async';
-import 'dart:html' as html;
+import 'package:web/web.dart' as web;
+
+import 'components/file_field.dart';
 
 class App extends StatefulComponent {
   const App({super.key});
@@ -14,24 +17,32 @@ class App extends StatefulComponent {
 
 class _AppState extends State<App> {
   Map<String, dynamic>? apiData;
-  Timer? timer;
-  bool isDark = false;
-  String searchQuery = '';
-  String authHeader = '';
+  Timer? _timer;
+  bool _isDark = false;
+  String _searchQuery = '';
+  String _authHeader = '';
   final Map<String, String> _responses = {};
   final Map<String, bool> _loading = {};
-  final Map<String, Map<String, String>> _requestBodyValues = {};
-  final Map<String, bool> _expandedEndpoints = {};
+  final Map<String, Map<String, String>> _bodyValues = {};
+  final Map<String, Map<String, dynamic>> _fileValues = {};
+  final Map<String, Map<String, String>> _queryValues = {};
+  final Map<String, Map<String, String>> _headerValues = {};
+  final Map<String, bool> _expandedBody = {};
+  final Map<String, bool> _expandedQuery = {};
+  final Map<String, bool> _expandedHeaders = {};
+  String? _toast;
+  Timer? _toastTimer;
+  // ignore: unused_field
+  int _specVersion = 0;
 
   @override
   void initState() {
     super.initState();
-    _loadData();
-    timer = Timer.periodic(const Duration(seconds: 3), (_) => _loadData());
-
+    _loadSpec();
+    _timer = Timer.periodic(const Duration(seconds: 3), (_) => _loadSpec());
     try {
-      if (html.window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        isDark = true;
+      if (web.window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        _isDark = true;
         _applyTheme();
       }
     } catch (_) {}
@@ -39,339 +50,535 @@ class _AppState extends State<App> {
 
   @override
   void dispose() {
-    timer?.cancel();
+    _timer?.cancel();
+    _toastTimer?.cancel();
     super.dispose();
   }
 
   void _applyTheme() {
     try {
-      html.document.documentElement?.setAttribute('data-theme', isDark ? 'dark' : 'light');
+      web.document.documentElement
+          ?.setAttribute('data-theme', _isDark ? 'dark' : 'light');
     } catch (_) {}
   }
 
-  Future<void> _loadData() async {
+  Future<void> _loadSpec() async {
     try {
       final resp = await http.get(Uri.parse('/froggy_docs.json'));
       if (resp.statusCode == 200) {
-        final data = jsonDecode(resp.body);
-        setState(() => apiData = data as Map<String, dynamic>);
+        final data = jsonDecode(resp.body) as Map<String, dynamic>;
+        setState(() {
+          final old = apiData;
+          apiData = data;
+          if (old != null && jsonEncode(old) != jsonEncode(data)) {
+            _specVersion++;
+            _toast = '🔄 Spec hot-reloaded!';
+            _toastTimer?.cancel();
+            _toastTimer = Timer(const Duration(seconds: 3), () {
+              setState(() => _toast = null);
+            });
+          }
+        });
       }
     } catch (_) {}
   }
 
-  Future<void> _executeRequest(String method, String path, bool hasAuth, Map<String, dynamic>? props) async {
+  Future<void> _executeRequest(
+    String method,
+    String path,
+    bool hasAuth,
+    Map<String, dynamic>? bodyProps,
+    List<Map<String, dynamic>> queryParams,
+    List<Map<String, dynamic>> headerParams,
+    bool hasFiles,
+  ) async {
     final key = '$method-$path';
     setState(() => _loading[key] = true);
 
     try {
-      final baseUrl = html.window.location.origin;
-      final url = '$baseUrl$path';
-
-      final headers = <String, String>{
-        'Content-Type': 'application/json',
-      };
+      var uri = Uri.parse('${web.window.location.origin}$path');
+
+      if (queryParams.isNotEmpty) {
+        final savedQuery = _queryValues[key] ?? {};
+        final params = <String, String>{};
+        for (final qp in queryParams) {
+          final name = qp['name'] as String;
+          final val = savedQuery[name] ?? '';
+          if (val.isNotEmpty) params[name] = val;
+        }
+        if (params.isNotEmpty) {
+          uri = uri.replace(queryParameters: params);
+        }
+      }
 
-      if (authHeader.isNotEmpty) {
-        headers['Authorization'] = authHeader;
+      final headers = <String, String>{};
+      if (!hasFiles) headers['Content-Type'] = 'application/json';
+      if (_authHeader.isNotEmpty) headers['Authorization'] = _authHeader;
+      for (final hp in headerParams) {
+        final name = hp['name'] as String;
+        final val = (_headerValues[key] ?? {})[name] ?? '';
+        if (val.isNotEmpty) headers[name] = val;
       }
 
-      String body = '{}';
-      if (props != null && props.isNotEmpty) {
-        final Map<String, dynamic> bodyData = {};
-        final savedValues = _requestBodyValues[key] ?? {};
-        for (var prop in props.entries) {
-          final value = savedValues[prop.key] ?? _getDefaultValue(prop.value['type']);
-          if (value.isNotEmpty) {
-            bodyData[prop.key] = _parseValue(value, prop.value['type']);
+      http.Response resp;
+
+      if (hasFiles) {
+        final req = http.MultipartRequest(method.toUpperCase(), uri);
+        req.headers.addAll(headers);
+        final savedValues = _bodyValues[key] ?? {};
+        final savedFiles = _fileValues[key] ?? {};
+
+        for (final entry in (bodyProps ?? {}).entries) {
+          final name = entry.key;
+          final prop = entry.value as Map<String, dynamic>;
+          if (prop['format'] == 'binary') {
+            final fileData = savedFiles[name];
+            if (fileData != null) {
+              req.files.add(http.MultipartFile.fromBytes(
+                name,
+                fileData['bytes'] as List<int>,
+                filename: fileData['name'] as String,
+              ));
+            }
+          } else {
+            final val = savedValues[name] ?? '';
+            if (val.isNotEmpty) req.fields[name] = val;
           }
         }
-        body = jsonEncode(bodyData);
+
+        final streamed = await req.send();
+        resp = await http.Response.fromStream(streamed);
+      } else {
+        final req = http.Request(method.toUpperCase(), uri);
+        req.headers.addAll(headers);
+
+        if (method.toUpperCase() != 'GET' && method.toUpperCase() != 'HEAD') {
+          final savedValues = _bodyValues[key] ?? {};
+          final bodyData = <String, dynamic>{};
+          for (final entry in (bodyProps ?? {}).entries) {
+            final val = savedValues[entry.key] ?? '';
+            if (val.isNotEmpty) bodyData[entry.key] = val;
+          }
+          req.body = jsonEncode(bodyData);
+        }
+
+        final client = http.Client();
+        try {
+          final streamed = await client.send(req);
+          resp = await http.Response.fromStream(streamed);
+        } finally {
+          client.close();
+        }
       }
 
-      http.Response resp;
-      switch (method.toUpperCase()) {
-        case 'GET':
-          resp = await http.get(Uri.parse(url), headers: headers);
-          break;
-        case 'POST':
-          resp = await http.post(Uri.parse(url), headers: headers, body: body);
-          break;
-        case 'PUT':
-          resp = await http.put(Uri.parse(url), headers: headers, body: body);
-          break;
-        case 'DELETE':
-          resp = await http.delete(Uri.parse(url), headers: headers);
-          break;
-        case 'PATCH':
-          resp = await http.patch(Uri.parse(url), headers: headers, body: body);
-          break;
-        default:
-          resp = await http.get(Uri.parse(url), headers: headers);
+      String responseText;
+      try {
+        final json = jsonDecode(resp.body);
+        responseText = const JsonEncoder.withIndent('  ').convert(json);
+      } catch (_) {
+        responseText = resp.body;
       }
 
       setState(() {
-        if (resp.statusCode >= 200 && resp.statusCode < 300) {
-          try {
-            _responses[key] = JsonEncoder.withIndent('  ').convert(jsonDecode(resp.body));
-          } catch (_) {
-            _responses[key] = resp.body;
-          }
-        } else {
-          _responses[key] = 'Error ${resp.statusCode}: ${resp.body}';
-        }
+        _responses[key] =
+            resp.statusCode >= 200 && resp.statusCode < 300
+                ? responseText
+                : 'Error ${resp.statusCode}: $responseText';
       });
     } catch (e) {
-      setState(() {
-        _responses[key] = 'Error: $e';
-      });
+      setState(() => _responses[key] = 'Error: $e');
     } finally {
       setState(() => _loading[key] = false);
     }
   }
 
-  String _getDefaultValue(String? type) {
-    switch (type?.toString().toLowerCase()) {
-      case 'number':
-        return '0';
-      case 'boolean':
-        return 'true';
-      case 'array':
-        return '[]';
-      case 'object':
-        return '{}';
-      default:
-        return '';
-    }
-  }
-
-  dynamic _parseValue(String value, String? type) {
-    switch (type?.toString().toLowerCase()) {
-      case 'number':
-        return num.tryParse(value) ?? 0;
-      case 'boolean':
-        return value.toLowerCase() == 'true';
-      case 'array':
-        return [];
-      case 'object':
-        return {};
-      default:
-        return value;
-    }
+  @override
+  Component build(BuildContext context) {
+    return div(
+      classes: 'app-container',
+      [
+        _buildSidebar(),
+        _buildMain(),
+        if (_toast != null)
+          div(classes: 'toast', [Component.text(_toast!)]),
+      ],
+    );
   }
 
-  Map<String, List<MapEntry<String, dynamic>>> _getEndpointsByTag() {
-    final Map<String, List<MapEntry<String, dynamic>>> byTag = {};
-    final paths = apiData?['paths'] as Map<String, dynamic>? ?? {};
-
-    for (var path in paths.entries) {
-      for (var method in (path.value as Map<String, dynamic>).entries) {
-        final tags = (method.value['tags'] as List?) ?? ['Untagged'];
-        for (var tag in tags) {
-          byTag.putIfAbsent(tag.toString(), () => []);
-          byTag[tag.toString()]!.add(MapEntry(path.key, method));
+  Map<String, List<Map<String, String>>> _getEndpointsByTag() {
+    final byTag = <String, List<Map<String, String>>>{};
+    final paths = (apiData?['paths'] as Map<String, dynamic>?) ?? {};
+    for (final pathEntry in paths.entries) {
+      final pathStr = pathEntry.key;
+      for (final methodEntry
+          in (pathEntry.value as Map<String, dynamic>).entries) {
+        final method = methodEntry.key;
+        final spec = methodEntry.value as Map<String, dynamic>;
+        final tags =
+            (spec['tags'] as List<dynamic>?)?.map((t) => t.toString()).toList()
+            ?? ['Untagged'];
+        for (final tag in tags) {
+          byTag.putIfAbsent(tag, () => []).add({
+            'path': pathStr,
+            'method': method,
+          });
         }
       }
     }
     return byTag;
   }
 
-  @override
-  Component build(BuildContext context) {
-    return div(classes: 'app-container', [
-      _buildSidebar(),
-      _buildMainContent(),
-    ]);
-  }
-
   Component _buildSidebar() {
     final byTag = _getEndpointsByTag();
+    final navGroups = <Component>[];
+
+    for (final entry in byTag.entries) {
+      final tag = entry.key;
+      final endpoints = entry.value;
+      if (_searchQuery.isNotEmpty &&
+          !tag.toLowerCase().contains(_searchQuery.toLowerCase()) &&
+          !endpoints.any(
+            (ep) => ep['path']!
+                .toLowerCase()
+                .contains(_searchQuery.toLowerCase()),
+          )) {
+        continue;
+      }
+      navGroups.add(div(
+        classes: 'tag-group',
+        [
+          div(classes: 'tag-header', [Component.text('▶ $tag')]),
+          div(
+            classes: 'tag-endpoints',
+            endpoints
+                .map<Component>(
+                  (ep) => a(
+                    href: '#${ep['method']!.toUpperCase()}-${ep['path']!}',
+                    classes: 'nav-item',
+                    [
+                      span(
+                        classes: 'method-tag ${ep['method']!.toUpperCase()}',
+                        [Component.text(ep['method']!.toUpperCase())],
+                      ),
+                      Component.text(' ${ep['path']!}'),
+                    ],
+                  ),
+                )
+                .toList(),
+          ),
+        ],
+      ));
+    }
 
-    final filtered = byTag.entries.where((e) {
-      if (searchQuery.isEmpty) return true;
-      if (e.key.toLowerCase().contains(searchQuery.toLowerCase())) return true;
-      return e.value.any((ep) => ep.key.toLowerCase().contains(searchQuery.toLowerCase()));
-    }).toList();
-
-    return aside(classes: 'sidebar', [
-      div(classes: 'sidebar-header', [
-        h2([
-          span([text('🐸')], attributes: {'style': 'font-size: 24px;'}),
-          text(' FroggyDocs'),
+    return div(
+      classes: 'sidebar',
+      [
+        div(classes: 'sidebar-header', [
+          h2([Component.text('🐸 FroggyDocs')]),
         ]),
-      ]),
-      div(classes: 'search-container', [
-        input(
-          type: InputType.text,
-          classes: 'search-box',
-          attributes: {'placeholder': 'Search tags or endpoints...'},
-          onInput: (val) => setState(() => searchQuery = val.toString()),
-        ),
-      ]),
-      nav(classes: 'nav-list', [
-        for (var tagGroup in filtered) _buildTagGroup(tagGroup.key, tagGroup.value),
-      ]),
-    ]);
+        div(classes: 'search-container', [
+          input<String>(
+            type: InputType.search,
+            classes: 'search-box',
+            attributes: const {'placeholder': 'Search tags or endpoints...'},
+            onInput: (val) => setState(() => _searchQuery = val),
+          ),
+        ]),
+        nav(classes: 'nav-list', navGroups),
+      ],
+    );
   }
 
-  Component _buildTagGroup(String tag, List<MapEntry<String, dynamic>> endpoints) {
-    final matchesSearch = searchQuery.isEmpty || tag.toLowerCase().contains(searchQuery.toLowerCase());
-
-    // When searching by tag name, show ALL endpoints in that tag
-    // When searching by endpoint path, filter endpoints
-    final filtered = (searchQuery.isEmpty || matchesSearch)
-        ? endpoints
-        : endpoints.where((ep) => ep.key.toLowerCase().contains(searchQuery.toLowerCase())).toList();
-
-    if (searchQuery.isNotEmpty && filtered.isEmpty) return div([]);
+  Component _buildMain() {
+    final paths = (apiData?['paths'] as Map<String, dynamic>?) ?? {};
+    final cards = <Component>[];
+
+    for (final pathEntry in paths.entries) {
+      for (final methodEntry
+          in (pathEntry.value as Map<String, dynamic>).entries) {
+        cards.add(_buildEndpointCard(
+          pathEntry.key,
+          methodEntry.key,
+          methodEntry.value as Map<String, dynamic>,
+        ));
+      }
+    }
 
-    return div(classes: 'tag-group', [
-      div(classes: 'tag-header', [
-        span([text('▶ $tag')]),
-      ]),
-      div(classes: 'tag-endpoints', [
-        for (var ep in filtered)
-          a(classes: 'nav-item', href: '#${ep.value.key.toUpperCase()}-${ep.key}', [
-            span(classes: 'method-tag ${ep.value.key.toUpperCase()}', [text(ep.value.key.toUpperCase())]),
-            span([text(ep.key)]),
+    return div(
+      classes: 'main-content',
+      [
+        div(classes: 'header', [
+          h1([
+            Component.text(
+              apiData?['info']?['title']?.toString() ?? 'API Documentation',
+            ),
           ]),
-      ]),
-    ]);
-  }
-
-  Component _buildMainContent() {
-    return div(classes: 'main-content', [
-      header(classes: 'header', [
-        h1([text((apiData?['info'] as Map<String, dynamic>?)?['title'] as String? ?? 'API Documentation')]),
-        button(
-          classes: 'theme-toggle',
-          [text(isDark ? '☀️' : '🌙')],
-          events: {
-            'click': (_) => setState(() {
-              isDark = !isDark;
+          button(
+            classes: 'theme-toggle',
+            onClick: () => setState(() {
+              _isDark = !_isDark;
               _applyTheme();
             }),
-          },
+            [Component.text(_isDark ? '☀️' : '🌙')],
+          ),
+        ]),
+        div(classes: 'settings-section', [
+          span([Component.text('Authorization: ')]),
+          input<String>(
+            type: InputType.text,
+            classes: 'auth-input',
+            attributes: const {'placeholder': 'Bearer token'},
+            onInput: (val) => setState(() => _authHeader = val),
+          ),
+        ]),
+        div(id: 'apiList', cards),
+      ],
+    );
+  }
+
+  Component _buildEndpointCard(
+    String path,
+    String method,
+    Map<String, dynamic> spec,
+  ) {
+    final key = '$method-$path';
+    final hasAuth = spec['security'] != null;
+    final isExpanded = _expandedBody[key] ?? false;
+    final isLoading = _loading[key] ?? false;
+    final response = _responses[key];
+
+    final jsonProps = spec['requestBody']?['content']?['application/json']
+        ?['schema']?['properties'] as Map<String, dynamic>?;
+    final multipartProps = spec['requestBody']?['content']
+        ?['multipart/form-data']?['schema']?['properties']
+        as Map<String, dynamic>?;
+    final bodyProps = jsonProps ?? multipartProps;
+    final hasFiles = multipartProps != null;
+
+    final allParams = (spec['parameters'] as List<dynamic>?) ?? [];
+    final queryParams = allParams
+        .whereType<Map<String, dynamic>>()
+        .where((param) => param['in'] == 'query')
+        .toList();
+    final headerParams = allParams
+        .whereType<Map<String, dynamic>>()
+        .where((param) => param['in'] == 'header')
+        .toList();
+    final responseSchemas = spec['responses'] as Map<String, dynamic>?;
+
+    final children = <Component>[
+      div(classes: 'endpoint-header', [
+        span(
+          classes: 'method-tag ${method.toUpperCase()}',
+          [Component.text(method.toUpperCase())],
         ),
+        span(classes: 'path-text', [Component.text(path)]),
+        if (hasAuth) span(classes: 'auth-badge', [Component.text('🔒 Auth')]),
       ]),
-      div(classes: 'settings-section', [
-        div([text('Authorization: ')]),
-        input(
-          type: InputType.text,
-          classes: 'auth-input',
-          attributes: {'placeholder': 'Bearer token'},
-          onInput: (val) => setState(() => authHeader = val.toString()),
-        ),
+      p(classes: 'api-description', [
+        Component.text(spec['summary']?.toString() ?? 'No description'),
       ]),
-      if (apiData == null)
-        div(classes: 'api-section', [
-          p([text('Loading...')]),
-        ])
-      else
-        _buildApiList(),
-    ]);
+    ];
+
+    if (bodyProps != null && bodyProps.isNotEmpty) {
+      children.add(button(
+        classes: 'try-it-out-btn${isExpanded ? '' : ' secondary'}',
+        onClick: () => setState(() => _expandedBody[key] = !isExpanded),
+        [Component.text(isExpanded ? 'Hide Request Body' : 'Show Request Body')],
+      ));
+      if (isExpanded) {
+        children.add(_buildFormSection(key, bodyProps, hasFiles));
+      }
+    }
+
+    if (queryParams.isNotEmpty) {
+      children.add(_buildQuerySection(key, queryParams));
+    }
+    if (headerParams.isNotEmpty) {
+      children.add(_buildHeadersSection(key, headerParams));
+    }
+    if (responseSchemas != null) {
+      children.add(_buildResponseSchemas(responseSchemas));
+    }
+
+    children.add(button(
+      classes: 'try-it-out-btn',
+      disabled: isLoading,
+      onClick: isLoading
+          ? null
+          : () => _executeRequest(
+                method,
+                path,
+                hasAuth,
+                bodyProps,
+                queryParams,
+                headerParams,
+                hasFiles,
+              ),
+      [Component.text(isLoading ? 'Loading...' : 'Try It Out')],
+    ));
+
+    if (response != null) {
+      children.add(div(classes: 'response-section', [
+        h4([Component.text('Response:')]),
+        pre(classes: 'response-body', [Component.text(response)]),
+      ]));
+    }
+
+    return div(
+      id: '${method.toUpperCase()}-$path',
+      classes: 'api-section',
+      children,
+    );
   }
 
-  Component _buildApiList() {
-    final paths = apiData!['paths'] as Map<String, dynamic>? ?? {};
-    return div([
-      for (var path in paths.entries)
-        for (var method in (path.value as Map<String, dynamic>).entries)
-          _buildEndpoint(path.key, method.key, method.value),
+  Component _buildFormSection(
+    String key,
+    Map<String, dynamic> props,
+    bool hasFiles,
+  ) {
+    final fields = props.entries.map<Component>((entry) {
+      final name = entry.key;
+      final value = entry.value as Map<String, dynamic>;
+      final isFile = value['format'] == 'binary';
+      final description = value['description']?.toString() ?? '';
+      final fieldType = value['type']?.toString() ?? 'string';
+      final savedValue = (_bodyValues[key] ?? {})[name] ?? '';
+
+      return FileField(
+        endpointKey: key,
+        fieldName: name,
+        description: description,
+        isFile: isFile,
+        fieldType: fieldType,
+        savedValue: savedValue,
+        onTextChanged: (val) => setState(() {
+          _bodyValues[key] ??= {};
+          _bodyValues[key]![name] = val;
+        }),
+        onFileSelected: (bytes, fileName) => setState(() {
+          _fileValues[key] ??= {};
+          _fileValues[key]![name] = {'bytes': bytes, 'name': fileName};
+        }),
+      );
+    }).toList();
+
+    return div(classes: 'request-body-form', [
+      h3(classes: 'section-title', [
+        Component.text(hasFiles ? 'Multipart Form Data' : 'Request Body'),
+      ]),
+      ...fields,
     ]);
   }
 
-  Component _buildEndpoint(String path, String method, dynamic spec) {
-    final props =
-        spec['requestBody']?['content']?['application/json']?['schema']?['properties'] as Map<String, dynamic>?;
-    final hasAuth = spec['security'] != null;
-    final key = '$method-$path';
-    final response = _responses[key];
-    final isLoading = _loading[key] ?? false;
-    final isExpanded = _expandedEndpoints[key] ?? false;
-    final savedValues = _requestBodyValues[key] ?? {};
+  Component _buildQuerySection(
+    String key,
+    List<Map<String, dynamic>> params,
+  ) {
+    final isExpanded = _expandedQuery[key] ?? false;
+    final children = <Component>[
+      button(
+        classes: 'collapsible-btn',
+        onClick: () => setState(() => _expandedQuery[key] = !isExpanded),
+        [Component.text(isExpanded ? '▲ Query Params' : '▼ Query Params')],
+      ),
+    ];
+
+    if (isExpanded) {
+      for (final qp in params) {
+        final name = qp['name'] as String;
+        final desc = qp['description']?.toString() ?? '';
+        final schema = qp['schema'] as Map<String, dynamic>? ?? {};
+        final type = schema['type']?.toString() ?? 'string';
+        final defaultVal = schema['default']?.toString() ?? '';
+        final savedVal = (_queryValues[key] ?? {})[name] ?? '';
+
+        children.add(div(classes: 'form-field', [
+          label([Component.text('$name ($type)')]),
+          if (desc.isNotEmpty) span(classes: 'field-desc', [Component.text(desc)]),
+          input<String>(
+            type: InputType.text,
+            classes: 'form-input',
+            value: savedVal.isEmpty ? defaultVal : savedVal,
+            attributes: {'placeholder': defaultVal},
+            onInput: (val) => setState(() {
+              _queryValues[key] ??= {};
+              _queryValues[key]![name] = val;
+            }),
+          ),
+        ]));
+      }
+    }
 
-    return section(
-      classes: 'api-section',
-      attributes: {'id': '${method.toUpperCase()}-$path'},
-      [
-        div(classes: 'endpoint-header', [
-          span(classes: 'method-tag ${method.toUpperCase()}', [text(method.toUpperCase())]),
-          span(classes: 'path-text', [text(path)]),
-          if (hasAuth) span(classes: 'auth-badge', [text('🔒 Auth')]),
-        ]),
-        p(classes: 'api-description', [text(spec['summary'] ?? 'No description')]),
+    return div(classes: 'query-section', children);
+  }
 
-        if (props != null && props.isNotEmpty) ...[
-          button(
-            classes: 'try-it-out-btn',
-            [text(isExpanded ? 'Hide Request Body' : 'Show Request Body')],
-            events: {'click': (_) => setState(() => _expandedEndpoints[key] = !isExpanded)},
+  Component _buildHeadersSection(
+    String key,
+    List<Map<String, dynamic>> params,
+  ) {
+    final isExpanded = _expandedHeaders[key] ?? false;
+    final children = <Component>[
+      button(
+        classes: 'collapsible-btn',
+        onClick: () => setState(() => _expandedHeaders[key] = !isExpanded),
+        [Component.text(isExpanded ? '▲ Headers' : '▼ Headers')],
+      ),
+    ];
+
+    if (isExpanded) {
+      for (final hp in params) {
+        final name = hp['name'] as String;
+        final desc = hp['description']?.toString() ?? '';
+        final schema = hp['schema'] as Map<String, dynamic>? ?? {};
+        final type = schema['type']?.toString() ?? 'string';
+        final savedVal = (_headerValues[key] ?? {})[name] ?? '';
+
+        children.add(div(classes: 'form-field', [
+          label([Component.text('$name ($type)')]),
+          if (desc.isNotEmpty) span(classes: 'field-desc', [Component.text(desc)]),
+          input<String>(
+            type: InputType.text,
+            classes: 'form-input',
+            value: savedVal,
+            onInput: (val) => setState(() {
+              _headerValues[key] ??= {};
+              _headerValues[key]![name] = val;
+            }),
           ),
-          if (isExpanded) ...[
-            h3(classes: 'section-title', [text('Request Body')]),
-            div(classes: 'request-body-form', [
-              for (var prop in props.entries)
-                div(classes: 'form-field', [
-                  label([text(prop.key), text(' (${prop.value['type'] ?? 'string'})')]),
-                  if (prop.value['description'] != null && (prop.value['description'] as String).isNotEmpty)
-                    span(classes: 'field-desc', [text(prop.value['description'])]),
-                  input(
-                    type: InputType.text,
-                    classes: 'form-input',
-                    attributes: {
-                      'placeholder': _getDefaultValue(prop.value['type']),
-                      'value': savedValues[prop.key] ?? '',
-                    },
-                    onInput: (val) {
-                      setState(() {
-                        _requestBodyValues[key] ??= {};
-                        _requestBodyValues[key]![prop.key] = val.toString();
-                      });
-                    },
-                  ),
-                ]),
-            ]),
-          ],
-        ],
+        ]));
+      }
+    }
 
-        button(
-          classes: 'try-it-out-btn ${props != null && props.isNotEmpty ? 'secondary' : ''}',
-          [text(isLoading ? 'Loading...' : 'Try It Out')],
-          events: {'click': (_) => _executeRequest(method, path, hasAuth, props)},
-        ),
+    return div(classes: 'headers-section', children);
+  }
 
-        if (response != null) ...[
-          div(classes: 'response-section', [
-            h4([text('Response:')]),
-            pre(classes: 'response-body', [text(response)]),
+  Component _buildResponseSchemas(Map<String, dynamic> responses) {
+    final items = responses.entries.map<Component>((entry) {
+      final code = entry.key;
+      final resp = entry.value as Map<String, dynamic>;
+      final desc = resp['description']?.toString() ?? '';
+      final content =
+          resp['content']?['application/json'] as Map<String, dynamic>?;
+      final schema = content?['schema'] as Map<String, dynamic>?;
+      final example = content?['example'];
+
+      return div(classes: 'response-schema', [
+        div(classes: 'response-code', [Component.text('$code - $desc')]),
+        if (schema != null)
+          div(classes: 'schema-type', [
+            Component.text('Type: ${schema['type'] ?? 'object'}'),
           ]),
-        ],
-
-        if (props != null && props.isNotEmpty) ...[
-          h3(classes: 'section-title', [text('Parameters')]),
-          table(classes: 'params-table', [
-            thead([
-              tr([
-                th([text('Field')]),
-                th([text('Type')]),
-                th([text('Description')]),
-              ]),
-            ]),
-            tbody([
-              for (var prop in props.entries)
-                tr([
-                  td([
-                    b([text(prop.key)]),
-                  ]),
-                  td([
-                    span(classes: 'type-label', [text((prop.value['type'] ?? 'string').toString())]),
-                  ]),
-                  td([text((prop.value['description'] ?? '-').toString())]),
-                ]),
-            ]),
+        if (example != null)
+          pre(classes: 'schema-example', [
+            Component.text(const JsonEncoder.withIndent('  ').convert(example)),
           ]),
-        ],
-      ],
-    );
+      ]);
+    }).toList();
+
+    return div(classes: 'response-schemas', [
+      h3(classes: 'section-title', [Component.text('Responses')]),
+      ...items,
+    ]);
   }
 }