fix(web): screen readers hear which background thread finished, even with the sidebar collapsed#23839

@@ -0,0 +1,70 @@
+import { useAtomValue } from "@effect/atom-react";
+import { scopeThreadRef, scopedThreadKey } from "@t3tools/client-runtime/environment";
+import { effectiveSnoozed } from "@t3tools/client-runtime/state/thread-settled";
+import { useEffect, useRef } from "react";
+
+import { useComposerDraftStore } from "../composerDraftStore";
+import { useClientSettings } from "../hooks/useSettings";
+import { useThreadRouteTarget } from "../hooks/useThreadRouteTarget";
+import { useQuietThreadShells } from "../state/entities";
+import { liveShellEnvironmentIdsAtom } from "../state/shell";
+import { resolveActiveThreadRouteRef } from "../threadRoutes";
+import {
+  type BackgroundThreadMemory,
+  type BackgroundThreadSnapshot,
+  nextBackgroundThreadAnnouncement,
+  resolveBackgroundThreadRequest,
+} from "./backgroundThreadAnnouncement";
+
+/**
+ * Speaks status changes for threads other than the open one. It lives outside
+ * the sidebar because a collapsed sidebar is inert, which silences its rows.
+ */
+export function BackgroundThreadAnnouncer() {
+  const threads = useQuietThreadShells();
+  const liveEnvironmentIds = useAtomValue(liveShellEnvironmentIdsAtom);
+  // In-app notification toasts land in a polite live region that already speaks these.
+  const toastsSpeak = useClientSettings((settings) => settings.inAppNotificationsEnabled);
+  const routeTarget = useThreadRouteTarget();
+  const routeDraftThread = useComposerDraftStore((store) =>
+    routeTarget?.kind === "draft" ? store.getDraftSession(routeTarget.draftId) : null,
+  );
+  const openThreadRef = resolveActiveThreadRouteRef(routeTarget, routeDraftThread);
+  const openThreadKey = openThreadRef === null ? null : scopedThreadKey(openThreadRef);
+  const regionRef = useRef<HTMLDivElement>(null);
+  const memoryRef = useRef<BackgroundThreadMemory>(new Map());
+
+  useEffect(() => {
+    const now = new Date().toISOString();
+    const snapshots: BackgroundThreadSnapshot[] = [];
+    for (const thread of threads) {
+      // Subagents have no row of their own; their requests surface on the parent.
+      if (thread.archivedAt !== null || thread.lineage.relationshipToParent === "subagent")
+        continue;
+      if (!liveEnvironmentIds.has(thread.environmentId)) continue;
+      snapshots.push({
+        key: scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
+        title: thread.title,
+        ...resolveBackgroundThreadRequest(thread),
+        runId: thread.latestRun?.runId ?? null,
+        runStatus: thread.latestRun?.status ?? null,
+        activeRunId: thread.runtime?.activeRunId ?? null,
+        snoozed: effectiveSnoozed(thread, { now }),
+      });
+    }
+    const { memory, announcement } = nextBackgroundThreadAnnouncement(
+      memoryRef.current,
+      snapshots,
+      openThreadKey,
+    );
+    memoryRef.current = memory;
+    const region = regionRef.current;
+    if (region === null || announcement === null || toastsSpeak) return;

@@ -0,0 +1,57 @@
+import { memo, useEffect, useRef } from "react";
+
+import {
+  nextThreadAnnouncement,
+  type ThreadActivitySnapshot,
+  type ThreadAnnouncementMemory,
+} from "./threadActivityAnnouncement";
+
+/**
+ * One polite live region for the open thread. Text is written straight to the
+ * DOM so an announcement never re-renders the timeline.
+ */
+export const ThreadActivityAnnouncer = memo(function ThreadActivityAnnouncer({
+  threadKey,
+  status,
+  requestId,
+  runId,
+  runStatus,
+  detailBehind,
+}: ThreadActivitySnapshot & {
+  /** Null while the timeline shows another thread during a switch. */
+  readonly threadKey: string | null;
+  /** See isDetailBehindShell. */
+  readonly detailBehind: boolean;
+}) {
+  const regionRef = useRef<HTMLDivElement>(null);
+  const memoryRef = useRef<{ threadKey: string; memory: ThreadAnnouncementMemory } | null>(null);
+
+  useEffect(() => {
+    const region = regionRef.current;
+    if (threadKey === null) {
+      memoryRef.current = null;
+      if (region !== null) region.textContent = "";
+      return;
+    }
+    if (detailBehind) return;
+    const previous = memoryRef.current?.threadKey === threadKey ? memoryRef.current.memory : null;
+    const { memory, announcement } = nextThreadAnnouncement(previous, {
+      status,
+      requestId,
+      runId,
+      runStatus,
+    });
+    memoryRef.current = { threadKey, memory };
+    if (region === null) return;
+    if (previous === null) {
+      region.textContent = "";
+    } else if (announcement !== null) {
+      // Screen readers ignore a write that leaves the text unchanged, so a
+      // repeated "Done" gets a trailing non-breaking space to count as new.
+      region.textContent = region.textContent === announcement ? `${announcement} ` : announcement;

@@ -0,0 +1,67 @@
+import { useAtomValue } from "@effect/atom-react";
+import { scopeThreadRef, scopedThreadKey } from "@t3tools/client-runtime/environment";
+import { effectiveSnoozed } from "@t3tools/client-runtime/state/thread-settled";
+import { useEffect, useRef } from "react";
+
+import { useComposerDraftStore } from "../composerDraftStore";
+import { useThreadRouteTarget } from "../hooks/useThreadRouteTarget";
+import { useQuietThreadShells } from "../state/entities";
+import { liveShellEnvironmentIdsAtom } from "../state/shell";
+import { resolveActiveThreadRouteRef } from "../threadRoutes";
+import {
+  type BackgroundThreadMemory,
+  type BackgroundThreadSnapshot,
+  nextBackgroundThreadAnnouncement,
+  resolveBackgroundThreadRequest,
+} from "./backgroundThreadAnnouncement";
+
+/**
+ * Speaks status changes for threads other than the open one. It lives outside
+ * the sidebar because a collapsed sidebar is inert, which silences its rows.
+ */
+export function BackgroundThreadAnnouncer() {
+  const threads = useQuietThreadShells();
+  const liveEnvironmentIds = useAtomValue(liveShellEnvironmentIdsAtom);
+  const routeTarget = useThreadRouteTarget();
+  const routeDraftThread = useComposerDraftStore((store) =>
+    routeTarget?.kind === "draft" ? store.getDraftSession(routeTarget.draftId) : null,
+  );
+  const openThreadRef = resolveActiveThreadRouteRef(routeTarget, routeDraftThread);
+  const openThreadKey = openThreadRef === null ? null : scopedThreadKey(openThreadRef);
+  const regionRef = useRef<HTMLDivElement>(null);
+  const memoryRef = useRef<BackgroundThreadMemory>(new Map());
+
+  useEffect(() => {
+    const now = new Date().toISOString();
+    const snapshots: BackgroundThreadSnapshot[] = [];
+    for (const thread of threads) {
+      // Subagents have no row of their own; their requests surface on the parent.
+      if (thread.archivedAt !== null || thread.lineage.relationshipToParent === "subagent")
+        continue;
+      if (!liveEnvironmentIds.has(thread.environmentId)) continue;
+      snapshots.push({
+        key: scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)),
+        title: thread.title,
+        ...resolveBackgroundThreadRequest(thread),
+        runId: thread.latestRun?.runId ?? null,
+        runStatus: thread.latestRun?.status ?? null,
+        activeRunId: thread.runtime?.activeRunId ?? null,
+        snoozed: effectiveSnoozed(thread, { now }),
+      });
+    }
+    const { memory, announcement } = nextBackgroundThreadAnnouncement(
+      memoryRef.current,
+      snapshots,
+      openThreadKey,
+    );
+    memoryRef.current = memory;
+    const region = regionRef.current;
+    if (region === null || announcement === null) return;
+    // Screen readers ignore a write that leaves the text unchanged, so a repeat
+    // gets a trailing non-breaking space to count as new.
+    region.textContent = region.textContent === announcement ? `${announcement} ` : announcement;

@@ -1342,14 +1342,10 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
                           ) : topStatus.icon === "done" ? (
                             <CircleCheckIcon aria-hidden className="size-4 shrink-0" />
                           ) : null}
-                          {/* The label alone is the live region: a role="status"
-                            wrapper around the ticking duration would make
-                            screen readers announce every second. The open
-                            thread announces its own status, so its row stays
-                            quiet instead of saying everything twice. */}
-                          <span role={props.isRouteThread ? undefined : "status"}>
-                            {topStatus.label}
-                          </span>
+                          {/* Not a live region: a collapsed sidebar is inert, so
+                            BackgroundThreadAnnouncer and the open thread's
+                            timeline speak status changes instead. */}
+                          {topStatus.label}