fix(autocomplete): sync active filters via server-side store (#1091)

The LoRA Manager page kept its active filters in localStorage, which the
ComfyUI-side autocomplete read directly. When the two run in different
browsers, origins, or the ComfyUI Desktop Electron shell, localStorage is
not shared and the active-filters search silently did nothing.

The manager page now mirrors its filter state to a server-side in-memory
store (PUT /api/lm/{prefix}/active-filters), pushed on every change via a
storage-listener hook and once on page load. The autocomplete widget sends
only use_active_filters=true, and the relative-paths endpoint injects the
stored filters into the search, with explicit query params taking
precedence.

tests/frontend/components/autocomplete.activeFilters.test.js

@@ -0,0 +1,136 @@
+import { describe, it, beforeEach, afterEach, expect, vi } from 'vitest';
+
+const {
+  API_MODULE,
+  APP_MODULE,
+  CARET_HELPER_MODULE,
+  PREVIEW_COMPONENT_MODULE,
+  AUTOCOMPLETE_MODULE,
+} = vi.hoisted(() => ({
+  API_MODULE: new URL('../../../scripts/api.js', import.meta.url).pathname,
+  APP_MODULE: new URL('../../../scripts/app.js', import.meta.url).pathname,
+  CARET_HELPER_MODULE: new URL('../../../web/comfyui/textarea_caret_helper.js', import.meta.url).pathname,
+  PREVIEW_COMPONENT_MODULE: new URL('../../../web/comfyui/preview_tooltip.js', import.meta.url).pathname,
+  AUTOCOMPLETE_MODULE: new URL('../../../web/comfyui/autocomplete.js', import.meta.url).pathname,
+}));
+
+const fetchApiMock = vi.fn();
+const settingGetMock = vi.fn();
+const caretHelperInstance = {
+  getBeforeCursor: vi.fn(() => ''),
+  getCursorOffset: vi.fn(() => ({ left: 0, top: 0 })),
+};
+
+vi.mock(API_MODULE, () => ({
+  api: {
+    fetchApi: fetchApiMock,
+  },
+}));
+
+vi.mock(APP_MODULE, () => ({
+  app: {
+    canvas: {
+      ds: { scale: 1 },
+    },
+    extensionManager: {
+      setting: {
+        get: settingGetMock,
+        set: vi.fn(),
+      },
+    },
+    registerExtension: vi.fn(),
+  },
+}));
+
+vi.mock(CARET_HELPER_MODULE, () => ({
+  TextAreaCaretHelper: vi.fn(() => caretHelperInstance),
+}));
+
+vi.mock(PREVIEW_COMPONENT_MODULE, () => ({
+  PreviewTooltip: vi.fn(() => ({ show: vi.fn(), hide: vi.fn(), cleanup: vi.fn() })),
+}));
+
+async function createAutoComplete(modelType, activeFiltersEnabled) {
+  settingGetMock.mockImplementation((key) => {
+    if (key === 'loramanager.lora_active_filters_autocomplete') {
+      return activeFiltersEnabled;
+    }
+    if (key === 'loramanager.autocomplete_append_comma') return false;
+    if (key === 'loramanager.autocomplete_auto_format') return false;
+    if (key === 'loramanager.autocomplete_accept_key') return 'both';
+    return undefined;
+  });
+
+  fetchApiMock.mockResolvedValue({
+    json: () => Promise.resolve({ success: true, relative_paths: [] }),
+  });
+
+  const input = document.createElement('textarea');
+  document.body.append(input);
+
+  const { AutoComplete } = await import(AUTOCOMPLETE_MODULE);
+  const autoComplete = new AutoComplete(input, modelType, { debounceDelay: 0, showPreview: false });
+
+  input.value = 'example';
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+  await vi.runAllTimersAsync();
+  await Promise.resolve();
+
+  return autoComplete;
+}
+
+describe('AutoComplete active-filters flag', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    document.body.innerHTML = '';
+    document.head.querySelectorAll('style').forEach((styleEl) => styleEl.remove());
+    Element.prototype.scrollIntoView = vi.fn();
+    fetchApiMock.mockReset();
+    settingGetMock.mockReset();
+    caretHelperInstance.getBeforeCursor.mockReset();
+    caretHelperInstance.getCursorOffset.mockReset();
+    caretHelperInstance.getBeforeCursor.mockReturnValue('example');
+    caretHelperInstance.getCursorOffset.mockReturnValue({ left: 0, top: 0 });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('sends use_active_filters for loras when the setting is enabled', async () => {
+    await createAutoComplete('loras', true);
+
+    expect(fetchApiMock).toHaveBeenCalledWith(
+      '/lm/loras/relative-paths?search=example&limit=100&use_active_filters=true'
+    );
+  });
+
+  it('omits the flag when the setting is disabled', async () => {
+    await createAutoComplete('loras', false);
+
+    expect(fetchApiMock).toHaveBeenCalledWith('/lm/loras/relative-paths?search=example&limit=100');
+  });
+
+  it('omits the flag for non-lora model types even when enabled', async () => {
+    fetchApiMock.mockResolvedValue({
+      json: () => Promise.resolve({ success: true, words: [] }),
+    });
+    await createAutoComplete('prompt', true);
+
+    for (const call of fetchApiMock.mock.calls) {
+      expect(call[0]).not.toContain('use_active_filters');
+    }
+  });
+
+  it('does not read filter state from localStorage anymore', async () => {
+    localStorage.setItem('lora_manager_loras_activeFolder', 'SD_XL');
+    localStorage.setItem('lora_manager_loras_filters', JSON.stringify({ baseModel: ['SDXL 1.0'] }));
+
+    await createAutoComplete('loras', true);
+
+    for (const call of fetchApiMock.mock.calls) {
+      expect(call[0]).not.toContain('folder=');
+      expect(call[0]).not.toContain('base_model=');
+    }
+  });
+});

tests/frontend/components/autocomplete.behavior.test.js

@@ -1789,7 +1789,7 @@ describe('AutoComplete widget interactions', () => {
     expect(settingSetMock).toHaveBeenCalledWith('loramanager.lora_active_filters_autocomplete', true);
   });
 
-  it('appends active filter params to loras autocomplete requests when enabled', async () => {
+  it('sends only the use_active_filters flag when enabled (filters resolved server-side)', async () => {
     vi.useFakeTimers();
 
     settingGetMock.mockImplementation((key) => {
@@ -1799,12 +1799,11 @@ describe('AutoComplete widget interactions', () => {
       return undefined;
     });
 
+    // Stored manager-page filters must NOT leak into the request URL; the
+    // backend injects them from its server-side store.
     localStorage.setItem('lora_manager_loras_filters', JSON.stringify({
       baseModel: ['SD 1.5'],
-      tags: { anime: 'include', nsfw: 'exclude', __no_tags__: 'exclude' },
-      autoTags: { I2V: 'include' },
-      modelTypes: ['standard'],
-      tagLogic: 'all',
+      tags: { anime: 'include', nsfw: 'exclude' },
       license: { noCredit: 'include', allowSelling: 'exclude' },
     }));
     localStorage.setItem('lora_manager_loras_activeFolder', 'MyLoras');
@@ -1830,19 +1829,7 @@ describe('AutoComplete widget interactions', () => {
     await Promise.resolve();
 
     const calledUrl = fetchApiMock.mock.calls[0][0];
-    expect(calledUrl).toContain('/lm/loras/relative-paths?search=example&limit=100');
-    expect(calledUrl).toContain('folder=MyLoras');
-    expect(calledUrl).toContain('recursive=true');
-    expect(calledUrl).toContain('tag_include=anime');
-    expect(calledUrl).toContain('tag_exclude=nsfw');
-    expect(calledUrl).toContain('tag_exclude=__no_tags__');
-    expect(calledUrl).toContain('auto_tag_include=I2V');
-    expect(calledUrl).toContain('tag_logic=all');
-    expect(calledUrl).toContain('credit_required=false');
-    expect(calledUrl).toContain('allow_selling_generated_content=false');
-    const parsed = new URL(calledUrl, 'https://example.com');
-    expect(parsed.searchParams.get('base_model')).toBe('SD 1.5');
-    expect(parsed.searchParams.get('model_type')).toBe('standard');
+    expect(calledUrl).toBe('/lm/loras/relative-paths?search=example&limit=100&use_active_filters=true');
   });
 
   it('keeps the default loras autocomplete URL when active-filters mode is off', async () => {
@@ -1870,10 +1857,12 @@ describe('AutoComplete widget interactions', () => {
     expect(fetchApiMock).toHaveBeenCalledWith('/lm/loras/relative-paths?search=example&limit=100');
   });
 
-  it('sends the filter-pipeline signal even when no filters are stored', async () => {
+  it('sends the filter-pipeline flag even when no filters are stored', async () => {
     // Regression: with filter mode on but no folder/filters stored, the request
-    // carried no params, so the backend skipped the filter pipeline and global
-    // settings like show_only_sfw diverged from the list endpoint.
+    // carried no signal, so the backend skipped the filter pipeline and global
+    // settings like show_only_sfw diverged from the list endpoint. The flag
+    // makes the backend run the pipeline (injecting nothing when its store
+    // is empty).
     vi.useFakeTimers();
 
     settingGetMock.mockImplementation((key) => {
@@ -1907,10 +1896,13 @@ describe('AutoComplete widget interactions', () => {
     await Promise.resolve();
 
     const calledUrl = fetchApiMock.mock.calls[0][0];
-    expect(calledUrl).toContain('recursive=true');
+    expect(calledUrl).toContain('use_active_filters=true');
   });
 
-  it('omits folder param when active folder is root and recursion is enabled', async () => {
+  it('leaves folder params to the backend when active folder is root with recursion enabled', async () => {
+    // The root-folder/recursion semantics now live server-side (see
+    // active_filters_store.active_filters_to_query_kwargs); the client only
+    // sends the flag.
     vi.useFakeTimers();
 
     settingGetMock.mockImplementation((key) => {
@@ -1948,10 +1940,12 @@ describe('AutoComplete widget interactions', () => {
 
     const calledUrl = fetchApiMock.mock.calls[0][0];
     expect(calledUrl).not.toContain('folder=');
-    expect(calledUrl).toContain('recursive=true');
+    expect(calledUrl).toContain('use_active_filters=true');
   });
 
-  it('sends an empty folder param for root with recursion disabled, mirroring the page list', async () => {
+  it('leaves the root+non-recursive folder mapping to the backend', async () => {
+    // Root with recursion disabled maps to folder='' server-side (mirroring
+    // the page list); the client no longer encodes this in the URL.
     vi.useFakeTimers();
 
     settingGetMock.mockImplementation((key) => {
@@ -1988,15 +1982,14 @@ describe('AutoComplete widget interactions', () => {
     await Promise.resolve();
 
     const calledUrl = fetchApiMock.mock.calls[0][0];
-    expect(calledUrl).toContain('folder=');
-    expect(calledUrl).toContain('recursive=false');
-    const parsed = new URL(calledUrl, 'https://example.com');
-    expect(parsed.searchParams.get('folder')).toBe('');
+    expect(calledUrl).not.toContain('folder=');
+    expect(calledUrl).toContain('use_active_filters=true');
   });
 
-  it('applies the active folder even when no filter-panel filters are set', async () => {
+  it('sends the flag even when only a folder is stored (no filter-panel filters)', async () => {
     // Regression: folder was skipped when lora_manager_loras_filters was
-    // missing because the filters key gate returned early.
+    // missing because the filters key gate returned early. The flag is now
+    // unconditional, and the backend injects the folder from its store.
     vi.useFakeTimers();
 
     settingGetMock.mockImplementation((key) => {
@@ -2029,8 +2022,8 @@ describe('AutoComplete widget interactions', () => {
     await Promise.resolve();
 
     const calledUrl = fetchApiMock.mock.calls[0][0];
-    expect(calledUrl).toContain('folder=Flux.1+D%2Fstyle');
-    expect(calledUrl).toContain('recursive=true');
+    expect(calledUrl).toContain('use_active_filters=true');
+    expect(calledUrl).not.toContain('folder=');
   });
 
   describe('discoverability hints', () => {