@karmaniverous/jeeves-server 3.0.1 → 3.1.0

package/client/src/components/SearchModal.tsx

@@ -1,25 +1,31 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ChevronDown, ChevronRight, FileText, RotateCcw, Search, X } from 'lucide-react';
-
-import { fetchFacets, searchDocuments, type SearchFacet, type SearchResult, type SearchMetadata } from '@/lib/api';
-
-type DatePreset = '24h' | '7d' | '30d' | 'custom' | null;
-
-const DATE_PRESETS: { label: string; value: DatePreset }[] = [
-  { label: '24h', value: '24h' },
-  { label: '7 days', value: '7d' },
-  { label: '30 days', value: '30d' },
-  { label: 'Custom', value: 'custom' },
-];
-
-function getPresetDate(preset: DatePreset): Date | null {
-  if (!preset || preset === 'custom') return null;
-  const now = new Date();
-  if (preset === '24h') return new Date(now.getTime() - 24 * 60 * 60 * 1000);
-  if (preset === '7d') return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-  if (preset === '30d') return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
-  return null;
+import { ChevronDown, ChevronRight, FileText, Plus, RotateCcw, Search, X } from 'lucide-react';
+
+import { fetchFacets, searchDocuments, type SearchFacet, type SearchResult } from '@/lib/api';
+
+/** Enumerated facets with ≤ this many values render as chips; above → searchable dropdown */
+const CHIP_THRESHOLD = 8;
+
+/** Filter out empty, garbage, and unresolved template values */
+function cleanFacetValues(values: string[]): string[] {
+  return values.filter((v) => {
+    const s = String(v ?? '');
+    if (!s || !s.trim()) return false;
+    if (s.includes('[object Object]')) return false;
+    if (/^\$\{.*\}$/.test(s)) return false;
+    return true;
+  });
+}
+
+function formatFieldLabel(field: string): string {
+  return field.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+interface GarbageEntry {
+  field: string;
+  removed: string[];
+  reason: string;
 }
 
 interface SearchModalProps {
@@ -27,18 +33,21 @@ interface SearchModalProps {
   onClose: () => void;
 }
 
+// ─── Sub-components ───────────────────────────────────────────────────────
+
 function FilterChips({
   label,
   values,
   selected,
   onToggle,
+  onRemove,
 }: {
   label: string;
   values: string[];
   selected: Set<string>;
   onToggle: (value: string) => void;
+  onRemove: () => void;
 }) {
-  if (values.length === 0) return null;
   return (
     <div className="flex items-center gap-1.5 flex-wrap">
       <span className="text-xs text-muted-foreground font-medium">{label}:</span>
@@ -55,21 +64,234 @@ function FilterChips({
           {v}
         </button>
       ))}
+      <button onClick={onRemove} className="text-muted-foreground hover:text-foreground ml-0.5" title={`Remove ${label} filter`}>
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+function SearchableSelect({
+  label,
+  values,
+  selected,
+  onToggle,
+  multi,
+  onRemove,
+}: {
+  label: string;
+  values: string[];
+  selected: Set<string>;
+  onToggle: (value: string) => void;
+  multi: boolean;
+  onRemove: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setFilter('');
+      }
+    };
+    document.addEventListener('mousedown', handler, true);
+    return () => document.removeEventListener('mousedown', handler, true);
+  }, [open]);
+
+  const filtered = filter
+    ? values.filter((v) => v.toLowerCase().includes(filter.toLowerCase()))
+    : values;
+
+  const selectedLabel =
+    selected.size === 0 ? 'All'
+      : selected.size <= 2 ? [...selected].join(', ')
+        : `${selected.size} selected`;
+
+  return (
+    <div className="flex items-center gap-1.5" ref={containerRef}>
+      <span className="text-xs text-muted-foreground font-medium">{label}:</span>
+      <div className="relative">
+        <button
+          onClick={() => setOpen(!open)}
+          className={`text-xs px-2 py-0.5 rounded border transition-colors flex items-center gap-1 min-w-[100px] ${
+            selected.size > 0
+              ? 'bg-primary/10 text-primary border-primary'
+              : 'bg-muted text-muted-foreground border-border hover:bg-accent'
+          }`}
+        >
+          <span className="truncate max-w-[200px]">{selectedLabel}</span>
+          <ChevronDown className="h-3 w-3 shrink-0" />
+        </button>
+        {open && (
+          <div className="absolute top-full left-0 mt-1 z-50 bg-background border border-border rounded shadow-lg w-64 max-h-48 flex flex-col">
+            <div className="p-1.5 border-b border-border">
+              <input
+                type="text"
+                value={filter}
+                onChange={(e) => setFilter(e.target.value)}
+                placeholder="Search..."
+                className="text-xs w-full px-2 py-1 rounded border border-border bg-muted text-foreground placeholder:text-muted-foreground outline-none focus:border-primary"
+                autoFocus
+              />
+            </div>
+            <div className="overflow-y-auto flex-1">
+              {filtered.length === 0 && (
+                <div className="px-3 py-2 text-xs text-muted-foreground">No matches</div>
+              )}
+              {filtered.map((v) => (
+                <button
+                  key={v}
+                  onClick={() => {
+                    onToggle(v);
+                    if (!multi) { setOpen(false); setFilter(''); }
+                  }}
+                  className={`w-full text-left text-xs px-3 py-1.5 hover:bg-accent transition-colors flex items-center gap-2 ${
+                    selected.has(v) ? 'bg-primary/10 text-primary' : 'text-foreground'
+                  }`}
+                >
+                  {multi && (
+                    <span className={`w-3 h-3 rounded-sm border flex items-center justify-center shrink-0 ${
+                      selected.has(v) ? 'bg-primary border-primary' : 'border-border'
+                    }`}>
+                      {selected.has(v) && <span className="text-[8px] text-primary-foreground">&#10003;</span>}
+                    </span>
+                  )}
+                  <span className="truncate">{v}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      {selected.size > 0 && selected.size <= 5 && [...selected].map((v) => (
+        <button
+          key={v}
+          onClick={() => onToggle(v)}
+          className="text-xs px-1.5 py-0.5 rounded-full bg-primary/10 text-primary border border-primary/30 hover:bg-primary/20 flex items-center gap-0.5"
+          title={`Remove ${v}`}
+        >
+          <span className="truncate max-w-[120px]">{v}</span>
+          <X className="h-2.5 w-2.5 shrink-0" />
+        </button>
+      ))}
+      <button onClick={onRemove} className="text-muted-foreground hover:text-foreground ml-0.5" title={`Remove ${label} filter`}>
+        <X className="h-3 w-3" />
+      </button>
     </div>
   );
 }
 
-function ResultRow({ result, onNavigate }: { result: SearchResult; onNavigate: (path: string) => void }) {
+function FacetTextInput({
+  label,
+  value,
+  onChange,
+  inputType = 'text',
+  onRemove,
+}: {
+  label: string;
+  value: string;
+  onChange: (value: string) => void;
+  inputType?: 'text' | 'number';
+  onRemove: () => void;
+}) {
+  return (
+    <div className="flex items-center gap-1.5">
+      <span className="text-xs text-muted-foreground font-medium">{label}:</span>
+      <input
+        type={inputType}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={`Filter by ${label.toLowerCase()}...`}
+        className="text-xs px-2 py-0.5 rounded border border-border bg-muted text-foreground placeholder:text-muted-foreground w-64 outline-none focus:border-primary"
+      />
+      <button onClick={onRemove} className="text-muted-foreground hover:text-foreground" title={`Remove ${label} filter`}>
+        <X className="h-3 w-3" />
+      </button>
+    </div>
+  );
+}
+
+/** Max chips shown in collapsed view */
+const COLLAPSED_CHIP_COUNT = 4;
+
+/** Internal fields to exclude from metadata chips */
+const META_INTERNAL_KEYS = new Set([
+  'file_path', 'chunk_text', 'chunk_index', 'total_chunks', 'content_hash',
+  'embedded_at',
+]);
+
+interface ResultRowProps {
+  result: SearchResult;
+  facets: SearchFacet[];
+  onNavigate: (path: string) => void;
+  onChipClick: (field: string, value: string) => void;
+}
+
+/** Build sorted chip entries from result metadata × facets. Lowest cardinality first; text/number last. */
+function buildChips(
+  result: SearchResult,
+  facets: SearchFacet[],
+): Array<{ field: string; label: string; value: string; cardinality: number }> {
+  const meta = result.metadata ?? {};
+  const chips: Array<{ field: string; label: string; value: string; cardinality: number }> = [];
+  const facetMap = new Map(facets.map((f) => [f.field, f]));
+
+  for (const [key, raw] of Object.entries(meta)) {
+    if (META_INTERNAL_KEYS.has(key)) continue;
+    const facet = facetMap.get(key);
+    if (!facet) continue; // only show facet-connected props
+
+    const values = Array.isArray(raw) ? raw.map(String) : [String(raw)];
+    const isEnum = facet.uiHint !== 'text' && facet.uiHint !== 'number';
+    const cardinality = isEnum ? facet.values.length : Infinity;
+
+    for (const v of values) {
+      if (!v || v === 'undefined' || v === 'null') continue;
+      chips.push({
+        field: key,
+        label: formatFieldLabel(key),
+        value: v,
+        cardinality,
+      });
+    }
+  }
+
+  chips.sort((a, b) => a.cardinality - b.cardinality);
+  return chips;
+}
+
+function ResultRow({ result, facets, onNavigate, onChipClick }: ResultRowProps) {
   const [expanded, setExpanded] = useState(false);
   const preview = result.chunks[0]?.text ?? '';
   const truncatedPreview = preview.length > 150 ? preview.slice(0, 150) + '…' : preview;
 
+  const allChips = buildChips(result, facets);
+  const collapsedChips = allChips.slice(0, COLLAPSED_CHIP_COUNT);
+  const hasMore = allChips.length > COLLAPSED_CHIP_COUNT;
+
+  const renderChip = (chip: { field: string; label: string; value: string }, i: number) => {
+    const display = chip.value.length > 30 ? chip.value.slice(0, 28) + '…' : chip.value;
+    return (
+      <button
+        key={`${chip.field}-${i}`}
+        onClick={(e) => { e.stopPropagation(); onChipClick(chip.field, chip.value); }}
+        className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-foreground border border-border hover:bg-primary/10 hover:border-primary/30 transition-colors cursor-pointer truncate max-w-[200px]"
+        title={`${chip.label}: ${chip.value} — click to filter`}
+      >
+        <span className="text-muted-foreground">{chip.label}:</span> {display}
+      </button>
+    );
+  };
+
   return (
     <div className="border-b border-border last:border-0 px-4 py-2">
       <div className="flex items-start gap-2">
         <FileText className="h-4 w-4 text-zinc-400 shrink-0 mt-1" />
         <div className="min-w-0 flex-1">
-          {/* Header row: file name, domain, score, expand toggle */}
           <div className="flex items-center gap-2">
             <button
               onClick={() => onNavigate(`/browse/${result.browsePath}`)}
@@ -77,11 +299,6 @@ function ResultRow({ result, onNavigate }: { result: SearchResult; onNavigate: (
             >
               {result.fileName}
             </button>
-            {result.domains && result.domains.length > 0 && (
-              <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground border border-border">
-                {result.domains.join(', ')}
-              </span>
-            )}
             <span className="text-[10px] text-muted-foreground shrink-0">
               {(result.bestScore * 100).toFixed(0)}%
             </span>
@@ -104,22 +321,38 @@ function ResultRow({ result, onNavigate }: { result: SearchResult; onNavigate: (
           <div className="text-xs text-muted-foreground mt-0.5 break-words leading-relaxed">
             {result.browsePath}
           </div>
-          {/* Collapsed: one-line preview */}
-          {!expanded && (
-            <div className="text-sm text-foreground/70 mt-1 truncate">
-              {truncatedPreview}
+          {/* Collapsed chips */}
+          {!expanded && collapsedChips.length > 0 && (
+            <div className="flex flex-wrap items-center gap-1 mt-1">
+              {collapsedChips.map((c, i) => renderChip(c, i))}
+              {hasMore && (
+                <button
+                  onClick={() => setExpanded(true)}
+                  className="text-[10px] text-blue-500 hover:underline cursor-pointer"
+                >+{allChips.length - COLLAPSED_CHIP_COUNT} more</button>
+              )}
             </div>
           )}
-          {/* Expanded: scrollable chunk accordion */}
+          {!expanded && collapsedChips.length === 0 && (
+            <div className="text-sm text-foreground/70 mt-1 truncate">{truncatedPreview}</div>
+          )}
+          {/* Expanded: all chips + chunks */}
           {expanded && (
-            <div className="mt-2 max-h-48 overflow-y-auto border border-border rounded bg-muted/30 divide-y divide-border">
-              {result.chunks.map((chunk, i) => (
-                <div key={i} className="px-3 py-2 text-sm text-foreground/80 leading-relaxed">
-                  <span className="text-[10px] text-muted-foreground mr-2">#{chunk.index}</span>
-                  {chunk.text}
+            <>
+              {allChips.length > 0 && (
+                <div className="flex flex-wrap items-center gap-1 mt-1.5 mb-2">
+                  {allChips.map((c, i) => renderChip(c, i))}
                 </div>
-              ))}
-            </div>
+              )}
+              <div className="max-h-48 overflow-y-auto border border-border rounded bg-muted/30 divide-y divide-border">
+                {result.chunks.map((chunk, i) => (
+                  <div key={i} className="px-3 py-2 text-sm text-foreground/80 leading-relaxed">
+                    <span className="text-[10px] text-muted-foreground mr-2">#{chunk.index}</span>
+                    {chunk.text}
+                  </div>
+                ))}
+              </div>
+            </>
           )}
         </div>
       </div>
@@ -127,159 +360,232 @@ function ResultRow({ result, onNavigate }: { result: SearchResult; onNavigate: (
   );
 }
 
+// ─── Main component ───────────────────────────────────────────────────────
+
 export function SearchModal({ open, onClose }: SearchModalProps) {
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<SearchResult[]>([]);
-  const [metadata, setMetadata] = useState<SearchMetadata>({ domains: [], authors: [], participants: [] });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [domainFilter, setDomainFilter] = useState<Set<string>>(new Set());
-  const [authorFilter, setAuthorFilter] = useState<Set<string>>(new Set());
-  const [extFilter, setExtFilter] = useState<Set<string>>(new Set());
-  const [datePreset, setDatePreset] = useState<DatePreset>(null);
-  const [dateFrom, setDateFrom] = useState('');
-  const [dateTo, setDateTo] = useState('');
+
+  // Schema-driven facets (lazy-loaded)
   const [facets, setFacets] = useState<SearchFacet[]>([]);
+  const [facetsLoading, setFacetsLoading] = useState(false);
+  const facetsLoadedRef = useRef(false);
   const [facetSelections, setFacetSelections] = useState<Record<string, Set<string>>>({});
+  const [facetTextInputs, setFacetTextInputs] = useState<Record<string, string>>({});
+  const [activeFacetFields, setActiveFacetFields] = useState<Set<string>>(new Set());
+  const [garbageEntries, setGarbageEntries] = useState<GarbageEntry[]>([]);
+  const [showGarbage, setShowGarbage] = useState(false);
+  const [addFilterOpen, setAddFilterOpen] = useState(false);
+  const [addFilterSearch, setAddFilterSearch] = useState('');
+  const addFilterRef = useRef<HTMLDivElement>(null);
+
   const inputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
 
+  // Close "Add filter" on outside click
+  useEffect(() => {
+    if (!addFilterOpen) return;
+    const handler = (e: MouseEvent) => {
+      if (addFilterRef.current && !addFilterRef.current.contains(e.target as Node)) {
+        setAddFilterOpen(false);
+        setAddFilterSearch('');
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [addFilterOpen]);
+
+  const loadFacets = useCallback(async () => {
+    if (facetsLoadedRef.current) return;
+    facetsLoadedRef.current = true;
+    setFacetsLoading(true);
+    try {
+      const res = await fetchFacets();
+      const cleaned: SearchFacet[] = [];
+      const garbage: GarbageEntry[] = [];
+      for (const f of res.facets) {
+        if (f.uiHint === 'hidden') continue;
+        // Text/number facets use free-text input — values array is irrelevant
+        if (f.uiHint === 'text' || f.uiHint === 'number') {
+          cleaned.push({ ...f, values: [] });
+          continue;
+        }
+        const goodValues = cleanFacetValues(f.values);
+        const badValues = f.values.filter((v) => !goodValues.includes(v));
+        if (badValues.length > 0) {
+          const reasons = badValues.map((v) => {
+            if (!v || !String(v).trim()) return 'empty';
+            if (String(v).includes('[object Object]')) return 'object-to-string';
+            if (/^\$\{.*\}$/.test(String(v))) return 'unresolved-template';
+            return 'unknown';
+          });
+          garbage.push({
+            field: f.field,
+            removed: badValues.map((v, i) => `${JSON.stringify(v)} (${reasons[i]})`),
+            reason: [...new Set(reasons)].join(', '),
+          });
+        }
+        if (goodValues.length > 0) {
+          cleaned.push({ ...f, values: goodValues });
+        } else {
+          // All values were garbage — include facet with empty values but log it
+          garbage.push({
+            field: f.field,
+            removed: badValues.length > 0 ? ['(all values filtered)'] : ['(no values)'],
+            reason: badValues.length > 0 ? 'no valid values remain' : 'empty values array',
+          });
+        }
+      }
+      console.log('[SearchModal] Loaded facets:', cleaned.length, 'clean,', garbage.length, 'garbage entries');
+      setFacets(cleaned);
+      setGarbageEntries(garbage);
+    } catch (err) {
+      console.error("Failed to load facets:", err);
+      setFacets([]);
+    } finally {
+      setFacetsLoading(false);
+    }
+  }, []);
+
   useEffect(() => {
     if (open) {
       setTimeout(() => inputRef.current?.focus(), 50);
-      // Fetch facets on modal open
-      void fetchFacets()
-        .then((res) => setFacets(res.facets))
-        .catch(() => setFacets([]));
+      void loadFacets();
     }
-  }, [open]);
+  }, [open, loadFacets]);
 
   const resetSearch = useCallback(() => {
     setQuery('');
     setResults([]);
-    setMetadata({ domains: [], authors: [], participants: [] });
     setError(null);
-    setDomainFilter(new Set());
-    setAuthorFilter(new Set());
-    setExtFilter(new Set());
-    setDatePreset(null);
-    setDateFrom('');
-    setDateTo('');
     setFacetSelections({});
+    setFacetTextInputs({});
+    setActiveFacetFields(new Set());
+    setShowGarbage(false);
     inputRef.current?.focus();
   }, []);
 
   const doSearch = useCallback(async (q: string) => {
     if (!q.trim()) {
       setResults([]);
-      setMetadata({ domains: [], authors: [], participants: [] });
       return;
     }
     setLoading(true);
     setError(null);
     try {
-      // Build Qdrant filter from facet selections
       const mustClauses: Record<string, unknown>[] = [];
       for (const [field, selected] of Object.entries(facetSelections)) {
         if (selected.size > 0) {
-          mustClauses.push({
-            key: field,
-            match: { any: [...selected] },
-          });
+          mustClauses.push({ key: field, match: { any: [...selected] } });
+        }
+      }
+      for (const [field, text] of Object.entries(facetTextInputs)) {
+        if (text.trim()) {
+          mustClauses.push({ key: field, match: { text: text.trim() } });
         }
       }
-      const filter = mustClauses.length > 0
-        ? { must: mustClauses }
-        : undefined;
+      const filter = mustClauses.length > 0 ? { must: mustClauses } : undefined;
       const res = await searchDocuments(q, 30, filter);
       setResults(res.results);
-      setMetadata(res.metadata);
     } catch (err) {
       setError(String(err));
     } finally {
       setLoading(false);
     }
-  }, [facetSelections]);
-
-  const handleInputChange = useCallback(
-    (value: string) => {
-      setQuery(value);
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => void doSearch(value), 400);
-    },
-    [doSearch],
-  );
+  }, [facetSelections, facetTextInputs]);
 
-  const handleNavigate = useCallback(
-    (path: string) => {
-      onClose();
-      navigate(path);
-    },
-    [navigate, onClose],
-  );
+  const handleInputChange = useCallback((value: string) => {
+    setQuery(value);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => void doSearch(value), 400);
+  }, [doSearch]);
 
-  const toggleFilter = useCallback(
-    (set: Set<string>, setFn: React.Dispatch<React.SetStateAction<Set<string>>>, value: string) => {
-      const next = new Set(set);
-      if (next.has(value)) next.delete(value);
-      else next.add(value);
-      setFn(next);
-    },
-    [],
-  );
+  const handleNavigate = useCallback((path: string) => {
+    onClose();
+    navigate(path);
+  }, [navigate, onClose]);
 
-  const toggleFacet = useCallback(
-    (field: string, value: string) => {
+  const handleChipClick = useCallback((field: string, value: string) => {
+    // Ensure the facet field is active
+    setActiveFacetFields((prev) => new Set([...prev, field]));
+    // Find the facet to determine uiHint
+    const facet = facets.find((f) => f.field === field);
+    if (facet && (facet.uiHint === 'text' || facet.uiHint === 'number')) {
+      setFacetTextInputs((prev) => ({ ...prev, [field]: value }));
+    } else {
       setFacetSelections((prev) => {
         const current = prev[field] ?? new Set<string>();
         const next = new Set(current);
-        if (next.has(value)) next.delete(value);
-        else next.add(value);
+        next.add(value);
         return { ...prev, [field]: next };
       });
-    },
-    [],
-  );
+    }
+  }, [facets]);
 
-  // Re-search when facet selections change
+  const toggleFacet = useCallback((field: string, value: string) => {
+    setFacetSelections((prev) => {
+      const current = prev[field] ?? new Set<string>();
+      const next = new Set(current);
+      if (next.has(value)) next.delete(value); else next.add(value);
+      return { ...prev, [field]: next };
+    });
+  }, []);
+
+  const addFacetField = useCallback((field: string) => {
+    setActiveFacetFields((prev) => new Set([...prev, field]));
+  }, []);
+
+  const removeFacetField = useCallback((field: string) => {
+    setActiveFacetFields((prev) => { const n = new Set(prev); n.delete(field); return n; });
+    setFacetSelections((prev) => { const n = { ...prev }; delete n[field]; return n; });
+    setFacetTextInputs((prev) => { const n = { ...prev }; delete n[field]; return n; });
+  }, []);
+
+  // Re-search when selections change
   useEffect(() => {
-    if (query.trim()) {
-      void doSearch(query);
-    }
+    if (query.trim()) void doSearch(query);
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [facetSelections]);
-
-  // Extract extensions from results
-  const extensions = [...new Set(results.map((r) => {
-    const dot = r.fileName.lastIndexOf('.');
-    return dot > 0 ? r.fileName.slice(dot).toLowerCase() : '(none)';
-  }))].sort();
-
-  // Compute effective date range
-  const effectiveDateFrom = datePreset && datePreset !== 'custom'
-    ? getPresetDate(datePreset)
-    : dateFrom ? new Date(dateFrom) : null;
-  const effectiveDateTo = datePreset === 'custom' && dateTo
-    ? new Date(dateTo + 'T23:59:59.999Z') : null;
-
-  // Apply client-side filters
-  const filtered = results.filter((r) => {
-    if (domainFilter.size > 0 && (!r.domains || !r.domains.some(d => domainFilter.has(d)))) return false;
-    if (authorFilter.size > 0 && (!r.author || !authorFilter.has(r.author))) return false;
-    if (extFilter.size > 0) {
-      const dot = r.fileName.lastIndexOf('.');
-      const ext = dot > 0 ? r.fileName.slice(dot).toLowerCase() : '(none)';
-      if (!extFilter.has(ext)) return false;
-    }
-    if (effectiveDateFrom && r.mtime) {
-      if (new Date(r.mtime) < effectiveDateFrom) return false;
+  }, [facetSelections, facetTextInputs]);
+
+  const activeFacets = facets.filter((f) => activeFacetFields.has(f.field));
+  const inactiveFacets = facets.filter((f) => !activeFacetFields.has(f.field));
+  const filteredInactive = addFilterSearch
+    ? inactiveFacets.filter((f) => formatFieldLabel(f.field).toLowerCase().includes(addFilterSearch.toLowerCase()))
+    : inactiveFacets;
+
+  function renderFacet(f: SearchFacet) {
+    const label = formatFieldLabel(f.field);
+    const remove = () => removeFacetField(f.field);
+
+    if (f.uiHint === 'text' || f.uiHint === 'number') {
+      return (
+        <FacetTextInput
+          key={f.field}
+          label={label}
+          value={facetTextInputs[f.field] ?? ''}
+          onChange={(v) => setFacetTextInputs((prev) => ({ ...prev, [f.field]: v }))}
+          inputType={f.uiHint === 'number' ? 'number' : 'text'}
+          onRemove={remove}
+        />
+      );
     }
-    if (effectiveDateTo && r.mtime) {
-      if (new Date(r.mtime) > effectiveDateTo) return false;
+
+    const sel = facetSelections[f.field] ?? new Set<string>();
+    if (f.values.length <= CHIP_THRESHOLD) {
+      return (
+        <FilterChips key={f.field} label={label} values={f.values} selected={sel}
+          onToggle={(v) => toggleFacet(f.field, v)} onRemove={remove} />
+      );
     }
-    return true;
-  });
+
+    return (
+      <SearchableSelect key={f.field} label={label} values={f.values} selected={sel}
+        onToggle={(v) => toggleFacet(f.field, v)} multi={f.uiHint === 'multiselect'} onRemove={remove} />
+    );
+  }
 
   if (!open) return null;
 
@@ -313,112 +619,117 @@ export function SearchModal({ open, onClose }: SearchModalProps) {
           </button>
         </div>
 
-        {/* Schema-driven facet filters */}
-        {facets.length > 0 && (
-          <div className="px-4 py-2 border-b border-border flex flex-col gap-1.5">
-            {facets
-              .filter((f) => f.values.length > 0 && f.uiHint !== 'hidden')
-              .map((f) => (
-                <FilterChips
-                  key={f.field}
-                  label={f.field.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())}
-                  values={f.values}
-                  selected={facetSelections[f.field] ?? new Set()}
-                  onToggle={(v) => toggleFacet(f.field, v)}
-                />
-              ))}
-          </div>
-        )}
-
-        {/* Post-hoc filter chips — Type always shown when results exist */}
-        {results.length > 0 && (
-          <div className="px-4 py-2 border-b border-border flex flex-col gap-1.5">
-            <FilterChips
-              label="Type"
-              values={extensions}
-              selected={extFilter}
-              onToggle={(v) => toggleFilter(extFilter, setExtFilter, v)}
-            />
-            <FilterChips
-              label="Domain"
-              values={metadata.domains}
-              selected={domainFilter}
-              onToggle={(v) => toggleFilter(domainFilter, setDomainFilter, v)}
-            />
-            <FilterChips
-              label="Author"
-              values={metadata.authors}
-              selected={authorFilter}
-              onToggle={(v) => toggleFilter(authorFilter, setAuthorFilter, v)}
-            />
-            {/* Date range filter */}
-            <div className="flex items-center gap-1.5 flex-wrap">
-              <span className="text-xs text-muted-foreground font-medium">Date:</span>
-              {DATE_PRESETS.map((p) => (
-                <button
-                  key={p.value}
-                  onClick={() => setDatePreset(datePreset === p.value ? null : p.value)}
-                  className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${
-                    datePreset === p.value
-                      ? 'bg-primary text-primary-foreground border-primary'
-                      : 'bg-muted text-muted-foreground border-border hover:bg-accent'
-                  }`}
-                >
-                  {p.label}
-                </button>
-              ))}
-              {datePreset === 'custom' && (
-                <>
-                  <input
-                    type="month"
-                    value={dateFrom}
-                    onChange={(e) => setDateFrom(e.target.value ? e.target.value + '-01' : '')}
-                    className="text-xs px-1.5 py-0.5 rounded border border-border bg-muted text-foreground w-28"
-                    placeholder="From"
-                  />
-                  <span className="text-xs text-muted-foreground">to</span>
-                  <input
-                    type="month"
-                    value={dateTo}
-                    onChange={(e) => setDateTo(e.target.value ? e.target.value + '-28' : '')}
-                    className="text-xs px-1.5 py-0.5 rounded border border-border bg-muted text-foreground w-28"
-                    placeholder="To"
-                  />
-                </>
+        {/* Active facet filters + Add filter button */}
+        <div className="px-4 py-2 border-b border-border flex flex-col gap-1.5">
+          {activeFacets.map(renderFacet)}
+          <div className="flex items-center gap-2">
+            <div className="relative" ref={addFilterRef}>
+              <button
+                onClick={() => {
+                  if (!addFilterOpen) void loadFacets();
+                  setAddFilterOpen(!addFilterOpen);
+                }}
+                className="text-xs px-2 py-0.5 rounded border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-foreground transition-colors flex items-center gap-1"
+              >
+                <Plus className="h-3 w-3" />
+                {facetsLoading ? 'Loading filters...' : 'Add filter'}
+              </button>
+              {addFilterOpen && (
+                <div className="absolute top-full left-0 mt-1 z-50 bg-background border border-border rounded shadow-lg w-56 max-h-48 flex flex-col">
+                  <div className="p-1.5 border-b border-border">
+                    <input
+                      type="text"
+                      value={addFilterSearch}
+                      onChange={(e) => setAddFilterSearch(e.target.value)}
+                      placeholder="Search filters..."
+                      className="text-xs w-full px-2 py-1 rounded border border-border bg-muted text-foreground placeholder:text-muted-foreground outline-none focus:border-primary"
+                      autoFocus
+                    />
+                  </div>
+                  <div className="overflow-y-auto flex-1">
+                    {facetsLoading && (
+                      <div className="px-3 py-2 text-xs text-muted-foreground flex items-center gap-2">
+                        <div className="h-3 w-3 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+                        Loading...
+                      </div>
+                    )}
+                    {!facetsLoading && filteredInactive.length === 0 && (
+                      <div className="px-3 py-2 text-xs text-muted-foreground">
+                        {facets.length === 0 ? 'No filters available' : 'All filters active'}
+                      </div>
+                    )}
+                    {filteredInactive.map((f) => (
+                      <button
+                        key={f.field}
+                        onClick={() => {
+                          addFacetField(f.field);
+                          setAddFilterOpen(false);
+                          setAddFilterSearch('');
+                        }}
+                        className="w-full text-left text-xs px-3 py-1.5 hover:bg-accent transition-colors flex items-center justify-between"
+                      >
+                        <span className="text-foreground">{formatFieldLabel(f.field)}</span>
+                        <span className="text-[10px] text-muted-foreground">
+                          {f.uiHint === 'text' || f.uiHint === 'number' ? f.uiHint : `${f.values.length}`}
+                        </span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
               )}
             </div>
+            {garbageEntries.length > 0 && (
+              <button
+                onClick={() => setShowGarbage(!showGarbage)}
+                className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/10 text-amber-600 border border-amber-500/30 hover:bg-amber-500/20 transition-colors"
+                title="Show inference rule issues"
+              >
+                {garbageEntries.length} issue{garbageEntries.length !== 1 ? 's' : ''}
+              </button>
+            )}
           </div>
-        )}
+          {showGarbage && garbageEntries.length > 0 && (
+            <div className="mt-1 p-2 rounded border border-amber-500/30 bg-amber-500/5 text-xs max-h-32 overflow-y-auto">
+              <div className="text-amber-600 font-medium mb-1">Filtered facet values (inference rule issues):</div>
+              {garbageEntries.map((g) => (
+                <div key={g.field} className="mb-1">
+                  <span className="text-foreground font-medium">{formatFieldLabel(g.field)}</span>
+                  <span className="text-muted-foreground">: </span>
+                  {g.removed.map((r, i) => (
+                    <span key={i} className="text-amber-700">
+                      {i > 0 && ', '}
+                      <code className="bg-amber-500/10 px-0.5 rounded">{r}</code>
+                    </span>
+                  ))}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
 
         {/* Results */}
         <div className="overflow-y-auto flex-1">
-          {error && (
-            <div className="px-4 py-3 text-sm text-red-500">{error}</div>
-          )}
-          {!error && filtered.length === 0 && query.trim() && !loading && (
-            <div className="px-4 py-8 text-center text-muted-foreground text-sm">
-              No results found
-            </div>
+          {error && <div className="px-4 py-3 text-sm text-red-500">{error}</div>}
+          {!error && results.length === 0 && query.trim() && !loading && (
+            <div className="px-4 py-8 text-center text-muted-foreground text-sm">No results found</div>
           )}
           {!error && !query.trim() && !loading && (
             <div className="px-4 py-8 text-center text-muted-foreground text-sm">
               Type a query to search across all documents
             </div>
           )}
-          {filtered.map((r) => (
-            <ResultRow key={r.browsePath} result={r} onNavigate={handleNavigate} />
+          {results.map((r) => (
+            <ResultRow key={r.browsePath} result={r} facets={facets} onNavigate={handleNavigate} onChipClick={handleChipClick} />
           ))}
         </div>
 
         {/* Footer */}
-        {filtered.length > 0 && (
+        {results.length > 0 && (
           <div className="px-4 py-2 border-t border-border text-xs text-muted-foreground">
-            {filtered.length} result{filtered.length !== 1 ? 's' : ''}
-            {filtered.length < results.length && ` (${results.length} total, ${results.length - filtered.length} filtered)`}
+            {results.length} result{results.length !== 1 ? 's' : ''}
           </div>
         )}
       </div>
     </div>
   );
 }
-