feat: add Responses API support by davlgd · Pull Request #4 · davlgd/openai-api-tester

davlgd · 2026-03-10T22:01:09Z

fixes #3

Copilot

Pull request overview

This PR extends the OpenAI API tester UI/server to support the newer Responses API endpoints, including POST calls and id-based GET/DELETE operations, and refreshes the dependency lockfile accordingly.

Changes:

Add sidebar endpoints for /v1/responses, /v1/responses/compact, and id-based /v1/responses/{response_id} (GET/DELETE), plus a new id-request partial.
Update frontend JS/CSS to support an optional response_id URL segment input and related layout/styling.
Update server template rendering to pass a method parameter into partial templates; bump lockfile revision and app version.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
uv.lock	Lockfile regenerated (revision bump, metadata updates, local package version bump).
src/templates/partials/id-request.html	New partial for id-based requests and response display.
src/templates/index.html	Adds Responses API endpoints and a hidden `response_id` URL input field.
src/static/js/main.js	Adds endpoint placeholder substitution and URL updates based on `response_id`.
src/static/js/config.js	Adds default model/body presets for `/v1/responses` and `/v1/responses/compact`.
src/static/css/main.css	Styling updates for DELETE method label, layout tweaks, and new URL input grouping.
src/server.py	Renders partial templates via Jinja and passes `method` through to templates.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-10T22:06:35Z

src/server.py

+async def get_template(template_name: str, method: str = "GET") -> HTMLResponse:
+    template = env.get_template(f"partials/{template_name}.html")
+    return template.render(method=method)


get_template renders user-controlled query param method into an HTML template, but the Jinja Environment is created without autoescaping. That allows XSS via a value like ?method="><script>…</script> (it will end up in the hidden input’s value). Enable Jinja autoescaping for HTML templates (preferred) or explicitly escape/sanitize method before passing it to template.render(...) (and ideally constrain it to an allowlist like GET/POST/DELETE).

Copilot · 2026-03-10T22:06:36Z

src/server.py

+async def get_template(template_name: str, method: str = "GET") -> HTMLResponse:
+    template = env.get_template(f"partials/{template_name}.html")
+    return template.render(method=method)


read_html() is now unused after switching /template/{template_name} to env.get_template(...). Consider removing the dead helper (or reverting to it) to avoid untested, misleading code paths lingering in the server module.

Copilot · 2026-03-10T22:06:36Z

src/templates/partials/id-request.html

+                setTimeout(() => {
+                    this.querySelector('.icon').classList.remove('fa-check');
+                    this.querySelector('.icon').classList.add('fa-copy');
+                }, 2000);" class="btn-copy">


The <button> has class="btn-copy" specified twice (once before hx-on and again after). Duplicate attributes are invalid HTML and can lead to inconsistent behavior across browsers/tools. Remove the redundant class attribute.

Suggested change

}, 2000);" class="btn-copy">

}, 2000);">

Copilot · 2026-03-10T22:06:36Z

src/static/js/main.js

+  if (idInput) {
+    idInput.addEventListener('input', updateRequestUrl);


idInput.addEventListener('input', updateRequestUrl) is registered inside the htmx:afterSwap handler. Since afterSwap fires on every template swap and #response_id is outside the swapped content, this will attach duplicate listeners over time (multiple updateRequestUrl() calls per keystroke). Attach this listener once (e.g., in DOMContentLoaded) or guard with a flag (dataset/boolean) before adding it.

Suggested change

if (idInput) {

idInput.addEventListener('input', updateRequestUrl);

if (idInput && !idInput.dataset.inputListenerAttached) {

idInput.addEventListener('input', updateRequestUrl);

idInput.dataset.inputListenerAttached = 'true';

Copilot · 2026-03-10T22:06:36Z

src/templates/index.html

+        <span>/v1/responses/{id}</span>
+      </button>
+      <button class="endpoint-btn" hx-get="/template/id-request?method=DELETE" hx-target="#main-form" hx-swap="innerHTML" hx-on="htmx:afterSettle:
+        this.classList.add('active');
+        document.querySelector('#response').innerHTML = '';
+        loadConfigFromLocalStorage();" data-endpoint="/v1/responses/{response_id}">
+        <span class="method delete">DELETE</span>
+        <span>/v1/responses/{id}</span>


The button label uses /v1/responses/{id} but the actual endpoint string (and JS substitution logic) uses {response_id}. This mismatch is confusing and makes it unclear what should be typed into the response_id field. Align the displayed placeholder with the real placeholder name (either {response_id} everywhere or {id} everywhere).

Suggested change

<span>/v1/responses/{id}</span>

</button>

<button class="endpoint-btn" hx-get="/template/id-request?method=DELETE" hx-target="#main-form" hx-swap="innerHTML" hx-on="htmx:afterSettle:

this.classList.add('active');

document.querySelector('#response').innerHTML = '';

loadConfigFromLocalStorage();" data-endpoint="/v1/responses/{response_id}">

<span class="method delete">DELETE</span>

<span>/v1/responses/{id}</span>

<span>/v1/responses/{response_id}</span>

</button>

<button class="endpoint-btn" hx-get="/template/id-request?method=DELETE" hx-target="#main-form" hx-swap="innerHTML" hx-on="htmx:afterSettle:

this.classList.add('active');

document.querySelector('#response').innerHTML = '';

loadConfigFromLocalStorage();" data-endpoint="/v1/responses/{response_id}">

<span class="method delete">DELETE</span>

<span>/v1/responses/{response_id}</span>

Copilot · 2026-03-10T22:06:37Z

src/templates/index.html

+        <span>/v1/responses/{id}</span>
+      </button>
+      <button class="endpoint-btn" hx-get="/template/id-request?method=DELETE" hx-target="#main-form" hx-swap="innerHTML" hx-on="htmx:afterSettle:
+        this.classList.add('active');
+        document.querySelector('#response').innerHTML = '';
+        loadConfigFromLocalStorage();" data-endpoint="/v1/responses/{response_id}">
+        <span class="method delete">DELETE</span>
+        <span>/v1/responses/{id}</span>


Same placeholder mismatch here: label shows /v1/responses/{id} while data-endpoint uses {response_id} (and JS replacement logic looks for {response_id}). Align the placeholder names to avoid confusing users.

Suggested change

<span>/v1/responses/{id}</span>

</button>

<button class="endpoint-btn" hx-get="/template/id-request?method=DELETE" hx-target="#main-form" hx-swap="innerHTML" hx-on="htmx:afterSettle:

this.classList.add('active');

document.querySelector('#response').innerHTML = '';

loadConfigFromLocalStorage();" data-endpoint="/v1/responses/{response_id}">

<span class="method delete">DELETE</span>

<span>/v1/responses/{id}</span>

<span>/v1/responses/{response_id}</span>

</button>

<button class="endpoint-btn" hx-get="/template/id-request?method=DELETE" hx-target="#main-form" hx-swap="innerHTML" hx-on="htmx:afterSettle:

this.classList.add('active');

document.querySelector('#response').innerHTML = '';

loadConfigFromLocalStorage();" data-endpoint="/v1/responses/{response_id}">

<span class="method delete">DELETE</span>

<span>/v1/responses/{response_id}</span>

feat: add Responses API support

f518158

davlgd requested a review from Copilot March 10, 2026 22:01

davlgd self-assigned this Mar 10, 2026

Copilot started reviewing on behalf of davlgd March 10, 2026 22:01 View session

Copilot AI reviewed Mar 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Responses API support#4

feat: add Responses API support#4
davlgd wants to merge 1 commit intomainfrom
feat/response

davlgd commented Mar 10, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Copilot AI Mar 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		if (idInput) {
		idInput.addEventListener('input', updateRequestUrl);

Conversation

davlgd commented Mar 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants