fix: PrimaryButton ref warning + research modal close race condition

frontend/src/components/PodcastMaker/PodcastDashboard/QuerySelection.tsx

@@ -87,17 +87,34 @@ export const QuerySelection: React.FC<QuerySelectionProps> = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const prevIsResearchingRef = useRef(isResearching);
+  const modalCloseTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Close modal only when research actually completes (transitions from true to false)
+  // Prevent closing while research is in progress
   useEffect(() => {
+    // Clear any pending close timeout when research starts
+    if (researchStarted && isResearching) {
+      if (modalCloseTimeoutRef.current) {
+        clearTimeout(modalCloseTimeoutRef.current);
+        modalCloseTimeoutRef.current = null;
+      }
+      return;
+    }
+
     const wasResearching = prevIsResearchingRef.current;
     const nowNotResearching = !isResearching;
     
     if (showResearchModal && researchStarted && wasResearching && nowNotResearching) {
-      setTimeout(() => setShowResearchModal(false), 1000);
+      modalCloseTimeoutRef.current = setTimeout(() => setShowResearchModal(false), 1000);
     }
     
     prevIsResearchingRef.current = isResearching;
+
+    return () => {
+      if (modalCloseTimeoutRef.current) {
+        clearTimeout(modalCloseTimeoutRef.current);
+      }
+    };
   }, [isResearching, showResearchModal, researchStarted]);
 
   // Progress message cycling

frontend/src/components/PodcastMaker/ui/PrimaryButton.tsx

@@ -14,7 +14,7 @@ interface PrimaryButtonProps {
   size?: "small" | "medium" | "large";
 }
 
-export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
+export const PrimaryButton = React.forwardRef<HTMLButtonElement, PrimaryButtonProps>(({
   children,
   onClick,
   disabled = false,
@@ -25,7 +25,7 @@ export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
   ariaLabel,
   sx,
   size = "medium",
-}) => {
+}, ref) => {
   const sizeStyles = {
     small: { px: 1.5, py: 0.5, fontSize: "0.75rem" },
     medium: { px: 3, py: 1, fontSize: "0.875rem" },
@@ -34,6 +34,7 @@ export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
 
   const button = (
     <Button
+      ref={ref}
       variant="contained"
       onClick={onClick}
       disabled={disabled || loading}
@@ -62,10 +63,12 @@ export const PrimaryButton: React.FC<PrimaryButtonProps> = ({
 
   return tooltip ? (
     <Tooltip title={tooltip} arrow>
-      <span>{button}</span>
+      {button}
     </Tooltip>
   ) : (
     button
   );
-};
+});
+
+PrimaryButton.displayName = "PrimaryButton";