Redesign SignalR connection UI with toggle button

Replaces status label and separate Connect/Disconnect buttons with a single toggle button in SwaggerUI. Updates event log panel to use the same pattern. Removes old status CSS, adds new button styles matching SwaggerUI's Execute button. Adjusts connection bar layout for compactness. Updates documentation and integration tests to reflect the new UI. Adds doc maintenance note to copilot-instructions.md.

Author: icnocop

.github/copilot-instructions.md

@@ -87,3 +87,6 @@ Leverage ASP.NET Core built-in support:
 - **SwaggerUI component wrapping** — Props in `wrapComponents` may be **plain JS objects/arrays OR ImmutableJS** structures depending on the component and SwaggerUI version. Always use defensive access: `val.get ? val.get(0) : val[0]` for lists, `val.size != null ? val.size : val.length` for counts. The `parameters` component receives `pathMethod` (array/List) and `parameters` (ImmutableList). The "No parameters" section is hidden for SignalR operations since hub methods use request body, not URL parameters.
 - **SwaggerUI form-urlencoded** values are wrapped as `{fieldName: {value: "val", errors: []}}` — the JS plugin unwraps these and coerces types (string→number/boolean).
 - **Playwright tests** require browser binaries installed separately; they are excluded from CI via `[TestCategory("Playwright")]`.
+
+### Documentation Maintenance
+- **README.md** is the primary user-facing documentation. When making changes to features, configuration options, UI behavior, CSS styling, or public API surface, always review and update `README.md` to keep it in sync with the implementation.

README.md

@@ -20,9 +20,8 @@ OpenAPI 3.1 specification generation and SwaggerUI support for ASP.NET Core Sign
 - Security scheme detection from `[Authorize]` / `[AllowAnonymous]`
 - JWT Bearer token support in SwaggerUI (header or query string)
 - Custom HTTP headers (static or user-enterable via SwaggerUI Authorize dialog)
-- Connection status indicator with automatic reconnection handling
+- Per-hub Connect / Disconnect toggle button with automatic reconnection handling
 - Automatic credential change detection with transparent reconnection
-- Per-hub Connect / Disconnect buttons in SwaggerUI
 - Form-urlencoded input mode for primitive and flat object parameters
 - Multiple named request/response examples via custom attributes
 - Enum schema generation (integer or string based on `JsonStringEnumConverter`)
@@ -143,22 +142,20 @@ When the stream completes, the state changes to `"completed"`. If an error occur
 
 Client events (from `Hub<TClient>` interface methods) appear as **EVENT** operations. When you expand one, an event log panel shows:
 
-- **Connection status**: Connected / Disconnected indicator
-- **Connect & Listen**: Button to establish hub connection and start receiving events
+- **Connect & Listen**: Toggle button to establish hub connection and start receiving events (shows "Connected" when active)
 - **Event log**: Real-time list of received events with timestamps and JSON payloads
 - **Clear Log**: Button to reset the event history
 
 Events are automatically subscribed when connecting to a hub via any invoke or stream operation.
 
 ### Connection Management
 
-Each hub tag section in SwaggerUI displays a connection control bar showing the current connection status with **Connect** and **Disconnect** buttons.
+Each hub tag section in SwaggerUI displays a connection control bar with a single toggle button:
 
-| Status | Description |
-|--------|-------------|
-| **Connected** | Hub connection is active; a Disconnect button is available |
-| **Disconnected** | No active connection; a Connect button is available |
-| **Connecting…** | Connection is being established or reconnecting |
+| Button State | Description |
+|--------------|-------------|
+| **Connect** | No active connection; click to connect |
+| **Disconnect** | Hub connection is active; click to disconnect |
 
 **Auto-connect on Execute**: Clicking Execute on any hub method automatically connects if not already connected — you do not need to click Connect first.
 

samples/SignalR.OpenApi.Sample/Properties/launchSettings.json

@@ -6,8 +6,7 @@
       "launchUrl": "signalr-swagger/",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-      },
-      "applicationUrl": "https://localhost:57862;http://localhost:57863"
+      }
     }
   }
-}
+}

src/SignalR.OpenApi.SwaggerUi/Resources/signalr-openapi-plugin.js

@@ -600,33 +600,29 @@ var SignalROpenApiPlugin = function (system) {
 
     var showConnecting = isConnecting || isManualConnecting;
 
-    var statusClass = isConnected
-      ? "signalr-status--connected"
-      : showConnecting
-        ? "signalr-status--connecting"
-        : "signalr-status--disconnected";
-
-    var statusText = isConnected
-      ? "Connected"
-      : showConnecting
-        ? "Connecting\u2026"
-        : "Disconnected";
+    var buttonClass = isConnected
+      ? "btn signalr-disconnect-btn"
+      : "btn signalr-connect-btn";
+
+    var buttonText = isConnected
+      ? "Disconnect"
+      : "Connect";
+
+    var handleClick = isConnected
+      ? handleDisconnect
+      : !showConnecting
+        ? handleConnect
+        : undefined;
 
     return React.createElement("div", {
       className: "signalr-hub-connection-bar",
       onClick: function (e) { e.stopPropagation(); },
     },
-      React.createElement("span", {
-        className: "signalr-status " + statusClass,
-      }, statusText),
-      !isConnected && !showConnecting && React.createElement("button", {
-        className: "btn signalr-connect-btn",
-        onClick: handleConnect,
-      }, "Connect"),
-      isConnected && React.createElement("button", {
-        className: "btn signalr-disconnect-btn",
-        onClick: handleDisconnect,
-      }, "Disconnect")
+      React.createElement("button", {
+        className: buttonClass,
+        onClick: handleClick,
+        disabled: showConnecting,
+      }, buttonText)
     );
   }
 
@@ -682,14 +678,11 @@ var SignalROpenApiPlugin = function (system) {
     return React.createElement("div", { className: "opblock-body" },
       React.createElement("div", { className: "signalr-event-panel", style: { padding: "10px 20px" } },
         React.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "10px" } },
-          React.createElement("span", {
-            className: "signalr-status " + (isConnected ? "signalr-status--connected" : "signalr-status--disconnected"),
-          }, isConnected ? "Connected" : "Disconnected"),
-          !isConnected && React.createElement("button", {
-            className: "btn",
-            style: { marginLeft: "10px", fontSize: "12px", padding: "4px 10px" },
-            onClick: connectAndListen,
-          }, "Connect & Listen"),
+          React.createElement("button", {
+            className: "btn " + (isConnected ? "signalr-disconnect-btn" : "signalr-connect-btn"),
+            onClick: isConnected ? undefined : connectAndListen,
+            disabled: isConnected,
+          }, isConnected ? "Connected" : "Connect & Listen"),
           logs.length > 0 && React.createElement("button", {
             className: "btn",
             style: { marginLeft: "10px", fontSize: "12px", padding: "4px 10px" },

src/SignalR.OpenApi.SwaggerUi/Resources/signalr-openapi.css

@@ -17,34 +17,41 @@
   background: #61affe;
 }
 
-/* SignalR connection status indicator */
-.signalr-status {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: 3px;
-  font-size: 12px;
-  font-weight: 700;
-  margin-left: 8px;
+/* SignalR connect/disconnect buttons styled like SwaggerUI Execute */
+.signalr-connect-btn,
+.signalr-disconnect-btn {
+  font-size: 14px !important;
+  font-weight: 700 !important;
+  padding: 5px 23px !important;
+  border: 2px solid !important;
+  border-radius: 4px !important;
+  cursor: pointer !important;
+  font-family: sans-serif !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
 }
 
-.signalr-status--connected {
-  background: #49cc90;
-  color: #fff;
+/* Connect: matches the green Execute / Invoke style */
+.signalr-connect-btn {
+  background: #fff !important;
+  color: #49cc90 !important;
+  border-color: #49cc90 !important;
 }
 
-.signalr-status--disconnected {
-  background: #f93e3e;
-  color: #fff;
+.signalr-connect-btn:hover {
+  background: #49cc90 !important;
+  color: #fff !important;
 }
 
-.signalr-status--connecting {
-  background: #fca130;
-  color: #fff;
+/* Disconnect: red variant */
+.signalr-disconnect-btn {
+  background: #fff !important;
+  color: #f93e3e !important;
+  border-color: #f93e3e !important;
 }
 
-.signalr-status--reconnecting {
-  background: #fca130;
-  color: #fff;
+.signalr-disconnect-btn:hover {
+  background: #f93e3e !important;
+  color: #fff !important;
 }
 
 /* Stop Stream button styling */
@@ -93,33 +100,9 @@
 .signalr-hub-connection-bar {
   display: flex;
   align-items: center;
-  padding: 6px 20px;
+  padding: 6px 5px;
   background: #fafafa;
   border-bottom: 1px solid #e8e8e8;
   font-size: 13px;
   gap: 8px;
 }
-
-.signalr-connect-btn {
-  font-size: 12px !important;
-  padding: 3px 10px !important;
-  background: #49cc90 !important;
-  color: #fff !important;
-  border-color: #49cc90 !important;
-}
-
-.signalr-connect-btn:hover {
-  background: #3bb878 !important;
-}
-
-.signalr-disconnect-btn {
-  font-size: 12px !important;
-  padding: 3px 10px !important;
-  background: #f93e3e !important;
-  color: #fff !important;
-  border-color: #f93e3e !important;
-}
-
-.signalr-disconnect-btn:hover {
-  background: #e02020 !important;
-}

test/SignalR.OpenApi.Tests/SwaggerUiIntegrationTests.cs

@@ -222,7 +222,7 @@ public async Task EmbeddedResources_ServesCss()
 
         Assert.AreEqual(System.Net.HttpStatusCode.OK, response.StatusCode);
         var content = await response.Content.ReadAsStringAsync();
-        Assert.IsTrue(content.Contains("signalr-status"));
+        Assert.IsTrue(content.Contains("signalr-connect-btn"));
     }
 
     /// <summary>