diff --git a/client/css/styles.css b/client/css/styles.css
index 9592052..968d37f 100644
--- a/client/css/styles.css
+++ b/client/css/styles.css
@@ -140,3 +140,14 @@ textarea {
#connectionStatus.connected { background: #d4edda; border-color: #28a745; color: #155724; }
#connectionStatus.disconnected { background: #f8d7da; border-color: #dc3545; color: #721c24; }
+
+/* ---- Connection test status ------------------------------- */
+#connectionTestStatus {
+ font-size: 13px;
+ padding: 4px 8px;
+ border-radius: 4px;
+}
+
+#connectionTestStatus.connection-testing { color: #856404; background: #fff3cd; }
+#connectionTestStatus.connection-success { color: #155724; background: #d4edda; }
+#connectionTestStatus.connection-error { color: #721c24; background: #f8d7da; }
diff --git a/client/index.html b/client/index.html
index b60951d..df52399 100644
--- a/client/index.html
+++ b/client/index.html
@@ -90,13 +90,15 @@
+
+
+
diff --git a/client/js/app.js b/client/js/app.js
index 57e46d9..1a4907e 100644
--- a/client/js/app.js
+++ b/client/js/app.js
@@ -106,6 +106,17 @@ document.getElementById('btnImportJson').addEventListener('click', function () {
vscode.postMessage({ command: 'importJSON' });
});
+document.getElementById('btnTestConnection').addEventListener('click', function () {
+ const baseUrl = document.getElementById('baseUrlInput').value || '';
+ const model = document.getElementById('modelInput').value || '';
+ const statusEl = document.getElementById('connectionTestStatus');
+ if (statusEl) {
+ statusEl.textContent = 'Testing...';
+ statusEl.className = 'connection-testing';
+ }
+ vscode.postMessage({ command: 'testConnection', baseUrl: baseUrl, model: model });
+});
+
/* =============================================================
3. General helpers
============================================================= */
@@ -264,6 +275,14 @@ window.addEventListener('message', function (event) {
if (modelInput && message.LLMmodel) { modelInput.value = message.LLMmodel; }
}
+ if (message.command === 'connectionTestResult') {
+ const statusEl = document.getElementById('connectionTestStatus');
+ if (statusEl) {
+ statusEl.textContent = message.message;
+ statusEl.className = message.success ? 'connection-success' : 'connection-error';
+ }
+ }
+
if (message.command === 'leafSimilarities') {
renderSimilarities(message.node, message.similarities);
renderLizardMetrics(message.node);
diff --git a/media/webview.html b/media/webview.html
index a0b42b5..ddde021 100644
--- a/media/webview.html
+++ b/media/webview.html
@@ -143,6 +143,17 @@
.swatch.other {
background: var(--color-other);
}
+
+ /* Connection test status */
+ #connectionTestStatus {
+ font-size: 13px;
+ padding: 4px 8px;
+ border-radius: 4px;
+ }
+
+ #connectionTestStatus.connection-testing { color: #856404; background: #fff3cd; }
+ #connectionTestStatus.connection-success { color: #155724; background: #d4edda; }
+ #connectionTestStatus.connection-error { color: #721c24; background: #f8d7da; }
@@ -218,13 +229,15 @@
Code metrics
Prompts and outputs
-