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/elements/MessageDirectionBadge/MessageDirectionBadge.stories.tsx

@@ -22,6 +22,6 @@ export const Incoming: Story = {
   args: { direction: "incoming" },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.getByText("client ← server")).toBeInTheDocument();
+    expect(canvas.getByText("server → client")).toBeInTheDocument();
   },
 };

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

@@ -8,8 +8,8 @@ describe("MessageDirectionBadge", () => {
     expect(screen.getByText("client → server")).toBeInTheDocument();
   });
 
-  it("renders client ← server for incoming", () => {
+  it("renders server → client for incoming", () => {
     renderWithMantine(<MessageDirectionBadge direction="incoming" />);
-    expect(screen.getByText("client ← server")).toBeInTheDocument();
+    expect(screen.getByText("server → client")).toBeInTheDocument();
   });
 });

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

@@ -4,19 +4,19 @@ export interface MessageDirectionBadgeProps {
   /**
    * Direction of travel for the entry: "outgoing" = the inspector sent it to
    * the server (client → server); "incoming" = the server sent it to the
-   * inspector (client ← server).
+   * inspector (server → client).
    */
   direction: "outgoing" | "incoming";
 }
 
 const LABEL: Record<MessageDirectionBadgeProps["direction"], string> = {
   outgoing: "client → server",
-  incoming: "client ← server",
+  incoming: "server → client",
 };
 
 /**
  * Dual-state badge showing which way a Protocol/Network entry traveled. Outgoing
- * (client → server) is green; incoming (client ← server) is purple — not yellow,
+ * (client → server) is green; incoming (server → client) is purple — not yellow,
  * which (paired with green) reads as caution/ok status rather than direction.
  * Shared by `ProtocolEntry` and `NetworkEntry`.
  */