@gmickel/gno 0.16.0 → 0.18.0

package/src/serve/public/pages/Search.tsx

@@ -1,4 +1,11 @@
-import { ArrowLeft, FileText, Search as SearchIcon, XIcon } from "lucide-react";
+import {
+  ArrowLeft,
+  ChevronDown,
+  FileText,
+  Search as SearchIcon,
+  SlidersHorizontal,
+  XIcon,
+} from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { Loader } from "../components/ai-elements/loader";
@@ -10,9 +17,28 @@ import {
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/ui/collapsible";
 import { Input } from "../components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../components/ui/select";
 import { apiFetch } from "../hooks/use-api";
 import { useKeyboardShortcuts } from "../hooks/useKeyboardShortcuts";
+import {
+  applyFiltersToUrl,
+  parseFiltersFromSearch,
+  type QueryModeEntry,
+  type QueryModeType,
+  type TagMode,
+} from "../lib/retrieval-filters";
 import { cn } from "../lib/utils";
 
 /**
@@ -56,49 +82,6 @@ function renderSnippet(snippet: string): React.ReactNode {
   return parts;
 }
 
-/**
- * Tag grammar validation (matches src/core/tags.ts).
- * Validates that a tag follows the grammar for filtering.
- */
-const TAG_SEGMENT_REGEX = /^[\p{Ll}\p{Lo}\p{N}][\p{Ll}\p{Lo}\p{N}\-.]*$/u;
-
-function normalizeTag(tag: string): string {
-  return tag.trim().normalize("NFC").toLowerCase();
-}
-
-function isValidTag(tag: string): boolean {
-  if (tag.length === 0) return false;
-  if (tag.startsWith("/") || tag.endsWith("/")) return false;
-  const segments = tag.split("/");
-  for (const segment of segments) {
-    if (segment.length === 0) return false;
-    if (!TAG_SEGMENT_REGEX.test(segment)) return false;
-  }
-  return true;
-}
-
-/** Parse and validate tags from URL search params */
-function parseTagsFromUrl(): string[] {
-  const params = new URLSearchParams(window.location.search);
-  const tagsAny = params.get("tagsAny");
-  if (!tagsAny) return [];
-  return tagsAny
-    .split(",")
-    .map((t) => normalizeTag(t))
-    .filter((t) => t.length > 0 && isValidTag(t));
-}
-
-/** Update URL with tag filters */
-function updateUrlWithTags(tags: string[]): void {
-  const url = new URL(window.location.href);
-  if (tags.length > 0) {
-    url.searchParams.set("tagsAny", tags.join(","));
-  } else {
-    url.searchParams.delete("tagsAny");
-  }
-  window.history.replaceState({}, "", url.toString());
-}
-
 interface PageProps {
   navigate: (to: string | number) => void;
 }
@@ -124,6 +107,11 @@ interface SearchResponse {
     expanded?: boolean;
     reranked?: boolean;
     vectorsUsed?: boolean;
+    queryModes?: {
+      term: number;
+      intent: number;
+      hyde: boolean;
+    };
   };
 }
 
@@ -134,9 +122,24 @@ interface Capabilities {
   answer: boolean;
 }
 
+interface Collection {
+  name: string;
+}
+
 const THOROUGHNESS_ORDER: Thoroughness[] = ["fast", "balanced", "thorough"];
 
+const QUERY_MODE_LABEL: Record<QueryModeType, string> = {
+  term: "Term",
+  intent: "Intent",
+  hyde: "HyDE",
+};
+
 export default function Search({ navigate }: PageProps) {
+  const initialFilters = useMemo(
+    () => parseFiltersFromSearch(window.location.search),
+    []
+  );
+
   const [query, setQuery] = useState("");
   const [thoroughness, setThoroughness] = useState<Thoroughness>("balanced");
   const [results, setResults] = useState<SearchResult[]>([]);
@@ -145,18 +148,76 @@ export default function Search({ navigate }: PageProps) {
   const [error, setError] = useState<string | null>(null);
   const [searched, setSearched] = useState(false);
   const [capabilities, setCapabilities] = useState<Capabilities | null>(null);
+  const [collections, setCollections] = useState<Collection[]>([]);
+
+  const [showAdvanced, setShowAdvanced] = useState(
+    Boolean(
+      initialFilters.collection ||
+      initialFilters.intent ||
+      initialFilters.candidateLimit ||
+      initialFilters.since ||
+      initialFilters.until ||
+      initialFilters.category ||
+      initialFilters.author ||
+      initialFilters.queryModes.length > 0
+    )
+  );
 
-  // Tag filter state - initialized from URL
-  const [activeTags, setActiveTags] = useState<string[]>(() =>
-    parseTagsFromUrl()
+  const [activeTags, setActiveTags] = useState<string[]>(initialFilters.tags);
+  const [tagMode, setTagMode] = useState<TagMode>(initialFilters.tagMode);
+  const [selectedCollection, setSelectedCollection] = useState(
+    initialFilters.collection
   );
+  const [intent, setIntent] = useState(initialFilters.intent);
+  const [candidateLimit, setCandidateLimit] = useState(
+    initialFilters.candidateLimit
+  );
+  const [since, setSince] = useState(initialFilters.since);
+  const [until, setUntil] = useState(initialFilters.until);
+  const [category, setCategory] = useState(initialFilters.category);
+  const [author, setAuthor] = useState(initialFilters.author);
+  const [queryModes, setQueryModes] = useState<QueryModeEntry[]>(
+    initialFilters.queryModes
+  );
+  const [queryModeDraft, setQueryModeDraft] = useState<QueryModeType>("term");
+  const [queryModeText, setQueryModeText] = useState("");
+  const [queryModeError, setQueryModeError] = useState<string | null>(null);
+  const [showMobileTags, setShowMobileTags] = useState(false);
+
+  const hybridAvailable = capabilities?.hybrid ?? false;
+  const forceHybridForModes =
+    thoroughness === "fast" &&
+    (queryModes.length > 0 || intent.trim().length > 0);
 
-  // Sync URL when tags change
+  // Sync URL as filter state changes.
   useEffect(() => {
-    updateUrlWithTags(activeTags);
-  }, [activeTags]);
+    const url = new URL(window.location.href);
+    applyFiltersToUrl(url, {
+      collection: selectedCollection,
+      intent,
+      candidateLimit,
+      since,
+      until,
+      category,
+      author,
+      tagMode,
+      tags: activeTags,
+      queryModes,
+    });
+    window.history.replaceState({}, "", url.toString());
+  }, [
+    activeTags,
+    author,
+    candidateLimit,
+    category,
+    intent,
+    queryModes,
+    selectedCollection,
+    since,
+    tagMode,
+    until,
+  ]);
 
-  // Tag filter handlers
   const handleTagSelect = useCallback((tag: string) => {
     setActiveTags((prev) => (prev.includes(tag) ? prev : [...prev, tag]));
   }, []);
@@ -165,28 +226,29 @@ export default function Search({ navigate }: PageProps) {
     setActiveTags((prev) => prev.filter((t) => t !== tag));
   }, []);
 
-  // Fetch capabilities on mount
   useEffect(() => {
-    async function fetchCapabilities() {
-      const { data } = await apiFetch<Capabilities>("/api/capabilities");
-      if (data) {
-        setCapabilities(data);
-        // Auto-select balanced if hybrid available, otherwise fast (BM25)
-        if (data.hybrid) {
-          setThoroughness("balanced");
-        } else {
-          setThoroughness("fast");
-        }
+    async function bootstrap(): Promise<void> {
+      const [capabilitiesResult, collectionsResult] = await Promise.all([
+        apiFetch<Capabilities>("/api/capabilities"),
+        apiFetch<Collection[]>("/api/collections"),
+      ]);
+
+      if (capabilitiesResult.data) {
+        const caps = capabilitiesResult.data;
+        setCapabilities(caps);
+        setThoroughness(caps.hybrid ? "balanced" : "fast");
+      }
+
+      if (collectionsResult.data) {
+        setCollections(collectionsResult.data);
       }
     }
-    void fetchCapabilities();
+
+    void bootstrap();
   }, []);
 
-  // Cycle thoroughness with 't' key (only cycles to supported modes)
-  const hybridAvailable = capabilities?.hybrid ?? false;
   const cycleThoroughness = useCallback(() => {
     setThoroughness((current) => {
-      // If hybrid not available, stay on fast
       if (!hybridAvailable) return "fast";
       const currentIdx = THOROUGHNESS_ORDER.indexOf(current);
       const nextIdx = (currentIdx + 1) % THOROUGHNESS_ORDER.length;
@@ -198,9 +260,30 @@ export default function Search({ navigate }: PageProps) {
     () => [{ key: "t", action: cycleThoroughness }],
     [cycleThoroughness]
   );
-
   useKeyboardShortcuts(shortcuts);
 
+  const handleAddQueryMode = useCallback(() => {
+    const text = queryModeText.trim();
+    if (!text) {
+      return;
+    }
+    if (
+      queryModeDraft === "hyde" &&
+      queryModes.some((queryMode) => queryMode.mode === "hyde")
+    ) {
+      setQueryModeError("Only one HyDE mode is allowed.");
+      return;
+    }
+    setQueryModes((prev) => [...prev, { mode: queryModeDraft, text }]);
+    setQueryModeText("");
+    setQueryModeError(null);
+  }, [queryModeDraft, queryModeText, queryModes]);
+
+  const handleRemoveQueryMode = useCallback((index: number) => {
+    setQueryModes((prev) => prev.filter((_, i) => i !== index));
+    setQueryModeError(null);
+  }, []);
+
   const handleSearch = useCallback(
     async (e?: React.FormEvent) => {
       e?.preventDefault();
@@ -212,30 +295,59 @@ export default function Search({ navigate }: PageProps) {
       setError(null);
       setSearched(true);
 
-      // Fast uses BM25 (/api/search), balanced/thorough use hybrid (/api/query)
-      const useBm25 = thoroughness === "fast";
+      const useBm25 =
+        thoroughness === "fast" &&
+        queryModes.length === 0 &&
+        intent.trim().length === 0;
       const endpoint = useBm25 ? "/api/search" : "/api/query";
+      const body: Record<string, unknown> = {
+        query,
+        limit: 20,
+      };
 
-      // Build request body
-      const body: Record<string, unknown> = { query, limit: 20 };
-
-      // Add tag filters if present
+      if (selectedCollection) {
+        body.collection = selectedCollection;
+      }
+      if (intent.trim()) {
+        body.intent = intent.trim();
+      }
+      if (candidateLimit.trim()) {
+        body.candidateLimit = Number(candidateLimit);
+      }
+      if (since) {
+        body.since = since;
+      }
+      if (until) {
+        body.until = until;
+      }
+      if (category.trim()) {
+        body.category = category.trim();
+      }
+      if (author.trim()) {
+        body.author = author.trim();
+      }
       if (activeTags.length > 0) {
-        body.tagsAny = activeTags.join(",");
+        if (tagMode === "all") {
+          body.tagsAll = activeTags.join(",");
+        } else {
+          body.tagsAny = activeTags.join(",");
+        }
       }
 
       if (!useBm25) {
-        // Map thoroughness to noExpand/noRerank flags
-        // balanced: with reranking, no expansion (~2-3s)
-        // thorough: full pipeline (~5-8s)
-        if (thoroughness === "balanced") {
+        if (thoroughness === "fast") {
+          body.noExpand = true;
+          body.noRerank = true;
+        } else if (thoroughness === "balanced") {
           body.noExpand = true;
           body.noRerank = false;
         } else {
-          // thorough
           body.noExpand = false;
           body.noRerank = false;
         }
+        if (queryModes.length > 0) {
+          body.queryModes = queryModes;
+        }
       }
 
       const { data, error: fetchError } = await apiFetch<SearchResponse>(
@@ -256,18 +368,41 @@ export default function Search({ navigate }: PageProps) {
         setMeta(data.meta);
       }
     },
-    [query, thoroughness, activeTags]
+    [
+      activeTags,
+      author,
+      candidateLimit,
+      category,
+      intent,
+      query,
+      queryModes,
+      selectedCollection,
+      since,
+      tagMode,
+      thoroughness,
+      until,
+    ]
   );
 
-  // Re-search when tags change (if we've already searched)
+  // Re-search when filters change after an initial search.
   useEffect(() => {
     if (searched && query.trim()) {
       void handleSearch();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [activeTags]);
+  }, [
+    activeTags,
+    author,
+    candidateLimit,
+    category,
+    intent,
+    queryModes,
+    selectedCollection,
+    since,
+    tagMode,
+    until,
+  ]);
 
-  // Description for current thoroughness
   const thoroughnessDesc =
     thoroughness === "fast"
       ? "Keyword search (BM25)"
@@ -275,9 +410,35 @@ export default function Search({ navigate }: PageProps) {
         ? "Hybrid + reranking"
         : "Full pipeline with expansion";
 
+  const activeFilterPills = [
+    selectedCollection ? `collection:${selectedCollection}` : null,
+    intent.trim() ? `intent:${intent.trim()}` : null,
+    candidateLimit.trim() ? `candidates:${candidateLimit.trim()}` : null,
+    since ? `since:${since}` : null,
+    until ? `until:${until}` : null,
+    category.trim() ? `category:${category.trim()}` : null,
+    author.trim() ? `author:${author.trim()}` : null,
+    queryModes.length > 0 ? `${queryModes.length} query mode(s)` : null,
+  ].filter((pill): pill is string => Boolean(pill));
+
+  const hasActiveFilters =
+    activeFilterPills.length > 0 || activeTags.length > 0;
+
+  const clearAdvancedFilters = () => {
+    setSelectedCollection("");
+    setIntent("");
+    setCandidateLimit("");
+    setSince("");
+    setUntil("");
+    setCategory("");
+    setAuthor("");
+    setQueryModes([]);
+    setQueryModeText("");
+    setQueryModeError(null);
+  };
+
   return (
     <div className="min-h-screen">
-      {/* Header */}
       <header className="glass sticky top-0 z-10 border-border/50 border-b">
         <div className="flex items-center gap-4 px-8 py-4">
           <Button
@@ -293,9 +454,7 @@ export default function Search({ navigate }: PageProps) {
         </div>
       </header>
 
-      {/* Main content with sidebar */}
       <div className="flex">
-        {/* Sidebar - Tag Facets */}
         <aside className="sticky top-[65px] hidden h-[calc(100vh-65px)] w-64 shrink-0 overflow-y-auto border-border/30 border-r lg:block">
           <TagFacets
             activeTags={activeTags}
@@ -305,13 +464,10 @@ export default function Search({ navigate }: PageProps) {
           />
         </aside>
 
-        {/* Main content */}
         <main className="min-w-0 flex-1 p-8">
           <div className="mx-auto max-w-3xl">
-            {/* Search Form */}
-            <form className="mb-6" onSubmit={handleSearch}>
+            <form className="mb-6 space-y-4" onSubmit={handleSearch}>
               <div className="group relative">
-                {/* Gradient border effect on focus */}
                 <div className="pointer-events-none absolute -inset-[1px] rounded-lg bg-gradient-to-r from-primary/50 via-primary to-primary/50 opacity-0 blur-sm transition-opacity duration-300 group-focus-within:opacity-100" />
                 <div className="relative">
                   <SearchIcon className="absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground transition-colors duration-200 group-focus-within:text-primary" />
@@ -334,8 +490,7 @@ export default function Search({ navigate }: PageProps) {
                 </div>
               </div>
 
-              {/* Thoroughness selector */}
-              <div className="mt-4 flex flex-wrap items-center gap-4">
+              <div className="flex flex-wrap items-center gap-4">
                 <ThoroughnessSelector
                   disabled={
                     loading || (!hybridAvailable && thoroughness !== "fast")
@@ -348,40 +503,317 @@ export default function Search({ navigate }: PageProps) {
                   {thoroughnessDesc}
                 </span>
 
+                {forceHybridForModes && (
+                  <span className="text-amber-500/80 text-xs">
+                    query modes active: using hybrid endpoint
+                  </span>
+                )}
+
                 {!hybridAvailable && thoroughness !== "fast" && (
                   <span className="text-amber-500/70 text-xs">
                     (vectors not available)
                   </span>
                 )}
               </div>
+
+              <Collapsible onOpenChange={setShowAdvanced} open={showAdvanced}>
+                <CollapsibleTrigger asChild>
+                  <Button
+                    className="gap-2"
+                    size="sm"
+                    type="button"
+                    variant="outline"
+                  >
+                    <SlidersHorizontal className="size-4" />
+                    Advanced Retrieval
+                    <ChevronDown
+                      className={cn(
+                        "size-4 transition-transform",
+                        showAdvanced && "rotate-180"
+                      )}
+                    />
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-3">
+                  <Card className="border-border/50 bg-card/50">
+                    <CardContent className="space-y-4 pt-4">
+                      <div className="grid gap-3 md:grid-cols-2">
+                        <div>
+                          <p className="mb-1 text-muted-foreground text-xs">
+                            Collection
+                          </p>
+                          <Select
+                            onValueChange={(value) =>
+                              setSelectedCollection(
+                                value === "all" ? "" : value
+                              )
+                            }
+                            value={selectedCollection || "all"}
+                          >
+                            <SelectTrigger className="w-full">
+                              <SelectValue placeholder="All collections" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="all">
+                                All collections
+                              </SelectItem>
+                              {collections.map((collection) => (
+                                <SelectItem
+                                  key={collection.name}
+                                  value={collection.name}
+                                >
+                                  {collection.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+
+                        <div>
+                          <p className="mb-1 text-muted-foreground text-xs">
+                            Author
+                          </p>
+                          <Input
+                            onChange={(e) => setAuthor(e.target.value)}
+                            placeholder="gordon"
+                            value={author}
+                          />
+                        </div>
+
+                        <div className="md:col-span-2">
+                          <p className="mb-1 text-muted-foreground text-xs">
+                            Intent
+                          </p>
+                          <Input
+                            onChange={(e) => setIntent(e.target.value)}
+                            placeholder="Disambiguate ambiguous queries without searching on this text"
+                            value={intent}
+                          />
+                        </div>
+
+                        <div>
+                          <p className="mb-1 text-muted-foreground text-xs">
+                            Category
+                          </p>
+                          <Input
+                            onChange={(e) => setCategory(e.target.value)}
+                            placeholder="engineering, research"
+                            value={category}
+                          />
+                        </div>
+
+                        <div className="grid gap-3 sm:grid-cols-2">
+                          <div>
+                            <p className="mb-1 text-muted-foreground text-xs">
+                              Since
+                            </p>
+                            <Input
+                              onChange={(e) => setSince(e.target.value)}
+                              type="date"
+                              value={since}
+                            />
+                          </div>
+                          <div>
+                            <p className="mb-1 text-muted-foreground text-xs">
+                              Until
+                            </p>
+                            <Input
+                              onChange={(e) => setUntil(e.target.value)}
+                              type="date"
+                              value={until}
+                            />
+                          </div>
+                        </div>
+
+                        <div>
+                          <p className="mb-1 text-muted-foreground text-xs">
+                            Candidate limit
+                          </p>
+                          <Input
+                            inputMode="numeric"
+                            min="1"
+                            onChange={(e) => setCandidateLimit(e.target.value)}
+                            placeholder="20"
+                            type="number"
+                            value={candidateLimit}
+                          />
+                        </div>
+                      </div>
+
+                      <div className="flex flex-wrap items-center gap-2">
+                        <span className="text-muted-foreground text-xs">
+                          Tag match:
+                        </span>
+                        <Button
+                          onClick={() => setTagMode("any")}
+                          size="sm"
+                          type="button"
+                          variant={tagMode === "any" ? "default" : "outline"}
+                        >
+                          Any
+                        </Button>
+                        <Button
+                          onClick={() => setTagMode("all")}
+                          size="sm"
+                          type="button"
+                          variant={tagMode === "all" ? "default" : "outline"}
+                        >
+                          All
+                        </Button>
+
+                        <Button
+                          className="ml-auto"
+                          onClick={clearAdvancedFilters}
+                          size="sm"
+                          type="button"
+                          variant="ghost"
+                        >
+                          Clear advanced
+                        </Button>
+                      </div>
+
+                      <div className="space-y-2">
+                        <p className="text-muted-foreground text-xs">
+                          Query modes (term, intent, hyde)
+                        </p>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <Select
+                            onValueChange={(value) =>
+                              setQueryModeDraft(value as QueryModeType)
+                            }
+                            value={queryModeDraft}
+                          >
+                            <SelectTrigger className="w-[120px]">
+                              <SelectValue />
+                            </SelectTrigger>
+                            <SelectContent>
+                              <SelectItem value="term">Term</SelectItem>
+                              <SelectItem value="intent">Intent</SelectItem>
+                              <SelectItem value="hyde">HyDE</SelectItem>
+                            </SelectContent>
+                          </Select>
+                          <Input
+                            className="min-w-[220px] flex-1"
+                            onChange={(e) => setQueryModeText(e.target.value)}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                handleAddQueryMode();
+                              }
+                            }}
+                            placeholder="Add query mode text"
+                            value={queryModeText}
+                          />
+                          <Button
+                            onClick={handleAddQueryMode}
+                            size="sm"
+                            type="button"
+                            variant="outline"
+                          >
+                            Add mode
+                          </Button>
+                        </div>
+
+                        {queryModeError && (
+                          <p className="text-destructive text-xs">
+                            {queryModeError}
+                          </p>
+                        )}
+
+                        {queryModes.length > 0 && (
+                          <div className="flex flex-wrap gap-2">
+                            {queryModes.map((queryMode, index) => (
+                              <button
+                                className={cn(
+                                  "group inline-flex items-center gap-1 rounded-full border border-primary/30 bg-primary/10",
+                                  "px-2.5 py-1 font-mono text-[11px] text-primary transition-all duration-150",
+                                  "hover:border-primary/50 hover:bg-primary/20"
+                                )}
+                                key={`${queryMode.mode}:${queryMode.text}:${index}`}
+                                onClick={() => handleRemoveQueryMode(index)}
+                                type="button"
+                              >
+                                <span>{`${QUERY_MODE_LABEL[queryMode.mode]}: ${queryMode.text}`}</span>
+                                <XIcon className="size-3 opacity-60 transition-opacity group-hover:opacity-100" />
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    </CardContent>
+                  </Card>
+                </CollapsibleContent>
+              </Collapsible>
             </form>
 
-            {/* Active Tag Filter Chips */}
-            {activeTags.length > 0 && (
+            <div className="mb-6 lg:hidden">
+              <Collapsible
+                onOpenChange={setShowMobileTags}
+                open={showMobileTags}
+              >
+                <CollapsibleTrigger asChild>
+                  <Button
+                    className="gap-2"
+                    size="sm"
+                    type="button"
+                    variant="outline"
+                  >
+                    <SlidersHorizontal className="size-4" />
+                    Tags
+                    <ChevronDown
+                      className={cn(
+                        "size-4 transition-transform",
+                        showMobileTags && "rotate-180"
+                      )}
+                    />
+                  </Button>
+                </CollapsibleTrigger>
+                <CollapsibleContent className="pt-3">
+                  <TagFacets
+                    activeTags={activeTags}
+                    className="rounded-md border border-border/50"
+                    onTagRemove={handleTagRemove}
+                    onTagSelect={handleTagSelect}
+                  />
+                </CollapsibleContent>
+              </Collapsible>
+            </div>
+
+            {hasActiveFilters && (
               <div className="mb-6 flex flex-wrap items-center gap-2">
                 <span className="font-mono text-muted-foreground text-xs">
-                  Filtering by:
+                  Filters:
                 </span>
+                {activeFilterPills.map((pill) => (
+                  <Badge
+                    className="font-mono text-[10px]"
+                    key={pill}
+                    variant="outline"
+                  >
+                    {pill}
+                  </Badge>
+                ))}
                 {activeTags.map((tag) => (
                   <button
                     className={cn(
-                      "group inline-flex items-center gap-1",
-                      "rounded-full border border-primary/30 bg-primary/10",
-                      "px-2.5 py-1 font-mono text-xs text-primary",
-                      "transition-all duration-150",
+                      "group inline-flex items-center gap-1 rounded-full border border-primary/30 bg-primary/10",
+                      "px-2.5 py-1 font-mono text-xs text-primary transition-all duration-150",
                       "hover:border-primary/50 hover:bg-primary/20"
                     )}
                     key={tag}
                     onClick={() => handleTagRemove(tag)}
                     type="button"
                   >
-                    <span>{tag}</span>
+                    <span>{`${tagMode}:${tag}`}</span>
                     <XIcon className="size-3 opacity-60 transition-opacity group-hover:opacity-100" />
                   </button>
                 ))}
                 <button
                   className="font-mono text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline"
-                  onClick={() => setActiveTags([])}
+                  onClick={() => {
+                    setActiveTags([]);
+                    clearAdvancedFilters();
+                  }}
                   type="button"
                 >
                   Clear all
@@ -389,7 +821,6 @@ export default function Search({ navigate }: PageProps) {
               </div>
             )}
 
-            {/* Error */}
             {error && (
               <Card className="mb-6 border-destructive bg-destructive/10">
                 <CardContent className="py-4 text-destructive">
@@ -398,7 +829,6 @@ export default function Search({ navigate }: PageProps) {
               </Card>
             )}
 
-            {/* Loading */}
             {loading && (
               <div className="flex flex-col items-center justify-center gap-4 py-20">
                 <Loader className="text-primary" size={32} />
@@ -406,7 +836,6 @@ export default function Search({ navigate }: PageProps) {
               </div>
             )}
 
-            {/* Empty state */}
             {!loading && searched && results.length === 0 && !error && (
               <div className="py-20 text-center">
                 <div className="relative mx-auto mb-6 size-20">
@@ -416,10 +845,8 @@ export default function Search({ navigate }: PageProps) {
                 </div>
                 <h3 className="mb-2 font-semibold text-xl">No matches found</h3>
                 <p className="mx-auto mb-6 max-w-sm text-muted-foreground">
-                  We couldn't find any documents matching "{query}"
-                  {activeTags.length > 0 &&
-                    ` with tags: ${activeTags.join(", ")}`}
-                  . Try different keywords or remove some filters.
+                  We couldn't find any documents matching "{query}". Try fewer
+                  filters, different keywords, or another depth mode.
                 </p>
                 <div className="flex justify-center gap-3">
                   <Button
@@ -429,9 +856,12 @@ export default function Search({ navigate }: PageProps) {
                   >
                     Clear search
                   </Button>
-                  {activeTags.length > 0 && (
+                  {hasActiveFilters && (
                     <Button
-                      onClick={() => setActiveTags([])}
+                      onClick={() => {
+                        setActiveTags([]);
+                        clearAdvancedFilters();
+                      }}
                       size="sm"
                       variant="outline"
                     >
@@ -445,7 +875,6 @@ export default function Search({ navigate }: PageProps) {
               </div>
             )}
 
-            {/* Results */}
             {!loading && results.length > 0 && (
               <div className="space-y-4">
                 <div className="mb-6 flex items-center justify-between">
@@ -478,40 +907,52 @@ export default function Search({ navigate }: PageProps) {
                           reranked
                         </Badge>
                       )}
+                      {meta.queryModes &&
+                        (meta.queryModes.term > 0 ||
+                          meta.queryModes.intent > 0 ||
+                          meta.queryModes.hyde) && (
+                          <Badge
+                            className="font-mono text-[10px]"
+                            variant="secondary"
+                          >
+                            modes
+                          </Badge>
+                        )}
                     </div>
                   )}
                 </div>
-                {results.map((r, i) => (
+                {results.map((result, i) => (
                   <Card
                     className="group animate-fade-in cursor-pointer opacity-0 transition-all hover:border-primary/50 hover:bg-card/80"
-                    key={`${r.docid}-${i}`}
+                    key={`${result.docid}-${i}`}
                     onClick={() =>
-                      navigate(`/doc?uri=${encodeURIComponent(r.uri)}`)
+                      navigate(`/doc?uri=${encodeURIComponent(result.uri)}`)
                     }
                     style={{ animationDelay: `${i * 0.05}s` }}
                   >
                     <CardContent className="py-4">
                       <div className="mb-2 flex items-start justify-between gap-4">
                         <h3 className="font-medium text-primary underline-offset-2 group-hover:underline">
-                          {r.title || r.uri.split("/").pop()}
+                          {result.title || result.uri.split("/").pop()}
                         </h3>
                         <Badge
                           className="shrink-0 font-mono text-xs"
                           variant="secondary"
                         >
-                          {(r.score * 100).toFixed(0)}%
+                          {(result.score * 100).toFixed(0)}%
                         </Badge>
                       </div>
                       <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
-                        {renderSnippet(r.snippet)}
+                        {renderSnippet(result.snippet)}
                       </p>
                       <div className="mt-2 flex items-center gap-2">
                         <p className="truncate font-mono text-muted-foreground/60 text-xs">
-                          {r.uri}
+                          {result.uri}
                         </p>
-                        {r.snippetRange && (
+                        {result.snippetRange && (
                           <span className="shrink-0 font-mono text-[10px] text-muted-foreground/40">
-                            L{r.snippetRange.startLine}-{r.snippetRange.endLine}
+                            L{result.snippetRange.startLine}-
+                            {result.snippetRange.endLine}
                           </span>
                         )}
                       </div>