feature: Migrate ErrorPopover to shadcn Popover component

- Migrated ErrorPopover to use shadcn PopoverContent
  - Removed forwardRef wrapper (handled by shadcn internally)
  - Replaced custom absolute positioning with PopoverContent component
  - Used cn() utility for cleaner className management
  - Maintained all styling with info/danger color variants

- Updated AppHeader to use Popover pattern
  - Replaced manual state management (showErrorPopover/setErrorPopover)
  - Removed refs and click-outside detection useEffect
  - Wrapped error button in Popover component with PopoverTrigger
  - Simplified code by removing 30+ lines of manual popover handling

Benefits:
- Better keyboard navigation and accessibility (built into Radix UI)
- Automatic focus management and ARIA attributes
- Cleaner, more maintainable code
- Consistent with other shadcn components in the app

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

src/components/AppHeader.tsx

@@ -1,9 +1,8 @@
-import { useRef, useEffect } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { useMachineStore } from "../stores/useMachineStore";
 import { useUIStore } from "../stores/useUIStore";
 import { WorkflowStepper } from "./WorkflowStepper";
-import { ErrorPopover } from "./ErrorPopover";
+import { ErrorPopoverContent } from "./ErrorPopover";
 import { getStateVisualInfo } from "../utils/machineStateHelpers";
 import {
   CheckCircleIcon,
@@ -15,6 +14,7 @@ import {
 } from "@heroicons/react/24/solid";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { Popover, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils";
 
 export function AppHeader() {
@@ -42,17 +42,12 @@ export function AppHeader() {
     })),
   );
 
-  const { pyodideError, showErrorPopover, setErrorPopover } = useUIStore(
+  const { pyodideError } = useUIStore(
     useShallow((state) => ({
       pyodideError: state.pyodideError,
-      showErrorPopover: state.showErrorPopover,
-      setErrorPopover: state.setErrorPopover,
     })),
   );
 
-  const errorPopoverRef = useRef<HTMLDivElement>(null);
-  const errorButtonRef = useRef<HTMLButtonElement>(null);
-
   // Get state visual info for header status badge
   const stateVisual = getStateVisualInfo(machineStatus);
   const stateIcons = {
@@ -65,26 +60,6 @@ export function AppHeader() {
   };
   const StatusIcon = stateIcons[stateVisual.iconName];
 
-  // Close error popover when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        errorPopoverRef.current &&
-        !errorPopoverRef.current.contains(event.target as Node) &&
-        errorButtonRef.current &&
-        !errorButtonRef.current.contains(event.target as Node)
-      ) {
-        setErrorPopover(false);
-      }
-    };
-
-    if (showErrorPopover) {
-      document.addEventListener("mousedown", handleClickOutside);
-      return () =>
-        document.removeEventListener("mousedown", handleClickOutside);
-    }
-  }, [showErrorPopover, setErrorPopover]);
-
   return (
     <header className="bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 dark:from-primary-700 dark:via-primary-800 dark:to-primary-900 px-4 sm:px-6 lg:px-8 py-3 shadow-lg border-b-2 border-primary-900/20 dark:border-primary-800/30 flex-shrink-0">
       <div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-4 lg:gap-8 items-center">
@@ -157,64 +132,63 @@ export function AppHeader() {
               )}
 
               {/* Error indicator - always render to prevent layout shift */}
-              <div className="relative">
-                <Button
-                  ref={errorButtonRef}
-                  onClick={() => setErrorPopover(!showErrorPopover)}
-                  size="sm"
-                  variant="destructive"
-                  className={cn(
-                    "gap-1.5 flex-shrink-0",
-                    machineErrorMessage || pyodideError
-                      ? "animate-pulse hover:animate-none"
-                      : "invisible pointer-events-none",
-                  )}
-                  title="Click to view error details"
-                  aria-label="View error details"
-                  disabled={!(machineErrorMessage || pyodideError)}
-                >
-                  <ExclamationTriangleIcon className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span>
-                    {(() => {
-                      if (pyodideError) return "Python Error";
-                      if (isPairingError) return "Pairing Required";
+              <Popover>
+                <PopoverTrigger asChild>
+                  <Button
+                    size="sm"
+                    variant="destructive"
+                    className={cn(
+                      "gap-1.5 flex-shrink-0",
+                      machineErrorMessage || pyodideError
+                        ? "animate-pulse hover:animate-none"
+                        : "invisible pointer-events-none",
+                    )}
+                    title="Click to view error details"
+                    aria-label="View error details"
+                    disabled={!(machineErrorMessage || pyodideError)}
+                  >
+                    <ExclamationTriangleIcon className="w-3.5 h-3.5 flex-shrink-0" />
+                    <span>
+                      {(() => {
+                        if (pyodideError) return "Python Error";
+                        if (isPairingError) return "Pairing Required";
 
-                      const errorMsg = machineErrorMessage || "";
+                        const errorMsg = machineErrorMessage || "";
 
-                      // Categorize by error message content
-                      if (
-                        errorMsg.toLowerCase().includes("bluetooth") ||
-                        errorMsg.toLowerCase().includes("connection")
-                      ) {
-                        return "Connection Error";
-                      }
-                      if (errorMsg.toLowerCase().includes("upload")) {
-                        return "Upload Error";
-                      }
-                      if (errorMsg.toLowerCase().includes("pattern")) {
-                        return "Pattern Error";
-                      }
-                      if (machineError !== undefined) {
-                        return `Machine Error`;
-                      }
+                        // Categorize by error message content
+                        if (
+                          errorMsg.toLowerCase().includes("bluetooth") ||
+                          errorMsg.toLowerCase().includes("connection")
+                        ) {
+                          return "Connection Error";
+                        }
+                        if (errorMsg.toLowerCase().includes("upload")) {
+                          return "Upload Error";
+                        }
+                        if (errorMsg.toLowerCase().includes("pattern")) {
+                          return "Pattern Error";
+                        }
+                        if (machineError !== undefined) {
+                          return `Machine Error`;
+                        }
 
-                      // Default fallback
-                      return "Error";
-                    })()}
-                  </span>
-                </Button>
+                        // Default fallback
+                        return "Error";
+                      })()}
+                    </span>
+                  </Button>
+                </PopoverTrigger>
 
-                {/* Error popover */}
-                {showErrorPopover && (machineErrorMessage || pyodideError) && (
-                  <ErrorPopover
-                    ref={errorPopoverRef}
+                {/* Error popover content */}
+                {(machineErrorMessage || pyodideError) && (
+                  <ErrorPopoverContent
                     machineError={machineError}
                     isPairingError={isPairingError}
                     errorMessage={machineErrorMessage}
                     pyodideError={pyodideError}
                   />
                 )}
-              </div>
+              </Popover>
             </div>
           </div>
         </div>

src/components/ErrorPopover.tsx

@@ -1,95 +1,94 @@
-import { forwardRef } from "react";
 import {
   ExclamationTriangleIcon,
   InformationCircleIcon,
 } from "@heroicons/react/24/solid";
 import { getErrorDetails } from "../utils/errorCodeHelpers";
+import { PopoverContent } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 
-interface ErrorPopoverProps {
+interface ErrorPopoverContentProps {
   machineError?: number;
   isPairingError: boolean;
   errorMessage?: string | null;
   pyodideError?: string | null;
 }
 
-export const ErrorPopover = forwardRef<HTMLDivElement, ErrorPopoverProps>(
-  ({ machineError, isPairingError, errorMessage, pyodideError }, ref) => {
-    const errorDetails = getErrorDetails(machineError);
-    const isPairingErr = isPairingError;
-    const errorMsg = pyodideError || errorMessage || "";
-    const isInfo = isPairingErr || errorDetails?.isInformational;
+export function ErrorPopoverContent({
+  machineError,
+  isPairingError,
+  errorMessage,
+  pyodideError,
+}: ErrorPopoverContentProps) {
+  const errorDetails = getErrorDetails(machineError);
+  const isPairingErr = isPairingError;
+  const errorMsg = pyodideError || errorMessage || "";
+  const isInfo = isPairingErr || errorDetails?.isInformational;
 
-    const bgColor = isInfo
-      ? "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500"
-      : "bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500";
+  const bgColor = isInfo
+    ? "bg-info-50 dark:bg-info-900/95 border-info-600 dark:border-info-500"
+    : "bg-danger-50 dark:bg-danger-900/95 border-danger-600 dark:border-danger-500";
 
-    const iconColor = isInfo
-      ? "text-info-600 dark:text-info-400"
-      : "text-danger-600 dark:text-danger-400";
+  const iconColor = isInfo
+    ? "text-info-600 dark:text-info-400"
+    : "text-danger-600 dark:text-danger-400";
 
-    const textColor = isInfo
-      ? "text-info-900 dark:text-info-200"
-      : "text-danger-900 dark:text-danger-200";
+  const textColor = isInfo
+    ? "text-info-900 dark:text-info-200"
+    : "text-danger-900 dark:text-danger-200";
 
-    const descColor = isInfo
-      ? "text-info-800 dark:text-info-300"
-      : "text-danger-800 dark:text-danger-300";
+  const descColor = isInfo
+    ? "text-info-800 dark:text-info-300"
+    : "text-danger-800 dark:text-danger-300";
 
-    const listColor = isInfo
-      ? "text-info-700 dark:text-info-300"
-      : "text-danger-700 dark:text-danger-300";
+  const listColor = isInfo
+    ? "text-info-700 dark:text-info-300"
+    : "text-danger-700 dark:text-danger-300";
 
-    const Icon = isInfo ? InformationCircleIcon : ExclamationTriangleIcon;
-    const title =
-      errorDetails?.title || (isPairingErr ? "Pairing Required" : "Error");
+  const Icon = isInfo ? InformationCircleIcon : ExclamationTriangleIcon;
+  const title =
+    errorDetails?.title || (isPairingErr ? "Pairing Required" : "Error");
 
-    return (
-      <div
-        ref={ref}
-        className="absolute top-full mt-2 left-0 w-[600px] z-50 animate-fadeIn"
-        role="dialog"
-        aria-label="Error details"
-      >
-        <div
-          className={`${bgColor} border-l-4 p-4 rounded-lg shadow-xl backdrop-blur-sm`}
-        >
-          <div className="flex items-start gap-3">
-            <Icon className={`w-6 h-6 ${iconColor} flex-shrink-0 mt-0.5`} />
-            <div className="flex-1">
-              <h3 className={`text-base font-semibold ${textColor} mb-2`}>
-                {title}
-              </h3>
-              <p className={`text-sm ${descColor} mb-3`}>
-                {errorDetails?.description || errorMsg}
-              </p>
-              {errorDetails?.solutions && errorDetails.solutions.length > 0 && (
-                <>
-                  <h4 className={`text-sm font-semibold ${textColor} mb-2`}>
-                    {isInfo ? "Steps:" : "How to Fix:"}
-                  </h4>
-                  <ol
-                    className={`list-decimal list-inside text-sm ${listColor} space-y-1.5`}
-                  >
-                    {errorDetails.solutions.map((solution, index) => (
-                      <li key={index} className="pl-2">
-                        {solution}
-                      </li>
-                    ))}
-                  </ol>
-                </>
-              )}
-              {machineError !== undefined && !errorDetails?.isInformational && (
-                <p className={`text-xs ${descColor} mt-3 font-mono`}>
-                  Error Code: 0x
-                  {machineError.toString(16).toUpperCase().padStart(2, "0")}
-                </p>
-              )}
-            </div>
-          </div>
+  return (
+    <PopoverContent
+      className={cn("w-[600px] border-l-4 p-4 backdrop-blur-sm", bgColor)}
+      align="start"
+    >
+      <div className="flex items-start gap-3">
+        <Icon className={cn("w-6 h-6 flex-shrink-0 mt-0.5", iconColor)} />
+        <div className="flex-1">
+          <h3 className={cn("text-base font-semibold mb-2", textColor)}>
+            {title}
+          </h3>
+          <p className={cn("text-sm mb-3", descColor)}>
+            {errorDetails?.description || errorMsg}
+          </p>
+          {errorDetails?.solutions && errorDetails.solutions.length > 0 && (
+            <>
+              <h4 className={cn("text-sm font-semibold mb-2", textColor)}>
+                {isInfo ? "Steps:" : "How to Fix:"}
+              </h4>
+              <ol
+                className={cn(
+                  "list-decimal list-inside text-sm space-y-1.5",
+                  listColor,
+                )}
+              >
+                {errorDetails.solutions.map((solution, index) => (
+                  <li key={index} className="pl-2">
+                    {solution}
+                  </li>
+                ))}
+              </ol>
+            </>
+          )}
+          {machineError !== undefined && !errorDetails?.isInformational && (
+            <p className={cn("text-xs mt-3 font-mono", descColor)}>
+              Error Code: 0x
+              {machineError.toString(16).toUpperCase().padStart(2, "0")}
+            </p>
+          )}
         </div>
       </div>
-    );
-  },
-);
-
-ErrorPopover.displayName = "ErrorPopover";
+    </PopoverContent>
+  );
+}