uilint-react 0.1.31 → 0.1.33

package/dist/{ElementBadges-BSTXYVB7.js → ElementBadges-TBAUB3KM.js}

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-M3H56XIZ.js";
+} from "./chunk-MO4NS6EG.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";

package/dist/{InspectionPanel-MUUDJ2BK.js → InspectionPanel-JNLWBL4D.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-XAAIRXB4.js";
-import "./chunk-M3H56XIZ.js";
+} from "./chunk-JBBUE3Y5.js";
+import "./chunk-MO4NS6EG.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-XJH5TE2J.js → LocatorOverlay-6SAH7LN2.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-OV5BPTNA.js";
-import "./chunk-M3H56XIZ.js";
+} from "./chunk-Z6PWYQGW.js";
+import "./chunk-MO4NS6EG.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-RD6BT3LL.js → UILintToolbar-WNV5RS2L.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-GLJBGFZK.js";
-import "./chunk-M3H56XIZ.js";
+} from "./chunk-HTNIKCEM.js";
+import "./chunk-MO4NS6EG.js";
 export {
   UILintToolbar
 };

package/dist/{chunk-GLJBGFZK.js → chunk-HTNIKCEM.js}

@@ -1,7 +1,8 @@
 "use client";
 import {
-  useUILintContext
-} from "./chunk-M3H56XIZ.js";
+  useUILintContext,
+  useUILintStore
+} from "./chunk-MO4NS6EG.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState, useRef, useEffect } from "react";
@@ -141,6 +142,16 @@ function SettingsPopover({
     resumeAutoScan,
     stopAutoScan
   } = useUILintContext();
+  const wsConnected = useUILintStore((s) => s.wsConnected);
+  const wsUrl = useUILintStore((s) => s.wsUrl);
+  const wsLastActivity = useUILintStore((s) => s.wsLastActivity);
+  const wsRecentResults = useUILintStore((s) => s.wsRecentResults);
+  const connectWebSocket = useUILintStore(
+    (s) => s.connectWebSocket
+  );
+  const disconnectWebSocket = useUILintStore(
+    (s) => s.disconnectWebSocket
+  );
   const isScanning = autoScanState.status === "scanning";
   const isPaused = autoScanState.status === "paused";
   const isComplete = autoScanState.status === "complete";
@@ -176,6 +187,212 @@ function SettingsPopover({
             children: "UILint Settings"
           }
         ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              padding: "10px 12px",
+              borderRadius: "10px",
+              border: `1px solid ${STYLES.border}`,
+              backgroundColor: "rgba(31, 41, 55, 0.65)",
+              marginBottom: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    gap: "10px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
+                      /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: "Server" }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "12px",
+                            fontWeight: 600,
+                            color: wsConnected ? "#10B981" : "#EF4444"
+                          },
+                          children: wsConnected ? "Connected" : "Disconnected"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => connectWebSocket(wsUrl),
+                          style: {
+                            padding: "6px 10px",
+                            borderRadius: "8px",
+                            border: `1px solid ${STYLES.border}`,
+                            backgroundColor: "transparent",
+                            color: STYLES.text,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            cursor: "pointer"
+                          },
+                          title: "Reconnect to WebSocket server",
+                          children: "Reconnect"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          onClick: () => disconnectWebSocket(),
+                          style: {
+                            padding: "6px 10px",
+                            borderRadius: "8px",
+                            border: `1px solid ${STYLES.border}`,
+                            backgroundColor: "transparent",
+                            color: STYLES.textMuted,
+                            fontSize: "11px",
+                            fontWeight: 600,
+                            cursor: "pointer"
+                          },
+                          title: "Disconnect from WebSocket server",
+                          children: "Disconnect"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    marginTop: "8px",
+                    fontSize: "10px",
+                    color: STYLES.textMuted,
+                    fontFamily: STYLES.fontMono,
+                    wordBreak: "break-all"
+                  },
+                  children: wsUrl
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              marginTop: "10px",
+              padding: "10px 12px",
+              borderRadius: "10px",
+              border: `1px solid ${STYLES.border}`,
+              backgroundColor: "rgba(31, 41, 55, 0.45)",
+              marginBottom: "12px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    marginBottom: "8px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: { fontSize: "11px", fontWeight: 700, color: STYLES.text },
+                        children: "Live lint"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: "10px", color: STYLES.textMuted }, children: wsConnected ? "Streaming" : "Offline" })
+                  ]
+                }
+              ),
+              wsLastActivity ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+                /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: wsLastActivity.phase }),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      fontFamily: STYLES.fontMono,
+                      color: STYLES.text,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    title: wsLastActivity.filePath,
+                    children: (wsLastActivity.filePath.split("/").pop() || wsLastActivity.filePath) ?? ""
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: "No activity yet" }),
+              wsRecentResults.length > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    marginTop: "10px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "6px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: "10px", color: STYLES.textMuted }, children: "Recent results" }),
+                    wsRecentResults.slice(0, 5).map((r) => {
+                      const file = r.filePath.split("/").pop() || r.filePath;
+                      const color = r.issueCount === 0 ? "#10B981" : r.issueCount <= 2 ? "#F59E0B" : "#EF4444";
+                      return /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            gap: "10px",
+                            fontSize: "10px",
+                            fontFamily: STYLES.fontMono,
+                            color: STYLES.textMuted
+                          },
+                          title: r.filePath,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                style: {
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  whiteSpace: "nowrap",
+                                  flex: 1
+                                },
+                                children: file
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                style: {
+                                  minWidth: "34px",
+                                  textAlign: "right",
+                                  fontWeight: 700,
+                                  color
+                                },
+                                children: r.issueCount
+                              }
+                            )
+                          ]
+                        },
+                        r.filePath
+                      );
+                    })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxs(
           "div",
           {