uilint-react 0.1.32 → 0.1.33

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

@@ -272,53 +272,25 @@ function getDataLocFromId(id) {
 }
 async function scanFileForIssues(sourceFile, store) {
   if (sourceFile.elements.length === 0) {
-    return { issues: [], eslintIssues: [] };
+    return { issues: [] };
   }
   const filePath = sourceFile.path;
-  let eslintIssues = [];
-  let llmIssues = [];
+  let issues = [];
   if (store.wsConnected && store.wsConnection) {
     try {
-      eslintIssues = await store.requestFileLint(filePath);
+      issues = await store.requestFileLint(filePath);
+      console.log("[UILint] ESLint issues:", issues);
     } catch (err) {
-      console.warn("[UILint] WebSocket lint failed, will use HTTP:", err);
+      console.warn("[UILint] WebSocket lint failed:", err);
+      return { issues: [], error: true };
     }
+  } else {
+    console.warn("[UILint] WebSocket not connected");
+    return { issues: [], error: true };
   }
-  try {
-    const sourceResponse = await fetch(
-      `/api/.uilint/source?path=${encodeURIComponent(filePath)}`
-    );
-    if (!sourceResponse.ok) {
-      return { issues: [], eslintIssues, 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: [], eslintIssues, error: true };
-    }
-    const result = await analyzeResponse.json();
-    llmIssues = result.issues || [];
-  } catch {
-    return { issues: [], eslintIssues, error: true };
-  }
-  return { issues: llmIssues, eslintIssues };
+  return { issues };
 }
-function distributeIssuesToElements(issues, eslintIssues, elements, updateElementIssue, hasError) {
+function distributeIssuesToElements(issues, elements, updateElementIssue, hasError) {
   const dataLocToElementId = /* @__PURE__ */ new Map();
   for (const el of elements) {
     const dataLoc = getDataLocFromId(el.id);
@@ -337,24 +309,11 @@ function distributeIssuesToElements(issues, eslintIssues, elements, updateElemen
       }
     }
   }
-  const eslintByElement = /* @__PURE__ */ new Map();
-  for (const issue of eslintIssues) {
-    if (issue.dataLoc) {
-      const elementId = dataLocToElementId.get(issue.dataLoc);
-      if (elementId) {
-        const existing = eslintByElement.get(elementId) || [];
-        existing.push(issue);
-        eslintByElement.set(elementId, existing);
-      }
-    }
-  }
   for (const el of elements) {
     const elementIssues = issuesByElement.get(el.id) || [];
-    const elementEslintIssues = eslintByElement.get(el.id) || [];
     updateElementIssue(el.id, {
       elementId: el.id,
       issues: elementIssues,
-      eslintIssues: elementEslintIssues,
       status: hasError ? "error" : "complete"
     });
   }
@@ -363,6 +322,15 @@ 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,
@@ -389,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(),
@@ -519,14 +462,16 @@ var useUILintStore = create()((set, get) => ({
         });
       }
       await new Promise((resolve) => requestAnimationFrame(resolve));
-      const { issues, eslintIssues, error } = await scanFileForIssues(sourceFile, get());
+      const { issues, error } = await scanFileForIssues(sourceFile, get());
       distributeIssuesToElements(
         issues,
-        eslintIssues,
         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));
     }
@@ -546,6 +491,8 @@ var useUILintStore = create()((set, get) => ({
   wsReconnectAttempts: 0,
   eslintIssuesCache: /* @__PURE__ */ new Map(),
   wsProgressPhase: /* @__PURE__ */ new Map(),
+  wsLastActivity: null,
+  wsRecentResults: [],
   connectWebSocket: (url) => {
     const targetUrl = url || get().wsUrl;
     const existing = get().wsConnection;
@@ -572,7 +519,9 @@ var useUILintStore = create()((set, get) => ({
         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})`);
+          console.log(
+            `[UILint] Reconnecting in ${delay}ms (attempt ${attempts + 1})`
+          );
           setTimeout(() => {
             set({ wsReconnectAttempts: attempts + 1 });
             get()._reconnectWebSocket();
@@ -599,13 +548,18 @@ var useUILintStore = create()((set, get) => ({
     const ws = get().wsConnection;
     if (ws) {
       ws.close();
-      set({ wsConnection: null, wsConnected: false, wsReconnectAttempts: MAX_RECONNECT_ATTEMPTS });
+      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) {
@@ -613,16 +567,20 @@ var useUILintStore = create()((set, get) => ({
       return [];
     }
     return new Promise((resolve, reject) => {
-      const requestKey = `file:${filePath}`;
-      pendingRequests.set(requestKey, { resolve, reject });
-      const message = { type: "lint:file", filePath };
+      const requestId = makeRequestId();
+      pendingRequests.set(requestId, { resolve, reject });
+      const message = {
+        type: "lint:file",
+        filePath,
+        requestId
+      };
       wsConnection.send(JSON.stringify(message));
       setTimeout(() => {
-        if (pendingRequests.has(requestKey)) {
-          pendingRequests.delete(requestKey);
+        if (pendingRequests.has(requestId)) {
+          pendingRequests.delete(requestId);
           reject(new Error("Request timed out"));
         }
-      }, 3e4);
+      }, WS_REQUEST_TIMEOUT_MS);
     });
   },
   requestElementLint: async (filePath, dataLoc) => {
@@ -632,16 +590,21 @@ var useUILintStore = create()((set, get) => ({
       return [];
     }
     return new Promise((resolve, reject) => {
-      const requestKey = `element:${filePath}:${dataLoc}`;
-      pendingRequests.set(requestKey, { resolve, reject });
-      const message = { type: "lint:element", filePath, dataLoc };
+      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(requestKey)) {
-          pendingRequests.delete(requestKey);
+        if (pendingRequests.has(requestId)) {
+          pendingRequests.delete(requestId);
           reject(new Error("Request timed out"));
         }
-      }, 3e4);
+      }, WS_REQUEST_TIMEOUT_MS);
     });
   },
   subscribeToFile: (filePath) => {
@@ -662,36 +625,59 @@ var useUILintStore = create()((set, get) => ({
       set({ eslintIssuesCache: /* @__PURE__ */ new Map() });
     }
     if (wsConnected && wsConnection) {
-      const message = { type: "cache:invalidate", filePath };
+      const message = {
+        type: "cache:invalidate",
+        filePath
+      };
       wsConnection.send(JSON.stringify(message));
     }
   },
   _handleWsMessage: (data) => {
     switch (data.type) {
       case "lint:result": {
-        const { filePath, issues } = data;
-        set((state) => {
-          const next = new Map(state.eslintIssuesCache);
+        const { filePath, issues, requestId } = data;
+        set((state2) => {
+          const next = new Map(state2.eslintIssuesCache);
           next.set(filePath, issues);
           return { eslintIssuesCache: next };
         });
-        set((state) => {
-          const next = new Map(state.wsProgressPhase);
+        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 };
         });
-        const fileKey = `file:${filePath}`;
-        const pending = pendingRequests.get(fileKey);
-        if (pending) {
-          pending.resolve(issues);
-          pendingRequests.delete(fileKey);
-        }
-        for (const [key, req] of pendingRequests.entries()) {
-          if (key.startsWith(`element:${filePath}:`)) {
-            const dataLoc = key.split(":").slice(2).join(":");
-            const filtered = issues.filter((i) => i.dataLoc === dataLoc);
-            req.resolve(filtered);
-            pendingRequests.delete(key);
+        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;
@@ -701,17 +687,45 @@ var useUILintStore = create()((set, get) => ({
         set((state) => {
           const next = new Map(state.wsProgressPhase);
           next.set(filePath, phase);
-          return { wsProgressPhase: next };
+          return {
+            wsProgressPhase: next,
+            wsLastActivity: { filePath, phase, updatedAt: Date.now() }
+          };
         });
         break;
       }
       case "file:changed": {
         const { filePath } = data;
-        set((state) => {
-          const next = new Map(state.eslintIssuesCache);
+        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;
       }
     }
@@ -788,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) => {
@@ -957,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]);
@@ -1005,10 +1033,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-PRX3LYZD.js"),
-      import("./InspectionPanel-AU4SJPQN.js"),
-      import("./LocatorOverlay-XCNSUM34.js"),
-      import("./ElementBadges-IQIPOHBN.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-VBU72FKU.js → chunk-Z6PWYQGW.js}

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

package/dist/index.d.ts

@@ -58,17 +58,6 @@ interface AutoScanState {
     totalElements: number;
     elements: ScannedElement[];
 }
-/**
- * A single issue found during scanning
- */
-interface ScanIssue {
-    /** Line number in source file */
-    line?: number;
-    /** Issue description */
-    message: string;
-    /** data-loc value to match to DOM element (format: path:line:column) */
-    dataLoc?: string;
-}
 /**
  * ESLint issue from WebSocket server (uilint serve)
  */
@@ -89,10 +78,8 @@ interface ESLintIssue {
  */
 interface ElementIssue {
     elementId: string;
-    /** LLM-based issues from styleguide analysis */
-    issues: ScanIssue[];
-    /** ESLint rule violations from uilint-eslint */
-    eslintIssues?: ESLintIssue[];
+    /** ESLint rule violations from uilint-eslint (including semantic rule) */
+    issues: ESLintIssue[];
     status: "pending" | "scanning" | "complete" | "error";
 }
 /**
@@ -379,43 +366,4 @@ declare function isJSDOM(): boolean;
  */
 declare function isNode(): boolean;
 
-/**
- * LLM client for browser environment
- * Wraps API calls to the dev server analyze route (browser environment)
- */
-type UILintScanIssue = {
-    line?: number;
-    message: string;
-    dataLoc?: string;
-};
-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);
-    /**
-     * Analyze a source file/snippet and return issues.
-     *
-     * NOTE: This matches the (simplified) `/api/.uilint/analyze` route which is
-     * now source-only (no styleSummary / styleguide generation).
-     */
-    analyzeSource(input: {
-        sourceCode: string;
-        filePath?: string;
-        styleGuide?: string | null;
-        componentName?: string;
-        componentLine?: number;
-        includeChildren?: boolean;
-        dataLocs?: string[];
-    }): Promise<{
-        issues: UILintScanIssue[];
-    }>;
-}
-
-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-K7SUEWNV.js";
+} from "./chunk-HTNIKCEM.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-NY7Q5DSG.js";
+} from "./chunk-JBBUE3Y5.js";
 import {
   LocatorOverlay
-} from "./chunk-VBU72FKU.js";
+} from "./chunk-Z6PWYQGW.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-Y44J7QO6.js";
+} from "./chunk-MO4NS6EG.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";
@@ -441,52 +441,6 @@ import {
   serializeStyles as serializeStyles2,
   createStyleSummary as createStyleSummary2
 } from "uilint-core";
-
-// src/analyzer/llm-client.ts
-import { 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;
-  }
-  /**
-   * Analyze a source file/snippet and return issues.
-   *
-   * NOTE: This matches the (simplified) `/api/.uilint/analyze` route which is
-   * now source-only (no styleSummary / styleguide generation).
-   */
-  async analyzeSource(input) {
-    try {
-      const response = await fetch(this.apiEndpoint, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          sourceCode: input.sourceCode,
-          filePath: input.filePath,
-          styleGuide: input.styleGuide ?? void 0,
-          componentName: input.componentName,
-          componentLine: input.componentLine,
-          includeChildren: input.includeChildren,
-          dataLocs: input.dataLocs,
-          model: this.model
-        })
-      });
-      if (!response.ok) {
-        throw new Error(`API request failed: ${response.status}`);
-      }
-      const data = await response.json();
-      return { issues: data.issues || [] };
-    } catch (error) {
-      console.error("[UILint] Analysis failed:", error);
-      return { issues: [] };
-    }
-  }
-};
-
-// src/index.ts
 import { parseStyleGuide } from "uilint-core";
 import { generateStyleGuideFromStyles } from "uilint-core";
 import { createEmptyStyleGuide, mergeStyleGuides } from "uilint-core";
@@ -496,7 +450,6 @@ export {
   DEFAULT_SETTINGS,
   FILE_COLORS,
   InspectionPanel,
-  LLMClient,
   LocatorOverlay,
   UILintProvider,
   UILintToolbar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.32",
+  "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.32",
+    "uilint-core": "^0.1.33",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {