fix(D4): highlight selected screener sector

web/src/views/ScreenerView.dom.test.tsx

@@ -0,0 +1,76 @@
+// @vitest-environment jsdom
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { AppContext, type AppContextValue } from '../context/AppContext';
+import { ScreenerView } from './ScreenerView';
+
+vi.mock('../lib/authSession', () => ({
+  getPlatformAccessToken: vi.fn(async () => 'test-token'),
+}));
+
+vi.mock('../lib/runtime', () => ({
+  tradingRuntime: { tradingApiUrl: 'https://trading.test' },
+}));
+
+const appContext: AppContextValue = {
+  botState: {
+    settings: { isAlgoEnabled: true },
+    symbols: {},
+    health: { tradingLoopHealthy: true, reconciliationLoopHealthy: true, capitalInvariantViolations: 0 },
+    alerts: [],
+    positions: [],
+    orders: [],
+    history: [],
+    uptime: 0,
+  } as any,
+  socket: null,
+  connected: true,
+  activeSymbol: '',
+  setActiveSymbol: vi.fn(),
+  isAdmin: false,
+  user: { id: 'u1' },
+  profile: {},
+  showBacktestTab: false,
+  showMarketplaceTab: false,
+  handleSignOut: vi.fn(),
+};
+
+function renderScreener() {
+  return render(
+    <AppContext.Provider value={appContext}>
+      <MemoryRouter>
+        <ScreenerView />
+      </MemoryRouter>
+    </AppContext.Provider>,
+  );
+}
+
+describe('ScreenerView sector filters', () => {
+  beforeEach(() => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      json: async () => ({ results: [] }),
+    } as Response);
+  });
+
+  it('visually highlights sectors selected from the More sectors dropdown', async () => {
+    const user = userEvent.setup();
+    renderScreener();
+
+    const moreSectors = screen.getByLabelText('More sectors');
+    await waitFor(() => expect(globalThis.fetch).toHaveBeenCalledTimes(1));
+
+    await user.selectOptions(moreSectors, 'Energy');
+
+    expect(moreSectors).toHaveValue('Energy');
+    expect(moreSectors).toHaveStyle({
+      background: '#EFF6FF',
+      color: '#2563EB',
+      fontWeight: '700',
+    });
+    await waitFor(() => expect(globalThis.fetch).toHaveBeenCalledTimes(2));
+    expect(String((globalThis.fetch as any).mock.calls[1][0])).toContain('sector=Energy');
+  });
+});

web/src/views/ScreenerView.tsx

@@ -126,6 +126,7 @@ export function ScreenerView() {
       {sortKey === k ? (sortAsc ? '▲' : '▼') : '⇅'}
     </span>
   );
+  const moreSectorSelected = SECTORS.indexOf(sector) >= 6;
 
   const ScreenerSkeletonRows = () => (
     <div role="status" aria-label="Loading screener results">
@@ -238,11 +239,18 @@ export function ScreenerView() {
           ))}
           {/* Sector dropdown for rest */}
           <select
+            aria-label="More sectors"
             value={SECTORS.indexOf(sector) >= 6 ? sector : ''}
             onChange={e => e.target.value && setSector(e.target.value)}
             style={{
-              padding: '5px 8px', border: '1px solid #E5E7EB', borderRadius: 20,
+              padding: '5px 8px',
-              fontSize: 11, background: '#fff', color: '#6B7280', fontFamily: 'inherit',
+              border: `1px solid ${moreSectorSelected ? '#2563EB' : '#E5E7EB'}`,
+              borderRadius: 20,
+              fontSize: 11,
+              background: moreSectorSelected ? '#EFF6FF' : '#fff',
+              color: moreSectorSelected ? '#2563EB' : '#6B7280',
+              fontWeight: moreSectorSelected ? 700 : 500,
+              fontFamily: 'inherit',
               cursor: 'pointer',
             }}
           >