feat(web): reorderable ServerCards — drag-and-drop + keyboard (#1369) (#1447)

* feat(web): reorderable ServerCards — drag-and-drop + keyboard (#1369)

Let users control the order of servers on the Servers screen instead of
hand-editing mcp.json. Each ServerCard gets a grip handle (in the header,
left of the name) that drives an @dnd-kit sortable; pointer and keyboard
sensors both work, with live-region announcements for screen readers.

- Backend: PUT /api/servers/order rewrites mcp.json in the supplied order
  inside the write lock, reusing the atomic-write + watcher-notify path.
  Registered before /:id so "order" isn't captured as a server id. Rejects
  with 409 when the id set no longer matches disk and 400 on duplicate /
  malformed bodies, so a reorder racing an external edit can't drop or
  duplicate an entry.
- Hook: useServers.reorderServers(orderedIds) — optimistic local reorder,
  PUT, refresh-to-disk-truth on failure.
- UI: SortableServerCard wrapper owns the dnd-kit concerns; ServerListScreen
  wraps the grid in DndContext + SortableContext (rect strategy) with
  pointer + keyboard sensors and announcements. Reorder math and a11y copy
  extracted to reorderIds.ts / serverReorder.ts for direct unit testing.
  Renders plain cards (no grip) when no onReorder is wired.
- Wired onServerReorder through InspectorView -> App.tsx.

Tests: pure-helper units, hook (persist / optimistic / 409 revert), 9
backend integration tests (incl. id-set-mismatch rejection and the
route-registration guard), ServerCard/ServerListScreen units, and a
real-browser Storybook keyboard-reorder play (the dnd-kit keyboard sensor
needs layout rects that happy-dom doesn't provide).

Adds @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities.

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

* fix(web): notify on reorder failure; skip reorder glue when not reorderable

Address PR #1447 review:
- App.tsx: catch reorderServers rejection (409 from a racing external edit,
  or a network error) and show a red toast, matching the error-handling
  pattern used by every other mutation — previously the rejection was
  discarded with `void` and the drag silently bounced back.
- ServerListScreen: only build handleDragEnd / announcements when
  `reorderable`, so the four-closure announcements object isn't allocated
  every render when no onReorder is wired.

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

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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

@@ -215,4 +215,36 @@ describe("ServerCard", () => {
     renderWithMantine(<ServerCard {...baseProps} connection={errored} />);
     expect(screen.queryByText("Connection refused")).not.toBeInTheDocument();
   });
+
+  it("renders the dragHandle slot when provided", () => {
+    renderWithMantine(
+      <ServerCard
+        {...baseProps}
+        dragHandle={<button type="button">grip</button>}
+      />,
+    );
+    expect(screen.getByRole("button", { name: "grip" })).toBeInTheDocument();
+  });
+
+  it("renders no drag handle by default", () => {
+    renderWithMantine(<ServerCard {...baseProps} />);
+    expect(
+      screen.queryByRole("button", { name: "grip" }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders the dragHandle before the server name in the header", () => {
+    renderWithMantine(
+      <ServerCard
+        {...baseProps}
+        dragHandle={<button type="button">grip</button>}
+      />,
+    );
+    const grip = screen.getByRole("button", { name: "grip" });
+    const name = screen.getByText("My MCP Server");
+    // DOM order: the grip precedes the name (left of it in the header row).
+    expect(grip.compareDocumentPosition(name)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING,
+    );
+  });
 });

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

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { Badge, Button, Card, Group, Stack, Text } from "@mantine/core";
 import type {
   MCPServerConfig,
@@ -18,6 +19,14 @@ export interface ServerCardProps extends ServerEntry {
   onClone: (id: string) => void;
   onRemove: (id: string) => void;
   compact?: boolean;
+  /**
+   * Optional drag-handle affordance rendered at the start of the card header,
+   * before the server name. Supplied by the sortable wrapper
+   * (`SortableServerCard`); omitted when the card is rendered outside a reorder
+   * context, so the card stays a dumb display component with no knowledge of
+   * drag-and-drop.
+   */
+  dragHandle?: ReactNode;
 }
 
 const HeaderLeft = Group.withProps({
@@ -103,6 +112,7 @@ export function ServerCard({
   onClone,
   onRemove,
   compact = false,
+  dragHandle,
 }: ServerCardProps) {
   const isDimmed = activeServer !== undefined && activeServer !== id;
   const transport = getTransport(config);
@@ -121,6 +131,7 @@ export function ServerCard({
       <Stack gap="sm">
         <Group justify="space-between" wrap="nowrap">
           <HeaderLeft>
+            {dragHandle}
             <ServerName>{name}</ServerName>
           </HeaderLeft>
           <HeaderRight>