Add better preview pane and tweak some themes for contrast

frontend/src/test/chatHeaderKeyVisibility.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, within } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 
 import { ChatHeader } from '../components/ChatHeader';
@@ -94,6 +94,28 @@ describe('ChatHeader key visibility', () => {
     expect(screen.queryByText('Show Key')).not.toBeInTheDocument();
   });
 
+  it('renders the clickable conversation title as a real button inside the heading', () => {
+    const pubKey = '12'.repeat(32);
+    const conversation: Conversation = { type: 'contact', id: pubKey, name: 'Alice' };
+    const onOpenContactInfo = vi.fn();
+
+    render(
+      <ChatHeader
+        {...baseProps}
+        conversation={conversation}
+        channels={[]}
+        onOpenContactInfo={onOpenContactInfo}
+      />
+    );
+
+    const heading = screen.getByRole('heading', { name: /alice/i });
+    const titleButton = within(heading).getByRole('button', { name: 'View info for Alice' });
+
+    expect(heading).toContainElement(titleButton);
+    fireEvent.click(titleButton);
+    expect(onOpenContactInfo).toHaveBeenCalledWith(pubKey);
+  });
+
   it('copies key to clipboard when revealed key is clicked', async () => {
     const key = 'FF'.repeat(16);
     const channel = makeChannel(key, 'Priv', false);

frontend/src/test/messageList.test.tsx

@@ -61,4 +61,23 @@ describe('MessageList channel sender rendering', () => {
     expect(screen.getByText('Alice')).toBeInTheDocument();
     expect(screen.getByText('A')).toBeInTheDocument();
   });
+
+  it('gives clickable sender avatars an accessible label', () => {
+    render(
+      <MessageList
+        messages={[
+          createMessage({
+            text: 'garbled payload with no sender prefix',
+            sender_name: 'Alice',
+            sender_key: 'ab'.repeat(32),
+          }),
+        ]}
+        contacts={[]}
+        loading={false}
+        onOpenContactInfo={() => {}}
+      />
+    );
+
+    expect(screen.getByRole('button', { name: 'View info for Alice' })).toBeInTheDocument();
+  });
 });

frontend/src/test/settingsModal.test.tsx

@@ -296,24 +296,6 @@ describe('SettingsModal', () => {
     expect(screen.queryByLabelText('Local label text')).not.toBeInTheDocument();
   });
 
-  it('shows the theme contrast preview in local settings', () => {
-    renderModal();
-    openLocalSection();
-
-    expect(
-      screen.getByText('Preview alert and message contrast for the selected theme.')
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText('Connected preview: radio link healthy and syncing.')
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText('Warning preview: packet audit suggests missing history.')
-    ).toBeInTheDocument();
-    expect(screen.getByText('Error preview: radio reconnect failed.')).toBeInTheDocument();
-    expect(screen.getByText('Hello, mesh!')).toBeInTheDocument();
-    expect(screen.getByText("Hi there! I'm using RemoteTerm.")).toBeInTheDocument();
-  });
-
   it('lists the new Windows 95 and iPhone themes', () => {
     renderModal();
     openLocalSection();