feat(mobile): PR 5c — kilo-chat UI components

apps/mobile/.env

@@ -5,3 +5,5 @@ CLOUD_AGENT_WS_URL=wss://cloud-agent-next.kilosessions.ai
 SESSION_INGEST_WS_URL=wss://ingest.kilosessions.ai
 APPSFLYER_DEV_KEY=jnoVs6KzXanpbKrqXckPu9
 APPSFLYER_APP_ID=6761193135
+EXPO_PUBLIC_KILO_CHAT_URL=https://kilo-chat.kilosessions.ai
+EXPO_PUBLIC_EVENT_SERVICE_URL=wss://event-service.kilosessions.ai

apps/mobile/package.json

@@ -32,6 +32,7 @@
     "@rn-primitives/portal": "^1.3.0",
     "@rn-primitives/slot": "^1.2.0",
     "@sentry/react-native": "~7.11.0",
+    "@shopify/flash-list": "2.0.2",
     "@tailwindcss/postcss": "^4.2.2",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",

apps/mobile/src/components/kilo-chat/conversation-header.tsx

@@ -0,0 +1,15 @@
+import { ScreenHeader } from '@/components/screen-header';
+import { Text } from '@/components/ui/text';
+
+type Props = { title: string; subtitle?: string };
+
+export function ConversationHeader({ title, subtitle }: Props) {
+  return (
+    <ScreenHeader
+      title={title}
+      headerRight={
+        subtitle ? <Text className="text-sm text-muted-foreground">{subtitle}</Text> : undefined
+      }
+    />
+  );
+}

apps/mobile/src/components/kilo-chat/conversation-list-screen.tsx

@@ -0,0 +1,126 @@
+import { FlashList } from '@shopify/flash-list';
+import { type Href, useRouter } from 'expo-router';
+import { Pressable, View } from 'react-native';
+import Animated, { FadeIn } from 'react-native-reanimated';
+
+import { ScreenHeader } from '@/components/screen-header';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Text } from '@/components/ui/text';
+import { timeAgo } from '@/lib/utils';
+
+import { EmptyConversationList } from './empty-conversation-list';
+import { useKiloChatClient } from './hooks/use-kilo-chat-client';
+import { useConversations, useCreateConversation } from './hooks/use-conversations';
+import { useInstanceEventSubscription } from './hooks/use-instance-event-subscription';
+import { useInstancePresence } from './hooks/use-instance-presence';
+
+type Props = {
+  sandboxId: string;
+  sandboxLabel: string;
+};
+
+type ConversationItem = {
+  conversationId: string;
+  title: string | null;
+  lastActivityAt: number | null;
+  lastReadAt: number | null;
+  joinedAt: number;
+};
+
+type ConversationRowProps = {
+  item: ConversationItem;
+  onPress: (id: string) => void;
+};
+
+function ConversationRow({ item, onPress }: ConversationRowProps) {
+  const hasUnread =
+    item.lastActivityAt !== null &&
+    (item.lastReadAt === null || item.lastReadAt < item.lastActivityAt);
+
+  return (
+    <Pressable
+      className="flex-row items-center gap-3 px-4 py-3 active:opacity-80"
+      onPress={() => {
+        onPress(item.conversationId);
+      }}
+    >
+      <View className="flex-1">
+        <Text className="text-base font-medium text-foreground" numberOfLines={1}>
+          {item.title ?? 'Untitled conversation'}
+        </Text>
+        {item.lastActivityAt !== null ? (
+          <Text className="mt-0.5 text-sm text-muted-foreground">
+            {timeAgo(new Date(item.lastActivityAt))}
+          </Text>
+        ) : null}
+      </View>
+      {hasUnread ? (
+        <View className="h-2.5 w-2.5 rounded-full bg-primary" accessibilityLabel="Unread" />
+      ) : (
+        // Reserve space so rows stay the same width whether the dot is shown or not
+        <View className="h-2.5 w-2.5" />
+      )}
+    </Pressable>
+  );
+}
+
+export function ConversationListScreen({ sandboxId, sandboxLabel }: Props) {
+  const router = useRouter();
+  const client = useKiloChatClient();
+  const listQuery = useConversations(client, sandboxId);
+  const createConversation = useCreateConversation(client);
+
+  const conversations = listQuery.data?.conversations ?? [];
+  const isFetchingNextPage = listQuery.isFetchingNextPage;
+  const fetchNextPage = listQuery.fetchNextPage;
+
+  useInstanceEventSubscription(sandboxId);
+  useInstancePresence(sandboxId);
+
+  function handleRowPress(conversationId: string) {
+    // Route lands in PR 5d (Task 47)
+    router.push(`/(app)/chat/${sandboxId}/${conversationId}` as Href);
+  }
+
+  function handleCreateAndNavigate() {
+    createConversation.mutate(
+      { sandboxId },
+      {
+        onSuccess: result => {
+          // Route lands in PR 5d (Task 47)
+          router.push(`/(app)/chat/${sandboxId}/${result.conversationId}` as Href);
+        },
+      }
+    );
+  }
+
+  return (
+    <View className="flex-1">
+      <ScreenHeader title={sandboxLabel} />
+      <Animated.View entering={FadeIn.duration(200)} className="flex-1">
+        <FlashList
+          data={conversations}
+          keyExtractor={c => c.conversationId}
+          renderItem={({ item }) => <ConversationRow item={item} onPress={handleRowPress} />}
+          ListEmptyComponent={
+            <EmptyConversationList
+              onStart={handleCreateAndNavigate}
+              isStarting={createConversation.isPending}
+            />
+          }
+          ListFooterComponent={
+            isFetchingNextPage ? (
+              <View className="px-4 py-3">
+                <Skeleton className="h-12 w-full rounded-md" />
+              </View>
+            ) : null
+          }
+          onEndReached={() => {
+            void fetchNextPage();
+          }}
+          onEndReachedThreshold={0.5}
+        />
+      </Animated.View>
+    </View>
+  );
+}

apps/mobile/src/components/kilo-chat/conversation-screen.tsx

@@ -0,0 +1,72 @@
+import * as Crypto from 'expo-crypto';
+import { useCallback } from 'react';
+import { KeyboardAvoidingView, Platform, View } from 'react-native';
+import { useFocusEffect } from 'expo-router';
+
+import { ConversationHeader } from './conversation-header';
+import { MessageInput } from './message-input';
+import { MessageList } from './message-list';
+import { TypingIndicator } from './typing-indicator';
+import { useConversationPresence } from './hooks/use-conversation-presence';
+import { useKiloChatClient } from './hooks/use-kilo-chat-client';
+import { useMarkRead } from './hooks/use-mark-read';
+import { useMessages, useSendMessage } from './hooks/use-messages';
+import { useCurrentUserId } from './hooks/use-current-user-id';
+
+type Props = { sandboxId: string; conversationId: string; conversationTitle: string };
+
+export function ConversationScreen({ sandboxId, conversationId, conversationTitle }: Props) {
+  const client = useKiloChatClient();
+  const currentUserId = useCurrentUserId();
+
+  const messagesQuery = useMessages(client, conversationId);
+  const messages = messagesQuery.data?.messages ?? [];
+  const hasOlder = messagesQuery.hasNextPage;
+  const fetchOlder = useCallback(() => {
+    if (messagesQuery.hasNextPage && !messagesQuery.isFetchingNextPage) {
+      void messagesQuery.fetchNextPage();
+    }
+  }, [messagesQuery]);
+
+  const sendMutation = useSendMessage(client, conversationId, currentUserId ?? '');
+  const handleSend = useCallback(
+    (text: string) => {
+      sendMutation.mutate({
+        conversationId,
+        content: [{ type: 'text', text }],
+        clientId: Crypto.randomUUID(),
+      });
+    },
+    [sendMutation, conversationId]
+  );
+
+  useConversationPresence(sandboxId, conversationId);
+
+  const markRead = useMarkRead();
+  useFocusEffect(
+    useCallback(() => {
+      markRead(sandboxId, conversationId);
+      // Active-conversation suppression wiring added in PR 5d (Task 50).
+    }, [sandboxId, conversationId, markRead])
+  );
+
+  return (
+    <View className="flex-1">
+      <ConversationHeader title={conversationTitle} />
+      <KeyboardAvoidingView
+        className="flex-1"
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <MessageList
+          messages={messages}
+          conversationId={conversationId}
+          currentUserId={currentUserId}
+          fetchOlder={fetchOlder}
+          hasOlder={hasOlder}
+        />
+        <TypingIndicator isTyping={false} />
+        <MessageInput onSend={handleSend} disabled={sendMutation.isPending} />
+      </KeyboardAvoidingView>
+    </View>
+  );
+}

apps/mobile/src/components/kilo-chat/empty-conversation-list.tsx

@@ -0,0 +1,28 @@
+import { MessageSquarePlus } from 'lucide-react-native';
+import { View } from 'react-native';
+
+import { EmptyState } from '@/components/empty-state';
+import { Button } from '@/components/ui/button';
+import { Text } from '@/components/ui/text';
+
+type Props = {
+  onStart: () => void;
+  isStarting: boolean;
+};
+
+export function EmptyConversationList({ onStart, isStarting }: Props) {
+  return (
+    <View className="flex-1 items-center justify-center px-6">
+      <EmptyState
+        icon={MessageSquarePlus}
+        title="No conversations yet"
+        description="Start your first conversation with the agent."
+        action={
+          <Button onPress={onStart} disabled={isStarting}>
+            <Text>{isStarting ? 'Starting…' : 'Start a conversation'}</Text>
+          </Button>
+        }
+      />
+    </View>
+  );
+}