1import {
2 formatProviderSubagentStatus,
3 type ProviderSubagentStatus,
4} from "@t3tools/client-runtime/state/thread-execution";
5import { isOrchestrationV2WorkActive, type EnvironmentId, type ThreadId } from "@t3tools/contracts";
6import { useState } from "react";
7import { View } from "react-native";
8
9import { AppText as Text } from "../../components/ui/AppText";
10import { ProviderIcon } from "../../components/ProviderIcon";
11import { Button } from "../../components/ui/Button";
12import { NativeChildWorkSheet } from "./NativeChildWorkSheet";
13import { useVisibleSecondClock } from "./use-visible-second-clock";
14
15export function ProviderSubagentBar(props: {
16 readonly provider: { readonly driver: string; readonly iconUrl?: string | undefined } | null;
17 readonly modelLabel: string;
18 readonly effortLabel: string | null;
19 readonly status: ProviderSubagentStatus | null;
20 readonly onOpenParent: (() => void) | null;
21 /** Set for providers whose children T3 reads on demand instead of streaming. */
22 readonly inspect: { readonly environmentId: EnvironmentId; readonly threadId: ThreadId } | null;
23}) {
24 const [inspecting, setInspecting] = useState(false);
25 const live = props.status !== null && isOrchestrationV2WorkActive(props.status.status);
26 const nowMs = useVisibleSecondClock(live);
27 const statusLabel = formatProviderSubagentStatus(props.status, nowMs);
28 const modelDescription =
29 props.effortLabel === null ? props.modelLabel : `${props.modelLabel}, ${props.effortLabel}`;
30
31 return (
32 <View className="flex-row items-center gap-3 rounded-[20px] border border-border-subtle bg-card-alt py-2 pe-2 ps-4">
33 {}
34 <View
35 accessible
36 accessibilityLabel={`${modelDescription} subagent, ${statusLabel}. It runs on its own and cannot take messages.`}
37 className="min-w-0 flex-1 gap-0.5"
38 >
39 <View className="min-w-0 flex-row items-center gap-1.5">
40 {props.provider ? (
41 <ProviderIcon
42 iconUrl={props.provider.iconUrl}
43 provider={props.provider.driver}
44 size={16}
45 />
46 ) : null}
47 <Text numberOfLines={1} className="min-w-0 shrink font-t3-bold text-sm text-foreground">
48 {props.modelLabel}
49 </Text>
50 {props.effortLabel === null ? null : (
51 <Text
52 numberOfLines={1}
53 className="shrink-0 font-sans text-sm text-foreground-secondary"
54 >
55 {props.effortLabel}
56 </Text>
57 )}
58 </View>
59 <Text
60 numberOfLines={1}
61 className="font-sans text-xs text-foreground-secondary"
62 style={{ fontVariant: ["tabular-nums"] }}
63 >
64 {statusLabel} · Runs on its own
65 </Text>
66 </View>
67 {props.inspect ? (
68 <Button label="Work" tone="secondary" onPress={() => setInspecting(true)} />
69 ) : null}
70 {props.onOpenParent ? (
71 <Button label="Open parent" tone="secondary" onPress={props.onOpenParent} />
72 ) : null}
73 {props.inspect && inspecting ? (
74 <NativeChildWorkSheet {...props.inspect} onClose={() => setInspecting(false)} />
75 ) : null}
76 </View>
77 );
78}