feat: add DAG progress dots to browse page via WebSocket events

- Add TRANSCRIPT_DAG_STATUS handler to UserEventsProvider with
  DagStatusContext and useDagStatusMap hook for live DAG task updates
- Clean up dagStatusMap entries when TRANSCRIPT_STATUS transitions
  away from "processing"
- Create DagProgressDots component rendering color-coded dots per
  DAG task (green=completed, blue pulsing=running, hollow=queued,
  red=failed, gray=cancelled) with humanized tooltip names
- Wire dagStatusMap through browse page -> TranscriptCards ->
  TranscriptStatusIcon, falling back to REST dag_status field

www/app/(app)/browse/_components/TranscriptStatusIcon.tsx

@@ -8,13 +8,17 @@ import {
   FaGear,
 } from "react-icons/fa6";
 import { TranscriptStatus } from "../../../lib/transcript";
+import type { DagTask } from "../../../lib/UserEventsProvider";
+import DagProgressDots from "./DagProgressDots";
 
 interface TranscriptStatusIconProps {
   status: TranscriptStatus;
+  dagStatus?: DagTask[] | null;
 }
 
 export default function TranscriptStatusIcon({
   status,
+  dagStatus,
 }: TranscriptStatusIconProps) {
   switch (status) {
     case "ended":
@@ -36,6 +40,9 @@ export default function TranscriptStatusIcon({
         </Box>
       );
     case "processing":
+      if (dagStatus && dagStatus.length > 0) {
+        return <DagProgressDots tasks={dagStatus} />;
+      }
       return (
         <Box as="span" title="Processing in progress">
           <Icon color="gray.500" as={FaGear} />