import * as Haptics from "expo-haptics";import { SymbolView } from "expo-symbols";import type { EnvironmentId, ThreadId } from "@t3tools/contracts";import { useNavigation } from "@react-navigation/native";import { useMemo, useState } from "react";import { Linking, Pressable, ScrollView, type ColorValue, View } from "react-native"; import { AppText as Text } from "../../components/AppText";import type { ThreadFeedActivity } from "../../lib/threadActivity";import { buildThreadActivityInspector } from "../../lib/threadActivityInspector";import { resolveWorkspaceRelativeFilePath } from "../files/filePath";import { threadEnvironment } from "../../state/threads";import { useAtomCommand } from "../../state/use-atom-command";import { useV2ItemSupport } from "../../state/v2-item-support";import { buildThreadActivityFileParams } from "./threadActivityFileNavigation"; export function ThreadActivityInspector(props: {  readonly activity: ThreadFeedActivity;  readonly currentThreadId: ThreadId;  readonly environmentId: EnvironmentId;  readonly iconColor: ColorValue;  readonly workspaceRoot?: string | null;}) {  const navigation = useNavigation();  const row = props.activity.projectedItem;  const support = useV2ItemSupport({    environmentId: props.environmentId,    sourceThreadId: row.sourceThreadId,    sourceItemId: row.sourceItemId,  });  const model = useMemo(    () => buildThreadActivityInspector(props.activity, support, props.currentThreadId),    [props.activity, props.currentThreadId, support],  );  const revertCheckpoint = useAtomCommand(threadEnvironment.revertCheckpoint, {    label: "checkpoint rollback",    reportFailure: true,  });  const [rollingBack, setRollingBack] = useState(false);   return (    <View className="gap-3">      <View className="flex-row flex-wrap gap-x-4 gap-y-2 rounded-lg border border-adaptive-neutral-300-a60-white-a12 bg-adaptive-black-a2p5-white-a2p5 p-2.5">        {model.fields.map((field) => (          <View key={`${field.label}:${field.value}`} className="min-w-[42%] flex-1 gap-0.5">            <Text className="font-t3-medium text-3xs uppercase tracking-wide text-foreground-muted opacity-60">              {field.label}            </Text>            <Text selectable className="text-2xs leading-4 text-foreground">              {field.value}            </Text>          </View>        ))}      </View>       {model.blocks.map((block) => (        <View key={`${block.label}:${block.value}`} className="gap-1">          <Text className="font-t3-medium text-3xs uppercase tracking-wide text-foreground-muted opacity-60">            {block.label}          </Text>          <ScrollView            nestedScrollEnabled            directionalLockEnabled            showsVerticalScrollIndicator            style={{ maxHeight: 240 }}            contentContainerStyle={{ paddingRight: 8 }}          >            <Text              selectable              className="text-2xs leading-[17px] text-foreground-muted"              style={block.monospaced ? { fontFamily: "ui-monospace" } : undefined}            >              {block.value}            </Text>          </ScrollView>        </View>      ))}       {model.fileLinks.length > 0 ? (        <View className="gap-1">          <Text className="font-t3-medium text-3xs uppercase tracking-wide text-foreground-muted opacity-60">            Files          </Text>          {model.fileLinks.map((link) => {            const relativePath =              resolveWorkspaceRelativeFilePath(props.workspaceRoot, link.path) ??              (link.path.startsWith("/") ? null : link.path);            return (              <Pressable                key={`${link.path}:${link.line ?? 0}:${link.label}`}                accessibilityRole={relativePath ? "link" : undefined}                disabled={relativePath === null}                onPress={() => {                  if (!relativePath) return;                  void Haptics.selectionAsync();                  navigation.navigate(                    "ThreadFile",                    buildThreadActivityFileParams({                      environmentId: props.environmentId,                      currentThreadId: props.currentThreadId,                      activitySourceThreadId: row.sourceThreadId,                      relativePath,                      line: link.line,                    }),                  );                }}                className="min-h-9 flex-row items-center gap-2 rounded-md border border-adaptive-neutral-300-a60-white-a12 px-2.5 py-1.5"              >                <SymbolView                  name="doc.text"                  size={13}                  tintColor={props.iconColor}                  type="monochrome"                />                <Text className="min-w-0 flex-1 text-2xs leading-4 text-foreground">                  {link.label}                </Text>              </Pressable>            );          })}        </View>      ) : null}       {model.webLinks.length > 0 ? (        <View className="gap-1">          <Text className="font-t3-medium text-3xs uppercase tracking-wide text-foreground-muted opacity-60">            Sources          </Text>          {model.webLinks.map((link) => (            <Pressable              key={link.url}              accessibilityRole="link"              onPress={() => void Linking.openURL(link.url)}              className="min-h-9 flex-row items-center gap-2 rounded-md border border-adaptive-neutral-300-a60-white-a12 px-2.5 py-1.5"            >              <SymbolView                name="arrow.up.right.square"                size={13}                tintColor={props.iconColor}                type="monochrome"              />              <Text className="min-w-0 flex-1 text-2xs leading-4 text-foreground">                {link.label}              </Text>            </Pressable>          ))}        </View>      ) : null}       {model.rollbackTarget ? (        <Pressable          accessibilityRole="button"          accessibilityLabel="Roll back to this checkpoint"          disabled={rollingBack}          onPress={() => {            setRollingBack(true);            void Haptics.selectionAsync();            void revertCheckpoint({              environmentId: props.environmentId,              input: {                threadId: model.rollbackTarget!.threadId,                checkpointId: model.rollbackTarget!.checkpointId,                scopeId: model.rollbackTarget!.scopeId,              },            }).finally(() => setRollingBack(false));          }}          className="min-h-10 flex-row items-center justify-center gap-2 rounded-lg border border-adaptive-neutral-300-a60-white-a12 px-3 py-2"        >          <SymbolView            name={rollingBack ? "hourglass" : "arrow.counterclockwise"}            size={14}            tintColor={props.iconColor}            type="monochrome"          />          <Text className="font-t3-medium text-xs text-foreground">            {rollingBack ? "Rolling back…" : "Roll back to checkpoint"}          </Text>        </Pressable>      ) : null}       <View className="gap-1 border-t border-adaptive-neutral-300-a60-white-a12 pt-2">        <Text className="font-t3-medium text-3xs uppercase tracking-wide text-foreground-muted opacity-60">          Structured details        </Text>        <ScrollView          nestedScrollEnabled          directionalLockEnabled          showsVerticalScrollIndicator          style={{ maxHeight: 280 }}          contentContainerStyle={{ paddingRight: 8 }}        >          <Text            selectable            className="text-2xs leading-[17px] text-foreground-muted"            style={{ fontFamily: "ui-monospace" }}          >            {model.structuredDetails}          </Text>        </ScrollView>      </View>    </View>  );}