diff --git a/frontend/src/components/inventory/DetailPanel.tsx b/frontend/src/components/inventory/DetailPanel.tsx
index 13b9bbd7..b628e6a8 100644
--- a/frontend/src/components/inventory/DetailPanel.tsx
+++ b/frontend/src/components/inventory/DetailPanel.tsx
@@ -1,3 +1,35 @@
-// Stub — replaced in Task 6
+import React from 'react';
 import type { InvItem } from './types';
-export function DetailPanel(_: { item: InvItem; onClose: () => void }) { return null; }
+
+function Row({ k, v }: { k: string; v: React.ReactNode }) {
+  return <div className="inv-kv"><span>{k}</span><b>{v ?? '—'}</b></div>;
+}
+
+export function DetailPanel({ item, onClose }: { item: InvItem; onClose: () => void }) {
+  return (
+    <div className="inv-detail">
+      <span className="inv-closex" onClick={onClose}>×</span>
+      <h3>{item.name}</h3>
+      <div className="inv-detail-sub">
+        {item.slot_name ?? item.object_class_name ?? ''} · {item.is_equipped ? '⚔ Equipped' : '📦 Inventory'}
+        {item.is_rare && ' · ★ Rare'}
+      </div>
+      <Row k="Character" v={item.character_name} />
+      <Row k="Value" v={item.value?.toLocaleString()} />
+      <Row k="Burden" v={item.burden} />
+      <Row k="Wield req" v={item.wield_level ? `Level ${item.wield_level}` : '—'} />
+      <Row k="Workmanship" v={item.workmanship ?? '—'} />
+      {item.armor_level != null && item.armor_level > 0 && <Row k="Armor" v={item.armor_level} />}
+      {item.max_damage != null && item.max_damage > 0 && <Row k="Max damage" v={item.max_damage} />}
+      {item.condition_percent != null && <Row k="Condition" v={`${item.condition_percent}%`} />}
+      {item.item_set_name && <Row k="Set" v={item.item_set_name} />}
+      {(item.is_bonded || item.is_attuned) && <Row k="Binding" v={[item.is_bonded && 'Bonded', item.is_attuned && 'Attuned'].filter(Boolean).join(', ')} />}
+      <hr />
+      <div className="inv-sphead">Spells ({item.spell_names?.length ?? 0})</div>
+      {(item.spell_names ?? []).map((s, i) => (
+        <div className={`inv-sp${/legendary/i.test(s) ? ' inv-leg' : ''}`} key={i}>{s}</div>
+      ))}
+      <div className="inv-hint">↑/↓ next item · Esc close</div>
+    </div>
+  );
+}