import { DEFAULT_TERMINAL_ID } from "@t3tools/contracts";import { SymbolView } from "expo-symbols";import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";import { Pressable, View } from "react-native"; import { AppText as Text } from "../../components/AppText";import { getEnvironmentClient } from "../../state/use-remote-environment-registry";import { useTerminalSession, useTerminalSessionTarget } from "../../state/use-terminal-session";import {  hasNativeTerminalSurface,  TerminalSurface,} from "../../native/terminal/NativeTerminalSurface"; interface ThreadTerminalPanelProps {  readonly environmentId: string;  readonly threadId: string;  readonly cwd: string;  readonly worktreePath: string | null;  readonly visible: boolean;  readonly onClose: () => void;} const DEFAULT_TERMINAL_COLS = 80;const DEFAULT_TERMINAL_ROWS = 24; export const ThreadTerminalPanel = memo(function ThreadTerminalPanel(  props: ThreadTerminalPanelProps,) {  const terminalId = DEFAULT_TERMINAL_ID;  const target = useTerminalSessionTarget({    environmentId: props.environmentId,    threadId: props.threadId,    terminalId,  });  const terminal = useTerminalSession(target);  const [lastGridSize, setLastGridSize] = useState({    cols: DEFAULT_TERMINAL_COLS,    rows: DEFAULT_TERMINAL_ROWS,  });  const hasOpenedRef = useRef(false);   const terminalKey = useMemo(    () => `${props.environmentId}:${props.threadId}:${terminalId}`,    [props.environmentId, props.threadId, terminalId],  );  const isRunning = terminal.status === "running" || terminal.status === "starting";   useEffect(() => {    hasOpenedRef.current = false;  }, [terminalKey]);   const openTerminal = useCallback(async () => {    const client = getEnvironmentClient(props.environmentId);    if (!client) {      return;    }     await client.terminal.open({      threadId: props.threadId,      terminalId,      cwd: props.cwd,      worktreePath: props.worktreePath,      cols: lastGridSize.cols,      rows: lastGridSize.rows,    });  }, [    lastGridSize.cols,    lastGridSize.rows,    props.cwd,    props.environmentId,    props.threadId,    props.worktreePath,    terminalId,  ]);   useEffect(() => {    if (!props.visible || hasOpenedRef.current || terminal.status !== "closed") {      return;    }     hasOpenedRef.current = true;    void openTerminal().catch(() => {      hasOpenedRef.current = false;    });  }, [openTerminal, props.visible, terminal.status]);   const handleInput = useCallback(    (data: string) => {      const client = getEnvironmentClient(props.environmentId);      if (!client || !isRunning) {        return;      }       void client.terminal.write({        threadId: props.threadId,        terminalId,        data,      });    },    [isRunning, props.environmentId, props.threadId, terminalId],  );   const handleResize = useCallback(    (size: { readonly cols: number; readonly rows: number }) => {      if (size.cols === lastGridSize.cols && size.rows === lastGridSize.rows) {        return;      }       setLastGridSize(size);      const client = getEnvironmentClient(props.environmentId);      if (!client || !isRunning) {        return;      }       void client.terminal.resize({        threadId: props.threadId,        terminalId,        cols: size.cols,        rows: size.rows,      });    },    [      isRunning,      lastGridSize.cols,      lastGridSize.rows,      props.environmentId,      props.threadId,      terminalId,    ],  );   if (!props.visible) {    return null;  }   return (    <View className="absolute inset-x-3 bottom-28 top-28 overflow-hidden rounded-[8px] border border-white/10 bg-neutral-950 shadow-2xl">      <View className="flex-row items-center justify-between border-b border-white/10 px-3 py-2">        <View className="min-w-0 flex-1">          <Text className="font-t3-bold text-[13px] text-neutral-100" numberOfLines={1}>            Terminal          </Text>          <Text className="text-[11px] text-neutral-500" numberOfLines={1}>            {hasNativeTerminalSurface ? "Native Ghostty surface" : "Native surface pending link"}          </Text>        </View>        <View className="flex-row items-center gap-2">          {terminal.error ? (            <Text className="max-w-44 text-right text-[11px] text-red-300" numberOfLines={1}>              {terminal.error}            </Text>          ) : null}          <Pressable            className="h-8 w-8 items-center justify-center rounded-[8px] bg-white/10"            onPress={props.onClose}          >            <SymbolView name="xmark" size={13} tintColor="#e5e5e5" type="monochrome" />          </Pressable>        </View>      </View>      <TerminalSurface        terminalKey={terminalKey}        buffer={terminal.buffer}        isRunning={isRunning}        onInput={handleInput}        onResize={handleResize}        style={{ flex: 1 }}      />    </View>  );});