feat(kilo-app): add KiloClaw chat with Stream Chat

kilo-app/AGENTS.md

@@ -2,7 +2,7 @@
 
 ## What This Is
 
-Kilo App is an Expo (React Native) mobile application using Expo Router for file-based routing. It lives as a subpackage (`kilo-app/`) in the `cloud` monorepo. **This app targets iOS and Android only — never web.** Do not add `Platform.select({ web: ... })` patterns or web-specific code.
+Kilo App is an Expo (React Native) mobile application using Expo Router for file-based routing. It lives as a subpackage (`kilo-app/`) in the `cloud` monorepo. **This app targets iOS and Android only — never web.** Do not add `Platform.select({ web: ... })` patterns or web-specific code. **We use dev builds, not Expo Go.**
 
 ## Tech Stack
 

kilo-app/app.config.js

@@ -1,6 +1,6 @@
 /** @type {import('expo/config').ExpoConfig} */
 const config = {
-  name: 'Kilo',
+  name: 'KiloClaw',
   owner: 'kilocode',
   slug: 'kilo-app',
   version: '1.0.0',
@@ -59,6 +59,8 @@ const config = {
         imageWidth: 100,
       },
     ],
+    'react-native-share',
+    'react-native-video',
   ],
   experiments: {
     typedRoutes: true,

kilo-app/eas.json

@@ -18,6 +18,9 @@
     "production": {
       "android": {
         "track": "internal"
+      },
+      "ios": {
+        "ascAppId": "6761193135"
       }
     }
   }

kilo-app/knip.json

@@ -7,7 +7,9 @@
     "expo-system-ui",
     "postcss",
     "eslint-plugin-sonarjs",
-    "@sentry/cli"
+    "@sentry/cli",
+    "@react-native-community/netinfo",
+    "react-native-nitro-modules"
   ],
   "ignoreBinaries": ["oxfmt", "oxlint"],
   "ignore": ["src/components/ui/**"],

kilo-app/package.json

@@ -20,9 +20,14 @@
   },
   "dependencies": {
     "@kilocode/trpc": "workspace:*",
+    "@react-native-camera-roll/camera-roll": "^7.10.2",
+    "@react-native-clipboard/clipboard": "^1.16.3",
+    "@react-native-community/netinfo": "11.5.2",
+    "@react-native-documents/picker": "^12.0.1",
     "@rn-primitives/portal": "^1.3.0",
     "@rn-primitives/slot": "^1.2.0",
     "@sentry/react-native": "~7.11.0",
+    "@stream-io/flat-list-mvcp": "^0.10.3",
     "@tailwindcss/postcss": "^4.2.1",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
@@ -48,14 +53,23 @@
     "nativewind": "5.0.0-preview.3",
     "react": "19.2.0",
     "react-native": "0.83.2",
+    "react-native-blob-util": "^0.24.7",
     "react-native-css": "3.0.5",
     "react-native-gesture-handler": "~2.30.0",
+    "react-native-haptic-feedback": "^2.3.4",
+    "react-native-image-picker": "^8.2.1",
+    "react-native-nitro-modules": "^0.35.2",
+    "react-native-nitro-sound": "^0.2.12",
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "~5.6.2",
     "react-native-screens": "~4.23.0",
+    "react-native-share": "^12.2.6",
     "react-native-svg": "15.15.3",
+    "react-native-video": "^6.19.1",
     "react-native-worklets": "0.7.2",
     "sonner-native": "^0.23.1",
+    "stream-chat": "^9.38.0",
+    "stream-chat-react-native": "^8.13.7",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.1"
   },

kilo-app/src/app/(app)/(tabs)/(1_kiloclaw)/[instance-id]/index.tsx

@@ -1,23 +1,17 @@
 import { useLocalSearchParams } from 'expo-router';
-import { MessageSquare } from 'lucide-react-native';
 import { View } from 'react-native';
 
-import { EmptyState } from '@/components/empty-state';
-import { ScreenHeader } from '@/components/screen-header';
+import { KiloClawChat } from '@/components/kiloclaw/chat';
+import { useKiloClawStatus } from '@/lib/hooks/use-kiloclaw';
 
 export default function ChatScreen() {
   const { 'instance-id': instanceId } = useLocalSearchParams<{ 'instance-id': string }>();
+  const { data: status } = useKiloClawStatus();
+  const isRunning = status?.status === 'running';
 
   return (
     <View className="flex-1 bg-background">
-      <ScreenHeader title="Chat" />
-      <View className="flex-1 items-center justify-center px-6">
-        <EmptyState
-          icon={MessageSquare}
-          title="Chat coming soon"
-          description={`Instance: ${instanceId}`}
-        />
-      </View>
+      <KiloClawChat instanceId={instanceId} enabled={isRunning} />
     </View>
   );
 }

kilo-app/src/components/kiloclaw/chat.tsx

@@ -0,0 +1,268 @@
+import { useCallback, useEffect, useState } from 'react';
+import { ActivityIndicator, Pressable, View } from 'react-native';
+import { useQueryClient } from '@tanstack/react-query';
+import { type Href, useRouter } from 'expo-router';
+import { Settings } from 'lucide-react-native';
+import { type Event, type Channel as StreamChannel, StreamChat } from 'stream-chat';
+import {
+  Channel,
+  Chat,
+  MessageInput,
+  MessageList,
+  OverlayProvider,
+} from 'stream-chat-react-native';
+
+import { ScreenHeader } from '@/components/screen-header';
+import { Text } from '@/components/ui/text';
+import { useStreamChatCredentials } from '@/lib/hooks/use-kiloclaw';
+import { useThemeColors } from '@/lib/hooks/use-theme-colors';
+import { useTRPC } from '@/lib/trpc';
+
+type KiloClawChatProps = {
+  instanceId: string;
+  enabled: boolean;
+};
+
+export function KiloClawChat({ instanceId, enabled }: Readonly<KiloClawChatProps>) {
+  const { data: creds, isLoading, error } = useStreamChatCredentials(enabled);
+
+  if (!enabled) {
+    return (
+      <ChatShell instanceId={instanceId}>
+        <ChatPlaceholder message="Chat is available when the machine is running." />
+      </ChatShell>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <ChatShell instanceId={instanceId}>
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator />
+        </View>
+      </ChatShell>
+    );
+  }
+
+  if (error) {
+    return (
+      <ChatShell instanceId={instanceId}>
+        <ChatPlaceholder message="Failed to load chat. Please try again." />
+      </ChatShell>
+    );
+  }
+
+  if (!creds) {
+    return (
+      <ChatShell instanceId={instanceId}>
+        <ChatPlaceholder message="Chat requires an upgrade. Use 'Upgrade to Latest' on the dashboard." />
+      </ChatShell>
+    );
+  }
+
+  return (
+    <StreamChatUI
+      instanceId={instanceId}
+      apiKey={creds.apiKey}
+      userId={creds.userId}
+      channelId={creds.channelId}
+    />
+  );
+}
+
+// ─── Internal components ────────────────────────────────────────────────────
+
+function ChatShell({ instanceId, children }: { instanceId: string; children: React.ReactNode }) {
+  return (
+    <View className="flex-1 bg-background">
+      <ChatHeader instanceId={instanceId} />
+      {children}
+    </View>
+  );
+}
+
+function ChatHeader({ instanceId, botOnline }: { instanceId: string; botOnline?: boolean }) {
+  const router = useRouter();
+  const colors = useThemeColors();
+
+  const settingsButton = (
+    <Pressable
+      onPress={() => {
+        router.push(`/(app)/(tabs)/(1_kiloclaw)/${instanceId}/dashboard` as Href);
+      }}
+      hitSlop={12}
+      accessibilityLabel="Settings"
+      className="active:opacity-70"
+    >
+      <Settings size={20} color={colors.foreground} />
+    </Pressable>
+  );
+
+  return (
+    <ScreenHeader
+      title="Chat"
+      headerRight={
+        <View className="flex-row items-center gap-3">
+          {botOnline !== undefined && <BotStatusIndicator online={botOnline} />}
+          {settingsButton}
+        </View>
+      }
+    />
+  );
+}
+
+function BotStatusIndicator({ online }: { online: boolean }) {
+  return (
+    <View className="flex-row items-center gap-1.5">
+      <View className={`h-2 w-2 rounded-full ${online ? 'bg-emerald-400' : 'bg-neutral-500'}`} />
+      <Text className="text-xs text-muted-foreground">{online ? 'Online' : 'Offline'}</Text>
+    </View>
+  );
+}
+
+function StreamChatUI({
+  instanceId,
+  apiKey,
+  userId,
+  channelId,
+}: {
+  instanceId: string;
+  apiKey: string;
+  userId: string;
+  channelId: string;
+}) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
+  // Stable token provider — stream-chat calls this when the current token expires.
+  const tokenProvider = useCallback(async () => {
+    const creds = await queryClient.fetchQuery(
+      trpc.kiloclaw.getStreamChatCredentials.queryOptions(undefined, {
+        staleTime: 0,
+      })
+    );
+    if (!creds?.userToken) {
+      throw new Error('Failed to fetch Stream Chat credentials');
+    }
+    return creds.userToken;
+  }, [queryClient, trpc]);
+
+  const [client, setClient] = useState<StreamChat | null>(null);
+  const [channel, setChannel] = useState<StreamChannel | null>(null);
+  const [connectError, setConnectError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const chatClient = StreamChat.getInstance(apiKey);
+
+    let cancelled = false;
+    setConnectError(null);
+
+    const connect = async () => {
+      try {
+        // Await disconnect to prevent tokenManager.reset() from racing with the new connection
+        if (chatClient.userID) {
+          await chatClient.disconnectUser();
+        }
+        if (cancelled) {
+          return;
+        }
+        await chatClient.connectUser({ id: userId }, tokenProvider);
+        const ch = chatClient.channel('messaging', channelId);
+        await ch.watch({ presence: true });
+        // cancelled may change across awaits above
+        // eslint-disable-next-line typescript-eslint/no-unnecessary-condition
+        if (!cancelled) {
+          setClient(chatClient);
+          setChannel(ch);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setConnectError(error instanceof Error ? error.message : 'Failed to connect to chat.');
+        }
+      }
+    };
+
+    void connect();
+
+    return () => {
+      cancelled = true;
+      void chatClient.disconnectUser();
+      setClient(null);
+      setChannel(null);
+    };
+  }, [apiKey, userId, channelId, tokenProvider]);
+
+  // Bot presence tracking
+  const sandboxId = channelId.replace(/^default-/, '');
+  const botUserId = `bot-${sandboxId}`;
+  const botOnline = useBotOnlineStatus(client, channel, botUserId);
+
+  if (connectError) {
+    return (
+      <ChatShell instanceId={instanceId}>
+        <ChatPlaceholder message={connectError} />
+      </ChatShell>
+    );
+  }
+
+  if (!client || !channel) {
+    return (
+      <ChatShell instanceId={instanceId}>
+        <View className="flex-1 items-center justify-center">
+          <ActivityIndicator />
+        </View>
+      </ChatShell>
+    );
+  }
+
+  return (
+    <View className="flex-1 bg-background">
+      <ChatHeader instanceId={instanceId} botOnline={botOnline} />
+      <OverlayProvider>
+        <Chat client={client}>
+          <Channel channel={channel}>
+            <MessageList />
+            <MessageInput />
+          </Channel>
+        </Chat>
+      </OverlayProvider>
+    </View>
+  );
+}
+
+function useBotOnlineStatus(
+  client: StreamChat | null,
+  channel: StreamChannel | null,
+  botUserId: string
+): boolean {
+  const [online, setOnline] = useState(false);
+
+  useEffect(() => {
+    const handlePresenceChange = (event: Event) => {
+      if (event.user?.id === botUserId) {
+        setOnline(Boolean(event.user.online));
+      }
+    };
+
+    if (client && channel) {
+      // Check initial state
+      const member = channel.state.members[botUserId];
+      setOnline(Boolean(member?.user?.online));
+      client.on('user.presence.changed', handlePresenceChange);
+    }
+
+    return () => {
+      client?.off('user.presence.changed', handlePresenceChange);
+    };
+  }, [client, channel, botUserId]);
+
+  return online;
+}
+
+function ChatPlaceholder({ message }: { message: string }) {
+  return (
+    <View className="flex-1 items-center justify-center px-6">
+      <Text className="text-sm text-muted-foreground text-center">{message}</Text>
+    </View>
+  );
+}

kilo-app/src/components/profile-screen.tsx

@@ -65,7 +65,7 @@ function CreditsCard() {
             <Skeleton className="mt-1 h-3 w-48 rounded" />
           ) : (
             expiringTotal > 0 &&
-            Boolean(earliestExpiry) && (
+            earliestExpiry != null && (
               <Text className="mt-1 text-xs text-muted-foreground">
                 ${expiringTotal.toFixed(2)} in bonus credits expiring{' '}
                 {parseTimestamp(earliestExpiry).toLocaleDateString(undefined, {