Add content type dropdown to global search

src/frontend/web/von_interface/static/js/vontology.js

@@ -3237,6 +3237,7 @@ let __vontologySearchState = {
 // JVNAUTOSCI-550 additions: queue selections before tree ready & guard init
 let __vontologyTreeReady = false;
 const __pendingTreeSelections = [];
+const __searchContentTypes = new Set(['conversations', 'concepts', 'tasks']);
 let __searchUiInitialised = false;
 let __conversationRecoveryInitialised = false;
 let __conversationRecoveryCountAbortController = null;
@@ -3384,6 +3385,27 @@ export function setupVontologySearchUI() {
     await performVontologySearch(q);
   }, 180);
 
+  const contentTypes = document.getElementById('searchContentTypes');
+  contentTypes?.addEventListener('change', (event) => {
+    const checkbox = event.target;
+    if (!checkbox.matches('input[type="checkbox"]')) return;
+    if (checkbox.checked) __searchContentTypes.add(checkbox.value);
+    else __searchContentTypes.delete(checkbox.value);
+    const count = __searchContentTypes.size;
+    contentTypes.classList.toggle('is-filtered', count !== 3);
+    contentTypes.querySelector('#searchContentTypesCount').textContent = count === 3 ? 'All' : `${count}/3`;
+    contentTypes.querySelector('summary').setAttribute('aria-label',
+      `Search content types: ${count === 3 ? 'all selected' : `${count} of 3 selected`}`);
+    if (input.value.trim()) void performVontologySearch(input.value);
+    else clearSearchResults({ invalidate: true });
+  });
+  contentTypes?.addEventListener('keydown', (event) => {
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    contentTypes.open = false;
+    contentTypes.querySelector('summary').focus();
+  });
+
   // Input handlers
   const handleInput = () => {
     if (!input.value.trim()) {
@@ -3450,6 +3472,8 @@ export function setupVontologySearchUI() {
   // Click outside to close
   document.addEventListener('click', (e) => {
     const recoveryButton = document.getElementById('conversationRecoveryButton');
+    if (contentTypes?.contains(e.target)) return;
+    if (contentTypes) contentTypes.open = false;
     if (!results.contains(e.target) && e.target !== input && !recoveryButton?.contains(e.target)) {
       clearSearchResults({ invalidate: true });
       setExpanded(false);
@@ -3622,7 +3646,7 @@ export async function performVontologySearch(q) {
   setRecoveryButtonPressed(false);
   renderSearchResults();
 
-  const conceptTask = fetchConceptSearchItems(trimmedQuery, abortController.signal)
+  const conceptTask = !__searchContentTypes.has('concepts') ? Promise.resolve() : fetchConceptSearchItems(trimmedQuery, abortController.signal)
     .then(conceptItems => {
       if (!isCurrentUnifiedSearchRequest(requestGeneration)) return;
       __vontologySearchState.concepts = {
@@ -3645,7 +3669,7 @@ export async function performVontologySearch(q) {
       };
       renderSearchResults();
     });
-  const conversationTask = fetchConversationSearchPage(trimmedQuery, { signal: abortController.signal })
+  const conversationTask = !__searchContentTypes.has('conversations') ? Promise.resolve() : fetchConversationSearchPage(trimmedQuery, { signal: abortController.signal })
     .then(data => {
       if (!isCurrentUnifiedSearchRequest(requestGeneration)) return;
       const conversationItems = Array.isArray(data?.results) ? data.results : [];
@@ -3670,7 +3694,8 @@ export async function performVontologySearch(q) {
       };
       renderSearchResults();
     });
-  const taskSearch = loadTaskSearchResults({ requestGeneration, signal: abortController.signal });
+  const taskSearch = __searchContentTypes.has('tasks')
+    ? loadTaskSearchResults({ requestGeneration, signal: abortController.signal }) : Promise.resolve();
   await Promise.all([conceptTask, conversationTask, taskSearch]);
 }
 
@@ -3811,9 +3836,9 @@ function normaliseConversationSearchItem(item) {
 
 function getOrderedSearchGroups() {
   if (__vontologySearchState.mode === 'recovery') return ['conversations'];
-  return isConversationWorkspaceActive()
+  return (isConversationWorkspaceActive()
     ? ['conversations', 'concepts', 'tasks']
-    : ['concepts', 'tasks', 'conversations'];
+    : ['concepts', 'tasks', 'conversations']).filter(key => __searchContentTypes.has(key));
 }
 
 function rebuildSearchKeyboardItems() {
@@ -3989,6 +4014,9 @@ function renderSearchResults() {
     return;
   }
 
+  if (__vontologySearchState.mode === 'search' && !__searchContentTypes.size) {
+    results.appendChild(createSearchProviderNotice('Select at least one content type to search.', 'is-empty'));
+  }
   const keyboardIndexByKey = new Map(
     __vontologySearchState.items.map((item, index) => [`${item.searchType}:${item.id}`, index])
   );

src/frontend/web/von_interface/static/styles.css

@@ -19080,3 +19080,39 @@ html[data-footer-uptime="false"][data-footer-runtimecost="false"][data-footer-bu
 }
 .chat-composer > #clearTurnModelButton { grid-column: 1 / -1; }
 #turnModelStatus[hidden], #clearTurnModelButton[hidden] { display: none !important; }
+
+/* Content filters alongside the global search field. */
+.search-content-types { position: relative; flex: 0 0 auto; }
+.search-content-types summary {
+    cursor: pointer;
+    padding: 8px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    background: #fff;
+    color: #475569;
+    font-size: 14px;
+    white-space: nowrap;
+}
+.search-content-types.is-filtered summary {
+    background: #fef3c7;
+    border-color: #b45309;
+    color: #78350f;
+}
+.search-content-types summary:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
+.search-content-types-menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    right: 0;
+    z-index: 1400;
+    width: 210px;
+    margin: 0;
+    padding: 12px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    background: #fff;
+    color: #1e293b;
+    box-shadow: 0 4px 12px #0002;
+}
+.search-content-types-menu legend { font-size: 13px; background: #fff; }
+.search-content-types-menu label { display: flex; align-items: center; gap: 8px; min-height: 36px; cursor: pointer; }
+.search-content-types-menu input { margin: 0; width: auto; }

src/frontend/web/von_interface/templates/von_interface.html

@@ -73,6 +73,15 @@ <h2 class="vontology-title" id="vontologyGlobalTitle">
               aria-label="Search results">
             </div>
           </div>
+          <details id="searchContentTypes" class="search-content-types">
+            <summary aria-label="Search content types: all selected">Types <span id="searchContentTypesCount">All</span></summary>
+            <fieldset class="search-content-types-menu">
+              <legend>Search content types</legend>
+              <label><input type="checkbox" value="conversations" checked> Conversations</label>
+              <label><input type="checkbox" value="concepts" checked> Concepts</label>
+              <label><input type="checkbox" value="tasks" checked> Tasks</label>
+            </fieldset>
+          </details>
           <button id="conversationRecoveryButton" class="conversation-recovery-button" type="button" hidden
             aria-label="Open removed conversations" aria-pressed="false" title="Open removed conversations"
             data-keep-title="true">

tests/browser/searchContentTypes.cjs

@@ -0,0 +1,62 @@
+// Candidate template/CSS/modules with synthetic read-only API responses.
+// PLAYWRIGHT_BROWSERS_PATH=/tmp/von-playwright node tests/browser/searchContentTypes.cjs [evidence-dir]
+const fs = require('node:fs');
+const http = require('node:http');
+const path = require('node:path');
+const { chromium, expect } = require('@playwright/test');
+const root = path.resolve(__dirname, '../../src/frontend/web/von_interface');
+const template = fs.readFileSync(path.join(root, 'templates/von_interface.html'), 'utf8');
+const header = template.slice(template.indexOf('<div class="global-concept-search"'), template.indexOf('<div class="main-container global-organisation-identity"'));
+const server = http.createServer((req, res) => {
+    if (req.url === '/') {
+        res.setHeader('Content-Type', 'text/html');
+        return res.end(`<link rel="stylesheet" href="/static/styles.css"><header class="global-header"><div class="global-header-shell">${header}</div></header>`);
+    }
+    const file = path.resolve(root, `.${req.url.split('?')[0]}`);
+    if (!file.startsWith(`${root}/static/`) || !fs.existsSync(file)) return res.writeHead(404).end();
+    res.setHeader('Content-Type', file.endsWith('.css') ? 'text/css' : 'text/javascript');
+    res.end(fs.readFileSync(file));
+});
+(async () => {
+    await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
+    const browser = await chromium.launch({ headless: true });
+    try {
+        const page = await browser.newPage();
+        await page.route('**/*', route => {
+            if (!new URL(route.request().url()).pathname.includes('/api/')) return route.continue();
+            return route.fulfill({ json: { results: [], tasks: [], conversations: [] } });
+        });
+        await page.goto(`http://127.0.0.1:${server.address().port}/`);
+        await page.evaluate(async () => {
+            const { elements } = await import('/static/js/domUtils.js');
+            elements.vontologySearchInput = document.querySelector('#vontologySearchInput');
+            elements.vontologySearchResults = document.querySelector('#vontologySearchResults');
+            (await import('/static/js/vontology.js')).setupVontologySearchUI();
+        });
+        await page.locator('#vontologySearchInput').fill('research');
+        await expect(page.locator('.unified-search-group')).toHaveCount(3);
+        for (const width of [1000, 375]) {
+            await page.setViewportSize({ width, height: 800 });
+            const summary = page.locator('#searchContentTypes summary');
+            await summary.click();
+            await page.getByRole('checkbox', { name: 'Concepts', exact: true }).uncheck();
+            await expect(page.locator('.unified-search-group-concepts')).toHaveCount(0);
+            await expect(summary).toHaveCSS('background-color', 'rgb(254, 243, 199)');
+            const bounds = await page.locator('.search-content-types-menu').boundingBox();
+            if (bounds.x < 0 || bounds.x + bounds.width > width) throw new Error('Dropdown exceeds viewport');
+            if (process.argv[2]) {
+                fs.mkdirSync(process.argv[2], { recursive: true });
+                await page.screenshot({ path: path.join(process.argv[2], `search-types-${width}.png`) });
+            }
+            await page.getByRole('checkbox', { name: 'Conversations', exact: true }).uncheck();
+            await page.getByRole('checkbox', { name: 'Tasks', exact: true }).uncheck();
+            await expect(page.locator('#vontologySearchResults')).toContainText('Select at least one content type');
+            for (const label of ['Concepts', 'Conversations', 'Tasks']) await page.getByRole('checkbox', { name: label, exact: true }).check();
+            await expect(summary).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+            await page.getByRole('checkbox', { name: 'Tasks', exact: true }).press('Escape');
+            await expect(summary).toBeFocused();
+            await expect(page.locator('#searchContentTypes')).not.toHaveAttribute('open');
+        }
+        console.log('PASS: candidate header at 1000px and 375px; filters, empty selection, colour, bounds and Escape focus (synthetic APIs).');
+    } finally { await browser.close(); server.close(); }
+})().catch(error => { console.error(error); server.close(); process.exitCode = 1; });

tests/frontend/searchContentTypes.test.js

@@ -0,0 +1,58 @@
+/** @jest-environment jsdom */
+const fs = require('fs');
+const template = fs.readFileSync('src/frontend/web/von_interface/templates/von_interface.html', 'utf8');
+const tick = () => new Promise(resolve => setTimeout(resolve, 0));
+let moduleUnderTest;
+beforeEach(() => {
+    jest.resetModules();
+    document.body.innerHTML = '<input id="vontologySearchInput"><div id="vontologySearchResults"></div>'
+        + template.match(/<details id="searchContentTypes"[\s\S]*?<\/details>/)[0];
+    const { elements } = require('../../src/frontend/web/von_interface/static/js/domUtils.js');
+    elements.vontologySearchInput = document.querySelector('#vontologySearchInput');
+    elements.vontologySearchResults = document.querySelector('#vontologySearchResults');
+    global.fetch = jest.fn(async () => ({ ok: true, json: async () => ({ results: [], tasks: [], conversations: [] }) }));
+    moduleUnderTest = require('../../src/frontend/web/von_interface/static/js/vontology.js');
+    moduleUnderTest.setupVontologySearchUI();
+});
+test('defaults to all; deselected types are not requested or rendered; none is explicit; reselect restores', async () => {
+    const input = document.querySelector('#vontologySearchInput');
+    input.value = 'research';
+    await moduleUnderTest.performVontologySearch(input.value);
+    expect(document.querySelectorAll('.unified-search-group')).toHaveLength(3);
+    document.querySelector('[value="conversations"]').click();
+    document.querySelector('[value="tasks"]').click();
+    await tick();
+    global.fetch.mockClear();
+    await moduleUnderTest.performVontologySearch(input.value);
+    expect(global.fetch).toHaveBeenCalledTimes(1);
+    expect(String(global.fetch.mock.calls[0][0])).toContain('/vontology/search');
+    expect(document.querySelectorAll('.unified-search-group')).toHaveLength(1);
+    expect(document.querySelector('#searchContentTypes').classList.contains('is-filtered')).toBe(true);
+    document.querySelector('[value="concepts"]').click();
+    await tick();
+    expect(document.querySelector('#vontologySearchResults').textContent).toContain('Select at least one content type');
+    expect(moduleUnderTest.__test_getUnifiedSearchState().items).toHaveLength(0);
+    document.querySelectorAll('#searchContentTypes input').forEach(el => el.click());
+    await tick();
+    expect(document.querySelector('#searchContentTypesCount').textContent).toBe('All');
+    expect(document.querySelector('#searchContentTypes').classList.contains('is-filtered')).toBe(false);
+    expect(document.querySelectorAll('.unified-search-group')).toHaveLength(3);
+});
+test('late responses cannot restore a deselected provider; Escape closes and returns focus', async () => {
+    let resolveConcept;
+    global.fetch.mockImplementation(url => String(url).includes('/vontology/search')
+        ? new Promise(resolve => { resolveConcept = resolve; })
+        : Promise.resolve({ ok: true, json: async () => ({ results: [], tasks: [], conversations: [] }) }));
+    document.querySelector('#vontologySearchInput').value = 'research';
+    const pending = moduleUnderTest.performVontologySearch('research');
+    await tick();
+    document.querySelector('[value="concepts"]').click();
+    resolveConcept({ ok: true, json: async () => ({ results: [{ id: '#V#late', name: 'Late concept' }] }) });
+    await pending;
+    expect(document.querySelector('.unified-search-group-concepts')).toBeNull();
+    const details = document.querySelector('details');
+    details.open = true;
+    details.querySelector('input').dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    expect(details.open).toBe(false);
+    expect(document.activeElement).toBe(details.querySelector('summary'));
+});