Improve webui style and add api docs

webui/swagger.js

@@ -0,0 +1,53 @@
+async function loadSpec() {
+  const response = await fetch("/openapi.json");
+  const spec = await response.json();
+  if (!response.ok) {
+    throw new Error(spec.error || "Failed to load OpenAPI spec");
+  }
+  return spec;
+}
+
+function methodPayload(operation) {
+  const body = operation.requestBody?.content?.["application/json"]?.schema;
+  if (!body) return "";
+  return JSON.stringify(body.example || body.properties || body, null, 2);
+}
+
+function renderSpec(spec) {
+  const root = document.getElementById("api-docs");
+  const sectionTemplate = document.getElementById("api-section-template");
+  const methodTemplate = document.getElementById("api-method-template");
+  root.innerHTML = "";
+
+  Object.entries(spec.paths || {}).forEach(([path, methods]) => {
+    const section = sectionTemplate.content.firstElementChild.cloneNode(true);
+    section.querySelector(".api-path").textContent = path;
+    const methodsRoot = section.querySelector(".api-methods");
+
+    Object.entries(methods).forEach(([method, operation]) => {
+      const node = methodTemplate.content.firstElementChild.cloneNode(true);
+      node.querySelector(".api-verb").textContent = method.toUpperCase();
+      node.querySelector(".api-summary").textContent = operation.summary || "";
+      node.querySelector(".api-description").textContent = operation.description || "";
+
+      const body = methodPayload(operation);
+      const bodyNode = node.querySelector(".api-body");
+      if (body) {
+        bodyNode.textContent = body;
+      } else {
+        bodyNode.remove();
+      }
+
+      methodsRoot.appendChild(node);
+    });
+
+    root.appendChild(section);
+  });
+}
+
+loadSpec()
+  .then(renderSpec)
+  .catch((error) => {
+    console.error(error);
+    document.getElementById("api-docs").innerHTML = `<section class="panel">${error.message}</section>`;
+  });