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/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 {