feat: add multimodal search and granular performance diagnostics

apps/desktop/src/main.ts

@@ -1,4 +1,4 @@
-import { invoke, isTauri } from "@tauri-apps/api/core";
+import { invoke, isTauri, convertFileSrc } from "@tauri-apps/api/core";
 import { listen } from "@tauri-apps/api/event";
 import {
   AutomaticIndexGate,
@@ -7,8 +7,22 @@ import {
 } from "./search-state";
 import type { SemanticPhase } from "./search-state";
 import { fileIcon, icon } from "./icons";
+import {
+  SearchMeasurement,
+  measuredFailure,
+  spanDepth,
+  briefMs,
+} from "./search-performance";
+import type { MeasuredResponse, SearchLane } from "./search-performance";
 import "@fontsource-variable/inter/wght.css";
 import "./style.css";
+import {
+  mediaKind,
+  matchLabel,
+  sourceLabel,
+  seekSeconds,
+  PreviewRevision,
+} from "./media-display";
 
 interface SearchResult {
   path: string;
@@ -16,7 +30,7 @@ interface SearchResult {
   snippet: string;
   score: number;
   match_kind: string;
-  source?: { kind: string; number: number };
+  source?: { kind: string; number: number; matched_query?: string };
   extraction_error?: string;
 }
 interface IndexReport {
@@ -55,11 +69,16 @@ interface SemanticStatus {
   stale: boolean;
   pending: number;
   warming: boolean;
+  media_tools_ready?: boolean;
+  media_setup_error?: string | null;
+  media_failures?: { path: string; message: string }[];
   worker_info?: {
     model?: string;
     device?: string;
     runtime?: string;
     threads?: number;
+    dimensions?: number;
+    media_supported?: boolean;
   } | null;
 }
 interface SearchRequest {
@@ -67,15 +86,16 @@ interface SearchRequest {
   query: string;
   filters: Record<string, string | number | null>;
   started: number;
+  measurement: SearchMeasurement;
 }
 
 document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-<header><div class="brand"><img class="brand-symbol" src="/searchi-symbol.png" alt=""><span class="wordmark">searchi</span></div><span id="index-status" class="index-status">Loading your index…</span><div class="header-actions"><button id="add-folder" class="quiet-button" type="button">${icon("folderAdd")}<span>Add folder</span></button><details id="filters" class="popover"><summary>${icon("filter")}<span>All files</span>${icon("chevron")}</summary><div class="popover-panel"><h2>Filter your search</h2><div class="filters-grid"><label>Within folder<input id="filter-folder" placeholder="Absolute folder path"></label><label>Extension<input id="filter-extension" placeholder="pdf, md, txt…"></label><label>Minimum size (bytes)<input id="filter-min" type="number" min="0" step="1"></label><label>Maximum size (bytes)<input id="filter-max" type="number" min="0" step="1"></label><label>Modified from<input id="filter-after" type="date"></label><label>Modified through<input id="filter-before" type="date"></label></div></div></details><details id="settings" class="popover"><summary class="icon-button" aria-label="Settings" title="Settings">${icon("settings")}</summary><div class="popover-panel"><h2>Folders & resources</h2><p id="shortcut-status" class="hint"></p><label class="resource-label" for="cpu-threads">CPU thread budget</label><select id="cpu-threads">${Array.from({ length: 8 }, (_, i) => `<option value="${i + 1}">${i + 1} ${i ? "threads" : "thread (default)"}</option>`).join("")}</select><p class="hint">Search automatically uses supported acceleration with CPU fallback.</p><ul id="roots" aria-label="Selected folders"></ul></div></details></div></header>
+<header><div class="brand"><img class="brand-symbol" src="/searchi-symbol.png" alt=""><span class="wordmark">searchi</span></div><span id="index-status" class="index-status">Loading your index…</span><div class="header-actions"><button id="add-folder" class="quiet-button" type="button">${icon("folderAdd")}<span>Add folder</span></button><details id="filters" class="popover"><summary>${icon("filter")}<span>All files</span>${icon("chevron")}</summary><div class="popover-panel"><h2>Filter your search</h2><div class="filters-grid"><label>Within folder<input id="filter-folder" placeholder="Absolute folder path"></label><label>Extension<input id="filter-extension" placeholder="pdf, md, txt…"></label><label>Minimum size (bytes)<input id="filter-min" type="number" min="0" step="1"></label><label>Maximum size (bytes)<input id="filter-max" type="number" min="0" step="1"></label><label>Minimum duration (seconds)<input id="filter-duration-min" type="number" min="0" step="0.1"></label><label>Maximum duration (seconds)<input id="filter-duration-max" type="number" min="0" step="0.1"></label><label>Modified from<input id="filter-after" type="date"></label><label>Modified through<input id="filter-before" type="date"></label></div></div></details><details id="settings" class="popover"><summary class="icon-button" aria-label="Settings" title="Settings">${icon("settings")}</summary><div class="popover-panel"><h2>Folders & resources</h2><p id="shortcut-status" class="hint"></p><label class="resource-label" for="cpu-threads">CPU thread budget</label><select id="cpu-threads">${Array.from({ length: 8 }, (_, i) => `<option value="${i + 1}">${i + 1} ${i ? "threads" : "thread (default)"}</option>`).join("")}</select><p class="hint">Search automatically uses supported acceleration with CPU fallback.</p><ul id="roots" aria-label="Selected folders"></ul><label class="performance-toggle"><input id="performance-toggle" type="checkbox">Performance details</label><p class="hint">Local timing diagnostics for new searches. Queries and file paths are excluded from copied reports.</p></div></details></div></header>
 <main>
 <form id="search-form" role="search"><label class="sr-only" for="query">Search your files</label>${icon("search")}<input id="query" type="search" placeholder="Search a filename, phrase, or what you remember…" autocomplete="off" spellcheck="false" maxlength="1000"><kbd id="focus-shortcut">Ctrl K</kbd><button id="clear-query" class="icon-button" type="button" aria-label="Clear search" title="Clear search">${icon("dismiss")}</button></form>
 <details id="semantic-panel"><summary>${icon("sparkles")}<span id="semantic-status" role="status" aria-live="polite">Preparing local semantic search…</span><span id="semantic-device" class="kind">Local model</span>${icon("chevron")}</summary><div class="semantic-content"><strong>Google EmbeddingGemma 2</strong><progress id="semantic-progress" aria-label="Local model setup progress"></progress><p id="semantic-detail" class="hint">The verified local model downloads automatically on first launch (865 MB). Your files stay on this device.</p><div class="semantic-actions"><button id="retry-model" type="button" hidden>Retry model setup</button><button id="rebuild-semantic" type="button" hidden>Rebuild semantic index</button></div></div></details>
 <form id="folder-form" hidden><label for="folder">Folder to index</label><div class="folder-row"><input id="folder" placeholder="Absolute folder path" required><button id="browse-folder" type="button">Browse…</button><button type="submit">Index folder</button><button id="cancel-folder" type="button">Cancel</button></div><p class="hint">Only choose folders you want searched. Large folders may take a while.</p></form>
-<p id="notice" role="status" aria-live="polite"></p><div class="workspace"><section class="results-pane" aria-label="Search results"><p id="result-summary" class="eyebrow">READY WHEN YOU ARE</p><ul id="results" aria-label="Matching files"></ul><div id="empty">${icon("search")}<h2>Find what matters. Locally.</h2><p>Index a folder, then search a filename, phrase, or what you remember.</p></div></section><aside id="preview" aria-label="Result preview" hidden><div class="preview-header"><span id="preview-icon" class="file-icon"></span><div class="preview-heading"><h2 id="preview-title"></h2><p id="preview-path" class="path"></p></div></div><div class="preview-toolbar"><span id="preview-kind"></span><div class="preview-actions"><button id="open-result" type="button">${icon("open")}<span>Open file</span></button><button id="reveal-result" type="button" title="Show in folder" aria-label="Show in folder">${icon("folder")}</button></div></div><div class="passage"><p class="eyebrow">EXTRACTED PASSAGE</p><pre id="preview-text"></pre></div></aside></div>
+<p id="notice" role="status" aria-live="polite"></p><details id="performance-panel" hidden><summary>Performance details</summary><div id="performance-detail"></div><button id="copy-performance" type="button">Copy local timing report</button><span id="copy-performance-status" role="status"></span></details><div class="workspace"><section class="results-pane" aria-label="Search results"><p id="result-summary" class="eyebrow">READY WHEN YOU ARE</p><ul id="results" aria-label="Matching files"></ul><div id="empty">${icon("search")}<h2>Find what matters. Locally.</h2><p>Index a folder, then search a filename, phrase, or what you remember.</p></div></section><aside id="preview" aria-label="Result preview" hidden><div class="preview-header"><span id="preview-icon" class="file-icon"></span><div class="preview-heading"><h2 id="preview-title"></h2><p id="preview-path" class="path"></p></div></div><div class="preview-toolbar"><span id="preview-kind"></span><div class="preview-actions"><button id="open-result" type="button">${icon("open")}<span>Open file</span></button><button id="reveal-result" type="button" title="Show in folder" aria-label="Show in folder">${icon("folder")}</button></div></div><div id="media-preview" class="media-preview" hidden></div><p id="media-preview-status" class="hint" role="status" hidden></p><div class="passage"><p id="passage-label" class="eyebrow">EXTRACTED PASSAGE</p><pre id="preview-text"></pre></div></aside></div>
 </main><footer><span class="footer-privacy">${icon("lock")}<span>Private search. Everything stays on your device.</span><span id="privacy" class="privacy">Local</span></span><span class="keyboard-hints"><kbd>${icon("arrowUp")}</kbd><kbd>${icon("arrowDown")}</kbd><span>Navigate</span><kbd>Enter</kbd><span>Open</span><kbd>Esc</kbd><span>Clear</span></span></footer>`;
 
 const element = <T extends HTMLElement>(id: string) =>
@@ -83,6 +103,12 @@ const element = <T extends HTMLElement>(id: string) =>
 const query = element<HTMLInputElement>("query");
 const list = element<HTMLUListElement>("results");
 const notice = element<HTMLParagraphElement>("notice");
+try {
+  element<HTMLInputElement>("performance-toggle").checked =
+    localStorage.getItem("searchi-performance-details") === "true";
+} catch {
+  /* Diagnostics remain opt-in when storage is unavailable. */
+}
 let results: SearchResult[] = [];
 let selected = -1;
 let requestId = 0;
@@ -99,6 +125,89 @@ let folderRevision = 0;
 let localSemanticError: string | null = null;
 let querySemanticFailed = false;
 let previewPath: string | null = null;
+const previewRevision = new PreviewRevision();
+interface PreviewRequest {
+  revision: number;
+  result: SearchResult;
+}
+function unloadMedia() {
+  element("media-preview")
+    .querySelectorAll<HTMLMediaElement>("audio,video")
+    .forEach((player) => {
+      player.pause();
+      player.removeAttribute("src");
+      player.load();
+    });
+  element("media-preview").replaceChildren();
+  element("media-preview").hidden = true;
+  element("media-preview-status").hidden = true;
+}
+function clearMedia() {
+  previewRevision.clear();
+  mediaLane.clear();
+  unloadMedia();
+}
+const mediaLane = new LatestLane<PreviewRequest>(
+  async (request) => {
+    const prepared = await invoke<{
+      path: string;
+      kind: "image" | "audio" | "video";
+    }>("prepare_media_preview", { path: request.result.path });
+    if (!previewRevision.accepts(request.revision)) return;
+    const host = element("media-preview");
+    const status = element("media-preview-status");
+    const failed = () => {
+      if (!previewRevision.accepts(request.revision)) return;
+      status.hidden = false;
+      status.textContent =
+        "This format cannot be previewed here. Use Open file to view it in your default application.";
+    };
+    if (prepared.kind === "image") {
+      const image = document.createElement("img");
+      image.alt = request.result.filename;
+      image.addEventListener("error", failed, { once: true });
+      image.src = convertFileSrc(prepared.path);
+      host.append(image);
+    } else {
+      const player = document.createElement(prepared.kind);
+      player.controls = true;
+      player.preload = "metadata";
+      player.addEventListener("error", failed, { once: true });
+      player.addEventListener(
+        "loadedmetadata",
+        () => {
+          if (!previewRevision.accepts(request.revision)) return;
+          const target = seekSeconds(request.result.source);
+          if (target !== undefined) {
+            if (!Number.isFinite(player.duration) || target > player.duration) {
+              status.hidden = false;
+              status.textContent =
+                "The matched timestamp is unavailable in this preview. Use Open file to check the recording.";
+            } else {
+              try {
+                player.currentTime = target;
+              } catch {
+                failed();
+              }
+            }
+          }
+        },
+        { once: true },
+      );
+      player.src = convertFileSrc(prepared.path);
+      host.append(player);
+    }
+    host.hidden = false;
+    status.hidden = true;
+  },
+  (request) => previewRevision.accepts(request.revision),
+  (request, error) => {
+    if (!previewRevision.accepts(request.revision)) return;
+    element("media-preview-status").hidden = false;
+    element("media-preview-status").textContent =
+      `Preview unavailable: ${String(error)}. Use Open file.`;
+  },
+);
 let displayedRequestId: number | null = null;
 let expandedError: string | null = null;
 const reducedMotion = matchMedia("(prefers-reduced-motion: reduce)");
@@ -168,7 +277,7 @@ async function buildSemanticIndex() {
       "index_embeddings",
     );
     element("semantic-status").textContent =
-      `Semantic search indexed ${report.chunks.toLocaleString()} passages.`;
+      `Semantic search indexed ${report.chunks.toLocaleString()} content segments.`;
   } catch (error) {
     localSemanticError = String(error);
   } finally {
@@ -229,7 +338,7 @@ async function refreshSemanticStatus() {
       message =
         "Building your semantic index… Keyword search remains available.";
     else if (status.ready && status.chunks > 0)
-      message = `Semantic search ready · ${status.chunks.toLocaleString()} passages${status.stale ? " · Updates pending" : ""}`;
+      message = `Semantic search ready · ${status.chunks.toLocaleString()} content segments${status.stale ? " · Updates pending" : ""}${status.media_failures?.length ? ` · ${status.media_failures.length} files could not be indexed` : ""}`;
     else if (status.ready)
       message = "Google model ready. Index a folder to search by meaning.";
     else
@@ -240,6 +349,18 @@ async function refreshSemanticStatus() {
     element("semantic-detail").textContent = status.worker_info
       ? `${status.model} · ${status.worker_info.runtime || "Local inference"} · Your files stay on this device.`
       : "The verified Google model downloads automatically once (865 MB). After setup, inference runs locally.";
+    const mediaDetail = status.media_setup_error
+      ? `Media decoder setup needs attention: ${status.media_setup_error}. Text search remains available.`
+      : status.worker_info && !status.worker_info.media_supported
+        ? "The installed worker needs a media-capable runtime update. Text search remains available."
+        : status.media_tools_ready && status.worker_info?.media_supported
+          ? "Image, audio, and video encoders are available locally."
+          : "Preparing local image, audio, and video support.";
+    element("semantic-detail").textContent += ` ${mediaDetail}`;
+    if (status.media_failures?.length) {
+      element("semantic-detail").textContent +=
+        ` ${status.media_failures.length} files could not be indexed. The first issue: ${status.media_failures[0].path}: ${status.media_failures[0].message}. Filename search remains available; rebuild after fixing the file.`;
+    }
     const retry = element<HTMLButtonElement>("retry-model");
     retry.hidden = !error || status.ready;
     retry.disabled = working;
@@ -266,7 +387,7 @@ async function refreshSemanticStatus() {
       canSearchSemantically() &&
       latestSearch?.id === requestId
     )
-      hybridLane.submit(latestSearch);
+      submitSearch(latestSearch, "hybrid");
     if (working || (!status.ready && !error)) queueSemanticRefresh();
   } catch (error) {
     element("semantic-status").textContent =
@@ -349,15 +470,33 @@ function select(index: number, focus = false) {
   element("preview-title").textContent = result.filename;
   element("preview-path").textContent = result.path;
   element("preview-kind").textContent =
-    `${result.match_kind} match${result.source ? ` · ${result.source.kind} ${result.source.number}` : ""}`;
+    `${matchLabel(result.match_kind)}${result.source ? ` · ${sourceLabel(result.source)}` : ""}`;
+  const media = mediaKind(result.filename);
+  element("passage-label").textContent = media
+    ? "MATCHED CONTENT"
+    : "EXTRACTED PASSAGE";
   element("preview-text").textContent =
     result.snippet ||
     (result.extraction_error
       ? `Content could not be extracted: ${result.extraction_error}`
-      : "No extracted text is available for this file.");
+      : media
+        ? result.source?.matched_query || "Preview the matched media below."
+        : "No extracted text is available for this file.");
   element<HTMLButtonElement>("open-result").title = result.source
-    ? `Opens this file in your default application. ${result.source.kind} ${result.source.number} is shown here; exact-location opening is not supported by the default application interface.`
+    ? `Open in your default application. The matched location ${sourceLabel(result.source)} is shown in Searchi; default application opening starts at its own location.`
     : "Open in your default application";
+  const selection = previewRevision.select(
+    JSON.stringify([result.path, result.source?.kind, result.source?.number]),
+  );
+  if (selection.changed) {
+    mediaLane.clear();
+    unloadMedia();
+    if (media && isTauri()) {
+      element("media-preview-status").hidden = false;
+      element("media-preview-status").textContent = "Preparing media preview…";
+      mediaLane.submit({ revision: selection.revision, result });
+    }
+  }
   if (previewPath !== result.path) {
     const passage = document.querySelector<HTMLElement>(".passage")!;
     passage.scrollTop = 0;
@@ -388,6 +527,7 @@ function render() {
   if (!results.length) {
     element("preview").hidden = true;
     previewPath = null;
+    clearMedia();
   }
   results.forEach((result, i) => {
     let entry = resultRows.get(result.path);
@@ -419,9 +559,7 @@ function render() {
     entry.title.textContent = result.filename;
     entry.path.textContent = result.path;
     entry.snippet.textContent = result.snippet;
-    entry.kind.textContent = result.source
-      ? `${result.source.kind} ${result.source.number}`
-      : result.match_kind;
+    entry.kind.textContent = `${matchLabel(result.match_kind)}${result.source ? ` · ${sourceLabel(result.source)}` : ""}`;
     const asset = fileIcon(result.filename);
     if (entry.file.dataset.type !== asset.type) {
       entry.file.innerHTML = asset.html;
@@ -443,6 +581,14 @@ function captureFilters() {
       throw new Error("File size must be a nonnegative whole number of bytes.");
     return value;
   };
+  const duration = (id: string) => {
+    const text = input(id);
+    if (!text) return null;
+    const ms = Math.round(Number(text) * 1000);
+    if (!Number.isFinite(ms) || ms < 0 || ms > 4_294_967_295)
+      throw new Error("Enter a valid nonnegative media duration in seconds.");
+    return ms;
+  };
   // Date controls represent the user's local calendar day, including its end.
   const date = (id: string, end: boolean) => {
     const text = input(id);
@@ -457,6 +603,8 @@ function captureFilters() {
   return {
     folder: input("filter-folder") || null,
     extension: input("filter-extension") || null,
+    min_duration_ms: duration("filter-duration-min"),
+    max_duration_ms: duration("filter-duration-max"),
     min_size: size("filter-min"),
     max_size: size("filter-max"),
     modified_after_unix_ms: date("filter-after", false),
@@ -474,6 +622,7 @@ function applyResults(
     (lane === "lexical" && shownLane === "hybrid")
   )
     return;
+  const renderStarted = performance.now();
   const selectedPath = results[selected]?.path;
   const resultsHadFocus = list.contains(document.activeElement);
   shownLane = lane;
@@ -484,18 +633,131 @@ function applyResults(
   const preserved = results.findIndex((result) => result.path === selectedPath);
   if (preserved >= 0) select(preserved, resultsHadFocus);
   else if (results.length) select(0, resultsHadFocus);
-  element("result-summary").textContent =
-    `${found.length} RESULTS · ${lane === "hybrid" ? "KEYWORD + MEANING" : "KEYWORD"} · ${Math.round(performance.now() - request.started)} MS`;
   if (!found.length) refreshEmptySearchState();
+  request.measurement.displayed(
+    lane,
+    renderStarted,
+    performance.now(),
+    found.length,
+  );
+  const metric = request.measurement.latestNative(lane);
+  const trace = request.measurement.export();
+  element("result-summary").textContent =
+    `${found.length} RESULTS · ${lane === "hybrid" ? "KEYWORD + MEANING" : "KEYWORD"} · NATIVE ${briefMs(metric?.total_ms ?? 0)} MS · ${lane === "hybrid" ? "FINAL" : "FIRST RESPONSE"} ${Math.round(lane === "hybrid" ? (trace.hybrid_final_results_ms ?? 0) : (trace.first_results_ms ?? 0))} MS`;
+  refreshPerformance(request);
+}
+
+function refreshPerformance(request: SearchRequest) {
+  if (request.id !== requestId) return;
+  const panel = element<HTMLDetailsElement>("performance-panel");
+  panel.hidden = !request.measurement.debug;
+  if (!request.measurement.debug) return;
+  const body = element("performance-detail");
+  body.replaceChildren();
+  const report = request.measurement.export();
+  const append = (text: string, className = "") => {
+    const row = document.createElement("p");
+    row.textContent = text;
+    row.className = className;
+    body.append(row);
+    return row;
+  };
+  append(
+    "Times below use separate UI and native clocks. Nested spans and parallel lanes must not be added together. DOM update measures synchronous changes, not paint or deferred media preview loading.",
+    "hint",
+  );
+  append(
+    `Input debounce ${report.debounce_ms.toFixed(1)} ms · First displayed response ${report.first_results_ms?.toFixed(1) ?? "pending"} ms · Latest displayed ${report.latest_displayed_ms?.toFixed(1) ?? "pending"} ms · Hybrid final ${report.hybrid_final_results_ms?.toFixed(1) ?? "pending / unavailable"} ms`,
+  );
+  for (const [lane, delay] of Object.entries(report.lane_schedule_ms))
+    append(
+      `${lane}: scheduled ${delay.toFixed(1)} ms after debounce${lane === "hybrid" ? " (includes intentional 350 ms semantic delay or waiting for readiness)" : ""}`,
+    );
+  for (const attempt of report.attempts) {
+    append(
+      `${attempt.lane} attempt ${attempt.attempt}${attempt.failed ? " · FAILED" : ""}: pending queue ${attempt.queued_ms.toFixed(1)} ms · retry wait ${attempt.retry_wait_ms.toFixed(1)} ms · invoke ${attempt.invoke_ms.toFixed(1)} ms`,
+      "performance-attempt",
+    );
+    if (!attempt.native) {
+      append("Native timing unavailable for this failure.", "hint");
+      continue;
+    }
+    append(
+      `Native command ${attempt.native.total_ms.toFixed(1)} ms · ${attempt.native.result_count} results · estimated transport / serialization / scheduling ${attempt.transport_estimate_ms?.toFixed(1)} ms`,
+      "hint",
+    );
+    if (attempt.native.trace === null)
+      append("Detailed native trace unavailable for this attempt.", "hint");
+    const spans = attempt.native.trace ?? [];
+    spans.forEach((span, index) => {
+      const counts = Object.entries(span.counters)
+        .map(([name, value]) =>
+          name.endsWith("_us")
+            ? `${name.slice(0, -3).replaceAll("_", " ")}: ${(value / 1000).toFixed(3)} ms`
+            : `${name.replaceAll("_", " ")}: ${value}`,
+        )
+        .join(" · ");
+      const row = append(
+        `${span.name}: ${span.duration_ms.toFixed(2)} ms · starts +${span.start_ms.toFixed(2)} ms${counts ? ` · ${counts}` : ""}`,
+        "performance-span",
+      );
+      row.style.paddingLeft = `${spanDepth(spans, index) * 14}px`;
+    });
+    if (attempt.native.dropped_spans)
+      append(`${attempt.native.dropped_spans} native spans dropped.`, "hint");
+  }
+  for (const display of report.displays)
+    append(
+      `${display.lane} synchronous DOM update ${display.dom_update_ms.toFixed(2)} ms · ${display.count} displayed results`,
+      "hint",
+    );
+  if (report.dropped_attempts || report.dropped_displays)
+    append(
+      `History capped: ${report.dropped_attempts} attempts and ${report.dropped_displays} displays dropped.`,
+      "hint",
+    );
+}
+
+async function invokeMeasured(request: SearchRequest, lane: SearchLane) {
+  const attempt = request.measurement.begin(lane, performance.now());
+  try {
+    const response = await invoke<MeasuredResponse<SearchResult>>(
+      lane === "lexical" ? "search_measured" : "hybrid_search_measured",
+      {
+        query: request.query,
+        filters: request.filters,
+        debugPerformance: request.measurement.debug,
+      },
+    );
+    request.measurement.completed(
+      attempt,
+      performance.now(),
+      response.metrics,
+      false,
+    );
+    return response.results;
+  } catch (error) {
+    const failure = measuredFailure(error);
+    request.measurement.completed(
+      attempt,
+      performance.now(),
+      failure?.metrics ?? null,
+      true,
+    );
+    refreshPerformance(request);
+    throw failure ? new Error(failure.message) : error;
+  }
+}
+
+function submitSearch(request: SearchRequest, lane: SearchLane) {
+  request.measurement.submitted(lane, performance.now());
+  (lane === "lexical" ? lexicalLane : hybridLane).submit(request);
 }
 
 const isCurrent = (request: SearchRequest) => request.id === requestId;
 const lexicalLane = new LatestLane<SearchRequest>(
   async (request) => {
-    const found = await invoke<SearchResult[]>("search", {
-      query: request.query,
-      filters: request.filters,
-    });
+    const found = await invokeMeasured(request, "lexical");
     applyResults(found, request, "lexical");
   },
   isCurrent,
@@ -509,10 +771,7 @@ const lexicalLane = new LatestLane<SearchRequest>(
 const hybridLane = new LatestLane<SearchRequest>(
   async (request) => {
     if (!canSearchSemantically()) return;
-    const found = await invoke<SearchResult[]>("hybrid_search", {
-      query: request.query,
-      filters: request.filters,
-    });
+    const found = await invokeMeasured(request, "hybrid");
     applyResults(found, request, "hybrid");
   },
   isCurrent,
@@ -534,12 +793,13 @@ function invalidateSearch() {
   latestSearch = null;
 }
 
-async function search() {
+async function search(inputAt = performance.now()) {
   invalidateSearch();
   querySemanticFailed = false;
   shownLane = "lexical";
   const value = query.value.trim();
   if (!value) {
+    element("performance-panel").hidden = true;
     results = [];
     displayedRequestId = null;
     selected = -1;
@@ -557,13 +817,28 @@ async function search() {
       query: value,
       filters: captureFilters(),
       started: performance.now(),
+      measurement: new SearchMeasurement(
+        inputAt,
+        performance.now(),
+        element<HTMLInputElement>("performance-toggle").checked,
+        {
+          model: semanticStatus?.worker_info?.model ?? null,
+          device: semanticStatus?.worker_info?.device ?? null,
+          runtime: semanticStatus?.worker_info?.runtime ?? null,
+          threads: semanticStatus?.worker_info?.threads ?? null,
+          dimensions: semanticStatus?.worker_info?.dimensions ?? null,
+          semantic_ready: canSearchSemantically(),
+          indexed_chunks: semanticStatus?.chunks ?? null,
+        },
+      ),
     };
     latestSearch = request;
+    refreshPerformance(request);
     element("result-summary").textContent = "SEARCHING…";
-    lexicalLane.submit(request);
+    submitSearch(request, "lexical");
     hybridTimer = setTimeout(() => {
       if (isCurrent(request) && canSearchSemantically())
-        hybridLane.submit(request);
+        submitSearch(request, "hybrid");
     }, 350);
   } catch (error) {
     showError(error);
@@ -573,12 +848,41 @@ async function search() {
 async function refreshStats() {
   const stats = await invoke<IndexStats>("stats");
   element("index-status").textContent =
-    `${stats.files.toLocaleString()} files · ${stats.content_files.toLocaleString()} with searchable content`;
+    `${stats.files.toLocaleString()} files · ${stats.content_files.toLocaleString()} with extracted text`;
 }
 
 query.addEventListener("input", () => {
+  const inputAt = performance.now();
   invalidateSearch();
-  timer = setTimeout(search, 60);
+  timer = setTimeout(() => void search(inputAt), 60);
+});
+element("performance-toggle").addEventListener("change", () => {
+  const enabled = element<HTMLInputElement>("performance-toggle").checked;
+  try {
+    localStorage.setItem("searchi-performance-details", String(enabled));
+  } catch {
+    /* Session preference still works. */
+  }
+  void search();
+});
+element("copy-performance").addEventListener("click", () => {
+  if (!latestSearch?.measurement.debug) return;
+  if (!navigator.clipboard) {
+    element("copy-performance-status").textContent =
+      "Clipboard unavailable. Timings remain visible here.";
+    return;
+  }
+  const report = JSON.stringify(latestSearch.measurement.export(), null, 2);
+  void navigator.clipboard.writeText(report).then(
+    () => {
+      element("copy-performance-status").textContent =
+        "Timing report copied. No query or file paths included.";
+    },
+    () => {
+      element("copy-performance-status").textContent =
+        "Clipboard unavailable. Timings remain visible here.";
+    },
+  );
 });
 element("search-form").addEventListener("submit", (event) => {
   event.preventDefault();
@@ -714,6 +1018,7 @@ document.addEventListener("keydown", (event) => {
     query.select();
   }
   if (event.key === "Escape") {
+    clearMedia();
     document
       .querySelectorAll<HTMLDetailsElement>(".popover[open]")
       .forEach((popover) => {