feat(mobile): tap the background work pill to see what is running

apps/mobile/src/Stack.tsx

@@ -69,6 +69,7 @@ import { GitConfirmSheet } from "./features/threads/git/GitConfirmSheet";
 import { GitOverviewSheet } from "./features/threads/git/GitOverviewSheet";
 import { ThreadPullRequestsSheet } from "./features/threads/ThreadPullRequestsSheet";
 import { ThreadAgentsSheet } from "./features/threads/ThreadAgentsSheet";
+import { ThreadBackgroundWorkSheet } from "./features/threads/ThreadBackgroundWorkSheet";
 import { ThreadQueueSheet } from "./features/threads/ThreadQueueControl";
 import { ThreadRouteScreen } from "./features/threads/ThreadRouteScreen";
 import { McpAppFullscreenScreen } from "./features/threads/McpAppFullscreenScreen";
@@ -551,6 +552,7 @@ const WORKSPACE_OVERLAY_ROUTES = new Set([
   "SettingsLegal",
   "SettingsSheet",
   "ThreadAgents",
+  "ThreadBackgroundWork",
   "ThreadPullRequests",
   "ThreadQueue",
   "ThreadReviewComment",
@@ -864,6 +866,15 @@ const RootStackConfig = createWorkspaceStackNavigator({
         sheetGrabberVisible: true,
       },
     }),
+    ThreadBackgroundWork: createNativeStackScreen({
+      screen: ThreadBackgroundWorkSheet,
+      options: {
+        ...FORM_SHEET_PRESENTATION_OPTIONS,
+        headerShown: false,
+        sheetAllowedDetents: [0.5, 0.9],
+        sheetGrabberVisible: true,
+      },
+    }),
     GitOverview: createNativeStackScreen({
       screen: GitOverviewSheet,
       linking: `${THREAD_LINKING_PREFIX}/git`,

apps/mobile/src/features/threads/ThreadBackgroundWorkSheet.tsx

@@ -0,0 +1,157 @@
+import { useAtomValue } from "@effect/atom-react";
+import { scopeThreadRef } from "@t3tools/client-runtime/environment";
+import {
+  presentPendingBackgroundWork,
+  type PendingBackgroundWorkItem,
+} from "@t3tools/client-runtime/state/thread-execution";
+import type { EnvironmentId, ThreadId } from "@t3tools/contracts";
+import { StackActions, useNavigation, type StaticScreenProps } from "@react-navigation/native";
+import * as Haptics from "expo-haptics";
+import { Platform, Pressable, ScrollView, View } from "react-native";
+import { ScreenStack } from "react-native-screens";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import { AndroidSheetHeader } from "../../components/ui/AndroidScreenHeader";
+import { SymbolView } from "../../components/ui/AppSymbol";
+import { AppText as Text } from "../../components/ui/AppText";
+import { ScreenContent } from "../../components/ui/ScreenContent";
+import { NativeStackScreenOptions, nativeHeaderScrollEdgeEffects } from "../../native/StackHeader";
+import { NativeHeader, NativeScreen } from "../../native/ThemedScreenStack";
+import { environmentThreadShells } from "../../state/threads";
+import { useAdaptiveWorkspaceLayout } from "../layout/AdaptiveWorkspaceLayout";
+
+const HEADER_SCROLL_EDGE_EFFECTS = nativeHeaderScrollEdgeEffects(Platform.OS, Platform.Version);
+
+type BackgroundWorkTarget = { readonly environmentId: EnvironmentId; readonly threadId: ThreadId };
+
+const KIND_LABELS: Record<PendingBackgroundWorkItem["kind"], string> = {
+  subagent: "Subagent",
+  command: "Command",
+  monitor: "Monitor",
+  background_task: "Background task",
+};
+
+export function ThreadBackgroundWorkSheet({ route }: StaticScreenProps<BackgroundWorkTarget>) {
+  const { layout } = useAdaptiveWorkspaceLayout();
+  const target = route.params;
+  const navigation = useNavigation();
+  const insets = useSafeAreaInsets();
+  const thread = useAtomValue(
+    environmentThreadShells.threadShellAtom(scopeThreadRef(target.environmentId, target.threadId)),
+  );
+  const items = presentPendingBackgroundWork(thread?.pendingBackgroundTasks ?? [])?.items ?? [];
+
+  const openChildThread = (childThreadId: ThreadId) => {
+    void Haptics.selectionAsync();
+    // Same as the agents sheet: the child thread belongs in the workspace stack, not above a leaf sheet.
+    navigation.dispatch(
+      StackActions.replace("Thread", {
+        environmentId: target.environmentId,
+        threadId: childThreadId,
+      }),
+    );
+  };
+
+  const content = (
+    <ScrollView
+      nestedScrollEnabled
+      className="flex-1"
+      contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : "never"}
+      contentContainerClassName="px-5 pb-6"
+      contentContainerStyle={{ paddingBottom: Math.max(insets.bottom, 16) + 8 }}
+    >
+      {items.length === 0 ? (
+        <Text className="pt-6 text-center text-sm text-foreground-muted">
+          Nothing running in the background.
+        </Text>
+      ) : (
+        items.map((item) => (
+          <BackgroundWorkRow key={item.taskId} item={item} onOpen={openChildThread} />
+        ))
+      )}
+    </ScrollView>
+  );
+
+  if (Platform.OS === "ios") {
+    return (
+      <View collapsable={false} className="flex-1 bg-sheet">
+        <ScreenStack style={{ flex: 1 }}>
+          <NativeScreen
+            activityState={2}
+            enabled
+            isNativeStack
+            screenId="thread-background-work-sheet-native"
+            scrollEdgeEffects={HEADER_SCROLL_EDGE_EFFECTS}
+            className="flex-1 bg-sheet"
+          >
+            {content}
+            <NativeHeader
+              backgroundColor="rgba(0,0,0,0)"
+              tintColorClassName="accent-foreground"
+              hideBackButton
+              hideShadow={false}
+              title="Background work"
+              titleColorClassName="accent-foreground"
+              titleFontSize={18}
+              titleFontWeight="800"
+              translucent
+            />
+          </NativeScreen>
+        </ScreenStack>
+      </View>
+    );
+  }
+
+  return (
+    <View collapsable={false} className="flex-1 bg-sheet">
+      <NativeStackScreenOptions options={{ sheetCornerRadius: 28 }} />
+      <AndroidSheetHeader title="Background work" onBack={() => navigation.goBack()} />
+      <ScreenContent insetHorizontal={layout.usesSplitView}>{content}</ScreenContent>
+    </View>
+  );
+}
+
+function BackgroundWorkRow(props: {
+  readonly item: PendingBackgroundWorkItem;
+  readonly onOpen: (childThreadId: ThreadId) => void;
+}) {
+  const { item } = props;
+  const childThreadId = item.childThreadId;
+  const row = (
+    <View className="flex-row items-center gap-3 border-b border-border py-3.5">
+      <SymbolView
+        name={
+          item.kind === "subagent"
+            ? "person.2"
+            : item.kind === "monitor"
+              ? { ios: "bolt", android: "bolt" }
+              : "terminal"
+        }
+        size={15}
+        tintColorClassName="accent-foreground-muted"
+        type="monochrome"
+      />
+      <View className="min-w-0 flex-1">
+        <Text className="font-t3-medium text-sm text-foreground" numberOfLines={2}>
+          {item.label}
+        </Text>
+        <Text className="text-xs text-foreground-muted">{KIND_LABELS[item.kind]}</Text>
+      </View>
+      {childThreadId !== undefined ? (
+        <SymbolView name="chevron.right" size={12} tintColorClassName="accent-icon-subtle" />
+      ) : null}
+    </View>
+  );
+
+  if (childThreadId === undefined) return <View accessible>{row}</View>;
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityHint="Opens this subagent's thread"
+      onPress={() => props.onOpen(childThreadId)}
+      className="active:opacity-70"
+    >
+      {row}
+    </Pressable>
+  );
+}

apps/mobile/src/features/threads/ThreadDetailScreen.tsx

@@ -501,6 +501,13 @@ export const ThreadDetailScreen = function ThreadDetailScreen(props: ThreadDetai
           .map((item) => item.label)
           .join(", ")}`,
         waiting: pendingBackgroundWork.waiting,
+        onPress: () => {
+          Keyboard.dismiss();
+          navigation.navigate("ThreadBackgroundWork", {
+            environmentId: props.environmentId,
+            threadId: props.selectedThread.id,
+          });
+        },
       };
     }
     if (props.selectedThread.goal !== null && contentPresentationKind === "ready") {

apps/mobile/src/features/threads/floating-working-control.tsx

@@ -156,7 +156,9 @@ export function FloatingWorkingControl(props: {
     hasQueue ||
     (props.devicePreview !== null && props.browserPreview !== null);
   const statusInteractive =
-    props.status?.kind === "connection" || props.status?.kind === "child-input";
+    props.status?.kind === "connection" ||
+    props.status?.kind === "child-input" ||
+    props.status?.kind === "background";
   const capsuleInteractive = statusInteractive || hasQueue || hasAgents || hasPreview;
   const statusContent =
     props.status !== null ? (
@@ -409,8 +411,10 @@ function FloatingStatusLabel(props: {
       <StatusLabelRow
         key="background"
         accessibilityLabel={props.status.accessibilityLabel}
+        accessibilityRole="button"
         className="gap-2"
         onLayout={props.onLayout}
+        onPress={props.status.onPress}
       >
         <SymbolView
           name={props.status.waiting ? { ios: "bolt", android: "bolt" } : "terminal"}

apps/mobile/src/features/threads/floating-working-status.ts

@@ -15,6 +15,7 @@ export type FloatingWorkingStatus =
       readonly label: string;
       readonly accessibilityLabel: string;
       readonly waiting: boolean;
+      readonly onPress: () => void;
     }
   | { readonly kind: "goal"; readonly label: string; readonly accessibilityLabel: string }
   | { readonly kind: "preparing"; readonly label: string }