From 36a730f65686ba99965d9feefe06439f74fbfc4c Mon Sep 17 00:00:00 2001
From: Lloyd <lloyd@rightup.co.uk>
Date: Thu, 18 Dec 2025 12:28:50 +0000
Subject: [PATCH] Refactor Swagger UI integration: load HTML template from file
 and remove inline styles

---
 repeater/web/api_endpoints.py     | 211 ++----------------------------
 repeater/web/html/swagger-ui.html | 211 ++++++++++++++++++++++++++++++
 2 files changed, 220 insertions(+), 202 deletions(-)
 create mode 100644 repeater/web/html/swagger-ui.html
diff --git a/repeater/web/api_endpoints.py b/repeater/web/api_endpoints.py
index 401f2c4..7952e42 100644
--- a/repeater/web/api_endpoints.py
+++ b/repeater/web/api_endpoints.py
@@ -2494,208 +2494,15 @@ class APIEndpoints:
     @cherrypy.expose
     def docs(self):
         """Serve Swagger UI for interactive API documentation."""
-        swagger_html = """<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>pyMC Repeater API</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css">
-    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/favicon-32x32.png" sizes="32x32" />
-    <style>
-        body {
-            margin: 0;
-            padding: 0;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-        }
+        # Load HTML template from file
+        template_path = os.path.join(os.path.dirname(__file__), 'html', 'swagger-ui.html')
+        try:
+            with open(template_path, 'r', encoding='utf-8') as f:
+                swagger_html = f.read()
+        except FileNotFoundError:
+            logger.error(f"Swagger UI template not found at {template_path}")
+            cherrypy.response.status = 500
+            return b"Swagger UI template not found"
         
-        .topbar {
-            display: none !important;
-        }
-        
-        .swagger-ui .info {
-            margin: 30px 0;
-        }
-        
-        .swagger-ui .info .title {
-            font-size: 2.5rem;
-            font-weight: 700;
-            color: #3b4151;
-        }
-        
-        .swagger-ui .scheme-container {
-            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        }
-        
-        .swagger-ui .opblock {
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
-            margin-bottom: 16px;
-            border: 1px solid #e8e8e8;
-        }
-        
-        .swagger-ui .opblock.opblock-get {
-            border-left: 4px solid #61affe;
-        }
-        
-        .swagger-ui .opblock.opblock-post {
-            border-left: 4px solid #49cc90;
-        }
-        
-        .swagger-ui .opblock.opblock-delete {
-            border-left: 4px solid #f93e3e;
-        }
-        
-        .swagger-ui .opblock.opblock-put {
-            border-left: 4px solid #fca130;
-        }
-        
-        .swagger-ui .opblock-summary {
-            padding: 12px 20px;
-        }
-        
-        .swagger-ui .opblock-summary-method {
-            font-weight: 700;
-            border-radius: 4px;
-            text-transform: uppercase;
-            font-size: 12px;
-            padding: 6px 12px;
-        }
-        
-        .swagger-ui .btn.execute {
-            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-            border: none;
-            color: white;
-            font-weight: 600;
-            padding: 10px 24px;
-            border-radius: 6px;
-            transition: all 0.2s;
-        }
-        
-        .swagger-ui .btn.execute:hover {
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-            transform: translateY(-1px);
-        }
-        
-        .swagger-ui .response-col_status {
-            font-weight: 600;
-            font-size: 14px;
-        }
-        
-        .swagger-ui .model-box {
-            background: #f7f8fa;
-            border-radius: 8px;
-            padding: 16px;
-        }
-        
-        .swagger-ui .response-col_description__inner p {
-            margin: 0;
-            padding: 8px 0;
-        }
-        
-        .swagger-ui .filter-container {
-            padding: 16px 20px;
-            border-bottom: 1px solid #e8e8e8;
-        }
-        
-        .swagger-ui .filter .operation-filter-input {
-            border: 2px solid #e8e8e8;
-            border-radius: 6px;
-            padding: 10px 16px;
-            font-size: 14px;
-            width: 100%;
-            max-width: 400px;
-        }
-        
-        .swagger-ui .filter .operation-filter-input:focus {
-            border-color: #667eea;
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-        }
-        
-        .swagger-ui .opblock-tag {
-            font-size: 1.3rem;
-            font-weight: 700;
-            color: #3b4151;
-            padding: 16px 20px;
-            border-bottom: 2px solid #e8e8e8;
-            margin-bottom: 16px;
-        }
-        
-        .swagger-ui .renderedMarkdown p {
-            line-height: 1.6;
-        }
-        
-        /* Dark mode support */
-        @media (prefers-color-scheme: dark) {
-            .swagger-ui .opblock {
-                background: #2d2d2d;
-                border-color: #3b3b3b;
-            }
-            
-            .swagger-ui .opblock-tag {
-                color: #e8e8e8;
-                border-bottom-color: #3b3b3b;
-            }
-            
-            .swagger-ui .info .title {
-                color: #e8e8e8;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="swagger-ui"></div>
-    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-standalone-preset.js"></script>
-    <script>
-        window.onload = function() {
-            // Use current browser location for API calls
-            const currentUrl = window.location.protocol + '//' + window.location.host + '/api';
-            
-            const ui = SwaggerUIBundle({
-                url: '/api/openapi',
-                dom_id: '#swagger-ui',
-                deepLinking: true,
-                presets: [
-                    SwaggerUIBundle.presets.apis,
-                    SwaggerUIStandalonePreset
-                ],
-                plugins: [
-                    SwaggerUIBundle.plugins.DownloadUrl
-                ],
-                layout: "StandaloneLayout",
-                tryItOutEnabled: true,
-                filter: true,
-                displayRequestDuration: true,
-                displayOperationId: false,
-                persistAuthorization: true,
-                validatorUrl: null,
-                syntaxHighlight: {
-                    activate: true,
-                    theme: "monokai"
-                },
-                defaultModelsExpandDepth: 1,
-                defaultModelExpandDepth: 2,
-                docExpansion: "list",
-                showExtensions: true,
-                showCommonExtensions: true,
-                tagsSorter: "alpha",
-                operationsSorter: "alpha",
-                // Override servers list to use current host
-                servers: [
-                    {
-                        url: currentUrl,
-                        description: "Current host"
-                    }
-                ]
-            });
-            
-            window.ui = ui;
-        };
-    </script>
-</body>
-</html>"""
         cherrypy.response.headers['Content-Type'] = 'text/html'
         return swagger_html.encode('utf-8')
\ No newline at end of file
diff --git a/repeater/web/html/swagger-ui.html b/repeater/web/html/swagger-ui.html
new file mode 100644
index 0000000..d04cd4b
--- /dev/null
+++ b/repeater/web/html/swagger-ui.html
@@ -0,0 +1,211 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>pyMC Repeater API</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css">
+    <link rel="icon" type="image/png" href="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/favicon-32x32.png" sizes="32x32" />
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+        }
+        
+        .topbar {
+            display: none !important;
+        }
+        
+        .swagger-ui .info {
+            margin: 30px 0;
+        }
+        
+        .swagger-ui .info .title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            color: #3b4151;
+        }
+        
+        .swagger-ui .scheme-container {
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        
+        .swagger-ui .opblock {
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
+            margin-bottom: 16px;
+            border: 1px solid #e8e8e8;
+        }
+        
+        .swagger-ui .opblock.opblock-get {
+            border-left: 4px solid #61affe;
+        }
+        
+        .swagger-ui .opblock.opblock-post {
+            border-left: 4px solid #49cc90;
+        }
+        
+        .swagger-ui .opblock.opblock-delete {
+            border-left: 4px solid #f93e3e;
+        }
+        
+        .swagger-ui .opblock.opblock-put {
+            border-left: 4px solid #fca130;
+        }
+        
+        .swagger-ui .opblock-summary {
+            padding: 12px 20px;
+        }
+        
+        .swagger-ui .opblock-summary-method {
+            font-weight: 700;
+            border-radius: 4px;
+            text-transform: uppercase;
+            font-size: 12px;
+            padding: 6px 12px;
+        }
+        
+        .swagger-ui .btn.execute {
+            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+            border: none;
+            color: white;
+            font-weight: 600;
+            padding: 10px 24px;
+            border-radius: 6px;
+            transition: all 0.2s;
+        }
+        
+        .swagger-ui .btn.execute:hover {
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+            transform: translateY(-1px);
+        }
+        
+        .swagger-ui .response-col_status {
+            font-weight: 600;
+            font-size: 14px;
+        }
+        
+        .swagger-ui .model-box {
+            background: #f7f8fa;
+            border-radius: 8px;
+            padding: 16px;
+        }
+        
+        .swagger-ui .response-col_description__inner p {
+            margin: 0;
+            padding: 8px 0;
+        }
+        
+        .swagger-ui .filter-container {
+            padding: 16px 20px;
+            border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .swagger-ui .filter .operation-filter-input {
+            border: 2px solid #e8e8e8;
+            border-radius: 6px;
+            padding: 10px 16px;
+            font-size: 14px;
+            width: 100%;
+            max-width: 400px;
+        }
+        
+        .swagger-ui .filter .operation-filter-input:focus {
+            border-color: #667eea;
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        
+        .swagger-ui .opblock-tag {
+            font-size: 1.3rem;
+            font-weight: 700;
+            color: #3b4151;
+            padding: 16px 20px;
+            border-bottom: 2px solid #e8e8e8;
+            margin-bottom: 16px;
+        }
+        
+        .swagger-ui .renderedMarkdown p {
+            line-height: 1.6;
+        }
+        
+        /* Dark mode support */
+        @media (prefers-color-scheme: dark) {
+            .swagger-ui .opblock {
+                background: #2d2d2d;
+                border-color: #3b3b3b;
+            }
+            
+            .swagger-ui .opblock-tag {
+                color: #e8e8e8;
+                border-bottom-color: #3b3b3b;
+            }
+            
+            .swagger-ui .info .title {
+                color: #e8e8e8;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div id="swagger-ui"></div>
+    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui-standalone-preset.js"></script>
+    <script>
+        window.onload = function() {
+            // Use current browser location for API calls
+            const currentUrl = window.location.protocol + '//' + window.location.host + '/api';
+            
+            const ui = SwaggerUIBundle({
+                url: '/api/openapi',
+                dom_id: '#swagger-ui',
+                deepLinking: true,
+                presets: [
+                    SwaggerUIBundle.presets.apis,
+                    SwaggerUIStandalonePreset
+                ],
+                plugins: [
+                    SwaggerUIBundle.plugins.DownloadUrl
+                ],
+                layout: "StandaloneLayout",
+                tryItOutEnabled: true,
+                filter: true,
+                displayRequestDuration: true,
+                displayOperationId: false,
+                persistAuthorization: true,
+                validatorUrl: null,
+                syntaxHighlight: {
+                    activate: true,
+                    theme: "monokai"
+                },
+                defaultModelsExpandDepth: 1,
+                defaultModelExpandDepth: 2,
+                docExpansion: "list",
+                showExtensions: true,
+                showCommonExtensions: true,
+                tagsSorter: "alpha",
+                operationsSorter: "alpha",
+                // Override servers after spec loads
+                onComplete: function() {
+                    // Update the servers in the loaded spec
+                    ui.specActions.updateSpec(
+                        JSON.stringify({
+                            ...ui.specSelectors.specJson().toJS(),
+                            servers: [
+                                {
+                                    url: currentUrl,
+                                    description: "Current host (" + window.location.host + ")"
+                                }
+                            ]
+                        })
+                    );
+                }
+            });
+            
+            window.ui = ui;
+        };
+    </script>
+</body>
+</html>
