import * as Haptics from "expo-haptics";import { SymbolView } from "expo-symbols";import { deriveThreadQueueWorkflowState } from "@t3tools/client-runtime/state/thread-workflows";import type { EnvironmentId, RunId, ThreadId } from "@t3tools/contracts";import { useMemo, useState } from "react";import { Pressable, ScrollView, View } from "react-native"; import { AppText as Text } from "../../components/AppText";import { useUniwindTheme } from "../../lib/useUniwindTheme";import { threadEnvironment } from "../../state/threads";import { useAtomCommand } from "../../state/use-atom-command";import { useThreadProjection } from "../../state/use-thread-detail";import {  buildCancelQueuedRunCommand,  resolveThreadQueueRowControls,} from "./threadQueueControlPresentation"; export function ThreadQueueControl(props: {  readonly environmentId: EnvironmentId;  readonly threadId: ThreadId;}) {  const scoped = useThreadProjection(props);  const workflow = useMemo(    () => (scoped ? deriveThreadQueueWorkflowState(scoped.projection) : null),    [scoped],  );  const reorder = useAtomCommand(threadEnvironment.reorderQueuedRun, "reorder queued message");  const promote = useAtomCommand(threadEnvironment.promoteQueuedRun, "promote queued message");  const cancel = useAtomCommand(threadEnvironment.cancelQueuedRun, "cancel queued message");  const [busyRunId, setBusyRunId] = useState<RunId | null>(null);  const theme = useUniwindTheme();  const iconColor = theme["--color-icon-subtle"];   if (!workflow || workflow.queuedRuns.length === 0) return null;   const move = async (runId: RunId, beforeRunId: RunId | null) => {    setBusyRunId(runId);    void Haptics.selectionAsync();    await reorder({      environmentId: props.environmentId,      input: { threadId: props.threadId, runId, beforeRunId },    });    setBusyRunId(null);  };   const steer = async (queuedRunId: RunId) => {    if (!workflow.activeRun || !workflow.canPromoteToSteer) return;    setBusyRunId(queuedRunId);    void Haptics.selectionAsync();    await promote({      environmentId: props.environmentId,      input: {        threadId: props.threadId,        queuedRunId,        targetRunId: workflow.activeRun.id,      },    });    setBusyRunId(null);  };   const dismiss = async (runId: RunId) => {    setBusyRunId(runId);    void Haptics.selectionAsync();    await cancel(      buildCancelQueuedRunCommand({        environmentId: props.environmentId,        runId,        threadId: props.threadId,      }),    );    setBusyRunId(null);  };   return (    <View className="mx-4 mb-3 overflow-hidden rounded-2xl border border-adaptive-neutral-300-a60-white-a12 bg-card">      <View className="flex-row items-center gap-2 border-b border-adaptive-neutral-300-a60-white-a12 px-3 py-2">        <SymbolView name="list.number" size={13} tintColor={iconColor} type="monochrome" />        <Text className="font-t3-medium text-xs text-foreground">Queue</Text>        <Text className="ml-auto text-2xs tabular-nums text-foreground-muted">          {workflow.queuedRuns.length}        </Text>      </View>      <ScrollView style={{ maxHeight: 156 }} contentContainerStyle={{ paddingVertical: 4 }}>        {workflow.queuedRuns.map(({ run, text }, index) => {          const controls = resolveThreadQueueRowControls({            busy: busyRunId !== null,            canPromoteToSteer: workflow.canPromoteToSteer,            canReorder: workflow.canReorder,            index,            queuedCount: workflow.queuedRuns.length,            text,          });           return (            <View key={run.id} className="min-h-11 flex-row items-center gap-1.5 px-2">              <Text className="w-5 text-right text-3xs tabular-nums text-foreground-muted">                {index + 1}              </Text>              <Text className="min-w-0 flex-1 text-xs text-foreground" numberOfLines={1}>                {controls.displayText}              </Text>              <Pressable                accessibilityRole="button"                accessibilityLabel="Move queued message up"                disabled={!controls.canMoveUp}                onPress={() => void move(run.id, workflow.queuedRuns[index - 1]?.run.id ?? null)}                className="h-9 w-9 items-center justify-center disabled:opacity-30"              >                <SymbolView name="arrow.up" size={13} tintColor={iconColor} type="monochrome" />              </Pressable>              <Pressable                accessibilityRole="button"                accessibilityLabel="Move queued message down"                disabled={!controls.canMoveDown}                onPress={() => void move(run.id, workflow.queuedRuns[index + 2]?.run.id ?? null)}                className="h-9 w-9 items-center justify-center disabled:opacity-30"              >                <SymbolView name="arrow.down" size={13} tintColor={iconColor} type="monochrome" />              </Pressable>              <Pressable                accessibilityRole="button"                accessibilityLabel="Promote queued message to steer"                disabled={!controls.canSteer}                onPress={() => void steer(run.id)}                className="min-h-8 flex-row items-center gap-1 rounded-lg border border-adaptive-neutral-300-a60-white-a12 px-2 disabled:opacity-30"              >                <SymbolView                  name="arrow.turn.left.up"                  size={12}                  tintColor={iconColor}                  type="monochrome"                />                <Text className="font-t3-medium text-2xs text-foreground">Steer</Text>              </Pressable>              <Pressable                accessibilityRole="button"                accessibilityLabel={controls.dismissAccessibilityLabel}                disabled={!controls.canDismiss}                onPress={() => void dismiss(run.id)}                className="h-9 w-9 items-center justify-center disabled:opacity-30"              >                <SymbolView name="xmark" size={13} tintColor={iconColor} type="monochrome" />              </Pressable>            </View>          );        })}      </ScrollView>    </View>  );}