From a35dbe38cc3fa84f5f28e49c6f387362d9baa9f7 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 27 May 2026 20:15:08 -0400
Subject: [PATCH 01/13] 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>
---
 .../SortToggle/SortToggle.stories.tsx         | 42 +++++++++++
 .../elements/SortToggle/SortToggle.test.tsx   | 45 +++++++++++
 .../elements/SortToggle/SortToggle.tsx        | 39 ++++++++++
 .../HistoryListPanel.stories.tsx              |  2 +
 .../HistoryListPanel.test.tsx                 | 45 +++++++++++
 .../HistoryListPanel/HistoryListPanel.tsx     | 27 ++++++-
 .../LogStreamPanel/LogStreamPanel.stories.tsx |  2 +
 .../LogStreamPanel/LogStreamPanel.test.tsx    | 38 ++++++++++
 .../groups/LogStreamPanel/LogStreamPanel.tsx  | 27 ++++++-
 .../NetworkStreamPanel.stories.tsx            |  2 +
 .../NetworkStreamPanel.test.tsx               | 65 ++++++++++++++++
 .../NetworkStreamPanel/NetworkStreamPanel.tsx | 28 +++++--
 .../HistoryScreen/HistoryScreen.stories.tsx   |  2 +
 .../HistoryScreen/HistoryScreen.test.tsx      |  2 +
 .../screens/HistoryScreen/HistoryScreen.tsx   |  7 ++
 .../LoggingScreen/LoggingScreen.stories.tsx   |  2 +
 .../LoggingScreen/LoggingScreen.test.tsx      |  2 +
 .../screens/LoggingScreen/LoggingScreen.tsx   |  7 ++
 .../NetworkScreen/NetworkScreen.stories.tsx   |  2 +
 .../NetworkScreen/NetworkScreen.test.tsx      |  2 +
 .../screens/NetworkScreen/NetworkScreen.tsx   |  7 ++
 .../InspectorView/InspectorView.test.tsx      | 74 +++++++++++++++++++
 .../views/InspectorView/InspectorView.tsx     | 44 +++++++++++
 clients/web/src/test/setup.ts                 | 32 ++++++++
 24 files changed, 532 insertions(+), 13 deletions(-)
 create mode 100644 clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
 create mode 100644 clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
 create mode 100644 clients/web/src/components/elements/SortToggle/SortToggle.tsx

diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
new file mode 100644
index 000000000..0b12224b9
--- /dev/null
+++ b/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");
+  },
+};
diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
new file mode 100644
index 000000000..d20f8056b
--- /dev/null
+++ b/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");
+  });
+});
diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
new file mode 100644
index 000000000..2b8a35343
--- /dev/null
+++ b/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}
+    />
+  );
+}
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx
index 7516e22cf..60ebda3b6 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx
+++ b/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(),
   },
 };
 
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
index 0b36ab8da..d69390e3d 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
+++ b/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(
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index 37fee63b8..74d7ffc02 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/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}
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
index 5f5ed4165..7a4dda5f3 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
+++ b/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(),
   },
 };
 
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
index b6f4828da..80be0e7e7 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
+++ b/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");
+  });
 });
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index b627618ca..48d33096d 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/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}
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx
index e5446d168..df57d9a8b 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx
+++ b/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(),
   },
 };
 
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
index ea3014015..560c2c60b 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
@@ -27,6 +27,8 @@ const baseProps = {
   visibleCategories: { auth: true, transport: true } as const,
   onClear: vi.fn(),
   onExport: vi.fn(),
+  sortDirection: "newest-first" as const,
+  onSortChange: vi.fn(),
 };
 
 describe("NetworkStreamPanel", () => {
@@ -134,4 +136,67 @@ describe("NetworkStreamPanel", () => {
       screen.getByRole("button", { name: "Collapse" }),
     ).toBeInTheDocument();
   });
+
+  it("renders entries newest-first by default", () => {
+    const older: FetchRequestEntry = {
+      ...entry,
+      id: "older",
+      url: "https://example.com/older",
+      timestamp: new Date("2026-03-17T09:00:00Z"),
+    };
+    const newer: FetchRequestEntry = {
+      ...entry,
+      id: "newer",
+      url: "https://example.com/newer",
+      timestamp: new Date("2026-03-17T11:00:00Z"),
+    };
+    renderWithMantine(
+      <NetworkStreamPanel {...baseProps} entries={[older, newer]} />,
+    );
+    const urls = screen.getAllByText(/example\.com\//);
+    expect(urls[0]).toHaveTextContent("https://example.com/newer");
+    expect(urls[urls.length - 1]).toHaveTextContent(
+      "https://example.com/older",
+    );
+  });
+
+  it("reorders entries when sortDirection is oldest-first", () => {
+    const older: FetchRequestEntry = {
+      ...entry,
+      id: "older",
+      url: "https://example.com/older",
+      timestamp: new Date("2026-03-17T09:00:00Z"),
+    };
+    const newer: FetchRequestEntry = {
+      ...entry,
+      id: "newer",
+      url: "https://example.com/newer",
+      timestamp: new Date("2026-03-17T11:00:00Z"),
+    };
+    renderWithMantine(
+      <NetworkStreamPanel
+        {...baseProps}
+        entries={[newer, older]}
+        sortDirection="oldest-first"
+      />,
+    );
+    const urls = screen.getAllByText(/example\.com\//);
+    expect(urls[0]).toHaveTextContent("https://example.com/older");
+    expect(urls[urls.length - 1]).toHaveTextContent(
+      "https://example.com/newer",
+    );
+  });
+
+  it("invokes onSortChange when the user picks a new sort", async () => {
+    const user = userEvent.setup();
+    const onSortChange = vi.fn();
+    renderWithMantine(
+      <NetworkStreamPanel {...baseProps} onSortChange={onSortChange} />,
+    );
+    await user.click(
+      screen.getByRole("textbox", { name: "Network sort direction" }),
+    );
+    await user.click(await screen.findByText("Sort: Oldest First"));
+    expect(onSortChange).toHaveBeenCalledWith("oldest-first");
+  });
 });
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
index 7c0d05640..0dfa6d849 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
@@ -14,6 +14,10 @@ import type {
 } from "@inspector/core/mcp/types.js";
 import { NetworkEntry } from "../NetworkEntry/NetworkEntry";
 import { ListToggle } from "../../elements/ListToggle/ListToggle";
+import {
+  SortToggle,
+  type SortDirection,
+} from "../../elements/SortToggle/SortToggle";
 
 export interface NetworkStreamPanelProps {
   entries: FetchRequestEntry[];
@@ -21,6 +25,8 @@ export interface NetworkStreamPanelProps {
   visibleCategories: Record<FetchRequestCategory, boolean>;
   onClear: () => void;
   onExport: () => void;
+  sortDirection: SortDirection;
+  onSortChange: (next: SortDirection) => void;
 }
 
 const PanelContainer = Paper.withProps({
@@ -82,14 +88,21 @@ export function NetworkStreamPanel({
   visibleCategories,
   onClear,
   onExport,
+  sortDirection,
+  onSortChange,
 }: NetworkStreamPanelProps) {
   const [compact, setCompact] = useState(true);
 
-  const filteredEntries = useMemo(
-    () =>
-      entries.filter((e) => matchesFilters(e, filterText, visibleCategories)),
-    [entries, filterText, visibleCategories],
-  );
+  const filteredEntries = useMemo(() => {
+    const matched = entries.filter((e) =>
+      matchesFilters(e, filterText, visibleCategories),
+    );
+    const sorted = [...matched].sort(
+      (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
+    );
+    if (sortDirection === "newest-first") sorted.reverse();
+    return sorted;
+  }, [entries, filterText, visibleCategories, sortDirection]);
 
   const hasEntries = entries.length > 0;
   const hasResults = filteredEntries.length > 0;
@@ -99,6 +112,11 @@ export function NetworkStreamPanel({
       <Group justify="space-between" mb="sm">
         <Title order={4}>{formatTitle(filteredEntries.length)}</Title>
         <Group gap="xs">
+          <SortToggle
+            value={sortDirection}
+            onChange={onSortChange}
+            aria-label="Network sort direction"
+          />
           {hasResults && (
             <ListToggle
               compact={compact}
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
index 24f745ed7..63489824c 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
@@ -13,6 +13,8 @@ const meta: Meta<typeof HistoryScreen> = {
     onExport: fn(),
     onReplay: fn(),
     onTogglePin: fn(),
+    sortDirection: "newest-first",
+    onSortChange: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
index cf8a894c9..74088b8d4 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
@@ -26,6 +26,8 @@ const baseProps = {
   onExport: vi.fn(),
   onReplay: vi.fn(),
   onTogglePin: vi.fn(),
+  sortDirection: "newest-first" as const,
+  onSortChange: vi.fn(),
 };
 
 describe("HistoryScreen", () => {
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
index 26aff28e7..e245b33d0 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
@@ -4,6 +4,7 @@ import type { MessageEntry, MessageMethod } from "@inspector/core/mcp/types.js";
 import { HistoryControls } from "../../groups/HistoryControls/HistoryControls";
 import { HistoryListPanel } from "../../groups/HistoryListPanel/HistoryListPanel.js";
 import { extractMethod } from "../../groups/historyUtils.js";
+import type { SortDirection } from "../../elements/SortToggle/SortToggle";
 
 export interface HistoryScreenProps {
   entries: MessageEntry[];
@@ -12,6 +13,8 @@ export interface HistoryScreenProps {
   onExport: () => void;
   onReplay: (id: string) => void;
   onTogglePin: (id: string) => void;
+  sortDirection: SortDirection;
+  onSortChange: (next: SortDirection) => void;
 }
 
 const ScreenLayout = Flex.withProps({
@@ -38,6 +41,8 @@ export function HistoryScreen({
   onExport,
   onReplay,
   onTogglePin,
+  sortDirection,
+  onSortChange,
 }: HistoryScreenProps) {
   const [searchText, setSearchText] = useState("");
   const [methodFilter, setMethodFilter] = useState<MessageMethod | undefined>();
@@ -74,6 +79,8 @@ export function HistoryScreen({
         onExport={onExport}
         onReplay={onReplay}
         onTogglePin={onTogglePin}
+        sortDirection={sortDirection}
+        onSortChange={onSortChange}
       />
     </ScreenLayout>
   );
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
index 0a26c2b53..a69c549a3 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
@@ -15,6 +15,8 @@ const meta: Meta<typeof LoggingScreen> = {
     onExport: fn(),
     autoScroll: true,
     onToggleAutoScroll: fn(),
+    sortDirection: "newest-first",
+    onSortChange: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
index e017e48d6..96b91d27d 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
@@ -11,6 +11,8 @@ const baseProps = {
   onExport: vi.fn(),
   autoScroll: true,
   onToggleAutoScroll: vi.fn(),
+  sortDirection: "newest-first" as const,
+  onSortChange: vi.fn(),
 };
 
 describe("LoggingScreen", () => {
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index 9f1ae9ab8..d67b80625 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -4,6 +4,7 @@ import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js";
 import { LogControls } from "../../groups/LogControls/LogControls";
 import { LogStreamPanel } from "../../groups/LogStreamPanel/LogStreamPanel";
 import type { LogEntryData } from "../../elements/LogEntry/LogEntry";
+import type { SortDirection } from "../../elements/SortToggle/SortToggle";
 
 export interface LoggingScreenProps {
   entries: LogEntryData[];
@@ -13,6 +14,8 @@ export interface LoggingScreenProps {
   onExport: () => void;
   autoScroll: boolean;
   onToggleAutoScroll: () => void;
+  sortDirection: SortDirection;
+  onSortChange: (next: SortDirection) => void;
 }
 
 const ALL_LEVELS_VISIBLE: Record<LoggingLevel, boolean> = {
@@ -62,6 +65,8 @@ export function LoggingScreen({
   onExport,
   autoScroll,
   onToggleAutoScroll,
+  sortDirection,
+  onSortChange,
 }: LoggingScreenProps) {
   const [filterText, setFilterText] = useState("");
   const [visibleLevels, setVisibleLevels] =
@@ -99,6 +104,8 @@ export function LoggingScreen({
         onToggleAutoScroll={onToggleAutoScroll}
         onClear={onClear}
         onExport={onExport}
+        sortDirection={sortDirection}
+        onSortChange={onSortChange}
       />
     </ScreenLayout>
   );
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
index 26c855654..e06f75339 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
@@ -10,6 +10,8 @@ const meta: Meta<typeof NetworkScreen> = {
   args: {
     onClear: fn(),
     onExport: fn(),
+    sortDirection: "newest-first",
+    onSortChange: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
index 9bb51f39c..0985fc4d1 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
@@ -43,6 +43,8 @@ const baseProps = {
   entries: [transportEntry, authEntry, errorEntry],
   onClear: vi.fn(),
   onExport: vi.fn(),
+  sortDirection: "newest-first" as const,
+  onSortChange: vi.fn(),
 };
 
 describe("NetworkScreen", () => {
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
index d5d197b19..f1b3b355c 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
@@ -6,11 +6,14 @@ import type {
 } from "@inspector/core/mcp/types.js";
 import { NetworkControls } from "../../groups/NetworkControls/NetworkControls";
 import { NetworkStreamPanel } from "../../groups/NetworkStreamPanel/NetworkStreamPanel";
+import type { SortDirection } from "../../elements/SortToggle/SortToggle";
 
 export interface NetworkScreenProps {
   entries: FetchRequestEntry[];
   onClear: () => void;
   onExport: () => void;
+  sortDirection: SortDirection;
+  onSortChange: (next: SortDirection) => void;
 }
 
 const ALL_CATEGORIES_VISIBLE: Record<FetchRequestCategory, boolean> = {
@@ -44,6 +47,8 @@ export function NetworkScreen({
   entries,
   onClear,
   onExport,
+  sortDirection,
+  onSortChange,
 }: NetworkScreenProps) {
   const [filterText, setFilterText] = useState("");
   const [visibleCategories, setVisibleCategories] = useState<
@@ -83,6 +88,8 @@ export function NetworkScreen({
         visibleCategories={visibleCategories}
         onClear={onClear}
         onExport={onExport}
+        sortDirection={sortDirection}
+        onSortChange={onSortChange}
       />
     </ScreenLayout>
   );
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 768ca4c77..7f569919a 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -334,6 +334,80 @@ describe("InspectorView", () => {
     expect(onSetLogLevel).toHaveBeenCalledWith("warning");
   });
 
+  it("persists Logs sort direction to localStorage and restores it on remount", async () => {
+    const user = userEvent.setup();
+    const { unmount } = renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [sampleServer],
+          activeServer: "alpha",
+          connectionStatus: "connected",
+          initializeResult: connectedInit,
+          latencyMs: 50,
+        })}
+      />,
+    );
+    const tabSelect = await screen.findByDisplayValue("Servers");
+    await user.click(tabSelect);
+    await user.click(await screen.findByText("Logs"));
+
+    const sortSelect = await screen.findByRole("textbox", {
+      name: "Logs sort direction",
+    });
+    expect(sortSelect).toHaveValue("Sort: Newest First");
+    await user.click(sortSelect);
+    await user.click(await screen.findByText("Sort: Oldest First"));
+
+    await waitFor(() =>
+      expect(window.localStorage.getItem("inspector.sortDirection.logs")).toBe(
+        "oldest-first",
+      ),
+    );
+
+    unmount();
+    renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [sampleServer],
+          activeServer: "alpha",
+          connectionStatus: "connected",
+          initializeResult: connectedInit,
+          latencyMs: 50,
+        })}
+      />,
+    );
+    const tabSelect2 = await screen.findByDisplayValue("Servers");
+    await user.click(tabSelect2);
+    await user.click(await screen.findByText("Logs"));
+    const sortSelect2 = await screen.findByRole("textbox", {
+      name: "Logs sort direction",
+    });
+    await waitFor(() => expect(sortSelect2).toHaveValue("Sort: Oldest First"));
+  });
+
+  it("falls back to newest-first when a corrupted sort value is stored", async () => {
+    const user = userEvent.setup();
+    window.localStorage.setItem("inspector.sortDirection.history", "garbage");
+    renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [sampleServer],
+          activeServer: "alpha",
+          connectionStatus: "connected",
+          initializeResult: connectedInit,
+          latencyMs: 50,
+        })}
+      />,
+    );
+    const tabSelect = await screen.findByDisplayValue("Servers");
+    await user.click(tabSelect);
+    await user.click(await screen.findByText("History"));
+    const sortSelect = await screen.findByRole("textbox", {
+      name: "History sort direction",
+    });
+    await waitFor(() => expect(sortSelect).toHaveValue("Sort: Newest First"));
+  });
+
   it("toggles autoScroll locally on the Logs screen after connecting", async () => {
     const user = userEvent.setup();
     renderWithMantine(
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 3e8659fb6..cbe012414 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -1,5 +1,6 @@
 import { useMemo, useRef, useState, type ReactNode } from "react";
 import { AppShell, Box, Stack, Transition } from "@mantine/core";
+import { useLocalStorage } from "@mantine/hooks";
 import type {
   InitializeResult,
   LoggingLevel,
@@ -42,8 +43,22 @@ import { TasksScreen } from "../../screens/TasksScreen/TasksScreen";
 import type { TaskProgress } from "../../groups/TaskCard/TaskCard";
 import { HistoryScreen } from "../../screens/HistoryScreen/HistoryScreen";
 import { NetworkScreen } from "../../screens/NetworkScreen/NetworkScreen";
+import type { SortDirection } from "../../elements/SortToggle/SortToggle";
 import { getServerType } from "@inspector/core/mcp/config.js";
 
+const SORT_DEFAULT: SortDirection = "newest-first";
+
+// Storage adapters live alongside the view. The deserializer accepts anything
+// (manual edit, schema drift, future option removed) and clamps to the default
+// so the toggle never renders an unselectable state.
+function deserializeSortDirection(raw: string | undefined): SortDirection {
+  return raw === "oldest-first" || raw === "newest-first" ? raw : SORT_DEFAULT;
+}
+
+function serializeSortDirection(value: SortDirection): string {
+  return value;
+}
+
 const SERVERS_TAB = "Servers";
 const NETWORK_TAB = "Network";
 
@@ -287,6 +302,29 @@ export function InspectorView({
   const [autoScroll, setAutoScroll] = useState<boolean>(true);
   const appRendererRef = useRef<AppRendererHandle>(null);
 
+  // Per-screen sort direction, persisted to localStorage so the choice
+  // survives reloads and syncs across browser tabs. `inspector.<scope>.<key>`
+  // namespace; new preferences (theme defaults, compact-mode, etc.) should
+  // follow the same shape.
+  const [logsSort, setLogsSort] = useLocalStorage<SortDirection>({
+    key: "inspector.sortDirection.logs",
+    defaultValue: SORT_DEFAULT,
+    deserialize: deserializeSortDirection,
+    serialize: serializeSortDirection,
+  });
+  const [historySort, setHistorySort] = useLocalStorage<SortDirection>({
+    key: "inspector.sortDirection.history",
+    defaultValue: SORT_DEFAULT,
+    deserialize: deserializeSortDirection,
+    serialize: serializeSortDirection,
+  });
+  const [networkSort, setNetworkSort] = useLocalStorage<SortDirection>({
+    key: "inspector.sortDirection.network",
+    defaultValue: SORT_DEFAULT,
+    deserialize: deserializeSortDirection,
+    serialize: serializeSortDirection,
+  });
+
   // Only show the non-Servers tabs when actually connected. Network is
   // additionally hidden for stdio servers — there is no HTTP traffic to
   // surface there, so the tab would always be empty. Capability-aware
@@ -451,6 +489,8 @@ export function InspectorView({
               onExport={onExportLogs}
               autoScroll={autoScroll}
               onToggleAutoScroll={() => setAutoScroll((prev) => !prev)}
+              sortDirection={logsSort}
+              onSortChange={setLogsSort}
             />
           </ScreenStage>
           <ScreenStage active={activeTab === "History"}>
@@ -461,6 +501,8 @@ export function InspectorView({
               onExport={onExportHistory}
               onReplay={onReplayHistory}
               onTogglePin={onTogglePinHistory}
+              sortDirection={historySort}
+              onSortChange={setHistorySort}
             />
           </ScreenStage>
           <ScreenStage active={activeTab === "Network"}>
@@ -468,6 +510,8 @@ export function InspectorView({
               entries={network}
               onClear={onClearNetwork}
               onExport={onExportNetwork}
+              sortDirection={networkSort}
+              onSortChange={setNetworkSort}
             />
           </ScreenStage>
         </ScreenStageContainer>
diff --git a/clients/web/src/test/setup.ts b/clients/web/src/test/setup.ts
index 2ba240b8d..916253694 100644
--- a/clients/web/src/test/setup.ts
+++ b/clients/web/src/test/setup.ts
@@ -2,6 +2,38 @@ import "@testing-library/jest-dom/vitest";
 import { afterEach } from "vitest";
 import { cleanup } from "@testing-library/react";
 
+// Node 22+ exposes an experimental `localStorage` placeholder that overrides
+// happy-dom's implementation. Without `--localstorage-file`, it's an empty
+// stub with no methods, which breaks anything that calls setItem/getItem.
+// Install a minimal in-memory Storage shim before any test runs.
+class MemoryStorage implements Storage {
+  private store = new Map<string, string>();
+  get length(): number {
+    return this.store.size;
+  }
+  clear(): void {
+    this.store.clear();
+  }
+  getItem(key: string): string | null {
+    return this.store.has(key) ? this.store.get(key)! : null;
+  }
+  key(index: number): string | null {
+    return Array.from(this.store.keys())[index] ?? null;
+  }
+  removeItem(key: string): void {
+    this.store.delete(key);
+  }
+  setItem(key: string, value: string): void {
+    this.store.set(key, String(value));
+  }
+}
+
+Object.defineProperty(window, "localStorage", {
+  configurable: true,
+  value: new MemoryStorage(),
+});
+
 afterEach(() => {
   cleanup();
+  window.localStorage.clear();
 });

From 0caf98bdebbe176d5adc64b6fe1181fe9372f04c Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Wed, 27 May 2026 22:20:12 -0400
Subject: [PATCH 02/13] fix(logs): move auto-scroll checkbox left of the sort
 selector

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../groups/LogStreamPanel/LogStreamPanel.tsx           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index 48d33096d..a1e4ff0c1 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@@ -90,16 +90,16 @@ export function LogStreamPanel({
       <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}
             onChange={onToggleAutoScroll}
           />
+          <SortToggle
+            value={sortDirection}
+            onChange={onSortChange}
+            aria-label="Logs sort direction"
+          />
           <Button
             variant="default"
             onClick={onClear}

From d702d4be3276b9e65870b5f800a6f7596a5dc923 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Thu, 28 May 2026 08:33:10 -0400
Subject: [PATCH 03/13] refactor(logs): remove auto-scroll checkbox; ListToggle
 left of SortToggle

- Drops the Logs auto-scroll checkbox and its plumbing through
  LoggingScreen / InspectorView.
- Moves the ListToggle to the left of the SortToggle on the History
  and Network panel toolbars.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../HistoryListPanel/HistoryListPanel.tsx     | 10 ++++----
 .../LogStreamPanel/LogStreamPanel.stories.tsx |  2 --
 .../LogStreamPanel/LogStreamPanel.test.tsx    | 17 -------------
 .../groups/LogStreamPanel/LogStreamPanel.tsx  | 10 --------
 .../NetworkStreamPanel/NetworkStreamPanel.tsx | 10 ++++----
 .../LoggingScreen/LoggingScreen.stories.tsx   |  2 --
 .../LoggingScreen/LoggingScreen.test.tsx      |  2 --
 .../screens/LoggingScreen/LoggingScreen.tsx   |  6 -----
 .../InspectorView/InspectorView.test.tsx      | 24 -------------------
 .../views/InspectorView/InspectorView.tsx     |  3 ---
 10 files changed, 10 insertions(+), 76 deletions(-)

diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index 74d7ffc02..f4f5d6568 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -110,17 +110,17 @@ 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}
               onToggle={() => setCompact((c) => !c)}
             />
           )}
+          <SortToggle
+            value={sortDirection}
+            onChange={onSortChange}
+            aria-label="History sort direction"
+          />
           <Button
             variant="default"
             onClick={onClearAll}
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
index 7a4dda5f3..30ff29f48 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx
@@ -19,8 +19,6 @@ const meta: Meta<typeof LogStreamPanel> = {
       alert: true,
       emergency: true,
     },
-    autoScroll: true,
-    onToggleAutoScroll: fn(),
     onClear: fn(),
     onExport: fn(),
     sortDirection: "newest-first",
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
index 80be0e7e7..def5466f7 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
@@ -43,8 +43,6 @@ const baseProps = {
   entries,
   filterText: "",
   visibleLevels: allVisible,
-  autoScroll: true,
-  onToggleAutoScroll: vi.fn(),
   onClear: vi.fn(),
   onExport: vi.fn(),
   sortDirection: "newest-first" as const,
@@ -151,21 +149,6 @@ describe("LogStreamPanel", () => {
     expect(onExport).toHaveBeenCalledTimes(1);
   });
 
-  it("invokes onToggleAutoScroll when the auto-scroll checkbox is clicked", async () => {
-    const user = userEvent.setup();
-    const onToggleAutoScroll = vi.fn();
-    renderWithMantine(
-      <LogStreamPanel {...baseProps} onToggleAutoScroll={onToggleAutoScroll} />,
-    );
-    await user.click(screen.getByLabelText("Auto-scroll"));
-    expect(onToggleAutoScroll).toHaveBeenCalledTimes(1);
-  });
-
-  it("renders auto-scroll checkbox with correct checked state", () => {
-    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(
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index a1e4ff0c1..923c0a873 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@@ -1,7 +1,6 @@
 import { useMemo } from "react";
 import {
   Button,
-  Checkbox,
   Group,
   Paper,
   ScrollArea,
@@ -21,8 +20,6 @@ export interface LogStreamPanelProps {
   entries: LogEntryData[];
   filterText: string;
   visibleLevels: Record<LoggingLevel, boolean>;
-  autoScroll: boolean;
-  onToggleAutoScroll: () => void;
   onClear: () => void;
   onExport: () => void;
   sortDirection: SortDirection;
@@ -67,8 +64,6 @@ export function LogStreamPanel({
   entries,
   filterText,
   visibleLevels,
-  autoScroll,
-  onToggleAutoScroll,
   onClear,
   onExport,
   sortDirection,
@@ -90,11 +85,6 @@ export function LogStreamPanel({
       <Group justify="space-between" mb="sm">
         <Title order={4}>Log Stream</Title>
         <Group>
-          <Checkbox
-            label="Auto-scroll"
-            checked={autoScroll}
-            onChange={onToggleAutoScroll}
-          />
           <SortToggle
             value={sortDirection}
             onChange={onSortChange}
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
index 0dfa6d849..28d281014 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
@@ -112,17 +112,17 @@ export function NetworkStreamPanel({
       <Group justify="space-between" mb="sm">
         <Title order={4}>{formatTitle(filteredEntries.length)}</Title>
         <Group gap="xs">
-          <SortToggle
-            value={sortDirection}
-            onChange={onSortChange}
-            aria-label="Network sort direction"
-          />
           {hasResults && (
             <ListToggle
               compact={compact}
               onToggle={() => setCompact((c) => !c)}
             />
           )}
+          <SortToggle
+            value={sortDirection}
+            onChange={onSortChange}
+            aria-label="Network sort direction"
+          />
           <Button variant="default" onClick={onClear} disabled={!hasEntries}>
             Clear
           </Button>
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
index a69c549a3..655ed94a8 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.stories.tsx
@@ -13,8 +13,6 @@ const meta: Meta<typeof LoggingScreen> = {
     onSetLevel: fn(),
     onClear: fn(),
     onExport: fn(),
-    autoScroll: true,
-    onToggleAutoScroll: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
   },
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
index 96b91d27d..70b97e80c 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.test.tsx
@@ -9,8 +9,6 @@ const baseProps = {
   onSetLevel: vi.fn(),
   onClear: vi.fn(),
   onExport: vi.fn(),
-  autoScroll: true,
-  onToggleAutoScroll: vi.fn(),
   sortDirection: "newest-first" as const,
   onSortChange: vi.fn(),
 };
diff --git a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
index d67b80625..8eaf4446c 100644
--- a/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
+++ b/clients/web/src/components/screens/LoggingScreen/LoggingScreen.tsx
@@ -12,8 +12,6 @@ export interface LoggingScreenProps {
   onSetLevel: (level: LoggingLevel) => void;
   onClear: () => void;
   onExport: () => void;
-  autoScroll: boolean;
-  onToggleAutoScroll: () => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
 }
@@ -63,8 +61,6 @@ export function LoggingScreen({
   onSetLevel,
   onClear,
   onExport,
-  autoScroll,
-  onToggleAutoScroll,
   sortDirection,
   onSortChange,
 }: LoggingScreenProps) {
@@ -100,8 +96,6 @@ export function LoggingScreen({
         entries={entries}
         filterText={filterText}
         visibleLevels={visibleLevels}
-        autoScroll={autoScroll}
-        onToggleAutoScroll={onToggleAutoScroll}
         onClear={onClear}
         onExport={onExport}
         sortDirection={sortDirection}
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 7f569919a..42952db75 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -407,28 +407,4 @@ describe("InspectorView", () => {
     });
     await waitFor(() => expect(sortSelect).toHaveValue("Sort: Newest First"));
   });
-
-  it("toggles autoScroll locally on the Logs screen after connecting", async () => {
-    const user = userEvent.setup();
-    renderWithMantine(
-      <InspectorView
-        {...makeProps({
-          servers: [sampleServer],
-          activeServer: "alpha",
-          connectionStatus: "connected",
-          initializeResult: connectedInit,
-          latencyMs: 50,
-        })}
-      />,
-    );
-    const tabSelect = await screen.findByDisplayValue("Servers");
-    await user.click(tabSelect);
-    await user.click(await screen.findByText("Logs"));
-    const autoScroll = await screen.findByRole("checkbox", {
-      name: "Auto-scroll",
-    });
-    expect(autoScroll).toBeChecked();
-    await user.click(autoScroll);
-    expect(autoScroll).not.toBeChecked();
-  });
 });
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index cbe012414..e7edf557c 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -299,7 +299,6 @@ export function InspectorView({
   // dispatching live in the parent; this component only owns navigation
   // (which tab is visible) and a couple of view-local toggles.
   const [selectedTab, setSelectedTab] = useState<string>(SERVERS_TAB);
-  const [autoScroll, setAutoScroll] = useState<boolean>(true);
   const appRendererRef = useRef<AppRendererHandle>(null);
 
   // Per-screen sort direction, persisted to localStorage so the choice
@@ -487,8 +486,6 @@ export function InspectorView({
               onSetLevel={onSetLogLevel}
               onClear={onClearLogs}
               onExport={onExportLogs}
-              autoScroll={autoScroll}
-              onToggleAutoScroll={() => setAutoScroll((prev) => !prev)}
               sortDirection={logsSort}
               onSortChange={setLogsSort}
             />

From 1730c8b2dd1eb15b914cee7d3237583fe8e6a2c7 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 10:28:53 -0400
Subject: [PATCH 04/13] refactor(sort): address review on #1372

- Hydrate sort direction synchronously (getInitialValueInEffect: false)
  to remove the one-frame newest-first flicker on first paint.
- Drop the redundant `[...matched].sort()` copy across the three panels;
  `.filter()` already returns a fresh array.
- Document why serializeSortDirection bypasses Mantine's default JSON
  stringify (raw enum value in storage).
- MemoryStorage.getItem: collapse `has` + `!` to `?? null`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../groups/HistoryListPanel/HistoryListPanel.tsx       | 10 ++++------
 .../groups/LogStreamPanel/LogStreamPanel.tsx           | 10 ++++------
 .../groups/NetworkStreamPanel/NetworkStreamPanel.tsx   | 10 ++++------
 .../components/views/InspectorView/InspectorView.tsx   | 10 +++++++++-
 clients/web/src/test/setup.ts                          |  2 +-
 5 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index f4f5d6568..5fbae1fec 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -83,12 +83,10 @@ export function HistoryListPanel({
   const [compact, setCompact] = useState(false);
 
   const filteredEntries = useMemo(() => {
-    const matched = entries.filter((e) =>
-      matchesFilters(e, searchText, methodFilter),
-    );
-    const sorted = [...matched].sort(
-      (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
-    );
+    // `.filter()` returns a fresh array, so sorting in-place is safe.
+    const sorted = entries
+      .filter((e) => matchesFilters(e, searchText, methodFilter))
+      .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
     if (sortDirection === "newest-first") sorted.reverse();
     return sorted;
   }, [entries, searchText, methodFilter, sortDirection]);
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
index 923c0a873..7295d1bb0 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx
@@ -70,12 +70,10 @@ export function LogStreamPanel({
   onSortChange,
 }: LogStreamPanelProps) {
   const filteredEntries = useMemo(() => {
-    const matched = entries.filter((e) =>
-      matchesFilters(e, filterText, visibleLevels),
-    );
-    const sorted = [...matched].sort(
-      (a, b) => a.receivedAt.getTime() - b.receivedAt.getTime(),
-    );
+    // `.filter()` returns a fresh array, so sorting in-place is safe.
+    const sorted = entries
+      .filter((e) => matchesFilters(e, filterText, visibleLevels))
+      .sort((a, b) => a.receivedAt.getTime() - b.receivedAt.getTime());
     if (sortDirection === "newest-first") sorted.reverse();
     return sorted;
   }, [entries, filterText, visibleLevels, sortDirection]);
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
index 28d281014..640063561 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
@@ -94,12 +94,10 @@ export function NetworkStreamPanel({
   const [compact, setCompact] = useState(true);
 
   const filteredEntries = useMemo(() => {
-    const matched = entries.filter((e) =>
-      matchesFilters(e, filterText, visibleCategories),
-    );
-    const sorted = [...matched].sort(
-      (a, b) => a.timestamp.getTime() - b.timestamp.getTime(),
-    );
+    // `.filter()` returns a fresh array, so sorting in-place is safe.
+    const sorted = entries
+      .filter((e) => matchesFilters(e, filterText, visibleCategories))
+      .sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
     if (sortDirection === "newest-first") sorted.reverse();
     return sorted;
   }, [entries, filterText, visibleCategories, sortDirection]);
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index e7edf557c..c1fa3dc09 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -55,6 +55,9 @@ function deserializeSortDirection(raw: string | undefined): SortDirection {
   return raw === "oldest-first" || raw === "newest-first" ? raw : SORT_DEFAULT;
 }
 
+// Overrides Mantine's default `JSON.stringify` so the stored value is the
+// raw enum literal (`"oldest-first"`), not a JSON-quoted string. Keeps the
+// localStorage value human-readable and lets tests assert on it directly.
 function serializeSortDirection(value: SortDirection): string {
   return value;
 }
@@ -304,24 +307,29 @@ export function InspectorView({
   // Per-screen sort direction, persisted to localStorage so the choice
   // survives reloads and syncs across browser tabs. `inspector.<scope>.<key>`
   // namespace; new preferences (theme defaults, compact-mode, etc.) should
-  // follow the same shape.
+  // follow the same shape. `getInitialValueInEffect: false` reads synchronously
+  // on first render — SPA only, no SSR, so this avoids a one-frame flicker
+  // where the persisted "oldest-first" briefly renders as "newest-first".
   const [logsSort, setLogsSort] = useLocalStorage<SortDirection>({
     key: "inspector.sortDirection.logs",
     defaultValue: SORT_DEFAULT,
     deserialize: deserializeSortDirection,
     serialize: serializeSortDirection,
+    getInitialValueInEffect: false,
   });
   const [historySort, setHistorySort] = useLocalStorage<SortDirection>({
     key: "inspector.sortDirection.history",
     defaultValue: SORT_DEFAULT,
     deserialize: deserializeSortDirection,
     serialize: serializeSortDirection,
+    getInitialValueInEffect: false,
   });
   const [networkSort, setNetworkSort] = useLocalStorage<SortDirection>({
     key: "inspector.sortDirection.network",
     defaultValue: SORT_DEFAULT,
     deserialize: deserializeSortDirection,
     serialize: serializeSortDirection,
+    getInitialValueInEffect: false,
   });
 
   // Only show the non-Servers tabs when actually connected. Network is
diff --git a/clients/web/src/test/setup.ts b/clients/web/src/test/setup.ts
index 916253694..8bb399551 100644
--- a/clients/web/src/test/setup.ts
+++ b/clients/web/src/test/setup.ts
@@ -15,7 +15,7 @@ class MemoryStorage implements Storage {
     this.store.clear();
   }
   getItem(key: string): string | null {
-    return this.store.has(key) ? this.store.get(key)! : null;
+    return this.store.get(key) ?? null;
   }
   key(index: number): string | null {
     return Array.from(this.store.keys())[index] ?? null;

From 77557e36f6fc98cd7a864eab160f6084a6391d75 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 10:39:51 -0400
Subject: [PATCH 05/13] fix(history): default the request list to collapsed for
 parity with Network

The History list opened expanded while Network opened collapsed; align
History with Network so both panels start in the same compact view.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../HistoryListPanel/HistoryListPanel.test.tsx       | 12 ++++++------
 .../groups/HistoryListPanel/HistoryListPanel.tsx     |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
index d69390e3d..0f0a981da 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
@@ -269,17 +269,17 @@ describe("HistoryListPanel", () => {
     renderWithMantine(
       <HistoryListPanel {...baseProps} entries={sampleEntries} />,
     );
-    // Initially expanded — Collapse buttons exist on each entry, and the
-    // ListToggle exposes its aria-label as "Collapse all".
+    // Initially collapsed (parity with Network) — entries show Expand and
+    // the ListToggle exposes its aria-label as "Expand all".
     expect(
-      screen.getAllByRole("button", { name: "Collapse" }).length,
+      screen.getAllByRole("button", { name: "Expand" }).length,
     ).toBeGreaterThan(0);
 
-    await user.click(screen.getByRole("button", { name: "Collapse all" }));
+    await user.click(screen.getByRole("button", { name: "Expand all" }));
 
-    // After toggle, entries collapsed — they show Expand
+    // After toggle, entries expanded — they show Collapse.
     expect(
-      screen.getAllByRole("button", { name: "Expand" }).length,
+      screen.getAllByRole("button", { name: "Collapse" }).length,
     ).toBeGreaterThan(0);
   });
 });
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index 5fbae1fec..e9812fe61 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -80,7 +80,7 @@ export function HistoryListPanel({
   sortDirection,
   onSortChange,
 }: HistoryListPanelProps) {
-  const [compact, setCompact] = useState(false);
+  const [compact, setCompact] = useState(true);
 
   const filteredEntries = useMemo(() => {
     // `.filter()` returns a fresh array, so sorting in-place is safe.

From 0990a0e237553df8a27f61427f9f7fea5c67eefd Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 12:02:45 -0400
Subject: [PATCH 06/13] feat(history,network): persist list compact state to
 localStorage

Lifts the per-panel `compact` flag out of HistoryListPanel /
NetworkStreamPanel and into InspectorView's localStorage hooks, mirroring
the sort-direction shape:

  inspector.listCompact.history
  inspector.listCompact.network

Defaults to collapsed (compact=true) on both, with a corrupted-value
deserializer that clamps unknown strings back to the default.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../HistoryListPanel.stories.tsx              |  2 +
 .../HistoryListPanel.test.tsx                 | 35 +++++--
 .../HistoryListPanel/HistoryListPanel.tsx     | 13 ++-
 .../NetworkStreamPanel.stories.tsx            |  2 +
 .../NetworkStreamPanel.test.tsx               | 23 ++++-
 .../NetworkStreamPanel/NetworkStreamPanel.tsx | 13 ++-
 .../HistoryScreen/HistoryScreen.stories.tsx   |  2 +
 .../HistoryScreen/HistoryScreen.test.tsx      |  2 +
 .../screens/HistoryScreen/HistoryScreen.tsx   |  6 ++
 .../NetworkScreen/NetworkScreen.stories.tsx   |  2 +
 .../NetworkScreen/NetworkScreen.test.tsx      |  2 +
 .../screens/NetworkScreen/NetworkScreen.tsx   |  6 ++
 .../InspectorView/InspectorView.test.tsx      | 91 +++++++++++++++++++
 .../views/InspectorView/InspectorView.tsx     | 37 ++++++++
 14 files changed, 209 insertions(+), 27 deletions(-)

diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx
index 60ebda3b6..0e9a2aa7a 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx
@@ -15,6 +15,8 @@ const meta: Meta<typeof HistoryListPanel> = {
     onTogglePin: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
+    compact: true,
+    onToggleCompact: fn(),
   },
 };
 
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
index 0f0a981da..a3ea817c7 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
@@ -68,6 +68,8 @@ const baseProps = {
   onTogglePin: vi.fn(),
   sortDirection: "newest-first" as const,
   onSortChange: vi.fn(),
+  compact: true,
+  onToggleCompact: vi.fn(),
 };
 
 describe("HistoryListPanel", () => {
@@ -264,22 +266,39 @@ describe("HistoryListPanel", () => {
     expect(onSortChange).toHaveBeenCalledWith("oldest-first");
   });
 
-  it("toggles compact list state when ListToggle is clicked", async () => {
-    const user = userEvent.setup();
+  it("renders entries collapsed when compact is true (default parity with Network)", () => {
     renderWithMantine(
-      <HistoryListPanel {...baseProps} entries={sampleEntries} />,
+      <HistoryListPanel {...baseProps} entries={sampleEntries} compact />,
     );
-    // Initially collapsed (parity with Network) — entries show Expand and
-    // the ListToggle exposes its aria-label as "Expand all".
     expect(
       screen.getAllByRole("button", { name: "Expand" }).length,
     ).toBeGreaterThan(0);
+  });
 
-    await user.click(screen.getByRole("button", { name: "Expand all" }));
-
-    // After toggle, entries expanded — they show Collapse.
+  it("renders entries expanded when compact is false", () => {
+    renderWithMantine(
+      <HistoryListPanel
+        {...baseProps}
+        entries={sampleEntries}
+        compact={false}
+      />,
+    );
     expect(
       screen.getAllByRole("button", { name: "Collapse" }).length,
     ).toBeGreaterThan(0);
   });
+
+  it("invokes onToggleCompact when the ListToggle is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleCompact = vi.fn();
+    renderWithMantine(
+      <HistoryListPanel
+        {...baseProps}
+        entries={sampleEntries}
+        onToggleCompact={onToggleCompact}
+      />,
+    );
+    await user.click(screen.getByRole("button", { name: "Expand all" }));
+    expect(onToggleCompact).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
index e9812fe61..88385a62b 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import {
   Button,
   Group,
@@ -28,6 +28,8 @@ export interface HistoryListPanelProps {
   onTogglePin: (id: string) => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
+  compact: boolean;
+  onToggleCompact: () => void;
 }
 
 const PanelContainer = Paper.withProps({
@@ -79,9 +81,9 @@ export function HistoryListPanel({
   onTogglePin,
   sortDirection,
   onSortChange,
+  compact,
+  onToggleCompact,
 }: HistoryListPanelProps) {
-  const [compact, setCompact] = useState(true);
-
   const filteredEntries = useMemo(() => {
     // `.filter()` returns a fresh array, so sorting in-place is safe.
     const sorted = entries
@@ -109,10 +111,7 @@ export function HistoryListPanel({
         <Title order={4}>Requests</Title>
         <Group gap="xs">
           {hasResults && (
-            <ListToggle
-              compact={compact}
-              onToggle={() => setCompact((c) => !c)}
-            />
+            <ListToggle compact={compact} onToggle={onToggleCompact} />
           )}
           <SortToggle
             value={sortDirection}
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx
index df57d9a8b..44d8e80ff 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx
@@ -14,6 +14,8 @@ const meta: Meta<typeof NetworkStreamPanel> = {
     onExport: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
+    compact: true,
+    onToggleCompact: fn(),
   },
 };
 
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
index 560c2c60b..ef65a4048 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
@@ -29,6 +29,8 @@ const baseProps = {
   onExport: vi.fn(),
   sortDirection: "newest-first" as const,
   onSortChange: vi.fn(),
+  compact: true,
+  onToggleCompact: vi.fn(),
 };
 
 describe("NetworkStreamPanel", () => {
@@ -126,17 +128,28 @@ describe("NetworkStreamPanel", () => {
     expect(screen.getByRole("button", { name: "Export" })).toBeDisabled();
   });
 
-  it("toggles between compact and expanded list views", async () => {
-    const user = userEvent.setup();
-    renderWithMantine(<NetworkStreamPanel {...baseProps} />);
-    // List starts compact -> entry should show Expand button
+  it("renders entries collapsed when compact is true", () => {
+    renderWithMantine(<NetworkStreamPanel {...baseProps} compact />);
     expect(screen.getByRole("button", { name: "Expand" })).toBeInTheDocument();
-    await user.click(screen.getByRole("button", { name: "Expand all" }));
+  });
+
+  it("renders entries expanded when compact is false", () => {
+    renderWithMantine(<NetworkStreamPanel {...baseProps} compact={false} />);
     expect(
       screen.getByRole("button", { name: "Collapse" }),
     ).toBeInTheDocument();
   });
 
+  it("invokes onToggleCompact when the ListToggle is clicked", async () => {
+    const user = userEvent.setup();
+    const onToggleCompact = vi.fn();
+    renderWithMantine(
+      <NetworkStreamPanel {...baseProps} onToggleCompact={onToggleCompact} />,
+    );
+    await user.click(screen.getByRole("button", { name: "Expand all" }));
+    expect(onToggleCompact).toHaveBeenCalledTimes(1);
+  });
+
   it("renders entries newest-first by default", () => {
     const older: FetchRequestEntry = {
       ...entry,
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
index 640063561..9c0521b0b 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import {
   Button,
   Group,
@@ -27,6 +27,8 @@ export interface NetworkStreamPanelProps {
   onExport: () => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
+  compact: boolean;
+  onToggleCompact: () => void;
 }
 
 const PanelContainer = Paper.withProps({
@@ -90,9 +92,9 @@ export function NetworkStreamPanel({
   onExport,
   sortDirection,
   onSortChange,
+  compact,
+  onToggleCompact,
 }: NetworkStreamPanelProps) {
-  const [compact, setCompact] = useState(true);
-
   const filteredEntries = useMemo(() => {
     // `.filter()` returns a fresh array, so sorting in-place is safe.
     const sorted = entries
@@ -111,10 +113,7 @@ export function NetworkStreamPanel({
         <Title order={4}>{formatTitle(filteredEntries.length)}</Title>
         <Group gap="xs">
           {hasResults && (
-            <ListToggle
-              compact={compact}
-              onToggle={() => setCompact((c) => !c)}
-            />
+            <ListToggle compact={compact} onToggle={onToggleCompact} />
           )}
           <SortToggle
             value={sortDirection}
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
index 63489824c..f65bdba14 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.stories.tsx
@@ -15,6 +15,8 @@ const meta: Meta<typeof HistoryScreen> = {
     onTogglePin: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
+    compact: true,
+    onToggleCompact: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
index 74088b8d4..f9d76a1bb 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.test.tsx
@@ -28,6 +28,8 @@ const baseProps = {
   onTogglePin: vi.fn(),
   sortDirection: "newest-first" as const,
   onSortChange: vi.fn(),
+  compact: true,
+  onToggleCompact: vi.fn(),
 };
 
 describe("HistoryScreen", () => {
diff --git a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
index e245b33d0..ccb5fa7ff 100644
--- a/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
+++ b/clients/web/src/components/screens/HistoryScreen/HistoryScreen.tsx
@@ -15,6 +15,8 @@ export interface HistoryScreenProps {
   onTogglePin: (id: string) => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
+  compact: boolean;
+  onToggleCompact: () => void;
 }
 
 const ScreenLayout = Flex.withProps({
@@ -43,6 +45,8 @@ export function HistoryScreen({
   onTogglePin,
   sortDirection,
   onSortChange,
+  compact,
+  onToggleCompact,
 }: HistoryScreenProps) {
   const [searchText, setSearchText] = useState("");
   const [methodFilter, setMethodFilter] = useState<MessageMethod | undefined>();
@@ -81,6 +85,8 @@ export function HistoryScreen({
         onTogglePin={onTogglePin}
         sortDirection={sortDirection}
         onSortChange={onSortChange}
+        compact={compact}
+        onToggleCompact={onToggleCompact}
       />
     </ScreenLayout>
   );
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
index e06f75339..56ef45d4c 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.stories.tsx
@@ -12,6 +12,8 @@ const meta: Meta<typeof NetworkScreen> = {
     onExport: fn(),
     sortDirection: "newest-first",
     onSortChange: fn(),
+    compact: true,
+    onToggleCompact: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
index 0985fc4d1..f081a4e15 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.test.tsx
@@ -45,6 +45,8 @@ const baseProps = {
   onExport: vi.fn(),
   sortDirection: "newest-first" as const,
   onSortChange: vi.fn(),
+  compact: true,
+  onToggleCompact: vi.fn(),
 };
 
 describe("NetworkScreen", () => {
diff --git a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
index f1b3b355c..93f7c52a0 100644
--- a/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
+++ b/clients/web/src/components/screens/NetworkScreen/NetworkScreen.tsx
@@ -14,6 +14,8 @@ export interface NetworkScreenProps {
   onExport: () => void;
   sortDirection: SortDirection;
   onSortChange: (next: SortDirection) => void;
+  compact: boolean;
+  onToggleCompact: () => void;
 }
 
 const ALL_CATEGORIES_VISIBLE: Record<FetchRequestCategory, boolean> = {
@@ -49,6 +51,8 @@ export function NetworkScreen({
   onExport,
   sortDirection,
   onSortChange,
+  compact,
+  onToggleCompact,
 }: NetworkScreenProps) {
   const [filterText, setFilterText] = useState("");
   const [visibleCategories, setVisibleCategories] = useState<
@@ -90,6 +94,8 @@ export function NetworkScreen({
         onExport={onExport}
         sortDirection={sortDirection}
         onSortChange={onSortChange}
+        compact={compact}
+        onToggleCompact={onToggleCompact}
       />
     </ScreenLayout>
   );
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 42952db75..5398255a6 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -407,4 +407,95 @@ describe("InspectorView", () => {
     });
     await waitFor(() => expect(sortSelect).toHaveValue("Sort: Newest First"));
   });
+
+  it("persists History list compact state to localStorage and restores it on remount", async () => {
+    const user = userEvent.setup();
+    const historyEntry = {
+      id: "req-1",
+      timestamp: new Date("2026-03-17T10:00:00Z"),
+      direction: "request" as const,
+      message: {
+        jsonrpc: "2.0" as const,
+        id: 1,
+        method: "tools/list",
+      },
+    };
+    const { unmount } = renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [sampleServer],
+          activeServer: "alpha",
+          connectionStatus: "connected",
+          initializeResult: connectedInit,
+          latencyMs: 50,
+          history: [historyEntry],
+        })}
+      />,
+    );
+    const tabSelect = await screen.findByDisplayValue("Servers");
+    await user.click(tabSelect);
+    await user.click(await screen.findByText("History"));
+    // Default is collapsed — ListToggle reads "Expand all".
+    await user.click(await screen.findByRole("button", { name: "Expand all" }));
+
+    await waitFor(() =>
+      expect(window.localStorage.getItem("inspector.listCompact.history")).toBe(
+        "false",
+      ),
+    );
+
+    unmount();
+    renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [sampleServer],
+          activeServer: "alpha",
+          connectionStatus: "connected",
+          initializeResult: connectedInit,
+          latencyMs: 50,
+          history: [historyEntry],
+        })}
+      />,
+    );
+    const tabSelect2 = await screen.findByDisplayValue("Servers");
+    await user.click(tabSelect2);
+    await user.click(await screen.findByText("History"));
+    // After restore the list is expanded, so the ListToggle reads "Collapse all".
+    expect(
+      await screen.findByRole("button", { name: "Collapse all" }),
+    ).toBeInTheDocument();
+  });
+
+  it("falls back to collapsed when a corrupted compact value is stored", async () => {
+    const user = userEvent.setup();
+    window.localStorage.setItem("inspector.listCompact.history", "garbage");
+    const historyEntry = {
+      id: "req-1",
+      timestamp: new Date("2026-03-17T10:00:00Z"),
+      direction: "request" as const,
+      message: {
+        jsonrpc: "2.0" as const,
+        id: 1,
+        method: "tools/list",
+      },
+    };
+    renderWithMantine(
+      <InspectorView
+        {...makeProps({
+          servers: [sampleServer],
+          activeServer: "alpha",
+          connectionStatus: "connected",
+          initializeResult: connectedInit,
+          latencyMs: 50,
+          history: [historyEntry],
+        })}
+      />,
+    );
+    const tabSelect = await screen.findByDisplayValue("Servers");
+    await user.click(tabSelect);
+    await user.click(await screen.findByText("History"));
+    expect(
+      await screen.findByRole("button", { name: "Expand all" }),
+    ).toBeInTheDocument();
+  });
 });
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index c1fa3dc09..4eb8f6832 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -62,6 +62,21 @@ function serializeSortDirection(value: SortDirection): string {
   return value;
 }
 
+const LIST_COMPACT_DEFAULT = true;
+
+// Same shape as the sort adapters: store the boolean as `"true"` / `"false"`
+// so the localStorage value stays human-readable, and clamp any other value
+// back to the default rather than coercing it to `false`.
+function deserializeListCompact(raw: string | undefined): boolean {
+  if (raw === "true") return true;
+  if (raw === "false") return false;
+  return LIST_COMPACT_DEFAULT;
+}
+
+function serializeListCompact(value: boolean): string {
+  return value ? "true" : "false";
+}
+
 const SERVERS_TAB = "Servers";
 const NETWORK_TAB = "Network";
 
@@ -332,6 +347,24 @@ export function InspectorView({
     getInitialValueInEffect: false,
   });
 
+  // Per-screen list-row compact (collapsed) preference. Same persistence
+  // shape as the sort hooks — synchronous read on first render to avoid a
+  // one-frame flip from default → stored value.
+  const [historyCompact, setHistoryCompact] = useLocalStorage<boolean>({
+    key: "inspector.listCompact.history",
+    defaultValue: LIST_COMPACT_DEFAULT,
+    deserialize: deserializeListCompact,
+    serialize: serializeListCompact,
+    getInitialValueInEffect: false,
+  });
+  const [networkCompact, setNetworkCompact] = useLocalStorage<boolean>({
+    key: "inspector.listCompact.network",
+    defaultValue: LIST_COMPACT_DEFAULT,
+    deserialize: deserializeListCompact,
+    serialize: serializeListCompact,
+    getInitialValueInEffect: false,
+  });
+
   // Only show the non-Servers tabs when actually connected. Network is
   // additionally hidden for stdio servers — there is no HTTP traffic to
   // surface there, so the tab would always be empty. Capability-aware
@@ -508,6 +541,8 @@ export function InspectorView({
               onTogglePin={onTogglePinHistory}
               sortDirection={historySort}
               onSortChange={setHistorySort}
+              compact={historyCompact}
+              onToggleCompact={() => setHistoryCompact((c) => !c)}
             />
           </ScreenStage>
           <ScreenStage active={activeTab === "Network"}>
@@ -517,6 +552,8 @@ export function InspectorView({
               onExport={onExportNetwork}
               sortDirection={networkSort}
               onSortChange={setNetworkSort}
+              compact={networkCompact}
+              onToggleCompact={() => setNetworkCompact((c) => !c)}
             />
           </ScreenStage>
         </ScreenStageContainer>

From 0ebcb8a09a6f932e0d777935ad7af053f12cd021 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 12:48:24 -0400
Subject: [PATCH 07/13] feat(servers,resources): persist ListToggle state to
 localStorage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lifts the per-screen compact preference out of ServerListScreen and
ResourceControls into InspectorView's localStorage hooks, matching the
History/Network shape:

  inspector.listCompact.servers
  inspector.listCompact.resources

Servers and Resources both default to expanded (compact=false). For
ResourceControls the displayed compact is still derived from openSections
(so per-section accordion clicks still work locally), and only explicit
ListToggle clicks update the persisted preference — the handler computes
the next compact value from the click outcome rather than blindly
flipping, so a half-open accordion still records the right post-state.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../ResourceControls.stories.tsx              |  2 +
 .../ResourceControls.test.tsx                 | 49 +++++++++++++------
 .../ResourceControls/ResourceControls.tsx     | 38 +++++++++-----
 .../ResourcesScreen.stories.tsx               |  2 +
 .../ResourcesScreen/ResourcesScreen.test.tsx  |  2 +
 .../ResourcesScreen/ResourcesScreen.tsx       |  6 +++
 .../ServerListScreen.stories.tsx              |  2 +
 .../ServerListScreen.test.tsx                 |  2 +
 .../ServerListScreen/ServerListScreen.tsx     | 13 ++---
 .../views/InspectorView/InspectorView.tsx     | 21 ++++++++
 10 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
index 425347997..98c8144f0 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.stories.tsx
@@ -16,6 +16,8 @@ const meta: Meta<typeof ResourceControls> = {
     onSelectTemplate: fn(),
     onUnsubscribeResource: fn(),
     listChanged: false,
+    compact: false,
+    onCompactChange: fn(),
   },
 };
 
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx
index 876b2fed7..7f1be81a2 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.test.tsx
@@ -33,6 +33,8 @@ const baseProps = {
   onSelectUri: vi.fn(),
   onSelectTemplate: vi.fn(),
   onUnsubscribeResource: vi.fn(),
+  compact: false,
+  onCompactChange: vi.fn(),
 };
 
 describe("ResourceControls", () => {
@@ -150,23 +152,40 @@ describe("ResourceControls", () => {
     expect(screen.getByText("Subscriptions (0)")).toBeInTheDocument();
   });
 
-  it("toggles all sections via the ListToggle button", async () => {
+  it("seeds the accordion to all-open when compact is false", () => {
+    renderWithMantine(<ResourceControls {...baseProps} compact={false} />);
+    // All three sections open → ListToggle reads "Collapse all".
+    expect(
+      screen.getByRole("button", { name: "Collapse all" }),
+    ).toBeInTheDocument();
+  });
+
+  it("seeds the accordion to all-closed when compact is true", () => {
+    renderWithMantine(<ResourceControls {...baseProps} compact />);
+    // All three sections closed → ListToggle reads "Expand all".
+    expect(
+      screen.getByRole("button", { name: "Expand all" }),
+    ).toBeInTheDocument();
+  });
+
+  it("invokes onCompactChange with the new preference when the ListToggle is clicked", async () => {
     const user = userEvent.setup();
-    renderWithMantine(<ResourceControls {...baseProps} />);
-    const toggleButtons = screen.getAllByRole("button");
-    // The list toggle is the last in the search row; just exercise it.
-    // Since all three sections start open, clicking it should collapse them.
-    const toggle = toggleButtons.find(
-      (btn) => btn.querySelector("svg") && btn !== toggleButtons[0],
+    const onCompactChange = vi.fn();
+    renderWithMantine(
+      <ResourceControls
+        {...baseProps}
+        compact={false}
+        onCompactChange={onCompactChange}
+      />,
     );
-    if (toggle) {
-      await user.click(toggle);
-    }
-    // After collapse, click again to re-expand.
-    if (toggle) {
-      await user.click(toggle);
-    }
-    expect(screen.getByText("URIs (2)")).toBeInTheDocument();
+    // All sections start open → ListToggle reads "Collapse all"; clicking
+    // it collapses everything and records compact=true.
+    await user.click(screen.getByRole("button", { name: "Collapse all" }));
+    expect(onCompactChange).toHaveBeenCalledWith(true);
+    // Now collapsed → ListToggle reads "Expand all"; clicking re-expands
+    // and records compact=false.
+    await user.click(screen.getByRole("button", { name: "Expand all" }));
+    expect(onCompactChange).toHaveBeenLastCalledWith(false);
   });
 
   it("filters by resource title when title is set", async () => {
diff --git a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
index 7e6120649..01c58fc02 100644
--- a/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
+++ b/clients/web/src/components/groups/ResourceControls/ResourceControls.tsx
@@ -28,6 +28,13 @@ export interface ResourceControlsProps {
   onSelectUri: (uri: string) => void;
   onSelectTemplate: (uriTemplate: string) => void;
   onUnsubscribeResource: (uri: string) => void;
+  /**
+   * Persisted preference for the ListToggle. Seeds initial accordion state
+   * on mount; the user can still toggle individual sections during a session
+   * without affecting this value. Only an explicit ListToggle click updates it.
+   */
+  compact: boolean;
+  onCompactChange: (next: boolean) => void;
 }
 
 function panelMaxHeight(openCount: number): string {
@@ -52,6 +59,8 @@ export function ResourceControls({
   onSelectUri,
   onSelectTemplate,
   onUnsubscribeResource,
+  compact: initialCompact,
+  onCompactChange,
 }: ResourceControlsProps) {
   const [searchText, setSearchText] = useState("");
   const query = searchText.toLowerCase();
@@ -74,17 +83,27 @@ export function ResourceControls({
       s.resource.uri.toLowerCase().includes(query),
   );
 
-  const defaultOpen = [
-    ...(filteredResources.length > 0 ? ["resources"] : []),
-    ...(filteredTemplates.length > 0 ? ["templates"] : []),
-    ...(filteredSubscriptions.length > 0 ? ["subscriptions"] : []),
-  ];
-
   const allSections = ["resources", "templates", "subscriptions"];
-  const [openSections, setOpenSections] = useState<string[]>(defaultOpen);
+  // Seed the accordion from the persisted preference: empty when the user
+  // last left the panel compact, all three open when they explicitly
+  // expanded. Per-section accordion clicks during a session update the
+  // local list but don't change the persisted preference.
+  const [openSections, setOpenSections] = useState<string[]>(
+    initialCompact ? [] : [...allSections],
+  );
   const allExpanded = openSections.length === allSections.length;
   const maxHeight = panelMaxHeight(openSections.length);
 
+  function handleToggleList() {
+    // Compute the next compact value from what the click will produce so a
+    // half-open accordion (user toggled a single section) still persists the
+    // right preference: clicking "expand all" should record `compact=false`
+    // even if the visible state was already partially expanded.
+    const nextCompact = allExpanded;
+    setOpenSections(nextCompact ? [] : [...allSections]);
+    onCompactChange(nextCompact);
+  }
+
   return (
     <Stack gap="sm">
       <Group justify="space-between">
@@ -98,10 +117,7 @@ export function ResourceControls({
           value={searchText}
           onChange={(e) => setSearchText(e.currentTarget.value)}
         />
-        <ListToggle
-          compact={!allExpanded}
-          onToggle={() => setOpenSections(allExpanded ? [] : [...allSections])}
-        />
+        <ListToggle compact={!allExpanded} onToggle={handleToggleList} />
       </Group>
       <Accordion multiple value={openSections} onChange={setOpenSections}>
         <Accordion.Item value="resources">
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
index 72637d79d..d63576e0b 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
@@ -20,6 +20,8 @@ const meta: Meta<typeof ResourcesScreen> = {
     listChanged: false,
     subscriptions: [],
     templates: [],
+    compact: false,
+    onCompactChange: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
index efbca1bf4..ccfca15fc 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.test.tsx
@@ -26,6 +26,8 @@ const baseProps = {
   onReadResource: vi.fn(),
   onSubscribeResource: vi.fn(),
   onUnsubscribeResource: vi.fn(),
+  compact: false,
+  onCompactChange: vi.fn(),
 };
 
 const okResult: ReadResourceResult = {
diff --git a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
index bb8206a0e..82372878b 100644
--- a/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
+++ b/clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.tsx
@@ -47,6 +47,8 @@ export interface ResourcesScreenProps {
     argumentValue: string,
     context: Record<string, string>,
   ) => Promise<string[]>;
+  compact: boolean;
+  onCompactChange: (next: boolean) => void;
 }
 
 const ScreenLayout = Flex.withProps({
@@ -112,6 +114,8 @@ export function ResourcesScreen({
   onSubscribeResource,
   onUnsubscribeResource,
   onCompleteArgument,
+  compact,
+  onCompactChange,
 }: ResourcesScreenProps) {
   const [selectedResourceUri, setSelectedResourceUri] = useState<
     string | undefined
@@ -252,6 +256,8 @@ export function ResourcesScreen({
             onSelectUri={handleSelectResource}
             onSelectTemplate={handleSelectTemplate}
             onUnsubscribeResource={onUnsubscribeResource}
+            compact={compact}
+            onCompactChange={onCompactChange}
           />
         </SidebarCard>
       </Sidebar>
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
index b34056591..fe6ef7441 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.stories.tsx
@@ -18,6 +18,8 @@ const meta: Meta<typeof ServerListScreen> = {
     onEdit: fn(),
     onClone: fn(),
     onRemove: fn(),
+    compact: false,
+    onToggleCompact: fn(),
   },
 };
 
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
index 37e1a1636..1873425d4 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx
@@ -25,6 +25,8 @@ const baseProps = {
   onEdit: vi.fn(),
   onClone: vi.fn(),
   onRemove: vi.fn(),
+  compact: false,
+  onToggleCompact: vi.fn(),
 };
 
 describe("ServerListScreen", () => {
diff --git a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
index 846ce3805..dd4dfa9e0 100644
--- a/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
+++ b/clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx
@@ -1,4 +1,3 @@
-import { useState } from "react";
 import { ScrollArea, SimpleGrid, Stack, Text } from "@mantine/core";
 import type { ServerEntry } from "@inspector/core/mcp/types.js";
 import { ServerCard } from "../../groups/ServerCard/ServerCard";
@@ -19,6 +18,8 @@ export interface ServerListScreenProps {
   onEdit: (id: string) => void;
   onClone: (id: string) => void;
   onRemove: (id: string) => void;
+  compact: boolean;
+  onToggleCompact: () => void;
 }
 
 const PageContainer = Stack.withProps({
@@ -44,19 +45,15 @@ export function ServerListScreen({
   onEdit,
   onClone,
   onRemove,
+  compact,
+  onToggleCompact,
 }: ServerListScreenProps) {
-  const [compact, setCompact] = useState<boolean>(false);
-
-  function handleToggleList() {
-    setCompact((prev) => !prev);
-  }
-
   return (
     <PageContainer>
       <ServerListControls
         serverCount={servers.length}
         compact={compact}
-        onToggleList={handleToggleList}
+        onToggleList={onToggleCompact}
         onAddManually={onAddManually}
         onImportConfig={onImportConfig}
         onImportServerJson={onImportServerJson}
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 4eb8f6832..2c513d185 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -364,6 +364,23 @@ export function InspectorView({
     serialize: serializeListCompact,
     getInitialValueInEffect: false,
   });
+  const [serversCompact, setServersCompact] = useLocalStorage<boolean>({
+    key: "inspector.listCompact.servers",
+    defaultValue: false,
+    deserialize: deserializeListCompact,
+    serialize: serializeListCompact,
+    getInitialValueInEffect: false,
+  });
+  // Resources defaults to expanded so new users see the sidebar's content
+  // sections opened (mirrors the pre-persistence behavior of showing
+  // sections that had entries).
+  const [resourcesCompact, setResourcesCompact] = useLocalStorage<boolean>({
+    key: "inspector.listCompact.resources",
+    defaultValue: false,
+    deserialize: deserializeListCompact,
+    serialize: serializeListCompact,
+    getInitialValueInEffect: false,
+  });
 
   // Only show the non-Servers tabs when actually connected. Network is
   // additionally hidden for stdio servers — there is no HTTP traffic to
@@ -458,6 +475,8 @@ export function InspectorView({
               onEdit={onServerEdit}
               onClone={onServerClone}
               onRemove={onServerRemove}
+              compact={serversCompact}
+              onToggleCompact={() => setServersCompact((c) => !c)}
             />
           </ScreenStage>
           <ScreenStage active={activeTab === "Tools"}>
@@ -509,6 +528,8 @@ export function InspectorView({
               onSubscribeResource={onSubscribeResource}
               onUnsubscribeResource={onUnsubscribeResource}
               onCompleteArgument={onCompleteArgument}
+              compact={resourcesCompact}
+              onCompactChange={setResourcesCompact}
             />
           </ScreenStage>
           <ScreenStage active={activeTab === "Tasks"}>

From 43f118b2a2ea788071862744d9ddada1d1e7e29e Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 13:34:28 -0400
Subject: [PATCH 08/13] refactor(sort-toggle): switch to icon button matching
 ListToggle style

Replaces the Mantine Select with a subtle Button (or ActionIcon for the
subtle variant), using TbSortDescending2 for newest-first and
TbSortAscending2 for oldest-first. Clicking the button flips between the
two values.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../SortToggle/SortToggle.stories.tsx         | 16 +++---
 .../elements/SortToggle/SortToggle.test.tsx   | 46 ++++++++++-------
 .../elements/SortToggle/SortToggle.tsx        | 49 +++++++++++--------
 .../HistoryListPanel.test.tsx                 |  3 +-
 .../LogStreamPanel/LogStreamPanel.test.tsx    |  5 +-
 .../NetworkStreamPanel.test.tsx               |  3 +-
 .../InspectorView/InspectorView.test.tsx      | 40 +++++++++------
 7 files changed, 96 insertions(+), 66 deletions(-)

diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
index 0b12224b9..d22676350 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
@@ -25,18 +25,22 @@ export const OldestFirst: Story = {
   },
 };
 
+export const Subtle: Story = {
+  args: {
+    value: "newest-first",
+    variant: "subtle",
+  },
+};
+
 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 userEvent.click(
+      await body.findByRole("button", { name: "Sort direction" }),
+    );
     await expect(args.onChange).toHaveBeenCalledWith("oldest-first");
   },
 };
diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
index d20f8056b..51ed3c12d 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
@@ -4,20 +4,10 @@ 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", () => {
+  it("renders a button with the default aria-label", () => {
     renderWithMantine(<SortToggle value="newest-first" onChange={() => {}} />);
     expect(
-      screen.getByRole("textbox", { name: "Sort direction" }),
+      screen.getByRole("button", { name: "Sort direction" }),
     ).toBeInTheDocument();
   });
 
@@ -29,17 +19,37 @@ describe("SortToggle", () => {
         aria-label="Logs sort"
       />,
     );
-    expect(
-      screen.getByRole("textbox", { name: "Logs sort" }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Logs sort" })).toBeInTheDocument();
   });
 
-  it("invokes onChange with the new direction when the user picks another option", async () => {
+  it("flips to oldest-first when clicked while newest-first", 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"));
+    await user.click(screen.getByRole("button", { name: "Sort direction" }));
+    expect(onChange).toHaveBeenCalledWith("oldest-first");
+  });
+
+  it("flips to newest-first when clicked while oldest-first", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithMantine(<SortToggle value="oldest-first" onChange={onChange} />);
+    await user.click(screen.getByRole("button", { name: "Sort direction" }));
+    expect(onChange).toHaveBeenCalledWith("newest-first");
+  });
+
+  it("renders the subtle variant as an ActionIcon (still a button)", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    renderWithMantine(
+      <SortToggle
+        value="newest-first"
+        variant="subtle"
+        onChange={onChange}
+      />,
+    );
+    const btn = screen.getByRole("button", { name: "Sort direction" });
+    await user.click(btn);
     expect(onChange).toHaveBeenCalledWith("oldest-first");
   });
 });
diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
index 2b8a35343..7fac5a800 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
@@ -1,39 +1,48 @@
-import { Select } from "@mantine/core";
+import { ActionIcon, Button } from "@mantine/core";
+import { TbSortAscending2, TbSortDescending2 } from "react-icons/tb";
 
 export type SortDirection = "oldest-first" | "newest-first";
 
 export interface SortToggleProps {
   value: SortDirection;
   onChange: (next: SortDirection) => void;
+  variant?: "default" | "subtle";
   "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,
+  variant = "default",
   "aria-label": ariaLabel = "Sort direction",
 }: SortToggleProps) {
+  const Icon =
+    value === "newest-first" ? TbSortDescending2 : TbSortAscending2;
+  const handleClick = () =>
+    onChange(value === "newest-first" ? "oldest-first" : "newest-first");
+
+  if (variant === "subtle") {
+    return (
+      <ActionIcon
+        variant="subtle"
+        color="gray"
+        size="md"
+        aria-label={ariaLabel}
+        onClick={handleClick}
+      >
+        <Icon size={16} />
+      </ActionIcon>
+    );
+  }
+
   return (
-    <Select
+    <Button
       size="sm"
-      w={190}
-      data={OPTIONS}
-      value={value}
-      onChange={(next) => {
-        if (isSortDirection(next)) onChange(next);
-      }}
-      allowDeselect={false}
-      withCheckIcon={false}
+      variant="subtle"
       aria-label={ariaLabel}
-    />
+      onClick={handleClick}
+    >
+      <Icon size={20} />
+    </Button>
   );
 }
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
index a3ea817c7..de0933c1e 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
@@ -260,9 +260,8 @@ describe("HistoryListPanel", () => {
       />,
     );
     await user.click(
-      screen.getByRole("textbox", { name: "History sort direction" }),
+      screen.getByRole("button", { name: "History sort direction" }),
     );
-    await user.click(await screen.findByText("Sort: Oldest First"));
     expect(onSortChange).toHaveBeenCalledWith("oldest-first");
   });
 
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
index def5466f7..864a85d64 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
@@ -172,16 +172,15 @@ describe("LogStreamPanel", () => {
     );
   });
 
-  it("invokes onSortChange when the user picks a new sort", async () => {
+  it("invokes onSortChange with the flipped direction when the toggle is clicked", async () => {
     const user = userEvent.setup();
     const onSortChange = vi.fn();
     renderWithMantine(
       <LogStreamPanel {...baseProps} onSortChange={onSortChange} />,
     );
     await user.click(
-      screen.getByRole("textbox", { name: "Logs sort direction" }),
+      screen.getByRole("button", { name: "Logs sort direction" }),
     );
-    await user.click(await screen.findByText("Sort: Oldest First"));
     expect(onSortChange).toHaveBeenCalledWith("oldest-first");
   });
 });
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
index ef65a4048..452ace255 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
@@ -207,9 +207,8 @@ describe("NetworkStreamPanel", () => {
       <NetworkStreamPanel {...baseProps} onSortChange={onSortChange} />,
     );
     await user.click(
-      screen.getByRole("textbox", { name: "Network sort direction" }),
+      screen.getByRole("button", { name: "Network sort direction" }),
     );
-    await user.click(await screen.findByText("Sort: Oldest First"));
     expect(onSortChange).toHaveBeenCalledWith("oldest-first");
   });
 });
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index 5398255a6..c1d713d6e 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -351,13 +351,10 @@ describe("InspectorView", () => {
     await user.click(tabSelect);
     await user.click(await screen.findByText("Logs"));
 
-    const sortSelect = await screen.findByRole("textbox", {
-      name: "Logs sort direction",
-    });
-    expect(sortSelect).toHaveValue("Sort: Newest First");
-    await user.click(sortSelect);
-    await user.click(await screen.findByText("Sort: Oldest First"));
-
+    // Default is newest-first; clicking the toggle flips to oldest-first.
+    await user.click(
+      await screen.findByRole("button", { name: "Logs sort direction" }),
+    );
     await waitFor(() =>
       expect(window.localStorage.getItem("inspector.sortDirection.logs")).toBe(
         "oldest-first",
@@ -379,10 +376,16 @@ describe("InspectorView", () => {
     const tabSelect2 = await screen.findByDisplayValue("Servers");
     await user.click(tabSelect2);
     await user.click(await screen.findByText("Logs"));
-    const sortSelect2 = await screen.findByRole("textbox", {
-      name: "Logs sort direction",
-    });
-    await waitFor(() => expect(sortSelect2).toHaveValue("Sort: Oldest First"));
+    // The restored value is oldest-first; one more click flips back to
+    // newest-first — proves the previous oldest-first value was hydrated.
+    await user.click(
+      await screen.findByRole("button", { name: "Logs sort direction" }),
+    );
+    await waitFor(() =>
+      expect(window.localStorage.getItem("inspector.sortDirection.logs")).toBe(
+        "newest-first",
+      ),
+    );
   });
 
   it("falls back to newest-first when a corrupted sort value is stored", async () => {
@@ -402,10 +405,17 @@ describe("InspectorView", () => {
     const tabSelect = await screen.findByDisplayValue("Servers");
     await user.click(tabSelect);
     await user.click(await screen.findByText("History"));
-    const sortSelect = await screen.findByRole("textbox", {
-      name: "History sort direction",
-    });
-    await waitFor(() => expect(sortSelect).toHaveValue("Sort: Newest First"));
+    // Garbage gets clamped to newest-first; clicking flips to oldest-first
+    // and writes that out — proves the initial in-memory value was the
+    // default, not "garbage".
+    await user.click(
+      await screen.findByRole("button", { name: "History sort direction" }),
+    );
+    await waitFor(() =>
+      expect(
+        window.localStorage.getItem("inspector.sortDirection.history"),
+      ).toBe("oldest-first"),
+    );
   });
 
   it("persists History list compact state to localStorage and restores it on remount", async () => {

From f2f9796945c5522eff8e85b31447347503d79b84 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 13:43:27 -0400
Subject: [PATCH 09/13] refactor(sort-toggle): restore Select with sort icon in
 rightSection

Reverts SortToggle to a Mantine Select with simplified labels ("Newest
First" / "Oldest First") and the corresponding TbSortDescending2 /
TbSortAscending2 icon in the rightSection, replacing the default chevron.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../SortToggle/SortToggle.stories.tsx         | 15 ++----
 .../elements/SortToggle/SortToggle.test.tsx   | 46 +++++++-----------
 .../elements/SortToggle/SortToggle.tsx        | 47 +++++++++----------
 .../HistoryListPanel.test.tsx                 |  3 +-
 .../LogStreamPanel/LogStreamPanel.test.tsx    |  5 +-
 .../NetworkStreamPanel.test.tsx               |  3 +-
 .../InspectorView/InspectorView.test.tsx      | 40 ++++++----------
 7 files changed, 66 insertions(+), 93 deletions(-)

diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
index d22676350..5f159c933 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.stories.tsx
@@ -25,22 +25,17 @@ export const OldestFirst: Story = {
   },
 };
 
-export const Subtle: Story = {
-  args: {
-    value: "newest-first",
-    variant: "subtle",
-  },
-};
-
 export const FlipsDirection: Story = {
   args: {
     value: "newest-first",
   },
   play: async ({ canvasElement, args }) => {
     const body = within(canvasElement.ownerDocument.body);
-    await userEvent.click(
-      await body.findByRole("button", { name: "Sort direction" }),
-    );
+    const select = await body.findByRole("textbox", {
+      name: "Sort direction",
+    });
+    await userEvent.click(select);
+    await userEvent.click(await body.findByText("Oldest First"));
     await expect(args.onChange).toHaveBeenCalledWith("oldest-first");
   },
 };
diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
index 51ed3c12d..a921b451c 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.test.tsx
@@ -4,10 +4,20 @@ import { renderWithMantine, screen } from "../../../test/renderWithMantine";
 import { SortToggle } from "./SortToggle";
 
 describe("SortToggle", () => {
-  it("renders a button with the default aria-label", () => {
+  it("renders the current value as the selected option", () => {
+    renderWithMantine(<SortToggle value="newest-first" onChange={() => {}} />);
+    expect(screen.getByDisplayValue("Newest First")).toBeInTheDocument();
+  });
+
+  it("renders 'Oldest First' when value is oldest-first", () => {
+    renderWithMantine(<SortToggle value="oldest-first" onChange={() => {}} />);
+    expect(screen.getByDisplayValue("Oldest First")).toBeInTheDocument();
+  });
+
+  it("uses the default aria-label", () => {
     renderWithMantine(<SortToggle value="newest-first" onChange={() => {}} />);
     expect(
-      screen.getByRole("button", { name: "Sort direction" }),
+      screen.getByRole("textbox", { name: "Sort direction" }),
     ).toBeInTheDocument();
   });
 
@@ -19,37 +29,17 @@ describe("SortToggle", () => {
         aria-label="Logs sort"
       />,
     );
-    expect(screen.getByRole("button", { name: "Logs sort" })).toBeInTheDocument();
+    expect(
+      screen.getByRole("textbox", { name: "Logs sort" }),
+    ).toBeInTheDocument();
   });
 
-  it("flips to oldest-first when clicked while newest-first", async () => {
+  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("button", { name: "Sort direction" }));
-    expect(onChange).toHaveBeenCalledWith("oldest-first");
-  });
-
-  it("flips to newest-first when clicked while oldest-first", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    renderWithMantine(<SortToggle value="oldest-first" onChange={onChange} />);
-    await user.click(screen.getByRole("button", { name: "Sort direction" }));
-    expect(onChange).toHaveBeenCalledWith("newest-first");
-  });
-
-  it("renders the subtle variant as an ActionIcon (still a button)", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    renderWithMantine(
-      <SortToggle
-        value="newest-first"
-        variant="subtle"
-        onChange={onChange}
-      />,
-    );
-    const btn = screen.getByRole("button", { name: "Sort direction" });
-    await user.click(btn);
+    await user.click(screen.getByRole("textbox", { name: "Sort direction" }));
+    await user.click(await screen.findByText("Oldest First"));
     expect(onChange).toHaveBeenCalledWith("oldest-first");
   });
 });
diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
index 7fac5a800..ef31b0f16 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, Button } from "@mantine/core";
+import { Select } from "@mantine/core";
 import { TbSortAscending2, TbSortDescending2 } from "react-icons/tb";
 
 export type SortDirection = "oldest-first" | "newest-first";
@@ -6,43 +6,38 @@ export type SortDirection = "oldest-first" | "newest-first";
 export interface SortToggleProps {
   value: SortDirection;
   onChange: (next: SortDirection) => void;
-  variant?: "default" | "subtle";
   "aria-label"?: string;
 }
 
+const OPTIONS: { value: SortDirection; label: string }[] = [
+  { value: "newest-first", label: "Newest First" },
+  { value: "oldest-first", label: "Oldest First" },
+];
+
+function isSortDirection(value: string | null): value is SortDirection {
+  return value === "oldest-first" || value === "newest-first";
+}
+
 export function SortToggle({
   value,
   onChange,
-  variant = "default",
   "aria-label": ariaLabel = "Sort direction",
 }: SortToggleProps) {
   const Icon =
     value === "newest-first" ? TbSortDescending2 : TbSortAscending2;
-  const handleClick = () =>
-    onChange(value === "newest-first" ? "oldest-first" : "newest-first");
-
-  if (variant === "subtle") {
-    return (
-      <ActionIcon
-        variant="subtle"
-        color="gray"
-        size="md"
-        aria-label={ariaLabel}
-        onClick={handleClick}
-      >
-        <Icon size={16} />
-      </ActionIcon>
-    );
-  }
-
   return (
-    <Button
+    <Select
       size="sm"
-      variant="subtle"
+      w={150}
+      data={OPTIONS}
+      value={value}
+      onChange={(next) => {
+        if (isSortDirection(next)) onChange(next);
+      }}
+      allowDeselect={false}
+      withCheckIcon={false}
+      rightSection={<Icon size={16} />}
       aria-label={ariaLabel}
-      onClick={handleClick}
-    >
-      <Icon size={20} />
-    </Button>
+    />
   );
 }
diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
index de0933c1e..a96077240 100644
--- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
+++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.test.tsx
@@ -260,8 +260,9 @@ describe("HistoryListPanel", () => {
       />,
     );
     await user.click(
-      screen.getByRole("button", { name: "History sort direction" }),
+      screen.getByRole("textbox", { name: "History sort direction" }),
     );
+    await user.click(await screen.findByText("Oldest First"));
     expect(onSortChange).toHaveBeenCalledWith("oldest-first");
   });
 
diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
index 864a85d64..c24b91dec 100644
--- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
+++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.test.tsx
@@ -172,15 +172,16 @@ describe("LogStreamPanel", () => {
     );
   });
 
-  it("invokes onSortChange with the flipped direction when the toggle is clicked", async () => {
+  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("button", { name: "Logs sort direction" }),
+      screen.getByRole("textbox", { name: "Logs sort direction" }),
     );
+    await user.click(await screen.findByText("Oldest First"));
     expect(onSortChange).toHaveBeenCalledWith("oldest-first");
   });
 });
diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
index 452ace255..f97c1d594 100644
--- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
+++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.test.tsx
@@ -207,8 +207,9 @@ describe("NetworkStreamPanel", () => {
       <NetworkStreamPanel {...baseProps} onSortChange={onSortChange} />,
     );
     await user.click(
-      screen.getByRole("button", { name: "Network sort direction" }),
+      screen.getByRole("textbox", { name: "Network sort direction" }),
     );
+    await user.click(await screen.findByText("Oldest First"));
     expect(onSortChange).toHaveBeenCalledWith("oldest-first");
   });
 });
diff --git a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
index c1d713d6e..1dfdda1db 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.test.tsx
@@ -351,10 +351,13 @@ describe("InspectorView", () => {
     await user.click(tabSelect);
     await user.click(await screen.findByText("Logs"));
 
-    // Default is newest-first; clicking the toggle flips to oldest-first.
-    await user.click(
-      await screen.findByRole("button", { name: "Logs sort direction" }),
-    );
+    const sortSelect = await screen.findByRole("textbox", {
+      name: "Logs sort direction",
+    });
+    expect(sortSelect).toHaveValue("Newest First");
+    await user.click(sortSelect);
+    await user.click(await screen.findByText("Oldest First"));
+
     await waitFor(() =>
       expect(window.localStorage.getItem("inspector.sortDirection.logs")).toBe(
         "oldest-first",
@@ -376,16 +379,10 @@ describe("InspectorView", () => {
     const tabSelect2 = await screen.findByDisplayValue("Servers");
     await user.click(tabSelect2);
     await user.click(await screen.findByText("Logs"));
-    // The restored value is oldest-first; one more click flips back to
-    // newest-first — proves the previous oldest-first value was hydrated.
-    await user.click(
-      await screen.findByRole("button", { name: "Logs sort direction" }),
-    );
-    await waitFor(() =>
-      expect(window.localStorage.getItem("inspector.sortDirection.logs")).toBe(
-        "newest-first",
-      ),
-    );
+    const sortSelect2 = await screen.findByRole("textbox", {
+      name: "Logs sort direction",
+    });
+    await waitFor(() => expect(sortSelect2).toHaveValue("Oldest First"));
   });
 
   it("falls back to newest-first when a corrupted sort value is stored", async () => {
@@ -405,17 +402,10 @@ describe("InspectorView", () => {
     const tabSelect = await screen.findByDisplayValue("Servers");
     await user.click(tabSelect);
     await user.click(await screen.findByText("History"));
-    // Garbage gets clamped to newest-first; clicking flips to oldest-first
-    // and writes that out — proves the initial in-memory value was the
-    // default, not "garbage".
-    await user.click(
-      await screen.findByRole("button", { name: "History sort direction" }),
-    );
-    await waitFor(() =>
-      expect(
-        window.localStorage.getItem("inspector.sortDirection.history"),
-      ).toBe("oldest-first"),
-    );
+    const sortSelect = await screen.findByRole("textbox", {
+      name: "History sort direction",
+    });
+    await waitFor(() => expect(sortSelect).toHaveValue("Newest First"));
   });
 
   it("persists History list compact state to localStorage and restores it on remount", async () => {

From 3ab90268beae0dfdad42d09b1e77321f2a9774e4 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 13:46:46 -0400
Subject: [PATCH 10/13] fix(sort-toggle): swap icons so they match label
 direction

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 clients/web/src/components/elements/SortToggle/SortToggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
index ef31b0f16..5723e5e2e 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
@@ -24,7 +24,7 @@ export function SortToggle({
   "aria-label": ariaLabel = "Sort direction",
 }: SortToggleProps) {
   const Icon =
-    value === "newest-first" ? TbSortDescending2 : TbSortAscending2;
+    value === "newest-first" ? TbSortAscending2 : TbSortDescending2;
   return (
     <Select
       size="sm"

From 4381e0d5b3bd23b165a817ecbea451a6bc0ba3bd Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 13:50:15 -0400
Subject: [PATCH 11/13] fix(sort-toggle): use down arrow for newest, up arrow
 for oldest

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 clients/web/src/components/elements/SortToggle/SortToggle.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
index 5723e5e2e..ef31b0f16 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
@@ -24,7 +24,7 @@ export function SortToggle({
   "aria-label": ariaLabel = "Sort direction",
 }: SortToggleProps) {
   const Icon =
-    value === "newest-first" ? TbSortAscending2 : TbSortDescending2;
+    value === "newest-first" ? TbSortDescending2 : TbSortAscending2;
   return (
     <Select
       size="sm"

From 2ef62cbcd3ed43017a7a4a0208f40410204c5aac Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 14:28:58 -0400
Subject: [PATCH 12/13] refactor(inspector-view): extract useSortDirection /
 useListCompact

Collapses seven near-identical useLocalStorage call sites in
InspectorView into two scoped helpers. Each helper carries the shared
namespace, serialize/deserialize adapters, and getInitialValueInEffect:
false; the call sites now read as "this screen has sort persisted to
this scope" rather than re-stating the storage shape every time.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../views/InspectorView/InspectorView.tsx     | 111 ++++++++----------
 1 file changed, 49 insertions(+), 62 deletions(-)

diff --git a/clients/web/src/components/views/InspectorView/InspectorView.tsx b/clients/web/src/components/views/InspectorView/InspectorView.tsx
index 2c513d185..71c15245d 100644
--- a/clients/web/src/components/views/InspectorView/InspectorView.tsx
+++ b/clients/web/src/components/views/InspectorView/InspectorView.tsx
@@ -77,6 +77,34 @@ function serializeListCompact(value: boolean): string {
   return value ? "true" : "false";
 }
 
+// One useLocalStorage call per scope, all with the same persistence shape.
+// `getInitialValueInEffect: false` reads synchronously on first render —
+// SPA only, no SSR — so the persisted value lands without a one-frame
+// flicker through the default. The `inspector.<kind>.<scope>` namespace
+// keeps related preferences grouped and easy to clear in bulk.
+function useSortDirection(scope: "logs" | "history" | "network") {
+  return useLocalStorage<SortDirection>({
+    key: `inspector.sortDirection.${scope}`,
+    defaultValue: SORT_DEFAULT,
+    deserialize: deserializeSortDirection,
+    serialize: serializeSortDirection,
+    getInitialValueInEffect: false,
+  });
+}
+
+function useListCompact(
+  scope: "history" | "network" | "servers" | "resources",
+  defaultValue: boolean,
+) {
+  return useLocalStorage<boolean>({
+    key: `inspector.listCompact.${scope}`,
+    defaultValue,
+    deserialize: deserializeListCompact,
+    serialize: serializeListCompact,
+    getInitialValueInEffect: false,
+  });
+}
+
 const SERVERS_TAB = "Servers";
 const NETWORK_TAB = "Network";
 
@@ -319,68 +347,27 @@ export function InspectorView({
   const [selectedTab, setSelectedTab] = useState<string>(SERVERS_TAB);
   const appRendererRef = useRef<AppRendererHandle>(null);
 
-  // Per-screen sort direction, persisted to localStorage so the choice
-  // survives reloads and syncs across browser tabs. `inspector.<scope>.<key>`
-  // namespace; new preferences (theme defaults, compact-mode, etc.) should
-  // follow the same shape. `getInitialValueInEffect: false` reads synchronously
-  // on first render — SPA only, no SSR, so this avoids a one-frame flicker
-  // where the persisted "oldest-first" briefly renders as "newest-first".
-  const [logsSort, setLogsSort] = useLocalStorage<SortDirection>({
-    key: "inspector.sortDirection.logs",
-    defaultValue: SORT_DEFAULT,
-    deserialize: deserializeSortDirection,
-    serialize: serializeSortDirection,
-    getInitialValueInEffect: false,
-  });
-  const [historySort, setHistorySort] = useLocalStorage<SortDirection>({
-    key: "inspector.sortDirection.history",
-    defaultValue: SORT_DEFAULT,
-    deserialize: deserializeSortDirection,
-    serialize: serializeSortDirection,
-    getInitialValueInEffect: false,
-  });
-  const [networkSort, setNetworkSort] = useLocalStorage<SortDirection>({
-    key: "inspector.sortDirection.network",
-    defaultValue: SORT_DEFAULT,
-    deserialize: deserializeSortDirection,
-    serialize: serializeSortDirection,
-    getInitialValueInEffect: false,
-  });
-
-  // Per-screen list-row compact (collapsed) preference. Same persistence
-  // shape as the sort hooks — synchronous read on first render to avoid a
-  // one-frame flip from default → stored value.
-  const [historyCompact, setHistoryCompact] = useLocalStorage<boolean>({
-    key: "inspector.listCompact.history",
-    defaultValue: LIST_COMPACT_DEFAULT,
-    deserialize: deserializeListCompact,
-    serialize: serializeListCompact,
-    getInitialValueInEffect: false,
-  });
-  const [networkCompact, setNetworkCompact] = useLocalStorage<boolean>({
-    key: "inspector.listCompact.network",
-    defaultValue: LIST_COMPACT_DEFAULT,
-    deserialize: deserializeListCompact,
-    serialize: serializeListCompact,
-    getInitialValueInEffect: false,
-  });
-  const [serversCompact, setServersCompact] = useLocalStorage<boolean>({
-    key: "inspector.listCompact.servers",
-    defaultValue: false,
-    deserialize: deserializeListCompact,
-    serialize: serializeListCompact,
-    getInitialValueInEffect: false,
-  });
-  // Resources defaults to expanded so new users see the sidebar's content
-  // sections opened (mirrors the pre-persistence behavior of showing
-  // sections that had entries).
-  const [resourcesCompact, setResourcesCompact] = useLocalStorage<boolean>({
-    key: "inspector.listCompact.resources",
-    defaultValue: false,
-    deserialize: deserializeListCompact,
-    serialize: serializeListCompact,
-    getInitialValueInEffect: false,
-  });
+  const [logsSort, setLogsSort] = useSortDirection("logs");
+  const [historySort, setHistorySort] = useSortDirection("history");
+  const [networkSort, setNetworkSort] = useSortDirection("network");
+
+  // Servers and Resources default to expanded (collapsed=false) so new
+  // users see content on first paint; History/Network default to
+  // collapsed (the lists are long enough that compact is the better
+  // first-paint state).
+  const [historyCompact, setHistoryCompact] = useListCompact(
+    "history",
+    LIST_COMPACT_DEFAULT,
+  );
+  const [networkCompact, setNetworkCompact] = useListCompact(
+    "network",
+    LIST_COMPACT_DEFAULT,
+  );
+  const [serversCompact, setServersCompact] = useListCompact("servers", false);
+  const [resourcesCompact, setResourcesCompact] = useListCompact(
+    "resources",
+    false,
+  );
 
   // Only show the non-Servers tabs when actually connected. Network is
   // additionally hidden for stdio servers — there is no HTTP traffic to

From e2c20eb831becf35f5056855a34a79f348c5d725 Mon Sep 17 00:00:00 2001
From: cliffhall <cliff@futurescale.com>
Date: Fri, 29 May 2026 14:38:30 -0400
Subject: [PATCH 13/13] fix(sort-toggle): apply prettier formatting

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 clients/web/src/components/elements/SortToggle/SortToggle.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/clients/web/src/components/elements/SortToggle/SortToggle.tsx b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
index ef31b0f16..ea87b4974 100644
--- a/clients/web/src/components/elements/SortToggle/SortToggle.tsx
+++ b/clients/web/src/components/elements/SortToggle/SortToggle.tsx
@@ -23,8 +23,7 @@ export function SortToggle({
   onChange,
   "aria-label": ariaLabel = "Sort direction",
 }: SortToggleProps) {
-  const Icon =
-    value === "newest-first" ? TbSortDescending2 : TbSortAscending2;
+  const Icon = value === "newest-first" ? TbSortDescending2 : TbSortAscending2;
   return (
     <Select
       size="sm"