feat(web): show recording status on floating previews

apps/web/src/browser/browserRecording.ts

@@ -141,8 +141,9 @@ const activeBrowserRecordingTabIdsAtom = Atom.make<ActiveBrowserRecordingIndex>(
   tabIds: new Set<string>(),
 }).pipe(Atom.keepAlive, Atom.withLabel("preview:active-browser-recording-tabs"));
 
-export function useActiveBrowserRecordingTabIds(): ReadonlySet<string> {
-  return useAtomValue(activeBrowserRecordingTabIdsAtom).tabIds;
+export function useActiveBrowserRecordingTabIds(threadRef?: ScopedThreadRef): ReadonlySet<string> {
+  const tabIds = useAtomValue(activeBrowserRecordingTabIdsAtom).tabIds;
+  return threadRef ? readActiveBrowserRecordingTabIds(threadRef) : tabIds;
 }
 
 const activeRecordings = new Map<string, ActiveRecording>();

apps/web/src/components/chat/ChatHeader.tsx

@@ -47,6 +47,7 @@ import {
   WorkspaceBreadcrumbSeparator,
 } from "../WorkspaceBreadcrumb";
 import { cn } from "~/lib/utils";
+import { BrowserRecordingIndicator } from "../preview/BrowserRecordingIndicator";
 
 interface ChatHeaderProps {
   activeThreadEnvironmentId: EnvironmentId;
@@ -347,7 +348,7 @@ export const ChatHeader = memo(function ChatHeader({
             <WorkspaceBreadcrumbSeparator />
           </>
         ) : null}
-        <WorkspaceBreadcrumbItem current className="min-w-10 flex-1">
+        <WorkspaceBreadcrumbItem current className="min-w-10 flex-1 gap-2">
           {renamingTitle !== null ? (
             <input
               autoFocus
@@ -398,6 +399,9 @@ export const ChatHeader = memo(function ChatHeader({
               <TooltipPopup side="top">{activeThreadTitle}</TooltipPopup>
             </Tooltip>
           )}
+          <BrowserRecordingIndicator
+            threadRef={scopeThreadRef(activeThreadEnvironmentId, activeThreadId)}
+          />
         </WorkspaceBreadcrumbItem>
       </WorkspaceBreadcrumb>
       <div

apps/web/src/components/preview/BrowserRecordingIndicator.tsx

@@ -0,0 +1,23 @@
+import type { ScopedThreadRef } from "@t3tools/contracts";
+
+import { useActiveBrowserRecordingTabIds } from "~/browser/browserRecording";
+
+export function BrowserRecordingIndicator({ threadRef }: { threadRef: ScopedThreadRef }) {
+  const recordingTabIds = useActiveBrowserRecordingTabIds(threadRef);
+
+  if (recordingTabIds.size === 0) return null;
+
+  return (
+    <span
+      role="status"
+      aria-label="Preview recording in progress"
+      className="inline-flex shrink-0 items-center gap-1.5 text-xs font-normal text-muted-foreground"
+    >
+      <span
+        aria-hidden
+        className="size-2 shrink-0 rounded-full bg-red-500 motion-safe:animate-status-pulse"
+      />
+      Recording
+    </span>
+  );
+}