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/DagProgressDots.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Box, Flex } from "@chakra-ui/react";
+import type { DagTask } from "../../../lib/UserEventsProvider";
+
+const pulseKeyframes = `
+  @keyframes dagDotPulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.3; }
+  }
+`;
+
+function humanizeTaskName(name: string): string {
+  return name
+    .split("_")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+function dotProps(status: DagTask["status"]): Record<string, unknown> {
+  switch (status) {
+    case "completed":
+      return { bg: "green.500" };
+    case "running":
+      return {
+        bg: "blue.500",
+        style: { animation: "dagDotPulse 1.5s ease-in-out infinite" },
+      };
+    case "failed":
+      return { bg: "red.500" };
+    case "cancelled":
+      return { bg: "gray.400" };
+    case "queued":
+    default:
+      return {
+        bg: "transparent",
+        border: "1px solid",
+        borderColor: "gray.400",
+      };
+  }
+}
+
+export default function DagProgressDots({ tasks }: { tasks: DagTask[] }) {
+  return (
+    <>
+      <style>{pulseKeyframes}</style>
+      <Flex gap="2px" alignItems="center" flexWrap="wrap">
+        {tasks.map((task) => (
+          <Box
+            key={task.name}
+            w="4px"
+            h="4px"
+            borderRadius="full"
+            flexShrink={0}
+            title={humanizeTaskName(task.name)}
+            {...dotProps(task.status)}
+          />
+        ))}
+      </Flex>
+    </>
+  );
+}

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

@@ -19,6 +19,7 @@ import {
   generateTextFragment,
 } from "../../../lib/textHighlight";
 import type { components } from "../../../reflector-api";
+import type { DagTask } from "../../../lib/UserEventsProvider";
 
 type SearchResult = components["schemas"]["SearchResult"];
 type SourceKind = components["schemas"]["SourceKind"];
@@ -29,6 +30,7 @@ interface TranscriptCardsProps {
   isLoading?: boolean;
   onDelete: (transcriptId: string) => void;
   onReprocess: (transcriptId: string) => void;
+  dagStatusMap?: Map<string, DagTask[]>;
 }
 
 function highlightText(text: string, query: string): React.ReactNode {
@@ -102,11 +104,13 @@ function TranscriptCard({
   query,
   onDelete,
   onReprocess,
+  dagStatusMap,
 }: {
   result: SearchResult;
   query: string;
   onDelete: (transcriptId: string) => void;
   onReprocess: (transcriptId: string) => void;
+  dagStatusMap?: Map<string, DagTask[]>;
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -137,7 +141,18 @@ function TranscriptCard({
     <Box borderWidth={1} p={4} borderRadius="md" fontSize="sm">
       <Flex justify="space-between" alignItems="flex-start" gap="2">
         <Box>
-          <TranscriptStatusIcon status={result.status} />
+          <TranscriptStatusIcon
+            status={result.status}
+            dagStatus={
+              dagStatusMap?.get(result.id) ??
+              (
+                (result as Record<string, unknown>).dag_status as
+                  | { tasks?: DagTask[] }
+                  | undefined
+              )?.tasks ??
+              null
+            }
+          />
         </Box>
         <Box flex="1">
           {/* Title with highlighting and text fragment for deep linking */}
@@ -284,6 +299,7 @@ export default function TranscriptCards({
   isLoading,
   onDelete,
   onReprocess,
+  dagStatusMap,
 }: TranscriptCardsProps) {
   return (
     <Box position="relative">
@@ -315,6 +331,7 @@ export default function TranscriptCards({
               query={query}
               onDelete={onDelete}
               onReprocess={onReprocess}
+              dagStatusMap={dagStatusMap}
             />
           ))}
         </Stack>

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} />

www/app/(app)/browse/page.tsx

@@ -43,6 +43,7 @@ import DeleteTranscriptDialog from "./_components/DeleteTranscriptDialog";
 import { formatLocalDate } from "../../lib/time";
 import { RECORD_A_MEETING_URL } from "../../api/urls";
 import { useUserName } from "../../lib/useUserName";
+import { useDagStatusMap } from "../../lib/UserEventsProvider";
 
 const SEARCH_FORM_QUERY_INPUT_NAME = "query" as const;
 
@@ -273,6 +274,7 @@ export default function TranscriptBrowser() {
   }, [JSON.stringify(searchFilters)]);
 
   const userName = useUserName();
+  const dagStatusMap = useDagStatusMap();
   const [deletionLoading, setDeletionLoading] = useState(false);
   const cancelRef = React.useRef(null);
   const [transcriptToDeleteId, setTranscriptToDeleteId] =
@@ -408,6 +410,7 @@ export default function TranscriptBrowser() {
             isLoading={searchLoading}
             onDelete={setTranscriptToDeleteId}
             onReprocess={handleProcessTranscript}
+            dagStatusMap={dagStatusMap}
           />
 
           {!searchLoading && results.length === 0 && (