feat: add sorter simulation dashboard MVP

src/components/StateMachinePanel.tsx

@@ -0,0 +1,35 @@
+import type { MachineState } from '../domain/types';
+
+const states: MachineState[] = [
+  'IDLE',
+  'MOVING_TO_CAMERA',
+  'DETECTING',
+  'MOVING_TO_GATE',
+  'WAITING_AT_GATE',
+  'CLASSIFYING',
+  'ROUTE_TO_B',
+  'ROUTE_TO_C',
+  'ROUTE_TO_D',
+  'RETURN_HOME',
+  'FAULT',
+  'EMERGENCY_STOP',
+];
+
+export default function StateMachinePanel({ currentState }: { currentState: MachineState }) {
+  return (
+    <section className="panel compact-panel">
+      <div className="panel-heading">
+        <p className="eyebrow">State machine</p>
+        <h2>{currentState}</h2>
+      </div>
+      <div className="state-list">
+        {states.map((state) => (
+          <div key={state} className={state === currentState ? 'state active' : 'state'}>
+            <span />
+            {state}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}