feat(web): red border on a server card whose connection attempt failed (#1621)

Flags the server whose last connection attempt failed with a red card
border, cleared when another server is connected or a new connection is
attempted — a persistent, at-a-glance companion to the failure toast and
the auto-opened monitoring column.

- App tracks `failedServerId`: set in onToggleConnection's non-auth
  handshake catch, cleared at the start of any new connect attempt. It is
  deliberately kept out of resetSessionScopedUiState, since the failure's
  own `disconnect` event would otherwise clear it the same tick (that same
  event clears `activeServer`, which is why the flag is tracked separately).
- New `errored` Card theme variant (red border via a new
  `--inspector-error-border` token), mirroring the `highlighted` green
  border. Precedence: disabled (dimmed) > errored > highlighted.
- Plumbed `erroredServerId` through InspectorView → ServerListScreen →
  ServerCard (`errored` prop).

Full `npm run ci` passes (validate + coverage + smoke + storybook).

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

clients/web/src/components/screens/ServerListScreen/ServerListScreen.test.tsx

@@ -136,6 +136,27 @@ describe("ServerListScreen", () => {
     });
   });
 
+  describe("connection-failed border (#1621)", () => {
+    it("draws the red errored border only on the failed server's card", () => {
+      const { container } = renderWithMantine(
+        <ServerListScreen {...baseProps} erroredServerId="beta" />,
+      );
+      const errored = container.querySelectorAll('[data-variant="errored"]');
+      expect(errored).toHaveLength(1);
+      // The errored card is Beta's — its name is within the flagged card.
+      expect(errored[0]).toHaveTextContent("Beta");
+    });
+
+    it("draws no errored border when erroredServerId is unset", () => {
+      const { container } = renderWithMantine(
+        <ServerListScreen {...baseProps} />,
+      );
+      expect(
+        container.querySelectorAll('[data-variant="errored"]'),
+      ).toHaveLength(0);
+    });
+  });
+
   describe("freshly-added highlight", () => {
     it("draws a green highlight border on every highlighted server", () => {
       const { container } = renderWithMantine(

clients/web/src/components/screens/ServerListScreen/ServerListScreen.tsx

@@ -39,6 +39,11 @@ export interface ServerListScreenProps {
   writable?: boolean;
   /** Id of the server the wiring layer treats as active (drives card dimming). */
   activeServer?: string;
+  /**
+   * Id of the server whose last connection attempt failed (#1621). Its card
+   * draws a red border until another server is connected or attempted.
+   */
+  erroredServerId?: string;
   onAddManually: () => void;
   onImportConfig: () => void;
   onImportServerJson: () => void;
@@ -78,6 +83,7 @@ export function ServerListScreen({
   servers,
   writable = true,
   activeServer,
+  erroredServerId,
   onAddManually,
   onImportConfig,
   onImportServerJson,
@@ -138,6 +144,7 @@ export function ServerListScreen({
     onClone,
     onRemove,
     highlighted: highlightedServerIds?.includes(server.id) ?? false,
+    errored: server.id === erroredServerId,
     scrollOnHighlight: server.id === firstHighlightedId,
     onClearHighlight: onClearHighlight
       ? () => onClearHighlight(server.id)