[local-explorer-ui] match ids by prefix (not substring) in free-text search

Free-text search matched trace/span ids with %q% (substring anywhere), so on
hex ids any short term like "de" matched almost every record and effectively
disabled filtering. Match ids by prefix (q%), consistent with the trace:/span:
filters, while keeping substring matching for names, messages, service, and
attributes.

Author: nickpatt

packages/local-explorer-ui/src/__tests__/observability/id-search.test.ts

@@ -34,6 +34,18 @@ describe("listTraces id search", () => {
 		expect(sql).toContain("SELECT trace_id FROM spans WHERE span_id LIKE ?");
 		expect(params).toContain("def456%");
 	});
+
+	test("free-text matches ids by prefix, names/attrs by substring", async ({
+		expect,
+	}) => {
+		await listTraces({ search: "de" });
+		const { params } = lastQuery();
+		// ids: prefix only (no leading %), so a short hex term doesn't match all.
+		expect(params).toContain("de%");
+		expect(params).not.toContain("%de%de%");
+		// names/attributes: substring.
+		expect(params).toContain("%de%");
+	});
 });
 
 describe("listEvents id search", () => {
@@ -50,4 +62,15 @@ describe("listEvents id search", () => {
 		expect(sql).toContain("l.span_id LIKE ?");
 		expect(params).toContain("def456%");
 	});
+
+	test("free-text matches ids by prefix, message/service by substring", async ({
+		expect,
+	}) => {
+		await listEvents({ search: "de" });
+		const { params } = lastQuery();
+		// ids: prefix only.
+		expect(params).toContain("de%");
+		// message/operation/service: substring.
+		expect(params).toContain("%de%");
+	});
 });

packages/local-explorer-ui/src/utils/observability.ts

@@ -559,10 +559,13 @@ export function listTraces(filters: TraceFilters = {}): Promise<TraceRow[]> {
 	const q = filters.search?.trim();
 	if (q) {
 		const like = `%${q}%`;
+		// ids match as a prefix (like the trace:/span: filters) — a substring
+		// match on hex ids means any short term matches almost everything.
+		const idPrefix = `${q}%`;
 		where.push(
 			"(s.name LIKE ? OR s.trace_id LIKE ? OR s.trace_id IN (SELECT trace_id FROM spans WHERE name LIKE ? OR span_id LIKE ? OR json(attributes) LIKE ?))"
 		);
-		params.push(like, like, like, like, like);
+		params.push(like, idPrefix, like, idPrefix, like);
 	}
 
 	params.push(limit);
@@ -682,10 +685,13 @@ export function listEvents(filters: EventFilters = {}): Promise<LogEvent[]> {
 	const q = filters.search?.trim();
 	if (q) {
 		const like = `%${q}%`;
+		// ids match as a prefix (like the trace:/span: filters) — a substring
+		// match on hex ids means any short term matches almost everything.
+		const idPrefix = `${q}%`;
 		where.push(
 			"(l.message LIKE ? OR l.operation LIKE ? OR sp.service LIKE ? OR l.trace_id LIKE ? OR l.span_id LIKE ?)"
 		);
-		params.push(like, like, like, like, like);
+		params.push(like, like, like, idPrefix, idPrefix);
 	}
 
 	// Structured clauses from the filter modal. Fields map to a concrete log