feat(web): monitoring column search, close-to-fullscreen, and open/close animation (#1616)

- Add a search box to MonitoringControls (right of the tabs). It's a single
  shared search kept across column tab switches, filtering whichever screen is
  shown. Embedded panels apply this text but still ignore the sidebar-only
  filters (levels/categories/directions/method), which have no control there.
- Close button now uses the "collapse sidebar" icon (TbLayoutSidebarRightCollapse),
  the mirror of the pin button's expand icon.
- Closing the column carries its selection to the primary view: the screen the
  user was watching becomes the active header tab (rather than snapping back to
  the pre-pin selection).
- Animate the column open/close: the handle + column slide in from the right and
  fade (reversing on close) via a Mantine Transition.
- HistoryListPanel: drop the redundant "History (N)" header when there are no
  pinned requests (lone unpinned section renders headerless).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx

@@ -98,11 +98,14 @@ describe("HistoryListPanel", () => {
     expect(screen.getByText("No request history")).toBeInTheDocument();
   });
 
-  it("renders the History title with count for unpinned entries", () => {
+  it("hides the History header when there are no pinned entries", () => {
     renderWithMantine(
       <HistoryListPanel {...baseProps} entries={sampleEntries} />,
     );
-    expect(screen.getByText("History (3)")).toBeInTheDocument();
+    // With no pinned section to distinguish it from, the header is dropped...
+    expect(screen.queryByText("History (3)")).toBeNull();
+    // ...but the entries themselves are still shown.
+    expect(screen.getByText("resources/read")).toBeInTheDocument();
   });
 
   it("renders the Pinned title with count when entries are pinned", () => {
@@ -135,12 +138,13 @@ describe("HistoryListPanel", () => {
     expect(header).toHaveAttribute("aria-expanded", "true");
   });
 
-  it("renders a lone section as a plain (non-collapsible) header with its entries shown", () => {
-    // Only the unpinned section → no accordion toggle, entries always visible.
+  it("renders a lone unpinned section headerless, with its entries shown", () => {
+    // Only the unpinned section → no header at all, no accordion toggle,
+    // entries always visible.
     renderWithMantine(
       <HistoryListPanel {...baseProps} entries={sampleEntries} />,
     );
-    expect(screen.getByText("History (3)")).toBeInTheDocument();
+    expect(screen.queryByText("History (3)")).toBeNull();
     expect(
       screen.queryByRole("button", { name: "History (3)" }),
     ).not.toBeInTheDocument();
@@ -246,8 +250,9 @@ describe("HistoryListPanel", () => {
         visibleDirections={{ client: true, server: false }}
       />,
     );
-    // The server-origin entry is filtered out, leaving one.
-    expect(screen.getByText("History (1)")).toBeInTheDocument();
+    // The server-origin entry is filtered out, leaving the client one.
+    expect(screen.getByText("tools/call")).toBeInTheDocument();
+    expect(screen.queryByText("resources/read")).toBeNull();
   });
 
   it("filters entries by searchText (case-insensitive)", () => {
@@ -258,7 +263,10 @@ describe("HistoryListPanel", () => {
         searchText="config.json"
       />,
     );
-    expect(screen.getByText("History (1)")).toBeInTheDocument();
+    // Only the resources/read entry references config.json.
+    expect(screen.getByText("resources/read")).toBeInTheDocument();
+    expect(screen.queryByText("tools/call")).toBeNull();
+    expect(screen.queryByText("tools/list")).toBeNull();
   });
 
   it("filters entries by methodFilter", () => {
@@ -269,7 +277,9 @@ describe("HistoryListPanel", () => {
         methodFilter="tools/list"
       />,
     );
-    expect(screen.getByText("History (1)")).toBeInTheDocument();
+    expect(screen.getByText("tools/list")).toBeInTheDocument();
+    expect(screen.queryByText("tools/call")).toBeNull();
+    expect(screen.queryByText("resources/read")).toBeNull();
   });
 
   it("invokes onExport when Export is clicked", async () => {

clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx

@@ -128,10 +128,14 @@ function SectionActions({
 // is a `listItem` toggle — with an optional actions slot on the right — over a
 // `Collapse` of the entries. When it's the only section, the accordion makes no
 // sense: the header is a plain title and the entries always show (so a stale
-// collapsed state from when both sections were present can't hide them).
+// collapsed state from when both sections were present can't hide them) —
+// unless `hideHeaderWhenAlone`, in which case the lone section drops its title
+// entirely (the "History" label is redundant when there's nothing to
+// distinguish it from).
 function CollapsibleSection({
   title,
   collapsible,
+  hideHeaderWhenAlone = false,
   open,
   onToggle,
   actions,
@@ -139,6 +143,7 @@ function CollapsibleSection({
 }: {
   title: string;
   collapsible: boolean;
+  hideHeaderWhenAlone?: boolean;
   open: boolean;
   onToggle: () => void;
   actions?: ReactNode;
@@ -147,7 +152,7 @@ function CollapsibleSection({
   if (!collapsible) {
     return (
       <Stack gap="md">
-        <Title order={5}>{title}</Title>
+        {hideHeaderWhenAlone ? null : <Title order={5}>{title}</Title>}
         <Stack gap="md">{children}</Stack>
       </Stack>
     );
@@ -173,13 +178,18 @@ function matchesFilters(
   entry: MessageEntry,
   searchText: string,
   visibleDirections: Record<MessageOrigin, boolean>,
-  methodFilter?: MessageMethod,
+  methodFilter: MessageMethod | undefined,
+  // The embedded column exposes only the search box (no direction/method
+  // controls), so it applies the text filter but skips those (#1616).
+  ignoreDirectionAndMethod: boolean,
 ): boolean {
-  // Hide a direction when its toggle is off. Entries with no recorded origin
-  // (legacy / pre-origin logs) are never filtered out by direction.
-  if (entry.origin && !visibleDirections[entry.origin]) return false;
   const method = extractMethod(entry);
-  if (methodFilter && method !== methodFilter) return false;
+  if (!ignoreDirectionAndMethod) {
+    // Hide a direction when its toggle is off. Entries with no recorded origin
+    // (legacy / pre-origin logs) are never filtered out by direction.
+    if (entry.origin && !visibleDirections[entry.origin]) return false;
+    if (methodFilter && method !== methodFilter) return false;
+  }
   if (searchText) {
     const term = searchText.toLowerCase();
     const responseText = entry.response ? JSON.stringify(entry.response) : "";
@@ -215,14 +225,18 @@ export function HistoryListPanel({
   const [pinnedOpen, setPinnedOpen] = useState(true);
   const [historyOpen, setHistoryOpen] = useState(true);
   const filteredEntries = useMemo(() => {
-    // Embedded column: show the full stream (no filter sidebar to explain a
-    // mirrored filter). See LogStreamPanel (#1616). `.filter()` returns a fresh
-    // array, so sorting in-place is safe.
+    // Embedded column filters by text only (its direction/method controls live
+    // in the full-size sidebar). See LogStreamPanel (#1616). `.filter()` returns
+    // a fresh array, so sorting in-place is safe.
     const sorted = entries
-      .filter(
-        (e) =>
-          embedded ||
-          matchesFilters(e, searchText, visibleDirections, methodFilter),
+      .filter((e) =>
+        matchesFilters(
+          e,
+          searchText,
+          visibleDirections,
+          methodFilter,
+          embedded,
+        ),
       )
       .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
     if (sortDirection === "newest-first") sorted.reverse();
@@ -315,6 +329,9 @@ export function HistoryListPanel({
               <CollapsibleSection
                 title={formatHistoryTitle(unpinnedEntries.length)}
                 collapsible={bothSections}
+                // With no pinned section to distinguish it from, the lone
+                // "History (N)" header is redundant — drop it.
+                hideHeaderWhenAlone
                 open={historyOpen}
                 onToggle={() => setHistoryOpen((v) => !v)}
                 actions={

clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx

@@ -56,8 +56,11 @@ function matchesFilters(
   entry: LogEntryData,
   filterText: string,
   visibleLevels: Record<LoggingLevel, boolean>,
+  // The embedded column exposes only the search box (no level toggles), so it
+  // applies the text filter but skips the level filter (#1616).
+  ignoreLevels: boolean,
 ): boolean {
-  if (!visibleLevels[entry.params.level]) return false;
+  if (!ignoreLevels && !visibleLevels[entry.params.level]) return false;
   if (filterText) {
     const term = filterText.toLowerCase();
     const searchable =
@@ -80,12 +83,11 @@ export function LogStreamPanel({
 }: LogStreamPanelProps) {
   const viewportRef = useScrollMemory("logs-stream");
   const filteredEntries = useMemo(() => {
-    // The embedded column has no filter sidebar, so it shows the full stream
-    // rather than mirroring the full-size screen's live filter with no visible
-    // control to explain it (#1616). `.filter()` returns a fresh array, so
-    // sorting in-place is safe.
+    // The embedded column has only the search box (its level toggles live in the
+    // full-size sidebar), so it filters by text but ignores the level filter
+    // (#1616). `.filter()` returns a fresh array, so sorting in-place is safe.
     const sorted = entries
-      .filter((e) => embedded || matchesFilters(e, filterText, visibleLevels))
+      .filter((e) => matchesFilters(e, filterText, visibleLevels, embedded))
       .sort((a, b) => a.receivedAt.getTime() - b.receivedAt.getTime());
     if (sortDirection === "newest-first") sorted.reverse();
     return sorted;

clients/web/src/components/groups/MonitoringControls/MonitoringControls.stories.tsx

@@ -9,6 +9,8 @@ const meta: Meta<typeof MonitoringControls> = {
     tabs: ["Logs", "History", "Network"],
     value: "Logs",
     onChange: fn(),
+    searchValue: "",
+    onSearchChange: fn(),
     onClose: fn(),
   },
 };

clients/web/src/components/groups/MonitoringControls/MonitoringControls.test.tsx

@@ -1,34 +1,37 @@
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { MonitoringControls } from "./MonitoringControls";
+import {
+  MonitoringControls,
+  type MonitoringControlsProps,
+} from "./MonitoringControls";
 
 const TABS = ["Logs", "History", "Network"];
 
+function renderControls(overrides: Partial<MonitoringControlsProps> = {}) {
+  const props: MonitoringControlsProps = {
+    tabs: TABS,
+    value: "Logs",
+    onChange: vi.fn(),
+    searchValue: "",
+    onSearchChange: vi.fn(),
+    onClose: vi.fn(),
+    ...overrides,
+  };
+  renderWithMantine(<MonitoringControls {...props} />);
+  return props;
+}
+
 describe("MonitoringControls", () => {
   it("renders a radio option for each available tab", () => {
-    renderWithMantine(
-      <MonitoringControls
-        tabs={TABS}
-        value="Logs"
-        onChange={vi.fn()}
-        onClose={vi.fn()}
-      />,
-    );
+    renderControls();
     for (const tab of TABS) {
       expect(screen.getByRole("radio", { name: tab })).toBeInTheDocument();
     }
   });
 
   it("renders only the tabs it is given", () => {
-    renderWithMantine(
-      <MonitoringControls
-        tabs={["Logs", "History"]}
-        value="Logs"
-        onChange={vi.fn()}
-        onClose={vi.fn()}
-      />,
-    );
+    renderControls({ tabs: ["Logs", "History"] });
     expect(screen.getAllByRole("radio")).toHaveLength(2);
     expect(screen.queryByRole("radio", { name: "Network" })).toBeNull();
   });
@@ -39,6 +42,8 @@ describe("MonitoringControls", () => {
         tabs={TABS}
         value="Logs"
         onChange={vi.fn()}
+        searchValue=""
+        onSearchChange={vi.fn()}
         onClose={vi.fn()}
       />,
     );
@@ -48,43 +53,48 @@ describe("MonitoringControls", () => {
   });
 
   it("marks the active tab as selected", () => {
-    renderWithMantine(
-      <MonitoringControls
-        tabs={TABS}
-        value="History"
-        onChange={vi.fn()}
-        onClose={vi.fn()}
-      />,
-    );
+    renderControls({ value: "History" });
     expect(screen.getByRole("radio", { name: "History" })).toBeChecked();
   });
 
   it("calls onChange when a different tab is chosen", async () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
-    renderWithMantine(
-      <MonitoringControls
-        tabs={TABS}
-        value="Logs"
-        onChange={onChange}
-        onClose={vi.fn()}
-      />,
-    );
+    renderControls({ onChange });
     await user.click(screen.getByRole("radio", { name: "Network" }));
     expect(onChange).toHaveBeenCalledWith("Network");
   });
 
+  it("renders the search box with the current value", () => {
+    renderControls({ searchValue: "auth" });
+    expect(screen.getByRole("textbox", { name: "Search" })).toHaveValue("auth");
+  });
+
+  it("calls onSearchChange as the user types", async () => {
+    const user = userEvent.setup();
+    const onSearchChange = vi.fn();
+    renderControls({ onSearchChange });
+    await user.type(screen.getByRole("textbox", { name: "Search" }), "x");
+    expect(onSearchChange).toHaveBeenCalledWith("x");
+  });
+
+  it("clears the search via the clear button", async () => {
+    const user = userEvent.setup();
+    const onSearchChange = vi.fn();
+    renderControls({ searchValue: "term", onSearchChange });
+    await user.click(screen.getByRole("button", { name: "Clear" }));
+    expect(onSearchChange).toHaveBeenCalledWith("");
+  });
+
+  it("shows no clear button when the search is empty", () => {
+    renderControls({ searchValue: "" });
+    expect(screen.queryByRole("button", { name: "Clear" })).toBeNull();
+  });
+
   it("calls onClose when the close button is clicked", async () => {
     const user = userEvent.setup();
     const onClose = vi.fn();
-    renderWithMantine(
-      <MonitoringControls
-        tabs={TABS}
-        value="Logs"
-        onChange={vi.fn()}
-        onClose={onClose}
-      />,
-    );
+    renderControls({ onClose });
     await user.click(
       screen.getByRole("button", { name: "Close monitoring column" }),
     );

clients/web/src/components/groups/MonitoringControls/MonitoringControls.tsx

@@ -1,4 +1,6 @@
-import { CloseButton, Group, SegmentedControl } from "@mantine/core";
+import { ActionIcon, Group, SegmentedControl, TextInput } from "@mantine/core";
+import { TbLayoutSidebarRightCollapse } from "react-icons/tb";
+import { ClearButton } from "../../elements/ClearButton/ClearButton";
 
 export interface MonitoringControlsProps {
   /** The monitor screens currently available to pin (e.g. Logs/History/Network). */
@@ -6,30 +8,46 @@ export interface MonitoringControlsProps {
   /** The active monitor tab shown in the column below. */
   value: string;
   onChange: (tab: string) => void;
+  /** Search text for the active screen (shares the screen's own filter state). */
+  searchValue: string;
+  onSearchChange: (next: string) => void;
   /** Close the monitoring column, returning its screens to the header menu. */
   onClose: () => void;
 }
 
-// The controls row that sits at the top of the pinned monitoring column: a
-// segmented tab switcher on the left, a close button on the right that unpins
-// the whole column.
+// The controls row at the top of the pinned monitoring column: a segmented tab
+// switcher on the left, a search box filling the middle, and a close button on
+// the right that unpins the whole column.
 const ControlsBar = Group.withProps({
-  justify: "space-between",
   wrap: "nowrap",
   gap: "sm",
   p: "sm",
 });
 
+// Search box, styled to match the `*Controls` search fields; `flex:1`/`miw:0`
+// so it fills the space between the tabs and the close button.
+const SearchInput = TextInput.withProps({
+  placeholder: "Search...",
+  size: "sm",
+  flex: 1,
+  miw: 0,
+  "aria-label": "Search",
+});
+
 /**
- * Tab row + close control for the pinned monitoring column (#1616). Renders only
- * the currently-available monitor tabs (the caller filters by capability), so it
- * never shows an empty switcher. Selecting a tab swaps the screen below; the
- * close button unpins the column so its screens rejoin the header tab menu.
+ * Tab row + search + close control for the pinned monitoring column (#1616).
+ * Renders only the currently-available monitor tabs (the caller filters by
+ * capability), so it never shows an empty switcher. Selecting a tab swaps the
+ * screen below; the search box filters the shown screen (wired by the caller to
+ * that screen's own filter state); the close button unpins the column so its
+ * screens rejoin the header tab menu.
  */
 export function MonitoringControls({
   tabs,
   value,
   onChange,
+  searchValue,
+  onSearchChange,
   onClose,
 }: MonitoringControlsProps) {
   return (
@@ -41,7 +59,25 @@ export function MonitoringControls({
         data={tabs}
         aria-label="Monitoring screen"
       />
-      <CloseButton aria-label="Close monitoring column" onClick={onClose} />
+      <SearchInput
+        value={searchValue}
+        onChange={(e) => onSearchChange(e.currentTarget.value)}
+        rightSectionPointerEvents="auto"
+        rightSection={
+          searchValue ? (
+            <ClearButton onClick={() => onSearchChange("")} />
+          ) : null
+        }
+      />
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="lg"
+        aria-label="Close monitoring column"
+        onClick={onClose}
+      >
+        <TbLayoutSidebarRightCollapse size={20} />
+      </ActionIcon>
     </ControlsBar>
   );
 }

clients/web/src/components/groups/MonitoringScreen/MonitoringScreen.stories.tsx

@@ -35,6 +35,8 @@ const meta: Meta<typeof MonitoringScreen> = {
     tabs: ["Logs", "History", "Network"],
     value: "Logs",
     onChange: fn(),
+    searchValue: "",
+    onSearchChange: fn(),
     onClose: fn(),
     screens: demoScreens,
   },

clients/web/src/components/groups/MonitoringScreen/MonitoringScreen.test.tsx

@@ -1,7 +1,10 @@
 import { describe, it, expect, vi } from "vitest";
 import userEvent from "@testing-library/user-event";
 import { renderWithMantine, screen } from "../../../test/renderWithMantine";
-import { MonitoringScreen } from "./MonitoringScreen";
+import {
+  MonitoringScreen,
+  type MonitoringScreenProps,
+} from "./MonitoringScreen";
 
 const TABS = ["Logs", "History", "Network"];
 
@@ -13,32 +16,31 @@ function screens() {
   };
 }
 
+function renderScreen(overrides: Partial<MonitoringScreenProps> = {}) {
+  const props: MonitoringScreenProps = {
+    tabs: TABS,
+    value: "Logs",
+    onChange: vi.fn(),
+    searchValue: "",
+    onSearchChange: vi.fn(),
+    onClose: vi.fn(),
+    screens: screens(),
+    ...overrides,
+  };
+  renderWithMantine(<MonitoringScreen {...props} />);
+  return props;
+}
+
 describe("MonitoringScreen", () => {
   it("renders the screen for the active tab", () => {
-    renderWithMantine(
-      <MonitoringScreen
-        tabs={TABS}
-        value="History"
-        onChange={vi.fn()}
-        onClose={vi.fn()}
-        screens={screens()}
-      />,
-    );
+    renderScreen({ value: "History" });
     expect(screen.getByText("history-body")).toBeInTheDocument();
     expect(screen.queryByText("logs-body")).toBeNull();
     expect(screen.queryByText("network-body")).toBeNull();
   });
 
   it("renders the controls tab row", () => {
-    renderWithMantine(
-      <MonitoringScreen
-        tabs={TABS}
-        value="Logs"
-        onChange={vi.fn()}
-        onClose={vi.fn()}
-        screens={screens()}
-      />,
-    );
+    renderScreen();
     expect(screen.getByRole("radio", { name: "Logs" })).toBeInTheDocument();
     expect(
       screen.getByRole("button", { name: "Close monitoring column" }),
@@ -49,15 +51,7 @@ describe("MonitoringScreen", () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
     const onClose = vi.fn();
-    renderWithMantine(
-      <MonitoringScreen
-        tabs={TABS}
-        value="Logs"
-        onChange={onChange}
-        onClose={onClose}
-        screens={screens()}
-      />,
-    );
+    renderScreen({ onChange, onClose });
     await user.click(screen.getByRole("radio", { name: "Network" }));
     expect(onChange).toHaveBeenCalledWith("Network");
     await user.click(
@@ -66,16 +60,18 @@ describe("MonitoringScreen", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it("forwards the search value and changes from the controls", async () => {
+    const user = userEvent.setup();
+    const onSearchChange = vi.fn();
+    renderScreen({ searchValue: "hi", onSearchChange });
+    const box = screen.getByRole("textbox", { name: "Search" });
+    expect(box).toHaveValue("hi");
+    await user.type(box, "!");
+    expect(onSearchChange).toHaveBeenCalledWith("hi!");
+  });
+
   it("renders nothing in the slot when the active tab has no screen", () => {
-    renderWithMantine(
-      <MonitoringScreen
-        tabs={TABS}
-        value="Network"
-        onChange={vi.fn()}
-        onClose={vi.fn()}
-        screens={{ Logs: <div>logs-body</div> }}
-      />,
-    );
+    renderScreen({ value: "Network", screens: { Logs: <div>logs-body</div> } });
     expect(screen.queryByText("logs-body")).toBeNull();
   });
 });

clients/web/src/components/groups/MonitoringScreen/MonitoringScreen.tsx

@@ -8,6 +8,9 @@ export interface MonitoringScreenProps {
   /** Active monitor tab; keys into `screens` to pick what renders below. */
   value: string;
   onChange: (tab: string) => void;
+  /** Search text for the active screen; wired by the caller to its filter state. */
+  searchValue: string;
+  onSearchChange: (next: string) => void;
   onClose: () => void;
   /**
    * The embedded screen node for each tab, keyed by tab label. The caller builds
@@ -38,6 +41,8 @@ export function MonitoringScreen({
   tabs,
   value,
   onChange,
+  searchValue,
+  onSearchChange,
   onClose,
   screens,
 }: MonitoringScreenProps) {
@@ -47,6 +52,8 @@ export function MonitoringScreen({
         tabs={tabs}
         value={value}
         onChange={onChange}
+        searchValue={searchValue}
+        onSearchChange={onSearchChange}
         onClose={onClose}
       />
       <Divider />

clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx

@@ -58,8 +58,11 @@ function matchesFilters(
   entry: FetchRequestEntry,
   filterText: string,
   visibleCategories: Record<FetchRequestCategory, boolean>,
+  // The embedded column exposes only the search box (no category toggles), so it
+  // applies the text filter but skips the category filter (#1616).
+  ignoreCategories: boolean,
 ): boolean {
-  if (!visibleCategories[entry.category]) return false;
+  if (!ignoreCategories && !visibleCategories[entry.category]) return false;
   if (filterText) {
     const term = filterText.toLowerCase();
     const status =
@@ -98,13 +101,11 @@ export function NetworkStreamPanel({
 }: NetworkStreamPanelProps) {
   const viewportRef = useScrollMemory("network-stream");
   const filteredEntries = useMemo(() => {
-    // Embedded column: show the full stream (no filter sidebar to explain a
-    // mirrored filter). See LogStreamPanel (#1616). `.filter()` returns a fresh
-    // array, so sorting in-place is safe.
+    // Embedded column filters by text only (its category toggles live in the
+    // full-size sidebar). See LogStreamPanel (#1616). `.filter()` returns a
+    // fresh array, so sorting in-place is safe.
     const sorted = entries
-      .filter(
-        (e) => embedded || matchesFilters(e, filterText, visibleCategories),
-      )
+      .filter((e) => matchesFilters(e, filterText, visibleCategories, embedded))
       .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
     if (sortDirection === "newest-first") sorted.reverse();
     return sorted;