Implement the 030-bulk-import-sources feature that adds a one-click bulk import button to load all bestiary sources at once, with real-time progress feedback in the side panel and a toast notification when the panel is closed, plus completion/failure reporting with auto-dismiss on success and persistent display on partial failure, while also hardening the bestiary normalizer to handle variable stat blocks (spell summons with special AC/HP/CR) and skip malformed monster entries gracefully

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

apps/web/src/components/stat-block-panel.tsx

@@ -2,6 +2,8 @@ import type { Creature, CreatureId } from "@initiative/domain";
 import { X } from "lucide-react";
 import { useEffect, useState } from "react";
 import { getSourceDisplayName } from "../adapters/bestiary-index-adapter.js";
+import type { BulkImportState } from "../hooks/use-bulk-import.js";
+import { BulkImportPrompt } from "./bulk-import-prompt.js";
 import { SourceFetchPrompt } from "./source-fetch-prompt.js";
 import { StatBlock } from "./stat-block.js";
 
@@ -16,6 +18,10 @@ interface StatBlockPanelProps {
 	) => Promise<void>;
 	refreshCache: () => Promise<void>;
 	onClose: () => void;
+	bulkImportMode?: boolean;
+	bulkImportState?: BulkImportState;
+	onStartBulkImport?: (baseUrl: string) => void;
+	onBulkImportDone?: () => void;
 }
 
 function extractSourceCode(cId: CreatureId): string {
@@ -32,6 +38,10 @@ export function StatBlockPanel({
 	uploadAndCacheSource,
 	refreshCache,
 	onClose,
+	bulkImportMode,
+	bulkImportState,
+	onStartBulkImport,
+	onBulkImportDone,
 }: StatBlockPanelProps) {
 	const [isDesktop, setIsDesktop] = useState(
 		() => window.matchMedia("(min-width: 1024px)").matches,
@@ -68,9 +78,9 @@ export function StatBlockPanel({
 		});
 	}, [creatureId, creature, isSourceCached]);
 
-	if (!creatureId) return null;
+	if (!creatureId && !bulkImportMode) return null;
 
-	const sourceCode = extractSourceCode(creatureId);
+	const sourceCode = creatureId ? extractSourceCode(creatureId) : "";
 
 	const handleSourceLoaded = async () => {
 		await refreshCache();
@@ -78,6 +88,21 @@ export function StatBlockPanel({
 	};
 
 	const renderContent = () => {
+		if (
+			bulkImportMode &&
+			bulkImportState &&
+			onStartBulkImport &&
+			onBulkImportDone
+		) {
+			return (
+				<BulkImportPrompt
+					importState={bulkImportState}
+					onStartImport={onStartBulkImport}
+					onDone={onBulkImportDone}
+				/>
+			);
+		}
+
 		if (checkingCache) {
 			return (
 				<div className="p-4 text-sm text-muted-foreground">Loading...</div>
@@ -107,12 +132,14 @@ export function StatBlockPanel({
 		);
 	};
 
+	const panelTitle = bulkImportMode ? "Bulk Import" : "Stat Block";
+
 	if (isDesktop) {
 		return (
 			<div className="fixed top-0 right-0 bottom-0 flex w-[400px] flex-col border-l border-border bg-card">
 				<div className="flex items-center justify-between border-b border-border px-4 py-2">
 					<span className="text-sm font-semibold text-muted-foreground">
-						Stat Block
+						{panelTitle}
 					</span>
 					<button
 						type="button"
@@ -141,7 +168,7 @@ export function StatBlockPanel({
 			<div className="absolute top-0 right-0 bottom-0 w-[85%] max-w-md animate-slide-in-right border-l border-border bg-card shadow-xl">
 				<div className="flex items-center justify-between border-b border-border px-4 py-2">
 					<span className="text-sm font-semibold text-muted-foreground">
-						Stat Block
+						{panelTitle}
 					</span>
 					<button
 						type="button"