fix(v2): aligned stat grid + correct icons + action buttons

- Stats now use a 3-column CSS Grid so values align across rows
- Fixed icons: ☠️ for deaths (was 💀), prismatic-taper-icon.png
  for tapers (was wrong emoji 🔮), 🕐 for time (was 🕑)
- Added action buttons row (Chat, Stats, Inv, Char, Radar) matching
  v1's button bar — accent-colored for primary actions
- Buttons are present but not wired to windows yet (Phase 3)

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

frontend/src/components/sidebar/PlayerRow.tsx

@@ -12,12 +12,17 @@ interface Props {
 export const PlayerRow: React.FC<Props> = React.memo(({ player: p, vitals: v, color, onSelect }) => {
   const vtState = (p.vt_state || 'idle').toLowerCase();
   const isActive = vtState === 'combat' || vtState === 'hunt';
+  const kpr = (p.total_rares ?? 0) > 0
+    ? Math.round((p.total_kills ?? 0) / (p.total_rares ?? 1)).toLocaleString()
+    : null;
 
   return (
-    <li className="ml-player-row" style={{ borderLeftColor: color }} onClick={onSelect}>
+    <li className="ml-player-row" style={{ borderLeftColor: color }}>
       {/* Row 1: Name + coords */}
-      <div className="ml-pr-name">{p.character_name}</div>
-      <div className="ml-pr-coords">{formatCoord(p.ns, p.ew)}</div>
+      <div className="ml-pr-header" onClick={onSelect}>
+        <span className="ml-pr-name">{p.character_name}</span>
+        <span className="ml-pr-coords">{formatCoord(p.ns, p.ew)}</span>
+      </div>
 
       {/* Row 2: Vital bars */}
       <div className="ml-pr-vitals">
@@ -32,27 +37,28 @@ export const PlayerRow: React.FC<Props> = React.memo(({ player: p, vitals: v, co
         </div>
       </div>
 
-      {/* Row 3: Kills + KPH */}
-      <div className="ml-pr-stats">
-        <span className="ml-stat" title="Session kills"><span className="ml-icon">⚔️</span>{p.kills?.toLocaleString() ?? 0}</span>
-        <span className="ml-stat" title="Total kills"><span className="ml-icon">🏆</span>{(p.total_kills ?? 0).toLocaleString()}</span>
-        <span className="ml-stat" title="Kills per hour">{p.kills_per_hour ?? '0'} <span className="ml-suffix">KPH</span></span>
-      </div>
+      {/* Row 3-5: Stats grid — 3 columns × 3 rows for alignment */}
+      <div className="ml-pr-grid">
+        <span className="ml-gs" title="Session kills">⚔️ {p.kills?.toLocaleString() ?? 0}</span>
+        <span className="ml-gs" title="Total kills">🏆 {(p.total_kills ?? 0).toLocaleString()}</span>
+        <span className="ml-gs" title="Kills per hour">{p.kills_per_hour ?? '0'} <span className="ml-suffix">KPH</span></span>
 
-      {/* Row 4: Rares + KPR + meta */}
-      <div className="ml-pr-stats">
-        <span className="ml-stat" title="Rares (session / total)"><span className="ml-icon">💎</span>{p.session_rares ?? 0} / {p.total_rares ?? 0}</span>
-        {(p.total_rares ?? 0) > 0 && (
-          <span className="ml-stat" title="Kills per rare"><span className="ml-icon">📊</span>{Math.round((p.total_kills ?? 0) / (p.total_rares ?? 1)).toLocaleString()} <span className="ml-suffix">KPR</span></span>
-        )}
+        <span className="ml-gs" title="Rares (session / total)">💎 {p.session_rares ?? 0} / {p.total_rares ?? 0}</span>
+        <span className="ml-gs" title="Kills per rare">{kpr ? <>📊 {kpr} <span className="ml-suffix">KPR</span></> : ''}</span>
         <span className={`ml-meta-pill ${isActive ? 'active' : ''}`}>{p.vt_state || 'idle'}</span>
+
+        <span className="ml-gs" title="Online time">🕐 {p.onlinetime?.replace(/^00\./, '') ?? '--'}</span>
+        <span className="ml-gs" title="Deaths">☠️ {p.deaths ?? '0'}</span>
+        <span className="ml-gs" title="Prismatic tapers"><img src="/prismatic-taper-icon.png" className="ml-taper-icon" alt="" />{p.prismatic_taper_count ?? '0'}</span>
       </div>
 
-      {/* Row 5: Time + deaths + tapers */}
-      <div className="ml-pr-stats">
-        <span className="ml-stat" title="Online time"><span className="ml-icon">🕑</span>{p.onlinetime?.replace(/^00\./, '') ?? '--'}</span>
-        <span className="ml-stat" title="Deaths"><span className="ml-icon">💀</span>{p.deaths ?? '0'}</span>
-        <span className="ml-stat" title="Prismatic tapers"><span className="ml-icon">🔮</span>{p.prismatic_taper_count ?? '0'}</span>
+      {/* Row 6: Action buttons */}
+      <div className="ml-pr-buttons">
+        <button className="ml-btn accent" title="Chat">Chat</button>
+        <button className="ml-btn accent" title="Stats">Stats</button>
+        <button className="ml-btn accent" title="Inventory">Inv</button>
+        <button className="ml-btn" title="Character">Char</button>
+        <button className="ml-btn" title="Radar">Radar</button>
       </div>
     </li>
   );

frontend/src/styles/map-layout.css

@@ -210,42 +210,77 @@
   transition: width 0.3s ease-out;
 }
 
-/* ── Stats row ────────────────────────────────────────── */
-.ml-pr-stats {
+/* ── Stats grid (3 columns aligned) ───────────────────── */
+.ml-pr-header {
   display: flex;
-  gap: 8px;
-  font-size: 0.68rem;
-  color: #aaa;
-  margin-bottom: 2px;
+  justify-content: space-between;
+  align-items: baseline;
+  cursor: pointer;
 }
 
-.ml-stat {
+.ml-pr-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1px 8px;
+  font-size: 0.68rem;
+  color: #aaa;
+  margin-bottom: 4px;
+}
+
+.ml-gs {
   font-variant-numeric: tabular-nums;
   display: inline-flex;
   align-items: center;
   gap: 2px;
-}
-
-.ml-icon {
-  font-size: 0.7rem;
-  line-height: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .ml-suffix {
   font-size: 0.58rem;
-  color: #888;
+  color: #666;
   text-transform: uppercase;
   letter-spacing: 0.3px;
 }
 
+.ml-taper-icon {
+  width: 14px;
+  height: 14px;
+  margin-right: 2px;
+  vertical-align: text-bottom;
+}
+
 .ml-meta-pill {
   font-size: 0.6rem;
   padding: 0 6px;
   border-radius: 3px;
   background: #333;
   color: #888;
-  margin-left: auto;
+  text-align: center;
+  justify-self: end;
 }
+
+/* ── Action buttons ───────────────────────────────────── */
+.ml-pr-buttons {
+  display: flex;
+  gap: 3px;
+  margin-top: 4px;
+}
+
+.ml-btn {
+  padding: 1px 6px;
+  font-size: 0.63rem;
+  border: 1px solid #555;
+  border-radius: 3px;
+  background: #333;
+  color: #aaa;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.ml-btn:hover { background: #444; color: #eee; }
+.ml-btn.accent { background: #88f; color: #111; border-color: #88f; }
+.ml-btn.accent:hover { background: #99f; }
 .ml-meta-pill.active { background: rgba(68, 204, 68, 0.15); color: #4c4; }
 
 /* ── Map container ────────────────────────────────────── */

static/v2/index.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Mosswart Overlord v2</title>
     <link rel="icon" type="image/png" href="/icons/7735.png" />
-    <script type="module" crossorigin src="/v2/assets/index-Csnbhaia.js"></script>
-    <link rel="stylesheet" crossorigin href="/v2/assets/index-BUBcTCvh.css">
+    <script type="module" crossorigin src="/v2/assets/index-z3J6n_xF.js"></script>
+    <link rel="stylesheet" crossorigin href="/v2/assets/index-tklaBqfd.css">
   </head>
   <body>
     <div id="root"></div>