feat(drill): AckDrawer with header + segment status list

src/components/drill/DrillDrawerHeader.tsx

@@ -1,9 +1,19 @@
+import type { ReactNode } from "react";
 import { X } from "lucide-react";
 
 interface Props {
   eyebrow: string;
   title: string;
   onClose: () => void;
+  /**
+   * Optional slot for a right-side action (e.g. "Download 999" on the
+   * AckDrawer, "Download 837" on the ClaimDrawer — added in SP21
+   * Phase 5 Task 5.2/5.10). Rendered to the left of the close
+   * button with a small visual gap. Anything goes — a button, a
+   * status pill, an icon link. Default `null` so existing callers
+   * (ProviderDrawer) render unchanged.
+   */
+  action?: ReactNode;
 }
 
 /**
@@ -15,7 +25,7 @@ interface Props {
  * the app (see ``.eyebrow`` in ``src/index.css`` and the
  * ``DrillDrawerHeader`` usage in ``ClaimDrawerHeader``).
  */
-export function DrillDrawerHeader({ eyebrow, title, onClose }: Props) {
+export function DrillDrawerHeader({ eyebrow, title, onClose, action }: Props) {
   return (
     <div className="flex items-center justify-between border-b border-border/30 px-6 py-4">
       <div>
@@ -24,14 +34,17 @@ export function DrillDrawerHeader({ eyebrow, title, onClose }: Props) {
         </div>
         <h2 className="text-[18px] font-semibold tracking-tight mt-0.5">{title}</h2>
       </div>
-      <button
-        type="button"
-        onClick={onClose}
-        aria-label="Close drawer"
-        className="rounded-md p-1 text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <X className="h-4 w-4" aria-hidden />
-      </button>
+      <div className="flex items-center gap-2">
+        {action}
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close drawer"
+          className="rounded-md p-1 text-muted-foreground hover:bg-muted/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <X className="h-4 w-4" aria-hidden />
+        </button>
+      </div>
     </div>
   );
 }