@fedify/debugger 2.5.0-dev.2287 → 2.5.0-dev.2304

package/dist/mod.cjs

@@ -361,6 +361,13 @@ const Layout = ({ title, pathPrefix, children }) => {
           pre { background: #f6f8fa; padding: 1rem; overflow-x: auto; border-radius: 6px; font-size: 0.8125rem; }
           .empty { color: #888; font-style: italic; }
           nav a { margin-right: 0.5rem; }
+          .filter-form { border: 1px solid #ddd; border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
+          .filter-form fieldset { border: none; padding: 0; margin: 0; }
+          .filter-form legend { font-size: 0.8125rem; color: #666; padding: 0; margin-bottom: 0.5rem; }
+          .filter-form label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 1rem 0.5rem 0; font-size: 0.875rem; }
+          .filter-form select, .filter-form input[type="text"] { font-size: 0.875rem; padding: 0.25rem 0.4rem; }
+          .filter-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.25rem; }
+          .filter-actions button { font-size: 0.8125rem; padding: 0.3rem 0.75rem; cursor: pointer; }
           .log-table td { font-size: 0.8125rem; vertical-align: top; }
           .log-table time { font-family: monospace; white-space: nowrap; }
           .badge-debug { background: #e8e8e8; color: #666; }
@@ -384,6 +391,8 @@ const Layout = ({ title, pathPrefix, children }) => {
             .detail-section h2 { border-bottom-color: #21262d; }
             pre { background: #161b22; }
             .empty { color: #9198a1; }
+            .filter-form { border-color: #30363d; }
+            .filter-form legend { color: #9198a1; }
             .badge-debug { background: #21262d; color: #9198a1; }
             .badge-info { background: #122d42; color: #58a6ff; }
             .badge-warning { background: #2e2a1f; color: #d29922; }
@@ -541,7 +550,8 @@ function safeISOString(timestamp) {
 /**
 * The trace detail page of the debug dashboard.
 */
-const TraceDetailPage = ({ traceId, activities, logs, pathPrefix }) => {
+const TraceDetailPage = ({ traceId, activities, logs, totalLogCount, availableCategories, selectedCategory, selectedLevel, selectedQuery, pathPrefix }) => {
+	const filtered = Boolean(selectedCategory) || Boolean(selectedLevel) || Boolean(selectedQuery);
 	return /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)(Layout, {
 		pathPrefix,
 		title: `Trace ${traceId.slice(0, 8)}`,
@@ -560,11 +570,20 @@ const TraceDetailPage = ({ traceId, activities, logs, pathPrefix }) => {
 				" ",
 				"activit",
 				activities.length !== 1 ? "ies" : "y",
-				",",
-				" ",
-				/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("strong", { children: logs.length }),
-				" log record",
-				logs.length !== 1 ? "s" : ""
+				", ",
+				filtered ? /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("span", { children: [
+					/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("strong", { children: logs.length }),
+					" of ",
+					/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("strong", { children: totalLogCount }),
+					" ",
+					"log record",
+					totalLogCount !== 1 ? "s" : ""
+				] }) : /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("span", { children: [
+					/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("strong", { children: logs.length }),
+					" ",
+					"log record",
+					logs.length !== 1 ? "s" : ""
+				] })
 			] }),
 			activities.length === 0 ? /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("p", {
 				class: "empty",
@@ -610,9 +629,54 @@ const TraceDetailPage = ({ traceId, activities, logs, pathPrefix }) => {
 				]
 			}, activity.spanId)),
 			/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("h2", { children: "Logs" }),
+			availableCategories.length > 0 && /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("form", {
+				class: "filter-form",
+				method: "get",
+				action: `${pathPrefix}/traces/${traceId}`,
+				children: [
+					/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("label", { children: ["Category", /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("select", {
+						name: "category",
+						children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("option", {
+							value: "",
+							children: "All categories"
+						}), availableCategories.map((category) => /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("option", {
+							value: category,
+							selected: category === selectedCategory,
+							children: category
+						}, category))]
+					})] }),
+					/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("label", { children: ["Level", /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("select", {
+						name: "level",
+						children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("option", {
+							value: "",
+							children: "All levels"
+						}), (0, _logtape_logtape.getLogLevels)().map((level) => /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("option", {
+							value: level,
+							selected: level === selectedLevel,
+							children: level
+						}, level))]
+					})] }),
+					/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("label", { children: ["Search", /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("input", {
+						type: "text",
+						name: "q",
+						value: selectedQuery ?? "",
+						placeholder: "Search message…"
+					})] }),
+					/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("div", {
+						class: "filter-actions",
+						children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("button", {
+							type: "submit",
+							children: "Filter"
+						}), filtered && /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("a", {
+							href: `${pathPrefix}/traces/${traceId}`,
+							children: "Clear filters"
+						})]
+					})
+				]
+			}),
 			logs.length === 0 ? /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("p", {
 				class: "empty",
-				children: "No logs captured for this trace."
+				children: filtered ? "No logs match the selected filters." : "No logs captured for this trace."
 			}) : /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("table", {
 				class: "log-table",
 				children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("tr", { children: [
@@ -654,10 +718,31 @@ function formatJson(json) {
 /**
 * The traces list page of the debug dashboard.
 */
-const TracesListPage = ({ traces, pathPrefix }) => {
+const TracesListPage = ({ traces, availableTypes, selectedTypes, initialSnapshot, pathPrefix }) => {
+	const filtered = selectedTypes.length > 0;
 	return /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)(Layout, {
 		pathPrefix,
 		children: [
+			availableTypes.length > 0 && /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("form", {
+				class: "filter-form",
+				method: "get",
+				action: `${pathPrefix}/`,
+				children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("fieldset", { children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("legend", { children: "Filter by activity type" }), availableTypes.map((type) => /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("label", { children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					name: "type",
+					value: type,
+					checked: selectedTypes.includes(type)
+				}), type] }, type))] }), /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("div", {
+					class: "filter-actions",
+					children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("button", {
+						type: "submit",
+						children: "Filter"
+					}), filtered && /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("a", {
+						href: `${pathPrefix}/`,
+						children: "Clear filters"
+					})]
+				})]
+			}),
 			/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("p", { children: [
 				"Showing ",
 				/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("strong", { children: traces.length }),
@@ -668,7 +753,7 @@ const TracesListPage = ({ traces, pathPrefix }) => {
 			] }),
 			traces.length === 0 ? /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("p", {
 				class: "empty",
-				children: "No traces captured yet."
+				children: filtered ? "No traces match the selected filters." : "No traces captured yet."
 			}) : /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("table", { children: [/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsxs)("tr", { children: [
 				/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("th", { children: "Trace ID" }),
 				/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("th", { children: "Activity Types" }),
@@ -694,17 +779,40 @@ const TracesListPage = ({ traces, pathPrefix }) => {
 			] }, trace.traceId)) })] }),
 			/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)("script", { dangerouslySetInnerHTML: { __html: `
 (function() {
+  var selectedTypes = new URLSearchParams(location.search).getAll("type");
+  function snapshotOf(data) {
+    var types = [];
+    var rows = [];
+    for (var i = 0; i < data.length; i++) {
+      var activityTypes = (data[i].activityTypes || []).slice().sort();
+      var matchesFilter = selectedTypes.length === 0;
+      for (var j = 0; j < activityTypes.length; j++) {
+        if (types.indexOf(activityTypes[j]) === -1) types.push(activityTypes[j]);
+        if (!matchesFilter && selectedTypes.indexOf(activityTypes[j]) !== -1) {
+          matchesFilter = true;
+        }
+      }
+      if (matchesFilter) {
+        rows.push(
+          data[i].traceId + ":" + activityTypes.join("+") + ":" +
+            data[i].activityCount,
+        );
+      }
+    }
+    types.sort();
+    rows.sort();
+    return types.join(",") + "|" + rows.join(";");
+  }
+  var prevSnapshot = ${JSON.stringify(initialSnapshot).replace(/</g, "\\u003c")};
   var interval = setInterval(function() {
     fetch(${JSON.stringify(pathPrefix).replace(/</g, "\\u003c")} + "/api/traces")
       .then(function(r) { return r.json(); })
       .then(function(data) {
-        var countEl = document.querySelector("strong");
-        if (countEl) {
-          var current = parseInt(countEl.textContent, 10);
-          if (data.length !== current) {
-            location.reload();
-          }
+        var snapshot = snapshotOf(data);
+        if (snapshot !== prevSnapshot) {
+          location.reload();
         }
+        prevSnapshot = snapshot;
       })
       .catch(function() {});
   }, 3000);
@@ -718,6 +826,64 @@ const TracesListPage = ({ traces, pathPrefix }) => {
 };
 //#endregion
 //#region src/routes.tsx
+/** Collects the distinct activity types across all traces, sorted. */
+function distinctActivityTypes(traces) {
+	const types = /* @__PURE__ */ new Set();
+	for (const trace of traces) for (const type of trace.activityTypes) types.add(type);
+	return [...types].sort();
+}
+/**
+* Keeps only the traces whose `activityTypes` include at least one of the
+* given `types`.  An empty `types` list means "no filter"—all traces pass
+* through unchanged.
+*/
+function filterTracesByTypes(traces, types) {
+	if (types.length === 0) return [...traces];
+	return traces.filter((trace) => trace.activityTypes.some((type) => types.includes(type)));
+}
+/**
+* Computes a string that changes whenever the trace corpus changes in a
+* way the traces list page's live-poll script needs to react to.  Rather
+* than comparing a handful of hand-picked summary fields—which has missed
+* a real change each time a new one turned up—this serializes every trace
+* that currently matches `selectedTypes` as `id:types:activityCount`, so
+* a trace being replaced, an existing trace's activity count going up, or
+* its activity types growing are all covered by the same comparison.  The
+* distinct activity types across *all* traces are tracked separately,
+* since a type that does not match the active filter still needs to make
+* its checkbox appear.  The page embeds this as the poll script's
+* starting point, so the very first poll tick is compared against the
+* data the page was actually rendered with, rather than treating
+* whatever that first tick happens to see as the baseline.
+*/
+function snapshotOf(traces, selectedTypes) {
+	const types = distinctActivityTypes(traces);
+	const rows = filterTracesByTypes(traces, selectedTypes).map((trace) => `${trace.traceId}:${[...trace.activityTypes].sort().join("+")}:${trace.activityCount}`).sort();
+	return `${types.join(",")}|${rows.join(";")}`;
+}
+/** Collects the distinct dot-joined log categories, sorted. */
+function distinctLogCategories(logs) {
+	const categories = /* @__PURE__ */ new Set();
+	for (const log of logs) categories.add(log.category.join("."));
+	return [...categories].sort();
+}
+/** Applies a {@link LogFilter} to a list of log records. */
+function filterLogs(logs, filter) {
+	let filtered = logs;
+	if (filter.category) {
+		const category = filter.category;
+		filtered = filtered.filter((log) => log.category.join(".") === category);
+	}
+	if (filter.level) {
+		const level = filter.level;
+		filtered = filtered.filter((log) => log.level === level);
+	}
+	if (filter.q) {
+		const needle = filter.q.toLowerCase();
+		filtered = filtered.filter((log) => log.message.toLowerCase().includes(needle));
+	}
+	return filtered;
+}
 function createDebugApp(pathPrefix, exporter, logStore, auth) {
 	const app = new hono.Hono({ strict: false }).basePath(pathPrefix);
 	let hmacKeyPromise;
@@ -782,30 +948,50 @@ function createDebugApp(pathPrefix, exporter, logStore, auth) {
 	}
 	app.get("/api/traces", async (c) => {
 		const traces = await exporter.getRecentTraces();
-		return c.json(traces);
+		const types = c.req.queries("type") ?? [];
+		return c.json(filterTracesByTypes(traces, types));
 	});
 	app.get("/api/logs/:traceId", async (c) => {
 		const traceId = c.req.param("traceId");
 		await logStore.flush();
 		const logs = await logStore.get(traceId);
-		return c.json(logs);
+		const logFilter = {
+			category: c.req.query("category"),
+			level: c.req.query("level"),
+			q: c.req.query("q")
+		};
+		return c.json(filterLogs(logs, logFilter));
 	});
 	app.get("/traces/:traceId", async (c) => {
 		const traceId = c.req.param("traceId");
 		await logStore.flush();
 		const activities = await exporter.getActivitiesByTraceId(traceId);
 		const logs = await logStore.get(traceId);
+		const logFilter = {
+			category: c.req.query("category"),
+			level: c.req.query("level"),
+			q: c.req.query("q")
+		};
 		return c.html(/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)(TraceDetailPage, {
 			traceId,
 			activities,
-			logs,
+			logs: filterLogs(logs, logFilter),
+			totalLogCount: logs.length,
+			availableCategories: distinctLogCategories(logs),
+			selectedCategory: logFilter.category,
+			selectedLevel: logFilter.level,
+			selectedQuery: logFilter.q,
 			pathPrefix
 		}));
 	});
 	app.get("/", async (c) => {
 		const traces = await exporter.getRecentTraces();
+		const selectedTypes = c.req.queries("type") ?? [];
 		return c.html(/* @__PURE__ */ (0, hono_jsx_jsx_runtime.jsx)(TracesListPage, {
-			traces,
+			traces: filterTracesByTypes(traces, selectedTypes),
+			availableTypes: distinctActivityTypes(traces),
+			selectedTypes,
+			initialSnapshot: snapshotOf(traces, selectedTypes),
 			pathPrefix
 		}));
 	});

package/dist/mod.js

@@ -1,7 +1,7 @@
 import { Temporal } from "temporal-polyfill";
 import { MemoryKvStore } from "@fedify/fedify/federation";
 import { FedifySpanExporter } from "@fedify/fedify/otel";
-import { configureSync, getConfig } from "@logtape/logtape";
+import { configureSync, getConfig, getLogLevels } from "@logtape/logtape";
 import { context, propagation, trace } from "@opentelemetry/api";
 import { AsyncLocalStorageContextManager } from "@opentelemetry/context-async-hooks";
 import { W3CTraceContextPropagator } from "@opentelemetry/core";
@@ -360,6 +360,13 @@ const Layout = ({ title, pathPrefix, children }) => {
           pre { background: #f6f8fa; padding: 1rem; overflow-x: auto; border-radius: 6px; font-size: 0.8125rem; }
           .empty { color: #888; font-style: italic; }
           nav a { margin-right: 0.5rem; }
+          .filter-form { border: 1px solid #ddd; border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem; }
+          .filter-form fieldset { border: none; padding: 0; margin: 0; }
+          .filter-form legend { font-size: 0.8125rem; color: #666; padding: 0; margin-bottom: 0.5rem; }
+          .filter-form label { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 1rem 0.5rem 0; font-size: 0.875rem; }
+          .filter-form select, .filter-form input[type="text"] { font-size: 0.875rem; padding: 0.25rem 0.4rem; }
+          .filter-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.25rem; }
+          .filter-actions button { font-size: 0.8125rem; padding: 0.3rem 0.75rem; cursor: pointer; }
           .log-table td { font-size: 0.8125rem; vertical-align: top; }
           .log-table time { font-family: monospace; white-space: nowrap; }
           .badge-debug { background: #e8e8e8; color: #666; }
@@ -383,6 +390,8 @@ const Layout = ({ title, pathPrefix, children }) => {
             .detail-section h2 { border-bottom-color: #21262d; }
             pre { background: #161b22; }
             .empty { color: #9198a1; }
+            .filter-form { border-color: #30363d; }
+            .filter-form legend { color: #9198a1; }
             .badge-debug { background: #21262d; color: #9198a1; }
             .badge-info { background: #122d42; color: #58a6ff; }
             .badge-warning { background: #2e2a1f; color: #d29922; }
@@ -540,7 +549,8 @@ function safeISOString(timestamp) {
 /**
 * The trace detail page of the debug dashboard.
 */
-const TraceDetailPage = ({ traceId, activities, logs, pathPrefix }) => {
+const TraceDetailPage = ({ traceId, activities, logs, totalLogCount, availableCategories, selectedCategory, selectedLevel, selectedQuery, pathPrefix }) => {
+	const filtered = Boolean(selectedCategory) || Boolean(selectedLevel) || Boolean(selectedQuery);
 	return /* @__PURE__ */ jsxs(Layout, {
 		pathPrefix,
 		title: `Trace ${traceId.slice(0, 8)}`,
@@ -559,11 +569,20 @@ const TraceDetailPage = ({ traceId, activities, logs, pathPrefix }) => {
 				" ",
 				"activit",
 				activities.length !== 1 ? "ies" : "y",
-				",",
-				" ",
-				/* @__PURE__ */ jsx("strong", { children: logs.length }),
-				" log record",
-				logs.length !== 1 ? "s" : ""
+				", ",
+				filtered ? /* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("strong", { children: logs.length }),
+					" of ",
+					/* @__PURE__ */ jsx("strong", { children: totalLogCount }),
+					" ",
+					"log record",
+					totalLogCount !== 1 ? "s" : ""
+				] }) : /* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("strong", { children: logs.length }),
+					" ",
+					"log record",
+					logs.length !== 1 ? "s" : ""
+				] })
 			] }),
 			activities.length === 0 ? /* @__PURE__ */ jsx("p", {
 				class: "empty",
@@ -609,9 +628,54 @@ const TraceDetailPage = ({ traceId, activities, logs, pathPrefix }) => {
 				]
 			}, activity.spanId)),
 			/* @__PURE__ */ jsx("h2", { children: "Logs" }),
+			availableCategories.length > 0 && /* @__PURE__ */ jsxs("form", {
+				class: "filter-form",
+				method: "get",
+				action: `${pathPrefix}/traces/${traceId}`,
+				children: [
+					/* @__PURE__ */ jsxs("label", { children: ["Category", /* @__PURE__ */ jsxs("select", {
+						name: "category",
+						children: [/* @__PURE__ */ jsx("option", {
+							value: "",
+							children: "All categories"
+						}), availableCategories.map((category) => /* @__PURE__ */ jsx("option", {
+							value: category,
+							selected: category === selectedCategory,
+							children: category
+						}, category))]
+					})] }),
+					/* @__PURE__ */ jsxs("label", { children: ["Level", /* @__PURE__ */ jsxs("select", {
+						name: "level",
+						children: [/* @__PURE__ */ jsx("option", {
+							value: "",
+							children: "All levels"
+						}), getLogLevels().map((level) => /* @__PURE__ */ jsx("option", {
+							value: level,
+							selected: level === selectedLevel,
+							children: level
+						}, level))]
+					})] }),
+					/* @__PURE__ */ jsxs("label", { children: ["Search", /* @__PURE__ */ jsx("input", {
+						type: "text",
+						name: "q",
+						value: selectedQuery ?? "",
+						placeholder: "Search message…"
+					})] }),
+					/* @__PURE__ */ jsxs("div", {
+						class: "filter-actions",
+						children: [/* @__PURE__ */ jsx("button", {
+							type: "submit",
+							children: "Filter"
+						}), filtered && /* @__PURE__ */ jsx("a", {
+							href: `${pathPrefix}/traces/${traceId}`,
+							children: "Clear filters"
+						})]
+					})
+				]
+			}),
 			logs.length === 0 ? /* @__PURE__ */ jsx("p", {
 				class: "empty",
-				children: "No logs captured for this trace."
+				children: filtered ? "No logs match the selected filters." : "No logs captured for this trace."
 			}) : /* @__PURE__ */ jsxs("table", {
 				class: "log-table",
 				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
@@ -653,10 +717,31 @@ function formatJson(json) {
 /**
 * The traces list page of the debug dashboard.
 */
-const TracesListPage = ({ traces, pathPrefix }) => {
+const TracesListPage = ({ traces, availableTypes, selectedTypes, initialSnapshot, pathPrefix }) => {
+	const filtered = selectedTypes.length > 0;
 	return /* @__PURE__ */ jsxs(Layout, {
 		pathPrefix,
 		children: [
+			availableTypes.length > 0 && /* @__PURE__ */ jsxs("form", {
+				class: "filter-form",
+				method: "get",
+				action: `${pathPrefix}/`,
+				children: [/* @__PURE__ */ jsxs("fieldset", { children: [/* @__PURE__ */ jsx("legend", { children: "Filter by activity type" }), availableTypes.map((type) => /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					name: "type",
+					value: type,
+					checked: selectedTypes.includes(type)
+				}), type] }, type))] }), /* @__PURE__ */ jsxs("div", {
+					class: "filter-actions",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "submit",
+						children: "Filter"
+					}), filtered && /* @__PURE__ */ jsx("a", {
+						href: `${pathPrefix}/`,
+						children: "Clear filters"
+					})]
+				})]
+			}),
 			/* @__PURE__ */ jsxs("p", { children: [
 				"Showing ",
 				/* @__PURE__ */ jsx("strong", { children: traces.length }),
@@ -667,7 +752,7 @@ const TracesListPage = ({ traces, pathPrefix }) => {
 			] }),
 			traces.length === 0 ? /* @__PURE__ */ jsx("p", {
 				class: "empty",
-				children: "No traces captured yet."
+				children: filtered ? "No traces match the selected filters." : "No traces captured yet."
 			}) : /* @__PURE__ */ jsxs("table", { children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
 				/* @__PURE__ */ jsx("th", { children: "Trace ID" }),
 				/* @__PURE__ */ jsx("th", { children: "Activity Types" }),
@@ -693,17 +778,40 @@ const TracesListPage = ({ traces, pathPrefix }) => {
 			] }, trace.traceId)) })] }),
 			/* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: `
 (function() {
+  var selectedTypes = new URLSearchParams(location.search).getAll("type");
+  function snapshotOf(data) {
+    var types = [];
+    var rows = [];
+    for (var i = 0; i < data.length; i++) {
+      var activityTypes = (data[i].activityTypes || []).slice().sort();
+      var matchesFilter = selectedTypes.length === 0;
+      for (var j = 0; j < activityTypes.length; j++) {
+        if (types.indexOf(activityTypes[j]) === -1) types.push(activityTypes[j]);
+        if (!matchesFilter && selectedTypes.indexOf(activityTypes[j]) !== -1) {
+          matchesFilter = true;
+        }
+      }
+      if (matchesFilter) {
+        rows.push(
+          data[i].traceId + ":" + activityTypes.join("+") + ":" +
+            data[i].activityCount,
+        );
+      }
+    }
+    types.sort();
+    rows.sort();
+    return types.join(",") + "|" + rows.join(";");
+  }
+  var prevSnapshot = ${JSON.stringify(initialSnapshot).replace(/</g, "\\u003c")};
   var interval = setInterval(function() {
     fetch(${JSON.stringify(pathPrefix).replace(/</g, "\\u003c")} + "/api/traces")
       .then(function(r) { return r.json(); })
       .then(function(data) {
-        var countEl = document.querySelector("strong");
-        if (countEl) {
-          var current = parseInt(countEl.textContent, 10);
-          if (data.length !== current) {
-            location.reload();
-          }
+        var snapshot = snapshotOf(data);
+        if (snapshot !== prevSnapshot) {
+          location.reload();
         }
+        prevSnapshot = snapshot;
       })
       .catch(function() {});
   }, 3000);
@@ -717,6 +825,64 @@ const TracesListPage = ({ traces, pathPrefix }) => {
 };
 //#endregion
 //#region src/routes.tsx
+/** Collects the distinct activity types across all traces, sorted. */
+function distinctActivityTypes(traces) {
+	const types = /* @__PURE__ */ new Set();
+	for (const trace of traces) for (const type of trace.activityTypes) types.add(type);
+	return [...types].sort();
+}
+/**
+* Keeps only the traces whose `activityTypes` include at least one of the
+* given `types`.  An empty `types` list means "no filter"—all traces pass
+* through unchanged.
+*/
+function filterTracesByTypes(traces, types) {
+	if (types.length === 0) return [...traces];
+	return traces.filter((trace) => trace.activityTypes.some((type) => types.includes(type)));
+}
+/**
+* Computes a string that changes whenever the trace corpus changes in a
+* way the traces list page's live-poll script needs to react to.  Rather
+* than comparing a handful of hand-picked summary fields—which has missed
+* a real change each time a new one turned up—this serializes every trace
+* that currently matches `selectedTypes` as `id:types:activityCount`, so
+* a trace being replaced, an existing trace's activity count going up, or
+* its activity types growing are all covered by the same comparison.  The
+* distinct activity types across *all* traces are tracked separately,
+* since a type that does not match the active filter still needs to make
+* its checkbox appear.  The page embeds this as the poll script's
+* starting point, so the very first poll tick is compared against the
+* data the page was actually rendered with, rather than treating
+* whatever that first tick happens to see as the baseline.
+*/
+function snapshotOf(traces, selectedTypes) {
+	const types = distinctActivityTypes(traces);
+	const rows = filterTracesByTypes(traces, selectedTypes).map((trace) => `${trace.traceId}:${[...trace.activityTypes].sort().join("+")}:${trace.activityCount}`).sort();
+	return `${types.join(",")}|${rows.join(";")}`;
+}
+/** Collects the distinct dot-joined log categories, sorted. */
+function distinctLogCategories(logs) {
+	const categories = /* @__PURE__ */ new Set();
+	for (const log of logs) categories.add(log.category.join("."));
+	return [...categories].sort();
+}
+/** Applies a {@link LogFilter} to a list of log records. */
+function filterLogs(logs, filter) {
+	let filtered = logs;
+	if (filter.category) {
+		const category = filter.category;
+		filtered = filtered.filter((log) => log.category.join(".") === category);
+	}
+	if (filter.level) {
+		const level = filter.level;
+		filtered = filtered.filter((log) => log.level === level);
+	}
+	if (filter.q) {
+		const needle = filter.q.toLowerCase();
+		filtered = filtered.filter((log) => log.message.toLowerCase().includes(needle));
+	}
+	return filtered;
+}
 function createDebugApp(pathPrefix, exporter, logStore, auth) {
 	const app = new Hono({ strict: false }).basePath(pathPrefix);
 	let hmacKeyPromise;
@@ -781,30 +947,50 @@ function createDebugApp(pathPrefix, exporter, logStore, auth) {
 	}
 	app.get("/api/traces", async (c) => {
 		const traces = await exporter.getRecentTraces();
-		return c.json(traces);
+		const types = c.req.queries("type") ?? [];
+		return c.json(filterTracesByTypes(traces, types));
 	});
 	app.get("/api/logs/:traceId", async (c) => {
 		const traceId = c.req.param("traceId");
 		await logStore.flush();
 		const logs = await logStore.get(traceId);
-		return c.json(logs);
+		const logFilter = {
+			category: c.req.query("category"),
+			level: c.req.query("level"),
+			q: c.req.query("q")
+		};
+		return c.json(filterLogs(logs, logFilter));
 	});
 	app.get("/traces/:traceId", async (c) => {
 		const traceId = c.req.param("traceId");
 		await logStore.flush();
 		const activities = await exporter.getActivitiesByTraceId(traceId);
 		const logs = await logStore.get(traceId);
+		const logFilter = {
+			category: c.req.query("category"),
+			level: c.req.query("level"),
+			q: c.req.query("q")
+		};
 		return c.html(/* @__PURE__ */ jsx(TraceDetailPage, {
 			traceId,
 			activities,
-			logs,
+			logs: filterLogs(logs, logFilter),
+			totalLogCount: logs.length,
+			availableCategories: distinctLogCategories(logs),
+			selectedCategory: logFilter.category,
+			selectedLevel: logFilter.level,
+			selectedQuery: logFilter.q,
 			pathPrefix
 		}));
 	});
 	app.get("/", async (c) => {
 		const traces = await exporter.getRecentTraces();
+		const selectedTypes = c.req.queries("type") ?? [];
 		return c.html(/* @__PURE__ */ jsx(TracesListPage, {
-			traces,
+			traces: filterTracesByTypes(traces, selectedTypes),
+			availableTypes: distinctActivityTypes(traces),
+			selectedTypes,
+			initialSnapshot: snapshotOf(traces, selectedTypes),
 			pathPrefix
 		}));
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fedify/debugger",
-  "version": "2.5.0-dev.2287+821dfa44",
+  "version": "2.5.0-dev.2304+3a599380",
   "description": "Embedded ActivityPub debug dashboard for Fedify",
   "type": "module",
   "main": "./dist/mod.cjs",
@@ -29,7 +29,7 @@
     "directory": "packages/debugger"
   },
   "peerDependencies": {
-    "@fedify/fedify": "^2.5.0-dev.2287+821dfa44"
+    "@fedify/fedify": "^2.5.0-dev.2304+3a599380"
   },
   "dependencies": {
     "@logtape/logtape": "^2.2.0",