feat(v2): Phase 2 — analytics tabs (Combat, Rares, Map, Inventory)

Below the character cards grid, adds four tabbed analytics sections:

Combat Tab (Recharts):
- Kills per hour horizontal bar chart (all characters, sorted)
- Total damage session bar chart
- Damage by element pie chart (aggregated across all characters)

Rares Tab:
- Summary cards: total rares, total kills, drop rate (1 in N)
- Recent rare drops timeline (from WebSocket events)
- Rares per character lifetime bar chart

Map Tab:
- Dereth map (dereth_highres.png) with SVG overlay
- Character position dots (green=hunting, yellow=other)
- Hover to see character name + coordinates
- Responsive, maintains aspect ratio

Inventory Tab:
- Cross-character item search with debounced input
- Results table: character, item, type, material, set, workmanship
- Powered by existing /search/items API

All tabs lazy-rendered (only active tab mounts). Horizontal scroll
tab bar on mobile. Dark theme consistent with cards.

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

frontend/src/App.tsx

@@ -1,11 +1,39 @@
 import { Layout } from './components/Layout';
 import { GlobalStats } from './components/GlobalStats';
 import { CharacterGrid } from './components/CharacterGrid';
+import { TabContainer } from './components/tabs/TabContainer';
+import { CombatTab } from './components/tabs/CombatTab';
+import { RaresTab } from './components/tabs/RaresTab';
+import { MapTab } from './components/tabs/MapTab';
+import { InventoryTab } from './components/tabs/InventoryTab';
 import { useLiveData } from './hooks/useLiveData';
 import './styles/global.css';
 
 export default function App() {
-  const { characters, serverHealth, totalRares, totalKills } = useLiveData();
+  const { characters, serverHealth, totalRares, totalKills, recentRares } = useLiveData();
+
+  const tabs = [
+    {
+      id: 'combat',
+      label: 'Combat',
+      content: <CombatTab characters={characters} />,
+    },
+    {
+      id: 'rares',
+      label: 'Rares',
+      content: <RaresTab characters={characters} totalRares={totalRares} totalKills={totalKills} recentRares={recentRares} />,
+    },
+    {
+      id: 'map',
+      label: 'Map',
+      content: <MapTab characters={characters} />,
+    },
+    {
+      id: 'inventory',
+      label: 'Inventory',
+      content: <InventoryTab />,
+    },
+  ];
 
   return (
     <Layout>
@@ -16,6 +44,7 @@ export default function App() {
         serverHealth={serverHealth}
       />
       <CharacterGrid characters={characters} />
+      <TabContainer tabs={tabs} />
     </Layout>
   );
 }