feat(dashboard): add React foundation and overview

apps/dashboard/src/components/confirmation-dialog.tsx

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react';
+
+interface ConfirmationDialogProps {
+  action: 'start' | 'stop';
+  isPending: boolean;
+  onCancel(): void;
+  onConfirm(): void;
+}
+
+export function ConfirmationDialog({ action, isPending, onCancel, onConfirm }: ConfirmationDialogProps) {
+  const cancelButtonRef = useRef<HTMLButtonElement>(null);
+  const isStarting = action === 'start';
+
+  useEffect(() => {
+    cancelButtonRef.current?.focus();
+  }, []);
+
+  return (
+    <div aria-labelledby="confirmation-title" aria-modal="true" className="dialog-backdrop" role="dialog">
+      <div className="dialog-card">
+        <span className="eyebrow">Confirm action</span>
+        <h2 id="confirmation-title">{isStarting ? 'Start bot?' : 'Stop bot?'}</h2>
+        <p>
+          {isStarting
+            ? 'The bot will resume automated processing.'
+            : 'The bot will pause after its current operation.'}
+        </p>
+        <div className="dialog-actions">
+          <button className="button secondary" disabled={isPending} onClick={onCancel} ref={cancelButtonRef} type="button">
+            Cancel
+          </button>
+          <button className={isStarting ? 'button primary' : 'button danger'} disabled={isPending} onClick={onConfirm} type="button">
+            {isPending ? 'Applying…' : `Confirm ${action}`}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}