add span filtering

Author: DanielFGray

src/index.tsx

@@ -10,6 +10,7 @@ import { MetricsView, MetricDetailsPanel } from "./metricsView";
 import { ClientDropdown } from "./clientDropdown";
 import { ResizableBox } from "./resizableBox";
 import { CommandPalette } from "./commandPalette";
+import { SpanFilterInput } from "./spanFilterInput";
 import type { ScrollBoxRenderable } from "@opentui/core";
 
 /**
@@ -61,6 +62,7 @@ Clients Section:
     Navigate to select span with arrows or hjkl
     Press l/→ to expand and navigate into children
     Press h/← to collapse and navigate to parent
+    Press "/" to open span filter (search by name)
     Selected span details shown in right panel
 
 Metrics Section:
@@ -125,18 +127,7 @@ function AppContent() {
 
   // Setup keyboard handlers
   useKeyboard((key) => {
-    // Quit handlers
-    if (key.name === "q" && !key.ctrl) {
-      renderer.stop();
-      process.exit(0);
-    }
-    if (key.raw === "\u0003") {
-      // Ctrl+C
-      renderer.stop();
-      process.exit(0);
-    }
-
-    // Command palette keyboard handling (must be before other handlers)
+    // Command palette keyboard handling (must be before quit handlers)
     if (store.ui.showCommandPalette) {
       // Close on Esc
       if (key.name === "escape") {
@@ -176,6 +167,50 @@ function AppContent() {
       return;
     }
 
+    // Span filter keyboard handling (must be before quit handlers)
+    if (store.ui.showSpanFilter) {
+      if (key.name === "escape") {
+        // Cancel: close filter and clear query
+        actions.clearSpanFilter();
+        actions.toggleSpanFilter();
+        return;
+      }
+
+      if (key.name === "return" || key.name === "enter") {
+        // Confirm: close filter but keep query active
+        actions.toggleSpanFilter();
+        return;
+      }
+
+      if (key.name === "backspace") {
+        const currentQuery = store.ui.spanFilterQuery;
+        if (currentQuery.length > 0) {
+          actions.setSpanFilterQuery(currentQuery.slice(0, -1));
+        }
+        return;
+      }
+
+      // Handle printable characters (including 'q')
+      if (key.raw && key.raw.length === 1 && !key.ctrl && !key.meta) {
+        actions.setSpanFilterQuery(store.ui.spanFilterQuery + key.raw);
+        return;
+      }
+
+      // Prevent other keys from doing anything when filter is open
+      return;
+    }
+
+    // Quit handlers (after modal input handlers)
+    if (key.name === "q" && !key.ctrl) {
+      renderer.stop();
+      process.exit(0);
+    }
+    if (key.raw === "\u0003") {
+      // Ctrl+C
+      renderer.stop();
+      process.exit(0);
+    }
+
     // Help toggle
     if (key.name === "?") {
       actions.toggleHelp();
@@ -259,6 +294,28 @@ function AppContent() {
       }
       return;
     }
+
+    // Span filter toggle with "/" key (only when spans section is focused)
+    if (
+      key.raw === "/" &&
+      !key.ctrl &&
+      !key.meta &&
+      store.ui.focusedSection === "spans"
+    ) {
+      actions.toggleSpanFilter();
+      return;
+    }
+
+    // Clear active span filter with Escape when not in filter input mode
+    if (
+      key.name === "escape" &&
+      store.ui.focusedSection === "spans" &&
+      store.ui.spanFilterQuery.length > 0 &&
+      !store.ui.showSpanFilter
+    ) {
+      actions.clearSpanFilter();
+      return;
+    }
   });
 
   const statusText = () => {
@@ -356,6 +413,31 @@ function AppContent() {
                   .pipe(Option.getOrElse(() => "None"))}`}
               </text>
 
+              {/* Span filter input (shown when typing) */}
+              <Show when={store.ui.showSpanFilter}>
+                <SpanFilterInput />
+              </Show>
+
+              {/* Active filter indicator (shown when filter closed but query active) */}
+              <Show
+                when={
+                  !store.ui.showSpanFilter &&
+                  store.ui.spanFilterQuery.length > 0
+                }
+              >
+                <box
+                  flexDirection="row"
+                  width="100%"
+                  paddingLeft={1}
+                  paddingBottom={1}
+                  flexShrink={0}
+                >
+                  <text style={{ fg: "#f7768e" }}>
+                    {`Filter: "${store.ui.spanFilterQuery}" (press / to edit, Esc to clear)`}
+                  </text>
+                </box>
+              </Show>
+
               {/* Side-by-side: Span list and details */}
               <box flexDirection="row" flexGrow={1}>
                 {/* Span list - left side */}
@@ -368,6 +450,7 @@ function AppContent() {
                     spans={store.spans}
                     selectedSpanId={store.ui.selectedSpanId}
                     expandedSpanIds={store.ui.expandedSpanIds}
+                    filterQuery={store.ui.spanFilterQuery || undefined}
                   />
                 </scrollbox>
 

src/spanTree.tsx

@@ -39,6 +39,7 @@ interface TreeNode {
 function buildHierarchicalSpanTree(
   spans: ReadonlyArray<SimpleSpan>,
   expandedSpanIds: Set<string>,
+  filterQuery?: string,
 ): TreeNode[] {
   const result: TreeNode[] = [];
 
@@ -51,7 +52,15 @@ function buildHierarchicalSpanTree(
       deduped.set(span.spanId, span);
     }
   }
-  const uniqueSpans = Array.from(deduped.values());
+  let uniqueSpans = Array.from(deduped.values());
+
+  // Apply filter if provided
+  if (filterQuery && filterQuery.trim()) {
+    const lowerQuery = filterQuery.toLowerCase();
+    uniqueSpans = uniqueSpans.filter((span) =>
+      span.name.toLowerCase().includes(lowerQuery),
+    );
+  }
 
   const spanMap = new Map(uniqueSpans.map((s) => [s.spanId, s]));
   const visited = new Set<string>(); // Track visited spans to prevent duplicates
@@ -226,10 +235,15 @@ export function SpanTreeView(props: {
   spans: ReadonlyArray<SimpleSpan>;
   selectedSpanId: string | null;
   expandedSpanIds: Set<string>;
+  filterQuery?: string;
 }) {
-  // Memoize tree - will re-run whenever spans or expandedSpanIds change
+  // Memoize tree - will re-run whenever spans, expandedSpanIds, or filterQuery change
   const visibleNodes = createMemo(() =>
-    buildHierarchicalSpanTree(props.spans, props.expandedSpanIds),
+    buildHierarchicalSpanTree(
+      props.spans,
+      props.expandedSpanIds,
+      props.filterQuery,
+    ),
   );
 
   return (

src/store.tsx

@@ -67,6 +67,8 @@ export interface UIState {
   clientsExpanded: boolean; // For client dropdown
   spansHeight: number; // Height of the spans section (for resizing)
   metricsHeight: number; // Height of the metrics section
+  spanFilterQuery: string; // Filter query for spans
+  showSpanFilter: boolean; // Whether span filter input is visible
 }
 
 export interface StoreState {
@@ -120,6 +122,9 @@ export interface StoreActions {
   toggleExpand: () => void;
   setSpansHeight: (height: number) => void;
   setMetricsHeight: (height: number) => void;
+  setSpanFilterQuery: (query: string) => void;
+  toggleSpanFilter: () => void;
+  clearSpanFilter: () => void;
 }
 
 export interface StoreContext {
@@ -279,6 +284,8 @@ export function StoreProvider(props: ParentProps) {
       clientsExpanded: false,
       spansHeight: 35, // Default height for spans section
       metricsHeight: 6,
+      spanFilterQuery: "",
+      showSpanFilter: false,
     },
     debugCounter: 0,
   });
@@ -861,6 +868,20 @@ export function StoreProvider(props: ParentProps) {
     setMetricsHeight: (height: number) => {
       setStore("ui", "metricsHeight", height);
     },
+
+    setSpanFilterQuery: (query: string) => {
+      setStore("ui", "spanFilterQuery", query);
+    },
+
+    toggleSpanFilter: () => {
+      // Just toggle visibility - don't clear query
+      // Query is preserved so user can continue editing when reopening
+      setStore("ui", "showSpanFilter", (prev) => !prev);
+    },
+
+    clearSpanFilter: () => {
+      setStore("ui", "spanFilterQuery", "");
+    },
   };
 
   // Export actions globally so Effect runtime can access them