@stevecastaneda/paseo-progress 1.14.2 → 1.14.3

package/client/tabs.tsx

@@ -22,7 +22,15 @@ export type TabOverflow = "wrap" | "fit" | "scroll";
 
 // A row of tabs over a bottom rule, as in the panel's history card and the
 // ticket dialog. Narrow tightens the spacing so three tabs fit the 320px sidebar.
-export function TabStrip<Id extends string>({ colors, tabs, selected, onSelect, narrow = false, overflow = "wrap", style }: {
+export function TabStrip<Id extends string>({
+  colors,
+  tabs,
+  selected,
+  onSelect,
+  narrow = false,
+  overflow = "wrap",
+  style,
+}: {
   colors: Colors;
   tabs: Array<TabEntry<Id>>;
   selected: Id;
@@ -64,7 +72,9 @@ export function TabStrip<Id extends string>({ colors, tabs, selected, onSelect,
     revealed.current = id;
   };
   // Scrolls to the chosen tab once it can be measured, and not again until the choice changes.
-  const settle = () => { if (revealed.current !== selected) reveal(selected); };
+  const settle = () => {
+    if (revealed.current !== selected) reveal(selected);
+  };
   // A chevron press moves the row most of its width that way.
   const page = (direction: 1 | -1) => {
     const { viewport, content, offset } = size.current;
@@ -79,19 +89,44 @@ export function TabStrip<Id extends string>({ colors, tabs, selected, onSelect,
     if (before !== hidden.before || after !== hidden.after) setHidden({ before, after });
   };
   const items = tabs.map((entry) => (
-    <Tab key={entry.id} colors={colors} narrow={narrow} entry={iconless ? { ...entry, icon: null } : entry} selected={entry.id === selected}
-      onPress={() => { onSelect(entry.id); if (scroll) reveal(entry.id); }}
-      onLayout={scroll ? (event) => { widths.current.set(entry.id, event.nativeEvent.layout.width); settle(); } : undefined} />
+    <Tab
+      key={entry.id}
+      colors={colors}
+      narrow={narrow}
+      entry={iconless ? { ...entry, icon: null } : entry}
+      selected={entry.id === selected}
+      onPress={() => {
+        onSelect(entry.id);
+        if (scroll) reveal(entry.id);
+      }}
+      onLayout={
+        scroll
+          ? (event) => {
+              widths.current.set(entry.id, event.nativeEvent.layout.width);
+              settle();
+            }
+          : undefined
+      }
+    />
   ));
   if (scroll) {
     // Scrolling rows sit on Paseo's phone sheet, which is surface0.
     return (
       <View style={[{ position: "relative" }, style]}>
-        <ScrollView ref={scroller} horizontal showsHorizontalScrollIndicator={false} accessibilityRole="tablist" scrollEventThrottle={16}
-          onLayout={(event) => { measure({ viewport: event.nativeEvent.layout.width }); settle(); }}
+        <ScrollView
+          ref={scroller}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          accessibilityRole="tablist"
+          scrollEventThrottle={16}
+          onLayout={(event) => {
+            measure({ viewport: event.nativeEvent.layout.width });
+            settle();
+          }}
           onContentSizeChange={(width) => measure({ content: width })}
           onScroll={(event) => measure({ offset: event.nativeEvent.contentOffset.x })}
-          contentContainerStyle={{ flexGrow: 1, flexDirection: "row", columnGap: gap, ...rule }}>
+          contentContainerStyle={{ flexGrow: 1, flexDirection: "row", columnGap: gap, ...rule }}
+        >
           {items}
         </ScrollView>
         {hidden.before ? <EdgeFade colors={colors} side="left" onPress={() => page(-1)} /> : null}
@@ -100,10 +135,18 @@ export function TabStrip<Id extends string>({ colors, tabs, selected, onSelect,
     );
   }
   return (
-    <View accessibilityRole="tablist"
+    <View
+      accessibilityRole="tablist"
       // One row is 32px (8 + 18 + 6); anything taller wrapped.
-      onLayout={overflow === "fit" ? (event) => { if (!iconless && event.nativeEvent.layout.height > 40) setWrappedFor(ids); } : undefined}
-      style={[{ flexDirection: "row", flexWrap: "wrap", columnGap: gap, ...rule }, style]}>
+      onLayout={
+        overflow === "fit"
+          ? (event) => {
+              if (!iconless && event.nativeEvent.layout.height > 40) setWrappedFor(ids);
+            }
+          : undefined
+      }
+      style={[{ flexDirection: "row", flexWrap: "wrap", columnGap: gap, ...rule }, style]}
+    >
       {items}
     </View>
   );
@@ -120,8 +163,13 @@ function EdgeFade({ colors, side, onPress }: { colors: Colors; side: "left" | "r
       {Array.from({ length: FADE_SLICES }, (_, i) => (
         <View key={i} pointerEvents="none" style={{ width: 2, backgroundColor: withAlpha(colors.surface0, (i + 1) / (FADE_SLICES + 1)) ?? undefined }} />
       ))}
-      <Pressable accessibilityElementsHidden importantForAccessibility="no-hide-descendants" onPress={onPress} hitSlop={8}
-        style={{ width: 16, justifyContent: "center", alignItems: side === "right" ? "flex-end" : "flex-start", backgroundColor: colors.surface0 }}>
+      <Pressable
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        onPress={onPress}
+        hitSlop={8}
+        style={{ width: 16, justifyContent: "center", alignItems: side === "right" ? "flex-end" : "flex-start", backgroundColor: colors.surface0 }}
+      >
         <Icon name={side === "right" ? "ChevronRight" : "ChevronLeft"} size={14} color={colors.foregroundMuted} />
       </Pressable>
     </View>
@@ -129,7 +177,14 @@ function EdgeFade({ colors, side, onPress }: { colors: Colors; side: "left" | "r
 }
 
 // Instant feedback: tabs switch often, so hover and press change color only.
-function Tab<Id extends string>({ colors, narrow, entry, selected, onPress, onLayout }: {
+function Tab<Id extends string>({
+  colors,
+  narrow,
+  entry,
+  selected,
+  onPress,
+  onLayout,
+}: {
   colors: Colors;
   narrow: boolean;
   entry: TabEntry<Id>;
@@ -139,19 +194,42 @@ function Tab<Id extends string>({ colors, narrow, entry, selected, onPress, onLa
 }) {
   const [hovered, setHovered] = useState(false);
   return (
-    <Pressable accessibilityRole="tab" aria-selected={selected} onPress={onPress} onLayout={onLayout}
-      onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
+    <Pressable
+      accessibilityRole="tab"
+      aria-selected={selected}
+      onPress={onPress}
+      onLayout={onLayout}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
       style={({ pressed }) => ({
-        flexDirection: "row", alignItems: "center", gap: narrow ? 4 : 6, paddingTop: 8, paddingBottom: 6, marginBottom: -1,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: narrow ? 4 : 6,
+        paddingTop: 8,
+        paddingBottom: 6,
+        marginBottom: -1,
         borderBottomWidth: 2,
         borderBottomColor: selected ? colors.accent : pressed || hovered ? colors.border : "transparent",
-      })}>
+      })}
+    >
       {entry.icon ? <Icon name={entry.icon} size={14} color={selected ? colors.accent : colors.foregroundMuted} /> : null}
-      <Text style={{ color: selected || hovered ? colors.foreground : colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>{entry.label}</Text>
+      <Text style={{ color: selected || hovered ? colors.foreground : colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontWeight: "600" }}>
+        {entry.label}
+      </Text>
       {/* Count badge: muted on both tabs; the chosen tab's number reads darker. */}
       {entry.count !== undefined ? (
         <View style={{ minWidth: 16, paddingHorizontal: 4, borderRadius: 4, alignItems: "center", backgroundColor: colors.surface2 }}>
-          <Text style={{ color: selected ? colors.foreground : colors.foregroundMuted, fontSize: 10, lineHeight: 14, fontWeight: "600", fontVariant: ["tabular-nums"] }}>{entry.count}</Text>
+          <Text
+            style={{
+              color: selected ? colors.foreground : colors.foregroundMuted,
+              fontSize: 10,
+              lineHeight: 14,
+              fontWeight: "600",
+              fontVariant: ["tabular-nums"],
+            }}
+          >
+            {entry.count}
+          </Text>
         </View>
       ) : null}
     </Pressable>

package/client/ticket-dialog.tsx

@@ -22,7 +22,16 @@ type AttachmentContext = { workspaceId: string; workspaceDirectory: string; navi
 
 // A ticket's story, opened from its row: where its time went, and what came out
 // of it. Its questions and previews open in the same dialog (see StackedDialog).
-export function TicketDialogs({ colors, dashboard, openId, setOpenId, now, live, compact, context }: {
+export function TicketDialogs({
+  colors,
+  dashboard,
+  openId,
+  setOpenId,
+  now,
+  live,
+  compact,
+  context,
+}: {
   colors: Colors;
   dashboard: Dashboard;
   openId: string | null;
@@ -33,12 +42,32 @@ export function TicketDialogs({ colors, dashboard, openId, setOpenId, now, live,
   context: AttachmentContext;
 }) {
   return (
-    <StackedDialog colors={colors} root={openId ? { kind: "ticket", id: openId } : null} onClose={() => setOpenId(null)}
-      questions={[...dashboard.questions.open, ...dashboard.questions.answered]} dashboard={dashboard} now={now} live={live} compact={compact} context={context} />
+    <StackedDialog
+      colors={colors}
+      root={openId ? { kind: "ticket", id: openId } : null}
+      onClose={() => setOpenId(null)}
+      questions={[...dashboard.questions.open, ...dashboard.questions.answered]}
+      dashboard={dashboard}
+      now={now}
+      live={live}
+      compact={compact}
+      context={context}
+    />
   );
 }
 
-export function TicketStoryView({ colors, dashboard, ticket, now, live, compact, context, onOpenAttachment, onOpenQuestion, onOpenAgent }: {
+export function TicketStoryView({
+  colors,
+  dashboard,
+  ticket,
+  now,
+  live,
+  compact,
+  context,
+  onOpenAttachment,
+  onOpenQuestion,
+  onOpenAgent,
+}: {
   colors: Colors;
   dashboard: Dashboard;
   ticket: Ticket;
@@ -53,67 +82,150 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, compact,
   onOpenAgent?(agentId: string): void;
 }) {
   const { messages: m, locale } = useProgressLanguage();
-  const story = ticketStory(ticket, {
-    deliverables: dashboard.deliverables,
-    questions: [...dashboard.questions.open, ...dashboard.questions.answered].sort((a, b) => Date.parse(a.askedAt) - Date.parse(b.askedAt)),
-    activity: [...dashboard.activity].reverse(),
-  }, now);
+  const story = ticketStory(
+    ticket,
+    {
+      deliverables: dashboard.deliverables,
+      questions: [...dashboard.questions.open, ...dashboard.questions.answered].sort((a, b) => Date.parse(a.askedAt) - Date.parse(b.askedAt)),
+      activity: [...dashboard.activity].reverse(),
+    },
+    now,
+  );
   const over = story.workedMin - ticket.estimateMin >= 1;
   const byTime = [...story.questions, ...story.activity].some((item) => item.link === "by-time");
   const source = ticketSourceAttachment(ticket);
   // The ticker is run-wide: it's about this ticket when this ticket's agent set
   // it, or, without agents to go by, when this is the only ticket working.
-  const ticker = dashboard.ticker && ticket.status === "working" && (dashboard.ticker.by
-    ? dashboard.ticker.by === ticket.agentId
-    : dashboard.tickets.filter((candidate) => candidate.status === "working").length === 1) ? dashboard.ticker.text : null;
+  const ticker =
+    dashboard.ticker &&
+    ticket.status === "working" &&
+    (dashboard.ticker.by ? dashboard.ticker.by === ticket.agentId : dashboard.tickets.filter((candidate) => candidate.status === "working").length === 1)
+      ? dashboard.ticker.text
+      : null;
   // What the badge doesn't say: the stage it's in, or what it waits for.
   const detail = ticket.waitingFor ? m.waitingDetail(ticket.waitingFor.id, ticket.waitingFor.title) : ticket.status === "working" ? ticket.stage : undefined;
   const timeline = story.timeline.map((step, index) => {
     const last = index === story.timeline.length - 1;
     // A current "Blocked" that's only waiting on another ticket reads as waiting, in the calm color.
-    const shown = last && ticket.waitingFor && step.status === "blocked"
-      ? { ...step, label: { kind: "waiting" as const, id: ticket.waitingFor.id }, waiting: true }
-      : step;
+    const shown =
+      last && ticket.waitingFor && step.status === "blocked" ? { ...step, label: { kind: "waiting" as const, id: ticket.waitingFor.id }, waiting: true } : step;
     return <TimelineRow key={`${step.at}-${index}`} colors={colors} step={shown} last={last} now={now} live={live} />;
   });
   // Only tabs with something in them; the write-up leads when there is one.
   const tabs: Array<TabEntry<StoryTab> & { content: React.ReactNode }> = [
-    ...(source ? [{ id: "write-up" as const, label: m.writeUp, icon: "FileText",
-      content: <WriteUp colors={colors} source={source} workspaceId={context.workspaceId} workspaceDirectory={context.workspaceDirectory} onOpen={onOpenAttachment} /> }] : []),
+    ...(source
+      ? [
+          {
+            id: "write-up" as const,
+            label: m.writeUp,
+            icon: "FileText",
+            content: (
+              <WriteUp
+                colors={colors}
+                source={source}
+                workspaceId={context.workspaceId}
+                workspaceDirectory={context.workspaceDirectory}
+                onOpen={onOpenAttachment}
+              />
+            ),
+          },
+        ]
+      : []),
     { id: "timeline", label: m.timeline, icon: "History", count: story.timeline.length, content: <View>{timeline}</View> },
-    ...(story.activity.length ? [{ id: "activity" as const, label: m.activity, icon: "Activity", count: story.activity.length, content: (
-      <View>
-        {story.activity.map((entry) => (
-          <View key={entry.id} style={{ flexDirection: "row", gap: 12, paddingVertical: 4 }}>
-            <Text style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{entry.text}<LinkNote colors={colors} link={entry.link} /></Text>
-            <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 19, fontVariant: ["tabular-nums"] }}>{formatClientTimeOfDay(locale, entry.at, now)}</Text>
-          </View>
-        ))}
-      </View>
-    ) }] : []),
-    ...(story.questions.length ? [{ id: "questions" as const, label: m.questions, icon: "MessageCircleQuestion", count: story.questions.length, content: (
-      <View>
-        {story.questions.map((question) => {
-          const chosen = question.answer ? question.options.find((option) => option.letter === question.answer!.choice) : undefined;
-          return (
-            <PressableRow key={question.id} colors={colors} onSurface1 accessibilityRole="button" accessibilityLabel={m.openItem(question.id)}
-              onPress={() => onOpenQuestion(question.id)}
-              style={{ flexDirection: "row", gap: 8, paddingVertical: 4, paddingHorizontal: 4, marginHorizontal: -4, borderRadius: 4 }}>
-              <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontWeight: "600", fontVariant: ["tabular-nums"], minWidth: 30 }}>{question.id}</Text>
-              <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
-                <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{question.title}<LinkNote colors={colors} link={question.link} /></Text>
-                {question.answer
-                  ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{m.answered} <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{question.answer.choice}</Text>{chosen ? <Text style={{ color: colors.foreground }}>: {chosen.label}</Text> : null}</Text>
-                  : <QuestionState colors={colors} question={question} />}
+    ...(story.activity.length
+      ? [
+          {
+            id: "activity" as const,
+            label: m.activity,
+            icon: "Activity",
+            count: story.activity.length,
+            content: (
+              <View>
+                {story.activity.map((entry) => (
+                  <View key={entry.id} style={{ flexDirection: "row", gap: 12, paddingVertical: 4 }}>
+                    <Text style={{ flex: 1, color: colors.foreground, fontSize: 13, lineHeight: 19 }}>
+                      {entry.text}
+                      <LinkNote colors={colors} link={entry.link} />
+                    </Text>
+                    <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 19, fontVariant: ["tabular-nums"] }}>
+                      {formatClientTimeOfDay(locale, entry.at, now)}
+                    </Text>
+                  </View>
+                ))}
               </View>
-              <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
-            </PressableRow>
-          );
-        })}
-      </View>
-    ) }] : []),
-    ...(story.deliverables.length ? [{ id: "deliverables" as const, label: m.deliverables, icon: "Package", count: story.deliverables.length,
-      content: <AttachmentList colors={colors} attachments={story.deliverables.map(deliverableAttachment)} onOpen={onOpenAttachment} /> }] : []),
+            ),
+          },
+        ]
+      : []),
+    ...(story.questions.length
+      ? [
+          {
+            id: "questions" as const,
+            label: m.questions,
+            icon: "MessageCircleQuestion",
+            count: story.questions.length,
+            content: (
+              <View>
+                {story.questions.map((question) => {
+                  const chosen = question.answer ? question.options.find((option) => option.letter === question.answer!.choice) : undefined;
+                  return (
+                    <PressableRow
+                      key={question.id}
+                      colors={colors}
+                      onSurface1
+                      accessibilityRole="button"
+                      accessibilityLabel={m.openItem(question.id)}
+                      onPress={() => onOpenQuestion(question.id)}
+                      style={{ flexDirection: "row", gap: 8, paddingVertical: 4, paddingHorizontal: 4, marginHorizontal: -4, borderRadius: 4 }}
+                    >
+                      <Text
+                        style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontWeight: "600", fontVariant: ["tabular-nums"], minWidth: 30 }}
+                      >
+                        {question.id}
+                      </Text>
+                      <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
+                        <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>
+                          {question.title}
+                          <LinkNote colors={colors} link={question.link} />
+                        </Text>
+                        {question.answer ? (
+                          <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+                            {m.answered} <Text style={{ color: colors.statusSuccess, fontWeight: "600" }}>{question.answer.choice}</Text>
+                            {chosen ? <Text style={{ color: colors.foreground }}>: {chosen.label}</Text> : null}
+                          </Text>
+                        ) : (
+                          <QuestionState colors={colors} question={question} />
+                        )}
+                      </View>
+                      <View style={{ paddingTop: 2 }}>
+                        <Icon name="ChevronRight" size={14} color={colors.foregroundMuted} />
+                      </View>
+                    </PressableRow>
+                  );
+                })}
+              </View>
+            ),
+          },
+        ]
+      : []),
+    ...(story.deliverables.length
+      ? [
+          {
+            id: "deliverables" as const,
+            label: m.deliverables,
+            icon: "Package",
+            count: story.deliverables.length,
+            content: (
+              <AttachmentList
+                colors={colors}
+                attachments={story.deliverables.map(deliverableAttachment)}
+                root={context.workspaceDirectory}
+                onOpen={onOpenAttachment}
+              />
+            ),
+          },
+        ]
+      : []),
   ];
   const tabKey = `${context.workspaceId}:${ticket.id}`;
   const [chosen, setChosen] = useState<StoryTab | undefined>(() => storyTabs.get(tabKey));
@@ -128,14 +240,22 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, compact,
       <View style={{ gap: 10 }}>
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
           <StatusBadge colors={colors} status={ticket.status} waiting={Boolean(ticket.waitingFor)} />
-          <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{detail}</Text>
-          <Text accessibilityLabel={m.workedEstimate(formatClientMinutes(locale, story.workedMin), formatClientMinutes(locale, ticket.estimateMin))}
-            style={{ color: over ? colors.statusDanger : colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
+          <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>
+            {detail}
+          </Text>
+          <Text
+            accessibilityLabel={m.workedEstimate(formatClientMinutes(locale, story.workedMin), formatClientMinutes(locale, ticket.estimateMin))}
+            style={{ color: over ? colors.statusDanger : colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}
+          >
             {formatClientWorkDone(locale, story.workedMin, ticket.estimateMin)}
           </Text>
         </View>
         <TimeBar colors={colors} workedMin={story.workedMin} estimateMin={ticket.estimateMin} />
-        {ticker ? <Text accessibilityLiveRegion="polite" style={{ color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 }}>{ticker}</Text> : null}
+        {ticker ? (
+          <Text accessibilityLiveRegion="polite" style={{ color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 }}>
+            {ticker}
+          </Text>
+        ) : null}
         {ticket.note ? <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 19 }}>{ticket.note}</Text> : null}
         {ticket.agentId ? <AgentRow colors={colors} agentId={ticket.agentId} onOpen={onOpenAgent} /> : null}
       </View>
@@ -146,9 +266,7 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, compact,
       </View>
 
       {byTime ? (
-        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
-          {m.byTimeHint(ticket.id, dashboard.run?.itemLabel ?? "Ticket")}
-        </Text>
+        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{m.byTimeHint(ticket.id, dashboard.run?.itemLabel ?? "Ticket")}</Text>
       ) : null}
     </View>
   );
@@ -184,13 +302,30 @@ function AgentRow({ colors, agentId, onOpen }: { colors: Colors; agentId: string
   const open = onOpen ? () => onOpen(agentId) : undefined;
   // A quiet line in the summary: who's on it, and the way to their chat.
   return (
-    <PressableRow colors={colors} onSurface1 disabled={!open} accessibilityRole="button" accessibilityLabel={m.openAgentChat(title)} onPress={open}
-      style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 3, paddingHorizontal: 6, marginHorizontal: -6, borderRadius: 4 }}>
+    <PressableRow
+      colors={colors}
+      onSurface1
+      disabled={!open}
+      accessibilityRole="button"
+      accessibilityLabel={m.openAgentChat(title)}
+      onPress={open}
+      style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 3, paddingHorizontal: 6, marginHorizontal: -6, borderRadius: 4 }}
+    >
       <Icon name="Bot" size={12} color={colors.foregroundMuted} />
-      <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{title}</Text>
-      {alert ? <Text numberOfLines={1} style={{ flexShrink: 0, color: alert.danger ? colors.statusDanger : colors.statusWarning, fontSize: 12, lineHeight: 17 }}>{alert.text}</Text> : null}
+      <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+        {title}
+      </Text>
+      {alert ? (
+        <Text numberOfLines={1} style={{ flexShrink: 0, color: alert.danger ? colors.statusDanger : colors.statusWarning, fontSize: 12, lineHeight: 17 }}>
+          {alert.text}
+        </Text>
+      ) : null}
       <View style={{ flex: 1 }} />
-      {open ? <Text numberOfLines={1} style={{ flexShrink: 0, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>{m.openChat}</Text> : null}
+      {open ? (
+        <Text numberOfLines={1} style={{ flexShrink: 0, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>
+          {m.openChat}
+        </Text>
+      ) : null}
     </PressableRow>
   );
 }
@@ -204,17 +339,34 @@ function LinkNote({ colors, link }: { colors: Colors; link: Link }) {
 // Past stage steps get an accent ringed dot: work that happened, now over.
 function Marker({ colors, step }: { colors: Colors; step: TimelineStep & { waiting?: boolean } }) {
   if (step.waiting || (step.status === "not_started" && step.label.kind !== "added")) return <WaitingDot color={colors.foregroundMuted} />;
-  const icon = step.label.kind === "added" ? { name: "CirclePlus", color: colors.foregroundMuted }
-    : step.status === "done" ? { name: "CircleCheck", color: colors.statusSuccess }
-    : step.status === "blocked" ? { name: "Ban", color: colors.statusDanger }
-    : step.status === "skipped" ? { name: "CircleSlash", color: colors.foregroundMuted }
-    : { name: "CircleDot", color: colors.accent };
+  const icon =
+    step.label.kind === "added"
+      ? { name: "CirclePlus", color: colors.foregroundMuted }
+      : step.status === "done"
+        ? { name: "CircleCheck", color: colors.statusSuccess }
+        : step.status === "blocked"
+          ? { name: "Ban", color: colors.statusDanger }
+          : step.status === "skipped"
+            ? { name: "CircleSlash", color: colors.foregroundMuted }
+            : { name: "CircleDot", color: colors.accent };
   return <Icon name={icon.name} size={12} color={icon.color} />;
 }
 
 // One line per step: its status icon, what it was, when it began and how long
 // it took. The step still going shows the live spinner.
-function TimelineRow({ colors, step, last, now, live }: { colors: Colors; step: TimelineStep & { waiting?: boolean }; last: boolean; now: number; live: boolean }) {
+function TimelineRow({
+  colors,
+  step,
+  last,
+  now,
+  live,
+}: {
+  colors: Colors;
+  step: TimelineStep & { waiting?: boolean };
+  last: boolean;
+  now: number;
+  live: boolean;
+}) {
   const { messages: m, locale } = useProgressLanguage();
   const current = last && step.minutes !== null;
   const working = current && step.status === "working";
@@ -224,18 +376,34 @@ function TimelineRow({ colors, step, last, now, live }: { colors: Colors; step:
       <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
         <View style={{ width: 14, alignItems: "center" }}>
           <IconSwap swapKey={working ? (live ? "live" : "stale") : step.waiting ? "waiting" : step.status} size={12}>
-            {working ? (live ? <Spinner color={colors.accent} /> : <StalledPulse color={colors.statusWarning} />) : <Marker colors={colors} step={step} />}
+            {working ? live ? <Spinner color={colors.accent} /> : <StalledPulse color={colors.statusWarning} /> : <Marker colors={colors} step={step} />}
           </IconSwap>
         </View>
-        <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{timelineLabel(m, step.label)}</Text>
-        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{formatClientTimeOfDay(locale, step.at, now)}</Text>
+        <Text numberOfLines={1} style={{ flex: 1, minWidth: 0, color: colors.foreground, fontSize: 13, lineHeight: 18 }}>
+          {timelineLabel(m, step.label)}
+        </Text>
+        <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
+          {formatClientTimeOfDay(locale, step.at, now)}
+        </Text>
         {/* A fixed column, so durations line up down the list. */}
-        <Text numberOfLines={1} style={{ minWidth: 84, textAlign: "right", color: current ? colors.foreground : colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>
-          {step.minutes !== null ? current ? m.soFar(formatClientMinutes(locale, step.minutes)) : formatClientMinutes(locale, step.minutes) : ""}
+        <Text
+          numberOfLines={1}
+          style={{
+            minWidth: 84,
+            textAlign: "right",
+            color: current ? colors.foreground : colors.foregroundMuted,
+            fontSize: 12,
+            lineHeight: 18,
+            fontVariant: ["tabular-nums"],
+          }}
+        >
+          {step.minutes !== null ? (current ? m.soFar(formatClientMinutes(locale, step.minutes)) : formatClientMinutes(locale, step.minutes)) : ""}
         </Text>
       </View>
       {step.notes.map((note, index) => (
-        <Text key={index} style={{ paddingStart: 20, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{note}</Text>
+        <Text key={index} style={{ paddingStart: 20, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+          {note}
+        </Text>
       ))}
     </View>
   );

package/client/time-bar.tsx

@@ -10,8 +10,11 @@ export function TimeBar({ colors, workedMin, estimateMin }: { colors: Colors; wo
   const scale = Math.max(workedMin, estimateMin);
   const under = Math.min(workedMin, estimateMin);
   return (
-    <View accessibilityElementsHidden importantForAccessibility="no-hide-descendants"
-      style={{ height: 4, borderRadius: 2, overflow: "hidden", flexDirection: "row", backgroundColor: colors.surface2 }}>
+    <View
+      accessibilityElementsHidden
+      importantForAccessibility="no-hide-descendants"
+      style={{ height: 4, borderRadius: 2, overflow: "hidden", flexDirection: "row", backgroundColor: colors.surface2 }}
+    >
       <View style={{ width: `${(under / scale) * 100}%`, backgroundColor: colors.accent }} />
       {workedMin > estimateMin ? <View style={{ width: `${((workedMin - estimateMin) / scale) * 100}%`, backgroundColor: colors.statusDanger }} /> : null}
     </View>

package/client/video.tsx

@@ -7,8 +7,8 @@ interface VideoElement {
   src: string;
   videoWidth: number;
   videoHeight: number;
-  onloadedmetadata: (() => void) | null;
-  onerror: (() => void) | null;
+  addEventListener(type: "loadedmetadata" | "error", listener: () => void): void;
+  removeEventListener(type: "loadedmetadata" | "error", listener: () => void): void;
 }
 const page = globalThis as unknown as { document: { createElement(tag: "video"): VideoElement } };
 
@@ -17,14 +17,21 @@ const page = globalThis as unknown as { document: { createElement(tag: "video"):
 export function videoRatio(blob: FileBlob): Promise<number | null> {
   const url = browser.URL.createObjectURL(blob);
   const video = page.document.createElement("video");
+  let stopListening: (() => void) | undefined;
   return new Promise<number | null>((resolve) => {
     setTimeout(() => resolve(null), 5_000);
-    video.onloadedmetadata = () => resolve(video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : null);
-    video.onerror = () => resolve(null);
+    const onMetadata = () => resolve(video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : null);
+    const onError = () => resolve(null);
+    video.addEventListener("loadedmetadata", onMetadata);
+    video.addEventListener("error", onError);
+    stopListening = () => {
+      video.removeEventListener("loadedmetadata", onMetadata);
+      video.removeEventListener("error", onError);
+    };
     video.preload = "metadata";
     video.src = url;
   }).finally(() => {
-    video.onloadedmetadata = video.onerror = null;
+    stopListening?.();
     video.src = "";
     browser.URL.revokeObjectURL(url);
   });
@@ -35,7 +42,9 @@ export function VideoPlayer({ blob, label, style }: { blob: FileBlob; label: str
   const url = useObjectUrl(blob);
   return (
     <View style={[style, { overflow: "hidden" }]}>
-      {url ? <video src={url} controls playsInline aria-label={label} style={{ width: "100%", height: "100%", display: "block", objectFit: "contain" }} /> : null}
+      {url ? (
+        <video src={url} controls playsInline aria-label={label} style={{ width: "100%", height: "100%", display: "block", objectFit: "contain" }} />
+      ) : null}
     </View>
   );
 }