refactor(ui): modernize market opportunity cards

web/src/App.css

@@ -293,53 +293,6 @@ body {
   border-radius: 10px;
 }
 
-.opportunity-card-sidebar {
-  background: var(--bg-card);
-  padding: 20px;
-  border-radius: 12px;
-  border: 1px solid var(--border);
-}
-
-.opportunity-card-sidebar h3 {
-  margin: 0 0 16px 0;
-  font-size: 0.95rem;
-  text-transform: uppercase;
-  color: var(--text-dim);
-  letter-spacing: 1px;
-}
-
-.opp-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.opp-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px;
-  background: color-mix(in oklab, var(--text-main) 2%, transparent);
-  border-radius: 6px;
-  font-size: 0.85rem;
-}
-
-.opp-symbol {
-  font-weight: 700;
-}
-
-.opp-value.ai {
-  color: var(--accent);
-}
-
-.opp-empty {
-  text-align: center;
-  color: var(--text-dim);
-  font-style: italic;
-  font-size: 0.8rem;
-  padding: 10px;
-}
-
 .readiness-card {
   background: var(--bg-card);
   border-radius: 12px;

web/src/components/ComponentsSmoke.test.ts

@@ -145,11 +145,11 @@ describe('component smoke coverage', () => {
 
     it('renders market opportunity and ticker components', () => {
         const volatileHtml = renderToStaticMarkup(React.createElement(TopVolatile, { botState }));
-        expect(volatileHtml).toContain('Top Volatile');
+        expect(volatileHtml).toContain('Top movers');
         expect(volatileHtml).toContain('BTC/USDT');
 
         const aiHtml = renderToStaticMarkup(React.createElement(AISetups, { botState }));
-        expect(aiHtml).toContain('Best AI Setups');
+        expect(aiHtml).toContain('AI setups');
         expect(aiHtml).toContain('82% Conf');
 
         const tickerHtml = renderToStaticMarkup(React.createElement(MarketTicker, { botState }));

web/src/components/MarketOpportunities.dom.test.tsx

@@ -40,10 +40,10 @@ describe('MarketOpportunities Components', () => {
             expect(screen.getByText('-2.10%')).toHaveClass('down');
         });
 
-        it('shows scanning when no symbols', () => {
+        it('shows scanning when no symbols', () => {
-            render(<TopVolatile botState={{ symbols: {} } as any} />);
+            render(<TopVolatile botState={{ symbols: {} } as any} />);
-            expect(screen.getByText('Scanning...')).toBeInTheDocument();
+            expect(screen.getByText('Waiting for live market ticks...')).toBeInTheDocument();
-        });
+        });
     });
 
     describe('AISetups', () => {
@@ -62,9 +62,9 @@ describe('MarketOpportunities Components', () => {
                 symbols: {
                     'AAPL': { rules: {} }
                 }
-            } as any;
+            } as any;
-            render(<AISetups botState={state} />);
+            render(<AISetups botState={state} />);
-            expect(screen.getByText('No AI data yet...')).toBeInTheDocument();
+            expect(screen.getByText('No AI confidence signals yet.')).toBeInTheDocument();
-        });
+        });
     });
 });

web/src/components/MarketOpportunities.tsx

@@ -1,56 +1,71 @@
-import type { BotState } from '../hooks/useWebSocket';
+import type { BotState } from '../hooks/useWebSocket';
+import { Activity, BrainCircuit } from 'lucide-react';
 
 interface MarketOpportunitiesProps {
     botState: BotState;
 }
 
-export const TopVolatile = ({ botState }: MarketOpportunitiesProps) => {
+export const TopVolatile = ({ botState }: MarketOpportunitiesProps) => {
-    const symbols = Object.keys(botState.symbols);
+    const symbols = Object.keys(botState.symbols);
-
+    const topSymbols = symbols
-    return (
+        .sort((a, b) => Math.abs(botState.symbols[b].change24h || 0) - Math.abs(botState.symbols[a].change24h || 0))
-        <div className="opportunity-card-sidebar volatile-corner">
+        .slice(0, 5);
-            <h3>🔥 Top Volatile (24h)</h3>
+
-            <div className="opp-list">
+    return (
-                {symbols
+        <section className="opportunity-card-sidebar volatile-corner" aria-labelledby="top-volatile-title">
-                    .sort((a, b) => Math.abs(botState.symbols[b].change24h || 0) - Math.abs(botState.symbols[a].change24h || 0))
+            <div className="opportunity-card-header">
-                    .slice(0, 5) // Keep it concise for corner
+                <span className="opportunity-card-icon"><Activity size={16} /></span>
-                    .map(symbol => (
+                <div>
-                        <div key={symbol} className="opp-item">
+                    <h3 id="top-volatile-title">Top movers</h3>
-                            <span className="opp-symbol">{symbol}</span>
+                    <p>24h change by absolute move.</p>
-                            <span className={`opp-value ${botState.symbols[symbol].change24h >= 0 ? 'up' : 'down'}`}>
+                </div>
+            </div>
+            <div className="opp-list">
+                {topSymbols
+                    .map(symbol => (
+                        <div key={symbol} className="opp-item">
+                            <span className="opp-symbol">{symbol}</span>
+                            <span className={`opp-value ${botState.symbols[symbol].change24h >= 0 ? 'up' : 'down'}`}>
                                 {botState.symbols[symbol].change24h >= 0 ? '+' : ''}{botState.symbols[symbol].change24h?.toFixed(2)}%
                             </span>
                         </div>
                     ))}
-                {symbols.length === 0 && <div className="opp-empty">Scanning...</div>}
+                {symbols.length === 0 && <div className="opp-empty">Waiting for live market ticks...</div>}
-            </div>
+            </div>
-        </div>
+        </section>
-    );
+    );
-};
+};
-
+
-export const AISetups = ({ botState }: MarketOpportunitiesProps) => {
+export const AISetups = ({ botState }: MarketOpportunitiesProps) => {
-    const symbols = Object.keys(botState.symbols);
+    const symbols = Object.keys(botState.symbols);
-
+    const aiSymbols = symbols
-    return (
+        .filter(s => botState.symbols[s].rules['AIAnalysisRule']?.metadata?.confidence !== undefined)
-        <div className="opportunity-card-sidebar">
+        .sort((a, b) => (botState.symbols[b].rules['AIAnalysisRule']?.metadata?.confidence || 0) - (botState.symbols[a].rules['AIAnalysisRule']?.metadata?.confidence || 0))
-            <h3>🧠 Best AI Setups</h3>
+        .slice(0, 5);
-            <div className="opp-list">
+
-                {symbols
+    return (
-                    .filter(s => botState.symbols[s].rules['AIAnalysisRule']?.metadata?.confidence !== undefined)
+        <section className="opportunity-card-sidebar" aria-labelledby="ai-setups-title">
-                    .sort((a, b) => (botState.symbols[b].rules['AIAnalysisRule']?.metadata?.confidence || 0) - (botState.symbols[a].rules['AIAnalysisRule']?.metadata?.confidence || 0))
+            <div className="opportunity-card-header">
-                    .slice(0, 5)
+                <span className="opportunity-card-icon"><BrainCircuit size={16} /></span>
-                    .map(symbol => (
+                <div>
-                        <div key={symbol} className="opp-item">
+                    <h3 id="ai-setups-title">AI setups</h3>
-                            <span className="opp-symbol">{symbol}</span>
+                    <p>Highest-confidence symbols from strategy rules.</p>
-                            <span className="opp-value ai">
+                </div>
+            </div>
+            <div className="opp-list">
+                {aiSymbols
+                    .map(symbol => (
+                        <div key={symbol} className="opp-item">
+                            <span className="opp-symbol">{symbol}</span>
+                            <span className="opp-value ai">
                                 {botState.symbols[symbol].rules['AIAnalysisRule']?.metadata?.confidence}% Conf
                             </span>
                         </div>
                     ))}
-                {symbols.filter(s => botState.symbols[s].rules['AIAnalysisRule']?.metadata?.confidence !== undefined).length === 0 && (
+                {aiSymbols.length === 0 && (
-                    <div className="opp-empty">No AI data yet...</div>
+                    <div className="opp-empty">No AI confidence signals yet.</div>
-                )}
+                )}
-            </div>
+            </div>
-        </div>
+        </section>
-    );
+    );
-};
+};

web/src/index.css

@@ -1767,6 +1767,119 @@ body {
   min-width: 0;
 }
 
+.opportunity-card-sidebar {
+  display: grid;
+  gap: 18px;
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  background: var(--card);
+  padding: 20px;
+  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
+}
+
+.opportunity-card-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+}
+
+.opportunity-card-icon {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  flex: 0 0 auto;
+  place-items: center;
+  border: 1px solid color-mix(in oklab, var(--accent) 24%, var(--border));
+  border-radius: 12px;
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.opportunity-card-sidebar h3 {
+  margin: 0;
+  color: var(--foreground);
+  font-size: 16px;
+  font-weight: 820;
+  letter-spacing: 0;
+}
+
+.opportunity-card-sidebar p {
+  margin: 4px 0 0;
+  color: var(--muted-foreground);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.opp-list {
+  display: grid;
+  gap: 8px;
+}
+
+.opp-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  min-height: 42px;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: color-mix(in oklab, var(--muted) 48%, var(--card));
+  padding: 8px 12px;
+}
+
+.opp-symbol {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--foreground);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 13px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.opp-value {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  border-radius: 999px;
+  padding: 0 9px;
+  font-size: 11px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.opp-value.up {
+  background: var(--bl-success-muted);
+  color: var(--bl-success);
+}
+
+.opp-value.down {
+  background: var(--bl-danger-muted);
+  color: var(--bl-danger);
+}
+
+.opp-value.ai {
+  background: var(--bl-info-muted);
+  color: var(--bl-info);
+}
+
+.opp-empty {
+  display: grid;
+  min-height: 120px;
+  place-items: center;
+  border: 1px dashed var(--border);
+  border-radius: 14px;
+  background: color-mix(in oklab, var(--muted) 42%, transparent);
+  color: var(--muted-foreground);
+  padding: 18px;
+  text-align: center;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
 .screener-filter-card {
   overflow: hidden;
 }