refactor(web): unify message-direction arrows and rename Pinned section (#1623)

- Direction labels now both point right so the arrow reads clearly at
  badge size: incoming "client ← server" becomes "server → client"
  (from → to), in MessageDirectionBadge and MessageDirectionFilter
  (shared by the Protocol and Network views).
- The Protocol list's pinned section header now reads "Pinned Messages"
  (was "Pinned Requests"), matching the "Messages" panel title.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw

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

@@ -17,7 +17,7 @@ describe("MessageDirectionFilter", () => {
       screen.getByRole("button", { name: "client → server" }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "client ← server" }),
+      screen.getByRole("button", { name: "server → client" }),
     ).toBeInTheDocument();
   });
 
@@ -30,7 +30,7 @@ describe("MessageDirectionFilter", () => {
         onToggleDirection={onToggleDirection}
       />,
     );
-    await user.click(screen.getByRole("button", { name: "client ← server" }));
+    await user.click(screen.getByRole("button", { name: "server → client" }));
     expect(onToggleDirection).toHaveBeenCalledWith("server", false);
   });
 

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

@@ -9,14 +9,14 @@ const SubtleButton = Button.withProps({
 
 // The two message directions, in display order. Label + color mirror the
 // MessageDirectionBadge: outgoing (client → server) is green, incoming
-// (client ← server) is violet.
+// (server → client) is violet.
 const MESSAGE_DIRECTIONS: {
   origin: MessageOrigin;
   label: string;
   color: string;
 }[] = [
   { origin: "client", label: "client → server", color: "green" },
-  { origin: "server", label: "client ← server", color: "violet" },
+  { origin: "server", label: "server → client", color: "violet" },
 ];
 
 export interface MessageDirectionFilterProps {
@@ -27,7 +27,7 @@ export interface MessageDirectionFilterProps {
 
 /**
  * "Filter by Message Direction" section — a Select/Deselect All control plus a
- * FilterToggleButton per direction (client → server / client ← server). Used by
+ * FilterToggleButton per direction (client → server / server → client). Used by
  * the Protocol controls. (Kept as its own component so the section is testable in
  * isolation and reusable if another screen ever needs a direction filter.)
  */

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

@@ -91,7 +91,7 @@ describe("ProtocolControls", () => {
       screen.getByRole("button", { name: "client → server" }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: "client ← server" }),
+      screen.getByRole("button", { name: "server → client" }),
     ).toBeInTheDocument();
   });
 
@@ -102,7 +102,7 @@ describe("ProtocolControls", () => {
       <ProtocolControls {...baseProps} onToggleDirection={onToggleDirection} />,
     );
     // Currently visible → clicking turns it off.
-    await user.click(screen.getByRole("button", { name: "client ← server" }));
+    await user.click(screen.getByRole("button", { name: "server → client" }));
     expect(onToggleDirection).toHaveBeenCalledWith("server", false);
   });
 

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

@@ -158,11 +158,11 @@ describe("ProtocolEntry", () => {
     expect(screen.getByText("client → server")).toBeInTheDocument();
   });
 
-  it("shows client ← server for a server-originated entry", () => {
+  it("shows server → client for a server-originated entry", () => {
     renderWithMantine(
       <ProtocolEntry {...baseProps} entry={notificationEntry} />,
     );
-    expect(screen.getByText("client ← server")).toBeInTheDocument();
+    expect(screen.getByText("server → client")).toBeInTheDocument();
   });
 
   it("renders Pin label when not pinned", () => {

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

@@ -116,7 +116,7 @@ describe("ProtocolListPanel", () => {
         pinnedIds={new Set(["req-1"])}
       />,
     );
-    expect(screen.getByText("Pinned Requests (1)")).toBeInTheDocument();
+    expect(screen.getByText("Pinned Messages (1)")).toBeInTheDocument();
     expect(screen.getByText("History (2)")).toBeInTheDocument();
   });
 
@@ -186,7 +186,7 @@ describe("ProtocolListPanel", () => {
       />,
     );
     const pinned = screen.getByRole("button", {
-      name: "Pinned Requests (1)",
+      name: "Pinned Messages (1)",
     });
     const history = screen.getByRole("button", { name: "History (2)" });
     await user.click(pinned);
@@ -346,7 +346,7 @@ describe("ProtocolListPanel", () => {
         pinnedIds={new Set(["req-1"])}
       />,
     );
-    expect(screen.getByText("Pinned Requests (1)")).toBeInTheDocument();
+    expect(screen.getByText("Pinned Messages (1)")).toBeInTheDocument();
     expect(screen.queryByText(/^History \(/)).not.toBeInTheDocument();
   });
 

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

@@ -98,7 +98,7 @@ const SectionLinkButton = Button.withProps({
 });
 
 function formatPinnedTitle(count: number): string {
-  return `Pinned Requests (${count})`;
+  return `Pinned Messages (${count})`;
 }
 
 function formatHistoryTitle(count: number): string {