import { DEFAULT_TERMINAL_ID, type EnvironmentId, type ThreadId } from "@t3tools/contracts";import { SymbolView } from "expo-symbols";import { memo, useCallback, useEffect, useRef, useState } from "react";import { Pressable, View } from "react-native"; import { AppText as Text } from "../../components/AppText";import { getEnvironmentClient } from "../../state/environment-session-registry";import {  attachTerminalSession,  useTerminalSession,  useTerminalSessionTarget,} from "../../state/use-terminal-session";import { TerminalSurface } from "./NativeTerminalSurface";import { hasNativeTerminalSurface } from "./nativeTerminalModule";import { terminalDebugLog } from "./terminalDebugLog"; interface ThreadTerminalPanelProps {  readonly environmentId: EnvironmentId;  readonly threadId: ThreadId;  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 nativeTerminalAvailable = hasNativeTerminalSurface();  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 lastGridSizeRef = useRef(lastGridSize);  lastGridSizeRef.current = lastGridSize;   const terminalKey = `${props.environmentId}:${props.threadId}:${terminalId}`;  const isRunning = terminal.status === "running" || terminal.status === "starting";   useEffect(() => {    if (!props.visible) {      return;    }     const client = getEnvironmentClient(props.environmentId);    if (!client) {      terminalDebugLog("panel:attach-skip", {        reason: "no-environment-client",        environmentId: props.environmentId,      });      return;    }     terminalDebugLog("panel:attach", {      environmentId: props.environmentId,      threadId: props.threadId,      terminalId,    });     return attachTerminalSession({      environmentId: props.environmentId,      client,      terminal: {        threadId: props.threadId,        terminalId,        cwd: props.cwd,        worktreePath: props.worktreePath,        cols: lastGridSizeRef.current.cols,        rows: lastGridSizeRef.current.rows,      },    });  }, [    props.cwd,    props.environmentId,    props.threadId,    props.worktreePath,    props.visible,    terminalId,  ]);   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}>            {nativeTerminalAvailable ? "Native Ghostty surface" : "Text fallback active"}          </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>  );});