feat(sort): add SortToggle for Logs, History, and Network (#1371)

Introduces a reusable SortToggle element and wires it into the Logs,
History, and Network screens so users can flip chronological order.
Selection is persisted per-screen to localStorage under the
inspector.sortDirection.* namespace, with invalid stored values falling
back to the newest-first default.

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

Author: cliffhall

clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
+import { SortToggle } from "./SortToggle";
+
+const meta: Meta<typeof SortToggle> = {
+  title: "Elements/SortToggle",
+  component: SortToggle,
+  args: {
+    onChange: fn(),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SortToggle>;
+
+export const NewestFirst: Story = {
+  args: {
+    value: "newest-first",
+  },
+};
+
+export const OldestFirst: Story = {
+  args: {
+    value: "oldest-first",
+  },
+};
+
+export const FlipsDirection: Story = {
+  args: {
+    value: "newest-first",
+  },
+  play: async ({ canvasElement, args }) => {
+    const body = within(canvasElement.ownerDocument.body);
+    const select = await body.findByRole("textbox", {
+      name: "Sort direction",
+    });
+    await userEvent.click(select);
+    const oldestOption = await body.findByText("Sort: Oldest First");
+    await userEvent.click(oldestOption);
+    await expect(args.onChange).toHaveBeenCalledWith("oldest-first");
+  },
+};

clients/web/src/components/elements/SortToggle/SortToggle.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi } from "vitest";
+import userEvent from "@testing-library/user-event";
+import { renderWithMantine, screen } from "../../../test/renderWithMantine";
+import { SortToggle } from "./SortToggle";
+
+describe("SortToggle", () => {
+  it("renders the current value as the selected option", () => {
+    renderWithMantine(<SortToggle value="newest-first" onChange={() => {}} />);
+    expect(screen.getByDisplayValue("Sort: Newest First")).toBeInTheDocument();
+  });
+
+  it("renders 'Oldest First' when value is oldest-first", () => {
+    renderWithMantine(<SortToggle value="oldest-first" onChange={() => {}} />);
+    expect(screen.getByDisplayValue("Sort: Oldest First")).toBeInTheDocument();
+  });
+
+  it("uses the default aria-label", () => {
+    renderWithMantine(<SortToggle value="newest-first" onChange={() => {}} />);
+    expect(
+      screen.getByRole("textbox", { name: "Sort direction" }),
+    ).toBeInTheDocument();
+  });
+
+  it("honors a custom aria-label", () => {
+    renderWithMantine(
+      <SortToggle
+        value="newest-first"
+        onChange={() => {}}
+        aria-label="Logs sort"
+      />,
+    );
+    expect(
+      screen.getByRole("textbox", { name: "Logs sort" }),
+    ).toBeInTheDocument();
+  });
+
+  it("invokes onChange with the new direction when the user picks another option", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithMantine(<SortToggle value="newest-first" onChange={onChange} />);
+    await user.click(screen.getByRole("textbox", { name: "Sort direction" }));
+    await user.click(await screen.findByText("Sort: Oldest First"));
+    expect(onChange).toHaveBeenCalledWith("oldest-first");
+  });
+});

clients/web/src/components/elements/SortToggle/SortToggle.tsx

@@ -0,0 +1,39 @@
+import { Select } from "@mantine/core";
+
+export type SortDirection = "oldest-first" | "newest-first";
+
+export interface SortToggleProps {
+  value: SortDirection;
+  onChange: (next: SortDirection) => void;
+  "aria-label"?: string;
+}
+
+const OPTIONS: { value: SortDirection; label: string }[] = [
+  { value: "newest-first", label: "Sort: Newest First" },
+  { value: "oldest-first", label: "Sort: Oldest First" },
+];
+
+function isSortDirection(value: string | null): value is SortDirection {
+  return value === "oldest-first" || value === "newest-first";
+}
+
+export function SortToggle({
+  value,
+  onChange,
+  "aria-label": ariaLabel = "Sort direction",
+}: SortToggleProps) {
+  return (
+    <Select
+      size="sm"
+      w={190}
+      data={OPTIONS}
+      value={value}
+      onChange={(next) => {
+        if (isSortDirection(next)) onChange(next);
+      }}
+      allowDeselect={false}
+      withCheckIcon={false}
+      aria-label={ariaLabel}
+    />
+  );
+}

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

@@ -13,6 +13,8 @@ const meta: Meta<typeof HistoryListPanel> = {
     onExport: fn(),
     onReplay: fn(),
     onTogglePin: fn(),
+    sortDirection: "newest-first",
+    onSortChange: fn(),
   },
 };
 

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

@@ -66,6 +66,8 @@ const baseProps = {
   onExport: vi.fn(),
   onReplay: vi.fn(),
   onTogglePin: vi.fn(),
+  sortDirection: "newest-first" as const,
+  onSortChange: vi.fn(),
 };
 
 describe("HistoryListPanel", () => {
@@ -219,6 +221,49 @@ describe("HistoryListPanel", () => {
     expect(onTogglePin).toHaveBeenCalledWith("req-1");
   });
 
+  it("renders entries newest-first by default", () => {
+    renderWithMantine(
+      <HistoryListPanel {...baseProps} entries={sampleEntries} />,
+    );
+    const methods = screen.getAllByText(
+      /tools\/call|resources\/read|tools\/list/,
+    );
+    expect(methods[0]).toHaveTextContent("tools/list");
+    expect(methods[methods.length - 1]).toHaveTextContent("tools/call");
+  });
+
+  it("reorders entries when sortDirection is oldest-first", () => {
+    renderWithMantine(
+      <HistoryListPanel
+        {...baseProps}
+        entries={sampleEntries}
+        sortDirection="oldest-first"
+      />,
+    );
+    const methods = screen.getAllByText(
+      /tools\/call|resources\/read|tools\/list/,
+    );
+    expect(methods[0]).toHaveTextContent("tools/call");
+    expect(methods[methods.length - 1]).toHaveTextContent("tools/list");
+  });
+
+  it("invokes onSortChange when the user picks a new sort", async () => {
+    const user = userEvent.setup();
+    const onSortChange = vi.fn();
+    renderWithMantine(
+      <HistoryListPanel
+        {...baseProps}
+        entries={sampleEntries}
+        onSortChange={onSortChange}
+      />,
+    );
+    await user.click(
+      screen.getByRole("textbox", { name: "History sort direction" }),
+    );
+    await user.click(await screen.findByText("Sort: Oldest First"));
+    expect(onSortChange).toHaveBeenCalledWith("oldest-first");
+  });
+
   it("toggles compact list state when ListToggle is clicked", async () => {
     const user = userEvent.setup();
     renderWithMantine(

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

@@ -11,6 +11,10 @@ import {
 import type { MessageEntry, MessageMethod } from "@inspector/core/mcp/types.js";
 import { HistoryEntry } from "../HistoryEntry/HistoryEntry";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import {
+  SortToggle,
+  type SortDirection,
+} from "../../elements/SortToggle/SortToggle";
 import { extractMethod } from "../historyUtils.js";
 
 export interface HistoryListPanelProps {
@@ -22,6 +26,8 @@ export interface HistoryListPanelProps {
   onExport: () => void;
   onReplay: (id: string) => void;
   onTogglePin: (id: string) => void;
+  sortDirection: SortDirection;
+  onSortChange: (next: SortDirection) => void;
 }
 
 const PanelContainer = Paper.withProps({
@@ -71,13 +77,21 @@ export function HistoryListPanel({
   onExport,
   onReplay,
   onTogglePin,
+  sortDirection,
+  onSortChange,
 }: HistoryListPanelProps) {
   const [compact, setCompact] = useState(false);
 
-  const filteredEntries = useMemo(
-    () => entries.filter((e) => matchesFilters(e, searchText, methodFilter)),
-    [entries, searchText, methodFilter],
-  );
+  const filteredEntries = useMemo(() => {
+    const matched = entries.filter((e) =>
+      matchesFilters(e, searchText, methodFilter),
+    );
+    const sorted = [...matched].sort(
+      (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
+    );
+    if (sortDirection === "newest-first") sorted.reverse();
+    return sorted;
+  }, [entries, searchText, methodFilter, sortDirection]);
 
   const pinnedEntries = useMemo(
     () => filteredEntries.filter((e) => pinnedIds.has(e.id)),
@@ -96,6 +110,11 @@ export function HistoryListPanel({
       <Group justify="space-between" mb="sm">
         <Title order={4}>Requests</Title>
         <Group gap="xs">
+          <SortToggle
+            value={sortDirection}
+            onChange={onSortChange}
+            aria-label="History sort direction"
+          />
           {hasResults && (
             <ListToggle
               compact={compact}

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

@@ -23,6 +23,8 @@ const meta: Meta<typeof LogStreamPanel> = {
     onToggleAutoScroll: fn(),
     onClear: fn(),
     onExport: fn(),
+    sortDirection: "newest-first",
+    onSortChange: fn(),
   },
 };
 

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

@@ -47,6 +47,8 @@ const baseProps = {
   onToggleAutoScroll: vi.fn(),
   onClear: vi.fn(),
   onExport: vi.fn(),
+  sortDirection: "newest-first" as const,
+  onSortChange: vi.fn(),
 };
 
 describe("LogStreamPanel", () => {
@@ -163,4 +165,40 @@ describe("LogStreamPanel", () => {
     renderWithMantine(<LogStreamPanel {...baseProps} autoScroll={false} />);
     expect(screen.getByLabelText("Auto-scroll")).not.toBeChecked();
   });
+
+  it("renders entries newest-first by default", () => {
+    renderWithMantine(<LogStreamPanel {...baseProps} />);
+    const items = screen.getAllByText(
+      /Server started|Failed to read|Loading config|deprecated/,
+    );
+    // Newest receivedAt is the warning entry; oldest is "Server started".
+    expect(items[0]).toHaveTextContent('{"code":42,"msg":"deprecated"}');
+    expect(items[items.length - 1]).toHaveTextContent("Server started");
+  });
+
+  it("reorders entries when sortDirection is oldest-first", () => {
+    renderWithMantine(
+      <LogStreamPanel {...baseProps} sortDirection="oldest-first" />,
+    );
+    const items = screen.getAllByText(
+      /Server started|Failed to read|Loading config|deprecated/,
+    );
+    expect(items[0]).toHaveTextContent("Server started");
+    expect(items[items.length - 1]).toHaveTextContent(
+      '{"code":42,"msg":"deprecated"}',
+    );
+  });
+
+  it("invokes onSortChange when the user picks a new sort", async () => {
+    const user = userEvent.setup();
+    const onSortChange = vi.fn();
+    renderWithMantine(
+      <LogStreamPanel {...baseProps} onSortChange={onSortChange} />,
+    );
+    await user.click(
+      screen.getByRole("textbox", { name: "Logs sort direction" }),
+    );
+    await user.click(await screen.findByText("Sort: Oldest First"));
+    expect(onSortChange).toHaveBeenCalledWith("oldest-first");
+  });
 });

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

@@ -12,6 +12,10 @@ import {
 import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { LogEntry } from "../../elements/LogEntry/LogEntry";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
+import {
+  SortToggle,
+  type SortDirection,
+} from "../../elements/SortToggle/SortToggle";
 
 export interface LogStreamPanelProps {
   entries: LogEntryData[];
@@ -21,6 +25,8 @@ export interface LogStreamPanelProps {
   onToggleAutoScroll: () => void;
   onClear: () => void;
   onExport: () => void;
+  sortDirection: SortDirection;
+  onSortChange: (next: SortDirection) => void;
 }
 
 const PanelContainer = Paper.withProps({
@@ -65,17 +71,30 @@ export function LogStreamPanel({
   onToggleAutoScroll,
   onClear,
   onExport,
+  sortDirection,
+  onSortChange,
 }: LogStreamPanelProps) {
-  const filteredEntries = useMemo(
-    () => entries.filter((e) => matchesFilters(e, filterText, visibleLevels)),
-    [entries, filterText, visibleLevels],
-  );
+  const filteredEntries = useMemo(() => {
+    const matched = entries.filter((e) =>
+      matchesFilters(e, filterText, visibleLevels),
+    );
+    const sorted = [...matched].sort(
+      (a, b) => a.receivedAt.getTime() - b.receivedAt.getTime(),
+    );
+    if (sortDirection === "newest-first") sorted.reverse();
+    return sorted;
+  }, [entries, filterText, visibleLevels, sortDirection]);
 
   return (
     <PanelContainer>
       <Group justify="space-between" mb="sm">
         <Title order={4}>Log Stream</Title>
         <Group>
+          <SortToggle
+            value={sortDirection}
+            onChange={onSortChange}
+            aria-label="Logs sort direction"
+          />
           <Checkbox
             label="Auto-scroll"
             checked={autoScroll}

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

@@ -12,6 +12,8 @@ const meta: Meta<typeof NetworkStreamPanel> = {
     visibleCategories: { auth: true, transport: true },
     onClear: fn(),
     onExport: fn(),
+    sortDirection: "newest-first",
+    onSortChange: fn(),
   },
 };