import type {  EnvironmentScopedProjectShell,  EnvironmentScopedThreadShell,  VcsStatusState,} from "@t3tools/client-runtime";import { SymbolView } from "expo-symbols";import { useCallback, useMemo, useState } from "react";import { ActivityIndicator, Pressable, ScrollView, View } from "react-native";import * as Arr from "effect/Array";import * as Order from "effect/Order";import { useThemeColor } from "../../lib/useThemeColor"; import { AppText as Text } from "../../components/AppText";import { EmptyState } from "../../components/EmptyState";import { ProjectFavicon } from "../../components/ProjectFavicon";import type { SavedRemoteConnection } from "../../lib/connection";import { scopedProjectKey } from "../../lib/scopedEntities";import { relativeTime } from "../../lib/time";import type { RemoteCatalogState } from "../../state/use-remote-catalog";import { useVcsStatus } from "../../state/use-vcs-status";import { threadStatusTone } from "../threads/threadPresentation"; /* ─── Types ──────────────────────────────────────────────────────────── */ interface HomeScreenProps {  readonly projects: ReadonlyArray<EnvironmentScopedProjectShell>;  readonly threads: ReadonlyArray<EnvironmentScopedThreadShell>;  readonly catalogState: RemoteCatalogState;  readonly savedConnectionsById: Readonly<Record<string, SavedRemoteConnection>>;  readonly searchQuery: string;  readonly onAddConnection: () => void;  readonly onSelectThread: (thread: EnvironmentScopedThreadShell) => void;} interface ProjectGroup {  readonly key: string;  readonly project: EnvironmentScopedProjectShell;  readonly threads: ReadonlyArray<EnvironmentScopedThreadShell>;} const projectGroupActivityOrder = Order.mapInput(  Order.Struct({    activityAt: Order.flip(Order.Number),  }),  (group: ProjectGroup) => ({    activityAt: new Date(group.threads[0]!.updatedAt ?? group.threads[0]!.createdAt).getTime(),  }),); /* ─── Status indicator colors ────────────────────────────────────────── */ function statusColors(thread: EnvironmentScopedThreadShell): { bg: string; fg: string } {  switch (thread.session?.status) {    case "running":      return { bg: "rgba(249,115,22,0.14)", fg: "#f97316" };    case "ready":      return { bg: "rgba(34,197,94,0.14)", fg: "#22c55e" };    case "starting":      return { bg: "rgba(59,130,246,0.14)", fg: "#3b82f6" };    case "error":      return { bg: "rgba(239,68,68,0.14)", fg: "#ef4444" };    default:      return { bg: "rgba(163,163,163,0.10)", fg: "#a3a3a3" };  }} const COLLAPSED_THREAD_LIMIT = 6; function deriveEmptyState(props: {  readonly catalogState: RemoteCatalogState;  readonly projectCount: number;}): { readonly title: string; readonly detail: string; readonly loading: boolean } {  const { catalogState } = props;  if (catalogState.isLoadingSavedConnections) {    return {      title: "Loading environments",      detail: "Checking saved environments on this device.",      loading: true,    };  }   if (!catalogState.hasSavedConnections) {    return {      title: "No environments connected",      detail: "Add an environment to load projects and start coding sessions.",      loading: false,    };  }   if (catalogState.connectionState === "disconnected" && !catalogState.hasLoadedShellSnapshot) {    return {      title: "Environment unavailable",      detail:        catalogState.connectionError ??        "The saved environment is offline. Check the URL or start the environment, then retry.",      loading: false,    };  }   if (    catalogState.hasConnectingEnvironment &&    !catalogState.hasLoadedShellSnapshot &&    catalogState.connectionError === null  ) {    return {      title: "Connecting to environment",      detail: "Loading projects and threads from the saved environment.",      loading: true,    };  }   if (props.projectCount === 0 && catalogState.hasLoadedShellSnapshot) {    return {      title: "No projects found",      detail: "The connected environment did not report any projects.",      loading: false,    };  }   return {    title: "No threads yet",    detail: "Create a task to start a new coding session in one of your connected projects.",    loading: false,  };} /* ─── Project group header ───────────────────────────────────────────── */ function ProjectGroupLabel(props: {  readonly project: EnvironmentScopedProjectShell;  readonly totalThreadCount: number;  readonly httpBaseUrl: string | null;  readonly bearerToken: string | null;  readonly isExpanded: boolean;  readonly onToggleExpand: () => void;}) {  const hiddenCount = props.totalThreadCount - COLLAPSED_THREAD_LIMIT;   return (    <View className="flex-row items-center gap-2.5 px-1 pb-2">      <ProjectFavicon        size={18}        projectTitle={props.project.title}        httpBaseUrl={props.httpBaseUrl}        workspaceRoot={props.project.workspaceRoot}        bearerToken={props.bearerToken}      />      <Text        className="flex-1 text-[13px] font-t3-bold uppercase text-foreground-muted"        style={{ letterSpacing: 0.6 }}        numberOfLines={1}      >        {props.project.title}      </Text>       {hiddenCount > 0 ? (        <Pressable onPress={props.onToggleExpand} hitSlop={8}>          <Text            className="text-[13px] font-t3-bold text-foreground-muted"            style={{ letterSpacing: 0.6 }}          >            {props.isExpanded ? "Show less" : `${hiddenCount} more`}          </Text>        </Pressable>      ) : null}    </View>  );} /* ─── Git summary line ──────────────────────────────────────────────── */ function gitSummaryParts(gitStatus: VcsStatusState): ReadonlyArray<string> {  if (!gitStatus.data) return [];  const { data } = gitStatus;  const parts: string[] = [];  if (data.hasWorkingTreeChanges) {    parts.push(`${data.workingTree.files.length} changed`);  }  if (data.aheadCount > 0) parts.push(`${data.aheadCount} ahead`);  if (data.behindCount > 0) parts.push(`${data.behindCount} behind`);  if (data.pr?.state === "open") parts.push(`PR #${data.pr.number}`);  return parts;} /* ─── Thread row ─────────────────────────────────────────────────────── */ function ThreadRow(props: {  readonly thread: EnvironmentScopedThreadShell;  readonly projectCwd: string | null;  readonly onPress: () => void;  readonly isLast: boolean;}) {  const separatorColor = useThemeColor("--color-separator");  const { bg, fg } = statusColors(props.thread);  const tone = threadStatusTone(props.thread);  const timestamp = relativeTime(props.thread.updatedAt ?? props.thread.createdAt);  const branch = props.thread.branch;   // Subscribe to live git status — only when thread has a branch set.  // Threads sharing the same cwd share one WS subscription via ref-counting.  const cwd = branch ? (props.thread.worktreePath ?? props.projectCwd) : null;  const gitStatus = useVcsStatus({    environmentId: cwd ? props.thread.environmentId : null,    cwd,  });  const gitParts = gitSummaryParts(gitStatus);   return (    <Pressable onPress={props.onPress} style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}>      <View        style={{          flexDirection: "row",          paddingLeft: 16,          paddingRight: 16,          paddingVertical: 10,          gap: 12,          borderBottomWidth: props.isLast ? 0 : 1,          borderBottomColor: separatorColor,        }}      >        {/* Git status indicator */}        <View          style={{            width: 30,            height: 30,            borderRadius: 9,            backgroundColor: bg,            alignItems: "center",            justifyContent: "center",            marginTop: 2,          }}        >          <SymbolView name="arrow.triangle.branch" size={13} tintColor={fg} type="monochrome" />        </View>         {/* Content */}        <View style={{ flex: 1, gap: 3 }}>          {/* Title + Status + Timestamp */}          <View className="flex-row items-center justify-between gap-2">            <Text              className="flex-1 text-[15px] font-t3-bold leading-[20px] text-foreground"              numberOfLines={1}            >              {props.thread.title}            </Text>            <View className="flex-row items-center gap-2">              <View                className={tone.pillClassName}                style={{ borderRadius: 99, paddingHorizontal: 6, paddingVertical: 2 }}              >                <Text className={`text-[10px] font-t3-bold ${tone.textClassName}`}>                  {tone.label}                </Text>              </View>              <Text                className="text-[12px] text-foreground-tertiary"                style={{ fontVariant: ["tabular-nums"] }}              >                {timestamp}              </Text>            </View>          </View>           {/* Branch + git info */}          {branch ? (            <View className="flex-row items-center gap-1.5" style={{ marginTop: 1 }}>              <SymbolView                name="arrow.triangle.branch"                size={10}                tintColor="#737373"                type="monochrome"              />              <Text                className="text-[11px] text-foreground-tertiary"                numberOfLines={1}                style={{ fontFamily: "monospace" }}              >                {branch}              </Text>              {gitParts.length > 0 ? (                <Text className="text-[11px] text-foreground-tertiary">                  {" · " + gitParts.join(" · ")}                </Text>              ) : null}            </View>          ) : null}        </View>      </View>    </Pressable>  );} /* ─── Main screen ────────────────────────────────────────────────────── */ export function HomeScreen(props: HomeScreenProps) {  const [expandedProjects, setExpandedProjects] = useState<Set<string>>(() => new Set());  const accentColor = useThemeColor("--color-icon-muted");   const toggleExpanded = useCallback((key: string) => {    setExpandedProjects((prev) => {      const next = new Set(prev);      if (next.has(key)) next.delete(key);      else next.add(key);      return next;    });  }, []);   /* Build project title lookup for search */  const projectTitleByKey = useMemo(() => {    const map = new Map<string, string>();    for (const p of props.projects) {      map.set(scopedProjectKey(p.environmentId, p.id), p.title);    }    return map;  }, [props.projects]);   /* Filter threads by search query */  const filteredThreads = useMemo(() => {    const q = props.searchQuery.trim().toLowerCase();    if (!q) return props.threads;    return props.threads.filter((t) => {      if (t.title.toLowerCase().includes(q)) return true;      const key = scopedProjectKey(t.environmentId, t.projectId);      return projectTitleByKey.get(key)?.toLowerCase().includes(q) ?? false;    });  }, [props.threads, props.searchQuery, projectTitleByKey]);   /* Group filtered threads by project */  const projectGroups = useMemo<ReadonlyArray<ProjectGroup>>(() => {    const byProject = new Map<string, EnvironmentScopedThreadShell[]>();    for (const thread of filteredThreads) {      const key = scopedProjectKey(thread.environmentId, thread.projectId);      const existing = byProject.get(key);      if (existing) existing.push(thread);      else byProject.set(key, [thread]);    }     const groups: ProjectGroup[] = [];    for (const project of props.projects) {      const key = scopedProjectKey(project.environmentId, project.id);      const threads = byProject.get(key);      if (threads && threads.length > 0) {        groups.push({ key, project, threads });      }    }     return Arr.sort(groups, projectGroupActivityOrder);  }, [props.projects, filteredThreads]);   /* Empty states */  const hasAnyThreads = props.threads.length > 0;  const hasResults = filteredThreads.length > 0;  const emptyState = deriveEmptyState({    catalogState: props.catalogState,    projectCount: props.projects.length,  });   return (    <ScrollView      contentInsetAdjustmentBehavior="automatic"      showsVerticalScrollIndicator={false}      keyboardDismissMode="on-drag"      keyboardShouldPersistTaps="handled"      className="flex-1 bg-screen"      contentContainerStyle={{        paddingHorizontal: 16,        paddingTop: 8,        paddingBottom: 24,        gap: 20,      }}    >      {!hasAnyThreads ? (        <View>          <EmptyState            title={emptyState.title}            detail={emptyState.detail}            actionLabel={!props.catalogState.hasReadyEnvironment ? "Add environment" : undefined}            onAction={!props.catalogState.hasReadyEnvironment ? props.onAddConnection : undefined}          />          {emptyState.loading ? (            <View className="absolute right-5 top-5">              <ActivityIndicator color={accentColor} />            </View>          ) : null}        </View>      ) : !hasResults ? (        <EmptyState title="No results" detail={`No threads matching "${props.searchQuery}".`} />      ) : (        projectGroups.map((group) => {          const connection = props.savedConnectionsById[group.project.environmentId];          const isExpanded = expandedProjects.has(group.key);          const visibleThreads = isExpanded            ? group.threads            : group.threads.slice(0, COLLAPSED_THREAD_LIMIT);           return (            <View key={group.key}>              <ProjectGroupLabel                project={group.project}                totalThreadCount={group.threads.length}                httpBaseUrl={connection?.httpBaseUrl ?? null}                bearerToken={connection?.bearerToken ?? null}                isExpanded={isExpanded}                onToggleExpand={() => toggleExpanded(group.key)}              />              <View                className="overflow-hidden rounded-[20px] bg-card"                style={{ borderCurve: "continuous" }}              >                {visibleThreads.map((thread, i) => (                  <ThreadRow                    key={`${thread.environmentId}:${thread.id}`}                    thread={thread}                    projectCwd={group.project.workspaceRoot}                    onPress={() => props.onSelectThread(thread)}                    isLast={i === visibleThreads.length - 1}                  />                ))}              </View>            </View>          );        })      )}    </ScrollView>  );}