uilint-react 0.1.31 → 0.1.33

package/dist/{chunk-M3H56XIZ.js → chunk-MO4NS6EG.js}

@@ -270,43 +270,25 @@ function getDataLocFromId(id) {
   }
   return null;
 }
-async function scanFileForIssues(sourceFile) {
+async function scanFileForIssues(sourceFile, store) {
   if (sourceFile.elements.length === 0) {
     return { issues: [] };
   }
   const filePath = sourceFile.path;
-  try {
-    const sourceResponse = await fetch(
-      `/api/.uilint/source?path=${encodeURIComponent(filePath)}`
-    );
-    if (!sourceResponse.ok) {
+  let issues = [];
+  if (store.wsConnected && store.wsConnection) {
+    try {
+      issues = await store.requestFileLint(filePath);
+      console.log("[UILint] ESLint issues:", issues);
+    } catch (err) {
+      console.warn("[UILint] WebSocket lint failed:", err);
       return { issues: [], error: true };
     }
-    const sourceData = await sourceResponse.json();
-    const dataLocs = [];
-    for (const el of sourceFile.elements) {
-      const dataLoc = getDataLocFromId(el.id);
-      if (dataLoc) {
-        dataLocs.push(dataLoc);
-      }
-    }
-    const analyzeResponse = await fetch("/api/.uilint/analyze", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        sourceCode: sourceData.content,
-        filePath: sourceData.relativePath || filePath,
-        dataLocs
-      })
-    });
-    if (!analyzeResponse.ok) {
-      return { issues: [], error: true };
-    }
-    const result = await analyzeResponse.json();
-    return { issues: result.issues || [] };
-  } catch {
+  } else {
+    console.warn("[UILint] WebSocket not connected");
     return { issues: [], error: true };
   }
+  return { issues };
 }
 function distributeIssuesToElements(issues, elements, updateElementIssue, hasError) {
   const dataLocToElementId = /* @__PURE__ */ new Map();
@@ -336,6 +318,19 @@ function distributeIssuesToElements(issues, elements, updateElementIssue, hasErr
     });
   }
 }
+var DEFAULT_WS_URL = "ws://localhost:9234";
+var MAX_RECONNECT_ATTEMPTS = 5;
+var RECONNECT_BASE_DELAY = 1e3;
+var pendingRequests = /* @__PURE__ */ new Map();
+var WS_REQUEST_TIMEOUT_MS = 12e4;
+function makeRequestId() {
+  try {
+    const c = globalThis.crypto;
+    if (c?.randomUUID) return c.randomUUID();
+  } catch {
+  }
+  return `req_${Date.now()}_${Math.random().toString(16).slice(2)}`;
+}
 var useUILintStore = create()((set, get) => ({
   // ============ Settings ============
   settings: DEFAULT_SETTINGS,
@@ -362,31 +357,6 @@ var useUILintStore = create()((set, get) => ({
   // ============ Inspection ============
   inspectedElement: null,
   setInspectedElement: (el) => set({ inspectedElement: el }),
-  // ============ Manual Scan (InspectionPanel) ============
-  manualScanCache: /* @__PURE__ */ new Map(),
-  upsertManualScan: (key, patch) => set((state) => {
-    const next = new Map(state.manualScanCache);
-    const existing = next.get(key);
-    const base = existing ?? {
-      key,
-      status: "idle",
-      issues: [],
-      updatedAt: Date.now()
-    };
-    next.set(key, {
-      ...base,
-      ...patch,
-      key,
-      updatedAt: Date.now()
-    });
-    return { manualScanCache: next };
-  }),
-  clearManualScan: (key) => set((state) => {
-    if (!state.manualScanCache.has(key)) return state;
-    const next = new Map(state.manualScanCache);
-    next.delete(key);
-    return { manualScanCache: next };
-  }),
   // ============ Auto-Scan ============
   autoScanState: DEFAULT_AUTO_SCAN_STATE,
   elementIssuesCache: /* @__PURE__ */ new Map(),
@@ -492,13 +462,16 @@ var useUILintStore = create()((set, get) => ({
         });
       }
       await new Promise((resolve) => requestAnimationFrame(resolve));
-      const { issues, error } = await scanFileForIssues(sourceFile);
+      const { issues, error } = await scanFileForIssues(sourceFile, get());
       distributeIssuesToElements(
         issues,
         sourceFile.elements,
         get().updateElementIssue,
         error ?? false
       );
+      if (get().wsConnected && get().wsConnection) {
+        get().subscribeToFile(sourceFile.path);
+      }
       processedElements += sourceFile.elements.length;
       await new Promise((resolve) => requestAnimationFrame(resolve));
     }
@@ -510,6 +483,256 @@ var useUILintStore = create()((set, get) => ({
         currentIndex: elements.length
       }
     });
+  },
+  // ============ WebSocket ============
+  wsConnection: null,
+  wsConnected: false,
+  wsUrl: DEFAULT_WS_URL,
+  wsReconnectAttempts: 0,
+  eslintIssuesCache: /* @__PURE__ */ new Map(),
+  wsProgressPhase: /* @__PURE__ */ new Map(),
+  wsLastActivity: null,
+  wsRecentResults: [],
+  connectWebSocket: (url) => {
+    const targetUrl = url || get().wsUrl;
+    const existing = get().wsConnection;
+    if (existing && existing.readyState !== WebSocket.CLOSED) {
+      existing.close();
+    }
+    if (typeof WebSocket === "undefined") {
+      console.warn("[UILint] WebSocket not available in this environment");
+      return;
+    }
+    try {
+      const ws = new WebSocket(targetUrl);
+      ws.onopen = () => {
+        console.log("[UILint] WebSocket connected to", targetUrl);
+        set({
+          wsConnected: true,
+          wsReconnectAttempts: 0,
+          wsUrl: targetUrl
+        });
+      };
+      ws.onclose = () => {
+        console.log("[UILint] WebSocket disconnected");
+        set({ wsConnected: false, wsConnection: null });
+        const attempts = get().wsReconnectAttempts;
+        if (attempts < MAX_RECONNECT_ATTEMPTS) {
+          const delay = RECONNECT_BASE_DELAY * Math.pow(2, attempts);
+          console.log(
+            `[UILint] Reconnecting in ${delay}ms (attempt ${attempts + 1})`
+          );
+          setTimeout(() => {
+            set({ wsReconnectAttempts: attempts + 1 });
+            get()._reconnectWebSocket();
+          }, delay);
+        }
+      };
+      ws.onerror = (error) => {
+        console.error("[UILint] WebSocket error:", error);
+      };
+      ws.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          get()._handleWsMessage(data);
+        } catch (err) {
+          console.error("[UILint] Failed to parse WebSocket message:", err);
+        }
+      };
+      set({ wsConnection: ws, wsUrl: targetUrl });
+    } catch (err) {
+      console.error("[UILint] Failed to create WebSocket:", err);
+    }
+  },
+  disconnectWebSocket: () => {
+    const ws = get().wsConnection;
+    if (ws) {
+      ws.close();
+      set({
+        wsConnection: null,
+        wsConnected: false,
+        wsReconnectAttempts: MAX_RECONNECT_ATTEMPTS
+      });
+    }
+  },
+  requestFileLint: async (filePath) => {
+    const { wsConnection, wsConnected, eslintIssuesCache } = get();
+    const cached = eslintIssuesCache.get(filePath);
+    if (cached) {
+      console.log("[UILint] using cached issues for", filePath);
+      return cached;
+    }
+    if (!wsConnected || !wsConnection) {
+      console.log("[UILint] WebSocket not connected, using HTTP fallback");
+      return [];
+    }
+    return new Promise((resolve, reject) => {
+      const requestId = makeRequestId();
+      pendingRequests.set(requestId, { resolve, reject });
+      const message = {
+        type: "lint:file",
+        filePath,
+        requestId
+      };
+      wsConnection.send(JSON.stringify(message));
+      setTimeout(() => {
+        if (pendingRequests.has(requestId)) {
+          pendingRequests.delete(requestId);
+          reject(new Error("Request timed out"));
+        }
+      }, WS_REQUEST_TIMEOUT_MS);
+    });
+  },
+  requestElementLint: async (filePath, dataLoc) => {
+    const { wsConnection, wsConnected } = get();
+    if (!wsConnected || !wsConnection) {
+      console.log("[UILint] WebSocket not connected, using HTTP fallback");
+      return [];
+    }
+    return new Promise((resolve, reject) => {
+      const requestId = makeRequestId();
+      pendingRequests.set(requestId, { resolve, reject });
+      const message = {
+        type: "lint:element",
+        filePath,
+        dataLoc,
+        requestId
+      };
+      wsConnection.send(JSON.stringify(message));
+      setTimeout(() => {
+        if (pendingRequests.has(requestId)) {
+          pendingRequests.delete(requestId);
+          reject(new Error("Request timed out"));
+        }
+      }, WS_REQUEST_TIMEOUT_MS);
+    });
+  },
+  subscribeToFile: (filePath) => {
+    const { wsConnection, wsConnected } = get();
+    if (!wsConnected || !wsConnection) return;
+    const message = { type: "subscribe:file", filePath };
+    wsConnection.send(JSON.stringify(message));
+  },
+  invalidateCache: (filePath) => {
+    const { wsConnection, wsConnected } = get();
+    if (filePath) {
+      set((state) => {
+        const next = new Map(state.eslintIssuesCache);
+        next.delete(filePath);
+        return { eslintIssuesCache: next };
+      });
+    } else {
+      set({ eslintIssuesCache: /* @__PURE__ */ new Map() });
+    }
+    if (wsConnected && wsConnection) {
+      const message = {
+        type: "cache:invalidate",
+        filePath
+      };
+      wsConnection.send(JSON.stringify(message));
+    }
+  },
+  _handleWsMessage: (data) => {
+    switch (data.type) {
+      case "lint:result": {
+        const { filePath, issues, requestId } = data;
+        set((state2) => {
+          const next = new Map(state2.eslintIssuesCache);
+          next.set(filePath, issues);
+          return { eslintIssuesCache: next };
+        });
+        const state = get();
+        if (state.autoScanState.status !== "idle") {
+          const sourceFiles = groupBySourceFile(state.autoScanState.elements);
+          const sf = sourceFiles.find((s) => s.path === filePath);
+          if (sf) {
+            distributeIssuesToElements(
+              issues,
+              sf.elements,
+              state.updateElementIssue,
+              false
+            );
+          }
+        }
+        set((state2) => {
+          const next = new Map(state2.wsProgressPhase);
+          next.delete(filePath);
+          return { wsProgressPhase: next };
+        });
+        set((state2) => {
+          const next = [
+            { filePath, issueCount: issues.length, updatedAt: Date.now() },
+            ...state2.wsRecentResults.filter((r) => r.filePath !== filePath)
+          ].slice(0, 8);
+          return { wsRecentResults: next };
+        });
+        set({
+          wsLastActivity: {
+            filePath,
+            phase: `Done (${issues.length} issues)`,
+            updatedAt: Date.now()
+          }
+        });
+        if (requestId) {
+          const pending = pendingRequests.get(requestId);
+          if (pending) {
+            pending.resolve(issues);
+            pendingRequests.delete(requestId);
+          }
+        }
+        break;
+      }
+      case "lint:progress": {
+        const { filePath, phase } = data;
+        set((state) => {
+          const next = new Map(state.wsProgressPhase);
+          next.set(filePath, phase);
+          return {
+            wsProgressPhase: next,
+            wsLastActivity: { filePath, phase, updatedAt: Date.now() }
+          };
+        });
+        break;
+      }
+      case "file:changed": {
+        const { filePath } = data;
+        set((state2) => {
+          const next = new Map(state2.eslintIssuesCache);
+          next.delete(filePath);
+          return { eslintIssuesCache: next };
+        });
+        const state = get();
+        if (state.autoScanState.status !== "idle") {
+          const sourceFiles = groupBySourceFile(state.autoScanState.elements);
+          const sf = sourceFiles.find((s) => s.path === filePath);
+          if (sf) {
+            for (const el of sf.elements) {
+              const existing = state.elementIssuesCache.get(el.id);
+              state.updateElementIssue(el.id, {
+                elementId: el.id,
+                issues: existing?.issues || [],
+                status: "scanning"
+              });
+            }
+            state.requestFileLint(filePath).catch(() => {
+              for (const el of sf.elements) {
+                const existing = state.elementIssuesCache.get(el.id);
+                state.updateElementIssue(el.id, {
+                  elementId: el.id,
+                  issues: existing?.issues || [],
+                  status: "error"
+                });
+              }
+            });
+          }
+        }
+        break;
+      }
+    }
+  },
+  _reconnectWebSocket: () => {
+    const { wsUrl } = get();
+    get().connectWebSocket(wsUrl);
   }
 }));
 function useEffectiveLocatorTarget() {
@@ -579,6 +802,12 @@ function UILintProvider({
   const pauseAutoScan = useUILintStore((s) => s.pauseAutoScan);
   const resumeAutoScan = useUILintStore((s) => s.resumeAutoScan);
   const stopAutoScan = useUILintStore((s) => s.stopAutoScan);
+  const connectWebSocket = useUILintStore(
+    (s) => s.connectWebSocket
+  );
+  const disconnectWebSocket = useUILintStore(
+    (s) => s.disconnectWebSocket
+  );
   const effectiveLocatorTarget = useEffectiveLocatorTarget();
   const getLocatorTargetFromElement = useCallback(
     (element) => {
@@ -748,6 +977,14 @@ function UILintProvider({
   useEffect(() => {
     setIsMounted(true);
   }, []);
+  useEffect(() => {
+    if (!isBrowser() || !enabled) return;
+    if (!isMounted) return;
+    connectWebSocket();
+    return () => {
+      disconnectWebSocket();
+    };
+  }, [enabled, isMounted, connectWebSocket, disconnectWebSocket]);
   const wrappedStartAutoScan = useCallback(() => {
     startAutoScan(settings.hideNodeModules);
   }, [startAutoScan, settings.hideNodeModules]);
@@ -796,10 +1033,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-RD6BT3LL.js"),
-      import("./InspectionPanel-MUUDJ2BK.js"),
-      import("./LocatorOverlay-XJH5TE2J.js"),
-      import("./ElementBadges-BSTXYVB7.js")
+      import("./UILintToolbar-WNV5RS2L.js"),
+      import("./InspectionPanel-JNLWBL4D.js"),
+      import("./LocatorOverlay-6SAH7LN2.js"),
+      import("./ElementBadges-TBAUB3KM.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

package/dist/{chunk-OV5BPTNA.js → chunk-Z6PWYQGW.js}

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

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { GroupedSnapshot, Violation, DOMSnapshot, ExtractedStyles, AnalysisResult } from 'uilint-core';
+import { GroupedSnapshot, Violation, DOMSnapshot } from 'uilint-core';
 export { AnalysisResult, ConsistencyResult, DOMSnapshot, ElementRole, ElementSnapshot, ExtractedStyles, GroupedSnapshot, SerializedStyles, StyleGuide, StyleSnapshot, UILintIssue, Violation, ViolationCategory, ViolationSeverity, createEmptyStyleGuide, createStyleSummary, extractStylesFromDOM, generateStyleGuideFromStyles as generateStyleGuide, mergeStyleGuides, parseStyleGuide, serializeStyles } from 'uilint-core';
 
 /**
@@ -59,14 +59,18 @@ interface AutoScanState {
     elements: ScannedElement[];
 }
 /**
- * A single issue found during scanning
+ * ESLint issue from WebSocket server (uilint serve)
  */
-interface ScanIssue {
+interface ESLintIssue {
     /** Line number in source file */
-    line?: number;
+    line: number;
+    /** Column number */
+    column?: number;
     /** Issue description */
     message: string;
-    /** data-loc value to match to DOM element (format: path:line:column) */
+    /** ESLint rule ID (e.g., "uilint/semantic", "uilint/no-arbitrary-tailwind") */
+    ruleId?: string;
+    /** data-loc value to match to DOM element */
     dataLoc?: string;
 }
 /**
@@ -74,7 +78,8 @@ interface ScanIssue {
  */
 interface ElementIssue {
     elementId: string;
-    issues: ScanIssue[];
+    /** ESLint rule violations from uilint-eslint (including semantic rule) */
+    issues: ESLintIssue[];
     status: "pending" | "scanning" | "complete" | "error";
 }
 /**
@@ -361,30 +366,4 @@ declare function isJSDOM(): boolean;
  */
 declare function isNode(): boolean;
 
-/**
- * LLM client for browser environment
- * Uses uilint-core for prompts and wraps API calls
- */
-
-interface LLMClientOptions {
-    apiEndpoint?: string;
-    model?: string;
-}
-/**
- * Client for communicating with the LLM via API route (browser environment)
- */
-declare class LLMClient {
-    private apiEndpoint;
-    private model;
-    constructor(options?: LLMClientOptions);
-    /**
-     * Analyzes extracted styles and returns issues
-     */
-    analyze(styles: ExtractedStyles, styleGuide: string | null): Promise<AnalysisResult>;
-    /**
-     * Generates a style guide from detected styles
-     */
-    generateStyleGuide(styles: ExtractedStyles): Promise<string | null>;
-}
-
-export { type CachedSource, type ComponentInfo, ConsistencyHighlighter, DATA_UILINT_ID, DEFAULT_SETTINGS, FILE_COLORS, type InspectedElement, InspectionPanel, LLMClient, LocatorOverlay, type LocatorTarget, type ScannedElement, type SourceApiResponse, type SourceFile, type SourceLocation, type UILintContextValue, UILintProvider, type UILintProviderProps, type UILintSettings, UILintToolbar, buildEditorUrl, cleanupDataAttributes, cleanupDataElements, clearSourceCache, createSnapshot, fetchSource, fetchSourceWithContext, getCachedSource, getComponentStack, getDebugOwner, getDebugSource, getDisplayName, getElementById, getElementBySnapshotId, getFiberFromElement, groupBySourceFile, isBrowser, isJSDOM, isNode, isNodeModulesPath, prefetchSources, scanDOM, scanDOMForSources, updateElementRects, useUILintContext };
+export { type CachedSource, type ComponentInfo, ConsistencyHighlighter, DATA_UILINT_ID, DEFAULT_SETTINGS, FILE_COLORS, type InspectedElement, InspectionPanel, LocatorOverlay, type LocatorTarget, type ScannedElement, type SourceApiResponse, type SourceFile, type SourceLocation, type UILintContextValue, UILintProvider, type UILintProviderProps, type UILintSettings, UILintToolbar, buildEditorUrl, cleanupDataAttributes, cleanupDataElements, clearSourceCache, createSnapshot, fetchSource, fetchSourceWithContext, getCachedSource, getComponentStack, getDebugOwner, getDebugSource, getDisplayName, getElementById, getElementBySnapshotId, getFiberFromElement, groupBySourceFile, isBrowser, isJSDOM, isNode, isNodeModulesPath, prefetchSources, scanDOM, scanDOMForSources, updateElementRects, useUILintContext };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-GLJBGFZK.js";
+} from "./chunk-HTNIKCEM.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-XAAIRXB4.js";
+} from "./chunk-JBBUE3Y5.js";
 import {
   LocatorOverlay
-} from "./chunk-OV5BPTNA.js";
+} from "./chunk-Z6PWYQGW.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-M3H56XIZ.js";
+} from "./chunk-MO4NS6EG.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";
@@ -439,85 +439,8 @@ function isNode() {
 import {
   extractStylesFromDOM as extractStylesFromDOM2,
   serializeStyles as serializeStyles2,
-  createStyleSummary as createStyleSummary3
+  createStyleSummary as createStyleSummary2
 } from "uilint-core";
-
-// src/analyzer/llm-client.ts
-import {
-  createStyleSummary as createStyleSummary2,
-  buildAnalysisPrompt,
-  buildStyleGuidePrompt,
-  UILINT_DEFAULT_OLLAMA_MODEL
-} from "uilint-core";
-var DEFAULT_API_ENDPOINT = "/api/.uilint/analyze";
-var LLMClient = class {
-  apiEndpoint;
-  model;
-  constructor(options = {}) {
-    this.apiEndpoint = options.apiEndpoint || DEFAULT_API_ENDPOINT;
-    this.model = options.model || UILINT_DEFAULT_OLLAMA_MODEL;
-  }
-  /**
-   * Analyzes extracted styles and returns issues
-   */
-  async analyze(styles, styleGuide) {
-    const startTime = Date.now();
-    const styleSummary = createStyleSummary2(styles);
-    try {
-      const response = await fetch(this.apiEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          styleSummary,
-          styleGuide,
-          model: this.model
-        })
-      });
-      if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
-      }
-      const data = await response.json();
-      return {
-        issues: data.issues || [],
-        suggestedStyleGuide: data.suggestedStyleGuide,
-        analysisTime: Date.now() - startTime
-      };
-    } catch (error) {
-      console.error("[UILint] Analysis failed:", error);
-      return {
-        issues: [],
-        analysisTime: Date.now() - startTime
-      };
-    }
-  }
-  /**
-   * Generates a style guide from detected styles
-   */
-  async generateStyleGuide(styles) {
-    const styleSummary = createStyleSummary2(styles);
-    try {
-      const response = await fetch(this.apiEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          styleSummary,
-          generateGuide: true,
-          model: this.model
-        })
-      });
-      if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
-      }
-      const data = await response.json();
-      return data.styleGuide || null;
-    } catch (error) {
-      console.error("[UILint] Style guide generation failed:", error);
-      return null;
-    }
-  }
-};
-
-// src/index.ts
 import { parseStyleGuide } from "uilint-core";
 import { generateStyleGuideFromStyles } from "uilint-core";
 import { createEmptyStyleGuide, mergeStyleGuides } from "uilint-core";
@@ -527,7 +450,6 @@ export {
   DEFAULT_SETTINGS,
   FILE_COLORS,
   InspectionPanel,
-  LLMClient,
   LocatorOverlay,
   UILintProvider,
   UILintToolbar,
@@ -537,7 +459,7 @@ export {
   clearSourceCache,
   createEmptyStyleGuide,
   createSnapshot,
-  createStyleSummary3 as createStyleSummary,
+  createStyleSummary2 as createStyleSummary,
   extractStylesFromDOM2 as extractStylesFromDOM,
   fetchSource,
   fetchSourceWithContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.31",
+  "version": "0.1.33",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.31",
+    "uilint-core": "^0.1.33",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {