1import {
2 ComposerContextId,
3 COMPOSER_CONTEXT_TERMINAL_TEXT_MAX_CHARS,
4 type EnvironmentId,
5 type ThreadId,
6} from "@t3tools/contracts";
7import { formatComposerContextReference } from "@t3tools/shared/composerContextReferences";
8import { useState } from "react";
9import { Alert, Platform, Pressable, ScrollView, View } from "react-native";
10import { useSafeAreaInsets } from "react-native-safe-area-context";
11import { REVIEW_MONO_FONT_FAMILY } from "../review/reviewDiffRendering";
12import { AppText as Text } from "../../components/AppText";
13import { AppSheet } from "../../components/AppSheet";
14import { MaterialButton } from "../../components/MaterialButton";
15import { uuidv4 } from "../../lib/uuid";
16import { insertComposerDraftContext } from "../../state/use-composer-drafts";
17
18/** Line numbers are relative to this frozen viewport, not the terminal's scrollback. */
19export function TerminalContextSheet(props: {
20 text: string;
21 environmentId: EnvironmentId;
22 threadId: ThreadId;
23 terminalId: string;
24 terminalLabel: string;
25 onClose: () => void;
26 onAttach: () => void;
27}) {
28 const insets = useSafeAreaInsets();
29 const lines = props.text.replace(/\n+$/, "").split("\n");
30 const [range, setRange] = useState({ start: 0, end: lines.length - 1 });
31 const [anchor, setAnchor] = useState<number | null>(null);
32 const selectedText = lines.slice(range.start, range.end + 1).join("\n");
33 const tooLarge = selectedText.length > COMPOSER_CONTEXT_TERMINAL_TEXT_MAX_CHARS;
34 const attach = () => {
35 if (!selectedText.trim() || tooLarge) return;
36 const record = {
37 version: 1 as const,
38 kind: "terminal" as const,
39 contextId: ComposerContextId.make(uuidv4()),
40 label: `${props.terminalLabel} · visible lines ${range.start + 1}–${range.end + 1}`,
41 terminalId: props.terminalId,
42 terminalLabel: `${props.terminalLabel} (visible output)`,
43 lineStart: range.start + 1,
44 lineEnd: range.end + 1,
45 text: selectedText,
46 };
47 if (
48 !insertComposerDraftContext(`${props.environmentId}:${props.threadId}`, {
49 text: formatComposerContextReference(record),
50 context: { version: 1, records: [record] },
51 })
52 ) {
53 Alert.alert("Too many context items", "Remove some context from the draft and try again.");
54 return;
55 }
56 props.onAttach();
57 };
58 return (
59 <AppSheet title="Terminal output" onClose={props.onClose}>
60 <ScrollView
61 className="flex-1"
62 contentInsetAdjustmentBehavior={Platform.OS === "ios" ? "automatic" : "never"}
63 contentContainerStyle={{ paddingHorizontal: 20, paddingTop: 12, paddingBottom: 20 }}
64 >
65 <Text className="pb-4 text-sm text-foreground-muted">
66 Tap the first and last line to select a range.
67 </Text>
68 <View className="overflow-hidden rounded-xl bg-card-alt">
69 {lines.map((line, index) => (
70 <Pressable
71 key={index}
72 accessibilityRole="button"
73 accessibilityLabel={`Line ${index + 1}: ${line}`}
74 accessibilityState={{ selected: index >= range.start && index <= range.end }}
75 onPress={() => {
76 if (anchor === null) {
77 setAnchor(index);
78 setRange({ start: index, end: index });
79 } else {
80 setRange({ start: Math.min(anchor, index), end: Math.max(anchor, index) });
81 setAnchor(null);
82 }
83 }}
84 className={
85 index >= range.start && index <= range.end
86 ? "flex-row gap-3 bg-primary/10 px-3 py-2"
87 : "flex-row gap-3 px-3 py-2"
88 }
89 >
90 <Text
91 className="w-8 text-right text-sm text-foreground-muted"
92 style={{ fontFamily: REVIEW_MONO_FONT_FAMILY }}
93 >
94 {index + 1}
95 </Text>
96 <Text
97 className="flex-1 text-sm text-foreground"
98 style={{ fontFamily: REVIEW_MONO_FONT_FAMILY }}
99 >
100 {line || " "}
101 </Text>
102 </Pressable>
103 ))}
104 </View>
105 </ScrollView>
106 <View
107 className="gap-3 border-t border-border px-5 pt-4"
108 style={{ paddingBottom: Math.max(16, insets.bottom) }}
109 >
110 {tooLarge ? (
111 <Text className="text-sm text-foreground-muted">
112 Select fewer lines to fit the context limit.
113 </Text>
114 ) : null}
115 <MaterialButton
116 label="Attach selected output"
117 tone="primary"
118 fullWidth
119 disabled={!selectedText.trim() || tooLarge}
120 onPress={attach}
121 />
122 </View>
123 </AppSheet>
124 );
125}