feat(app): checkout diff pane styling and e2e test support

- Style diff file cards edge-to-edge with single divider between files
- Remove monospace font from filenames for better readability
- Add checkout-ship e2e test for app
- Export Page type from e2e fixtures
- Add checkout query hooks for diff, status, and PR status

packages/app/src/hooks/use-checkout-diff-query.ts

@@ -0,0 +1,92 @@
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect } from "react";
+import { UnistylesRuntime } from "react-native-unistyles";
+import { useSessionStore } from "@/stores/session-store";
+import { usePanelStore } from "@/stores/panel-store";
+import type { CheckoutDiffResponse } from "@server/shared/messages";
+
+const CHECKOUT_DIFF_STALE_TIME = 30_000;
+
+function checkoutDiffQueryKey(
+  serverId: string,
+  agentId: string,
+  mode: "uncommitted" | "base",
+  baseRef?: string
+) {
+  return ["checkoutDiff", serverId, agentId, mode, baseRef ?? ""] as const;
+}
+
+interface UseCheckoutDiffQueryOptions {
+  serverId: string;
+  agentId: string;
+  mode: "uncommitted" | "base";
+  baseRef?: string;
+  enabled?: boolean;
+}
+
+export type ParsedDiffFile = CheckoutDiffResponse["payload"]["files"][number];
+export type DiffHunk = ParsedDiffFile["hunks"][number];
+export type DiffLine = DiffHunk["lines"][number];
+export type HighlightToken = NonNullable<DiffLine["tokens"]>[number];
+
+export function useCheckoutDiffQuery({
+  serverId,
+  agentId,
+  mode,
+  baseRef,
+  enabled = true,
+}: UseCheckoutDiffQueryOptions) {
+  const queryClient = useQueryClient();
+  const client = useSessionStore(
+    (state) => state.sessions[serverId]?.client ?? null
+  );
+  const isConnected = useSessionStore(
+    (state) => state.sessions[serverId]?.connection.isConnected ?? false
+  );
+  const isMobile =
+    UnistylesRuntime.breakpoint === "xs" || UnistylesRuntime.breakpoint === "sm";
+  const mobileView = usePanelStore((state) => state.mobileView);
+  const desktopFileExplorerOpen = usePanelStore((state) => state.desktop.fileExplorerOpen);
+  const explorerTab = usePanelStore((state) => state.explorerTab);
+  const isOpen = isMobile ? mobileView === "file-explorer" : desktopFileExplorerOpen;
+
+  const query = useQuery({
+    queryKey: checkoutDiffQueryKey(serverId, agentId, mode, baseRef),
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Daemon client not available");
+      }
+      return await client.getCheckoutDiff(agentId, { mode, baseRef });
+    },
+    enabled: !!client && isConnected && !!agentId && enabled,
+    staleTime: CHECKOUT_DIFF_STALE_TIME,
+    refetchInterval: 10_000,
+  });
+
+  // Revalidate when sidebar opens with "changes" tab active
+  useEffect(() => {
+    if (!isOpen || explorerTab !== "changes" || !agentId) {
+      return;
+    }
+    queryClient.invalidateQueries({
+      queryKey: checkoutDiffQueryKey(serverId, agentId, mode, baseRef),
+    });
+  }, [isOpen, explorerTab, serverId, agentId, mode, baseRef, queryClient]);
+
+  const refresh = useCallback(() => {
+    return query.refetch();
+  }, [query]);
+
+  const payload = query.data ?? null;
+  const payloadError = payload?.error ?? null;
+
+  return {
+    files: payload?.files ?? [],
+    payloadError,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError || Boolean(payloadError),
+    error: query.error,
+    refresh,
+  };
+}

packages/app/src/hooks/use-checkout-pr-status-query.ts

@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query";
+import { useSessionStore } from "@/stores/session-store";
+import type { CheckoutPrStatusResponse } from "@server/shared/messages";
+
+const CHECKOUT_PR_STATUS_STALE_TIME = 20_000;
+
+function checkoutPrStatusQueryKey(serverId: string, agentId: string) {
+  return ["checkoutPrStatus", serverId, agentId] as const;
+}
+
+interface UseCheckoutPrStatusQueryOptions {
+  serverId: string;
+  agentId: string;
+  enabled?: boolean;
+}
+
+export type CheckoutPrStatusPayload = CheckoutPrStatusResponse["payload"];
+
+export function useCheckoutPrStatusQuery({
+  serverId,
+  agentId,
+  enabled = true,
+}: UseCheckoutPrStatusQueryOptions) {
+  const client = useSessionStore(
+    (state) => state.sessions[serverId]?.client ?? null
+  );
+  const isConnected = useSessionStore(
+    (state) => state.sessions[serverId]?.connection.isConnected ?? false
+  );
+
+  const query = useQuery({
+    queryKey: checkoutPrStatusQueryKey(serverId, agentId),
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Daemon client not available");
+      }
+      return await client.checkoutPrStatus(agentId);
+    },
+    enabled: !!client && isConnected && !!agentId && enabled,
+    staleTime: CHECKOUT_PR_STATUS_STALE_TIME,
+    refetchInterval: 15_000,
+  });
+
+  return {
+    status: query.data?.status ?? null,
+    payloadError: query.data?.error ?? null,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+    refresh: query.refetch,
+  };
+}

packages/app/src/hooks/use-checkout-status-query.ts

@@ -0,0 +1,47 @@
+import { useQuery } from "@tanstack/react-query";
+import { useSessionStore } from "@/stores/session-store";
+import type { CheckoutStatusResponse } from "@server/shared/messages";
+
+const CHECKOUT_STATUS_STALE_TIME = 15_000;
+
+function checkoutStatusQueryKey(serverId: string, agentId: string) {
+  return ["checkoutStatus", serverId, agentId] as const;
+}
+
+interface UseCheckoutStatusQueryOptions {
+  serverId: string;
+  agentId: string;
+}
+
+export type CheckoutStatusPayload = CheckoutStatusResponse["payload"];
+
+export function useCheckoutStatusQuery({ serverId, agentId }: UseCheckoutStatusQueryOptions) {
+  const client = useSessionStore(
+    (state) => state.sessions[serverId]?.client ?? null
+  );
+  const isConnected = useSessionStore(
+    (state) => state.sessions[serverId]?.connection.isConnected ?? false
+  );
+
+  const query = useQuery({
+    queryKey: checkoutStatusQueryKey(serverId, agentId),
+    queryFn: async () => {
+      if (!client) {
+        throw new Error("Daemon client not available");
+      }
+      return await client.getCheckoutStatus(agentId);
+    },
+    enabled: !!client && isConnected && !!agentId,
+    staleTime: CHECKOUT_STATUS_STALE_TIME,
+    refetchInterval: 10_000,
+  });
+
+  return {
+    status: query.data ?? null,
+    isLoading: query.isLoading,
+    isFetching: query.isFetching,
+    isError: query.isError,
+    error: query.error,
+    refresh: query.refetch,
+  };
+}