Fix vertical misalignment between input and output panels

[Copilot]

The input panel's textarea started lower than the output panel's because the "Upload file" button occupied a dedicated row between the label and textarea, while the output panel went straight from label to textarea.

Changes — wasm/index.html

• Introduced .panel-header flex row (space-between) used by both panels — label on the left, optional action on the right
• Moved "Upload file" button into the input panel's .panel-header alongside the label, eliminating the dedicated button row that caused the offset
• min-height: calc(0.85rem * 1.2 + 1rem) on .panel-header ensures the output panel's text-only header matches the button height exactly, so both textareas start at the same vertical position

Before                          After
──────────────────────          ──────────────────────────────────────
[label          ]  [label     ] [label  📂 Upload]  [label           ]
[📂 Upload file ]               [textarea        ]  [textarea        ]
[textarea       ]  [textarea  ] [Convert →       ]  [⬇ Download 📋 Copy]
[Convert →      ]  [⬇ ⬇ Copy ]

Original prompt

Goal

Add a static web page that runs the OpenAPI 3.0 → Swagger 2.0 conversion entirely in the browser using WebAssembly (Emscripten). This allows the tool to be hosted on GitHub Pages or any static file host with no server-side component.

Background

The project is currently a C++ CLI tool (openapi-downgrader.exe input.yaml output.yaml) built with Visual Studio 2022. It uses yaml-cpp (headers vendored in include/yaml-cpp/, prebuilt libs in lib/). The conversion logic lives in:

• code/Converter.h / code/Converter.cpp — the Converter class with Convert(const std::string& source) method
• code/Util.h / code/Util.cpp — utility functions (URL parsing, ref fixing, etc.)
• code/openapi-downgrader.cpp — CLI entry point (main())

The key blocker for running in a browser is that Converter::Convert() calls YAML::LoadFile(source) which reads from the filesystem. This needs to be changed to YAML::Load(source) to accept a raw YAML string instead.

Required Changes

1. Refactor Converter to support string input (non-breaking)

In code/Converter.cpp, add a new method (or modify the existing one) so the converter can accept raw YAML content as a string rather than a file path. The existing CLI behavior must still work. The cleanest approach:

• Add a new public method std::string ConvertString(const std::string& yamlContent) to the Converter class that uses YAML::Load(yamlContent) instead of YAML::LoadFile(source).
• Refactor the internal logic so both Convert (file path) and ConvertString (raw string) share the same conversion pipeline, just differing in how the YAML is initially loaded.
• Update code/Converter.h to declare the new method.

2. Create Emscripten/WebAssembly entry point

Create a new file wasm/wasm_entry.cpp that:

• Includes Converter.h
• Includes <emscripten/bind.h> (Embind)
• Exposes a function convert(std::string yamlInput) -> std::string that creates a Converter instance, calls ConvertString(yamlInput), and returns the result.
• Uses EMSCRIPTEN_BINDINGS to export the convert function to JavaScript.

3. Create the static web UI

Create wasm/index.html — a single self-contained HTML file with embedded CSS and JavaScript that provides:

• A title/header ("OpenAPI 3.0 → Swagger 2.0 Converter")
• A textarea for pasting OpenAPI 3.0 YAML input (with placeholder text)
• A file upload button (<input type="file" accept=".yaml,.yml,.json">) as an alternative to pasting
• A "Convert" button that calls the Wasm convert() function
• A read-only textarea showing the Swagger 2.0 output
• A "Download" button to save the output as a .yaml file (using Blob + URL.createObjectURL)
• A "Copy to clipboard" button for the output
• Basic error handling: if the conversion throws, display the error message to the user
• A loading indicator while the Wasm module initializes
• Clean, minimal, responsive styling (works on mobile)

The HTML file should load the Emscripten-generated JS glue (downgrader.js) and use Module.onRuntimeInitialized or the Embind API to know when the Wasm is ready.

4. Create a CMakeLists.txt for the Emscripten build

Create wasm/CMakeLists.txt (or a Makefile) that:

• Compiles code/Converter.cpp, code/Util.cpp, wasm/wasm_entry.cpp and the yaml-cpp source files with em++
• Uses the vendored include/ directory for yaml-cpp headers
• Includes Embind (--bind) and appropriate flags (-O2, -s WASM=1, -s ALLOW_MEMORY_GROWTH=1, -s MODULARIZE=1, -s EXPORT_NAME='createModule')
• Outputs downgrader.js and downgrader.wasm into a wasm/dist/ or wasm/ output directory

Important note about yaml-cpp sources: The repository only has yaml-cpp headers vendored in include/yaml-cpp/ and prebuilt static libraries in lib/. The Emscripten build cannot use the prebuilt Windows .lib files. The build system needs to either:

• Fetch yaml-cpp sources (e.g., via CMake FetchContent) and compile them from source with Emscripten, OR
• Include instructions for the user to clone yaml-cpp and point the build at it.

The recommended approach is using CMake FetchContent to download yaml-cpp at configure time.

5. Add build instructions

Create wasm/README.md with:

• Prerequisites (Emscripten SDK)
• Build steps
• How to serve locally (python3 -m http.server or similar)
• Note about GitHub Pages hosting

6. Update the root README.md

Add a "Web Version" section to the existing README.md that:

• Mentions the browser-based version
• Links to the wasm/ directory for build instructions
• Optionally mentions it can be hosted on GitHub Pages

Important Constraints

• The existing CLI build (Visual Studio .sln/.vcxproj) must NOT be broken.
• The yaml-cpp headers are already vendored at include/yaml-cpp/. The Wasm build should use these same headers for consistency but needs to compile yaml-cpp from...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.