✨ Add global teeth count to all analysis modes

toothmap_frontend/src/App.jsx

@@ -69,7 +69,7 @@ export default function App() {
       }
     } catch (e) {
       console.error(e);
-      alert("Error: " + (e.response ? e.response.status + " - " + JSON.stringify(e.response.data) : e.message));
+      alert("Error contacting the AI server. Ensure the FastAPI server is running on port 8000.");
     } finally {
       setLoading(false);
     }
@@ -213,17 +213,21 @@ export default function App() {
           )}
 
           {/* Stats Panel */}
-          {pipelineResults && (
+          {(pipelineResults || rawBoxes) && (
             <div className="bg-zinc-800/30 rounded-lg p-3 text-sm">
               <p className="text-zinc-400 text-xs mb-1">Detected Teeth</p>
-              <p className="text-2xl font-bold text-white">{pipelineResults.length}</p>
-              {pipelineResults.slice(0,6).map((r, i) => (
+              <p className="text-2xl font-bold text-white">
+                {pipelineResults ? pipelineResults.length : rawBoxes.boxes.length}
+              </p>
+              {pipelineResults && pipelineResults.slice(0,6).map((r, i) => (
                 <div key={i} className="flex justify-between text-xs text-zinc-500 mt-1">
                   <span style={{ color: getColour(r.fdi) }}>FDI {r.fdi > 0 ? r.fdi : '?'}</span>
                   <span>{(r.confidence * 100).toFixed(0)}% conf</span>
                 </div>
               ))}
-              {pipelineResults.length > 6 && <p className="text-xs text-zinc-600 mt-1">+{pipelineResults.length - 6} more...</p>}
+              {pipelineResults && pipelineResults.length > 6 && (
+                <p className="text-xs text-zinc-600 mt-1">+{pipelineResults.length - 6} more...</p>
+              )}
             </div>
           )}
         </aside>