Show grid cell image in component detail inventory entries

Grid-type inventory entries now display the warped cell image from the
grid as a read-only thumbnail (highlighted with accent border) alongside
any user-uploaded images for that entry.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/app.mjs

@@ -363,6 +363,23 @@ function build_detail_inv_entry(entry) {
 		const goto_btn = qs(el, '.detail-inv-goto-grid');
 		goto_btn.hidden = false;
 		goto_btn.addEventListener('click', () => navigate(`/grids/viewer/${entry.grid_id}`));
+
+		// Show the grid cell image as a read-only thumbnail
+		const grid = all_grids.find(g => g.id === entry.grid_id);
+		const cell_filename = grid?.cells?.[entry.grid_row]?.[entry.grid_col];
+		if (cell_filename) {
+			const thumb = document.createElement('a');
+			thumb.className = 'thumb-link cell-thumb-link';
+			thumb.href = `/img/${cell_filename}`;
+			thumb.target = '_blank';
+			thumb.rel = 'noopener';
+			const img = document.createElement('img');
+			img.className = 'thumb-img';
+			img.src = `/img/${cell_filename}`;
+			img.alt = 'Grid cell';
+			thumb.appendChild(img);
+			qs(el, '.inv-image-grid').before(thumb);
+		}
 	}
 
 	// Inventory entry images

public/style.css

@@ -370,6 +370,21 @@ nav {
 	gap: 0.4rem;
 }
 
+.cell-thumb-link {
+	display: block;
+	border: 2px solid var(--accent, #5b9cf6);
+	border-radius: 3px;
+	overflow: hidden;
+	flex-shrink: 0;
+}
+
+.cell-thumb-link .thumb-img {
+	display: block;
+	width: 64px;
+	height: 64px;
+	object-fit: cover;
+}
+
 /* ===== SECTION TOOLBAR ===== */
 
 .section-toolbar {