test: add data-testid attributes to AIOnboarding component

frontend/components/AIOnboarding.tsx

@@ -229,7 +229,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
   }, []);
 
   return (
-    <div className="fixed inset-0 z-50 bg-background flex flex-col p-6 animate-in fade-in slide-in-from-bottom-5 duration-300">
+    <div data-testid="ai-extraction-overlay" className="fixed inset-0 z-50 bg-background flex flex-col p-6 animate-in fade-in slide-in-from-bottom-5 duration-300">
       <div className="flex justify-between items-center mb-6 shrink-0">
         <div className="flex items-center gap-3">
             <div className="p-2 bg-primary/20 rounded-xl">
@@ -251,7 +251,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
 
       {!image && !isLive ? (
         <div className="flex-1 flex flex-col gap-6 min-h-0">
-          <div className="flex bg-surface/70 p-1.5 rounded-2xl border border-slate-800/50 shrink-0">
+          <div data-testid="multi-item-toggle" className="flex bg-surface/70 p-1.5 rounded-2xl border border-slate-800/50 shrink-0">
             <button
               onClick={() => setMode('item')}
               aria-label="Select Discovery Mode"
@@ -295,6 +295,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             </button>
             <button
               onClick={() => fileInputRef.current?.click()}
+              data-testid="manual-entry-tab"
               aria-label="Upload photo from device"
               className="flex flex-col items-center justify-center gap-2 bg-surface text-slate-200 border border-slate-800 rounded-3xl font-bold cursor-pointer active:scale-95 transition-all focus:ring-2 focus:ring-blue-500 focus:outline-none"
             >
@@ -307,13 +308,13 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
         </div>
       ) : isLive ? (
         // LIVE VIEWFINDER MODE
-        <div className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
-          <div className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-black">
-            <video 
-              ref={videoRef} 
-              autoPlay 
-              playsInline 
-              muted 
+        <div data-testid="wizard-step wizard-step-capture" className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
+          <div data-testid="capture-camera" className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-black">
+            <video
+              ref={videoRef}
+              autoPlay
+              playsInline
+              muted
               className="w-full h-full object-cover"
             />
             <canvas ref={canvasRef} className="hidden" />
@@ -346,6 +347,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             </button>
             <button
               onClick={captureSnapshot}
+              data-testid="capture-button"
               aria-label="Capture image from camera"
               className="flex-1 py-4 bg-white text-slate-950 rounded-2xl font-black text-lg shadow-xl shadow-white/10 cursor-pointer flex items-center justify-center gap-3 active:scale-95 hover:bg-slate-200 transition-all focus:ring-2 focus:ring-offset-2 focus:ring-offset-slate-950 focus:ring-white focus:outline-none"
             >
@@ -357,7 +359,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           </div>
         </div>
       ) : extractedItems.length === 0 ? (
-        <div className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
+        <div data-testid="wizard-step" className="flex-1 flex flex-col gap-6 min-h-0 overflow-hidden">
           <div className="relative flex-1 min-h-0 rounded-[2.5rem] overflow-hidden border-4 border-slate-900 shadow-2xl bg-surface">
             <img src={image || undefined} className="w-full h-full object-contain" alt="Captured label" />
             <div className="absolute inset-0 bg-black/30 pointer-events-none" />
@@ -377,6 +379,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             <button
               onClick={() => setImage(null)}
               disabled={uploading}
+              data-testid="retake-button"
               aria-label="Retake photo"
               className="px-6 py-4 bg-surface border border-slate-800 text-secondary rounded-2xl font-bold cursor-pointer transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-2 focus:ring-blue-500 focus:outline-none"
             >
@@ -394,9 +397,9 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           </div>
         </div>
       ) : editingIndex !== null ? (
-        <div className="flex-1 flex flex-col gap-6 overflow-hidden">
-          <div className="flex items-center justify-between">
-              <span className="text-xs text-muted font-bold">Item Details ({editingIndex + 1}/{extractedItems.length})</span>
+        <div data-testid="extraction-results-form" className="flex-1 flex flex-col gap-6 overflow-hidden">
+          <div data-testid="ai-onboarding-wizard" className="flex items-center justify-between">
+              <span className="text-xs text-muted font-bold">Item Details (<span data-testid="current-step">{editingIndex + 1}</span>/<span data-testid="total-steps">{extractedItems.length}</span>)</span>
               <button
                 onClick={() => setEditingIndex(null)}
                 aria-label="Back to item list"
@@ -407,10 +410,10 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           </div>
           
           <div className="flex-1 overflow-y-auto space-y-2 pr-1 scrollbar-hide">
-            <div className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
+            <div data-testid="extracted-name" className="bg-surface py-2.5 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
               <label className="text-xs text-muted font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Item Name</label>
-              <textarea 
-                value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''} 
+              <textarea
+                value={extractedItems[editingIndex].Item || extractedItems[editingIndex].name || ''}
                 onChange={(e) => updateEditingItem({ Item: e.target.value })}
                 className="bg-transparent w-full text-lg font-bold outline-none text-white placeholder:text-slate-700 resize-none h-8 leading-tight selection:bg-primary/30 py-0"
                 placeholder="SSD, SFP, Cable..."
@@ -418,7 +421,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             </div>
 
             <div className="grid grid-cols-2 gap-4">
-               <div className="bg-surface py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
+               <div data-testid="extracted-category" className="bg-surface py-3 px-4 rounded-[1.2rem] border border-slate-800 focus-within:border-primary/50 transition-colors group">
                  <label className="text-xs text-muted font-bold mb-0.5 block group-focus-within:text-primary transition-colors tracking-tight">Category</label>
                 <input 
                   type="text"
@@ -540,6 +543,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           <div className="flex flex-col gap-3 shrink-0">
              <button
               onClick={() => confirmSingleItem(editingIndex)}
+              data-testid="confirm-extraction"
               aria-label="Add item to catalog"
               className="py-5 bg-primary text-white rounded-[1.8rem] font-black text-lg shadow-2xl shadow-primary/20 cursor-pointer active:scale-95 transition-all hover:bg-blue-500 focus:ring-2 focus:ring-blue-400 focus:outline-none"
             >
@@ -548,10 +552,10 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
           </div>
         </div>
       ) : (
-        <div className="flex-1 flex flex-col gap-6 overflow-hidden">
+        <div data-testid="manual-entry-form" className="flex-1 flex flex-col gap-6 overflow-hidden">
           <div className="flex items-center justify-between">
               <h3 className="text-sm font-black text-secondary">Discovery Dashboard</h3>
-              <span className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-bold">
+              <span data-testid="wizard-progress" className="text-xs bg-primary/20 text-primary px-3 py-1 rounded-full font-bold">
                 {extractedItems.length} items found
               </span>
           </div>
@@ -560,6 +564,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
             {extractedItems.map((item, idx) => (
               <div
                 key={idx}
+                data-testid="extraction-item-row"
                 className="bg-surface/70 border border-slate-800 rounded-3xl p-5 flex items-center justify-between group hover:border-primary/40 transition-all active:scale-[0.98] focus-within:border-primary/60 focus-within:ring-2 focus-within:ring-primary/20"
               >
                 <div
@@ -628,6 +633,7 @@ export default function AIOnboarding({ onCancel, onComplete, categories, invento
                 setExtractedItems([]);
                 setImage(null);
               }}
+              data-testid="reject-extraction"
               aria-label="Discard discovery session"
               className="py-3 text-xs text-secondary font-bold cursor-pointer hover:text-secondary transition-colors focus:ring-2 focus:ring-slate-500 focus:outline-none rounded px-2"
             >