remove browse, add image

dashboard/src/App.jsx

@@ -3,6 +3,7 @@ import { Settings } from 'lucide-react'
 import { useStats }  from './hooks/useStats'
 import { useTests }  from './hooks/useTests'
 import { useConfig } from './hooks/useConfig'
+import cgw453Image  from './assets/CGW453.PNG'
 import StatCard      from './components/StatCard'
 import CompletionBar from './components/CompletionBar'
 import TimeDisplay   from './components/TimeDisplay'
@@ -97,34 +98,44 @@ export default function App() {
 
         {/* Stats row */}
         {!statsLoading && stats && (
-          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
-            <div className="flex flex-col gap-2">
-              <StatCard
-                label="Overall"
-                value={`${((stats.overall.completionRate ?? 0) * 100).toFixed(1)}%`}
-                sub={`${stats.overall.completed} / ${stats.overall.total} tests`}
-                accent="text-emerald-400"
+          <div className="grid grid-cols-1 lg:grid-cols-[220px_minmax(0,1fr)] gap-4">
+            <div className="lg:row-span-2 bg-slate-900 border border-slate-800 rounded-xl p-4 flex items-center justify-center min-h-[220px]">
+              <img
+                src={cgw453Image}
+                alt="CGW453 test object"
+                className="max-h-48 w-auto object-contain"
               />
-              <CompletionBar value={stats.overall.completionRate ?? 0} />
             </div>
 
-            {stats.devices.map(d => (
-              <div key={d.name} className="flex flex-col gap-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+              <div className="flex flex-col gap-2">
                 <StatCard
-                  label={d.name}
-                  value={`${(d.completionRate * 100).toFixed(1)}%`}
-                  sub={`${d.completed} / ${d.total}`}
-                  detailsPosition="right"
-                  details={['COE', 'P2P', 'P3P'].map((type) => {
-                    const typeStats = d.byType?.[type] ?? { completed: 0, total: 0 }
-                    return `${type}: ${typeStats.completed}/${typeStats.total} tests`
-                  })}
+                  label="Overall"
+                  value={`${((stats.overall.completionRate ?? 0) * 100).toFixed(1)}%`}
+                  sub={`${stats.overall.completed} / ${stats.overall.total} tests`}
+                  accent="text-emerald-400"
                 />
-                <CompletionBar value={d.completionRate} />
+                <CompletionBar value={stats.overall.completionRate ?? 0} />
               </div>
-            ))}
 
-            <div className="col-span-2 sm:col-span-1 lg:col-span-2">
+              {stats.devices.map(d => (
+                <div key={d.name} className="flex flex-col gap-2">
+                  <StatCard
+                    label={d.name}
+                    value={`${(d.completionRate * 100).toFixed(1)}%`}
+                    sub={`${d.completed} / ${d.total}`}
+                    detailsPosition="right"
+                    details={['COE', 'P2P', 'P3P'].map((type) => {
+                      const typeStats = d.byType?.[type] ?? { completed: 0, total: 0 }
+                      return `${type}: ${typeStats.completed}/${typeStats.total} tests`
+                    })}
+                  />
+                  <CompletionBar value={d.completionRate} />
+                </div>
+              ))}
+            </div>
+
+            <div>
               <TimeDisplay
                 elapsedSeconds={stats.timing.elapsedSeconds}
                 estimatedRemainingSeconds={stats.timing.estimatedRemainingSeconds}