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',

kilo-app/eas.json

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

kilo-app/knip.json

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

kilo-app/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@kilocode/trpc": "workspace:*",
+    "@react-native-community/netinfo": "11.5.2",
     "@rn-primitives/portal": "^1.3.0",
     "@rn-primitives/slot": "^1.2.0",
     "@sentry/react-native": "~7.11.0",
@@ -56,6 +57,8 @@
     "react-native-svg": "15.15.3",
     "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,267 @@
+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
+        if (!cancelled) {
+          // eslint-disable-line typescript-eslint/no-unnecessary-condition
+          setClient(chatClient);
+          setChannel(ch);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          setConnectError(error instanceof Error ? error.message : 'Failed to connect to chat.');
+        }
+      }
+    };
+
+    void connect();
+
+    return () => {
+      cancelled = true;
+      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, {

kilo-app/src/lib/hooks/use-kiloclaw.ts

@@ -134,6 +134,16 @@ export function useKiloClawSecretCatalog() {
   );
 }
 
+export function useStreamChatCredentials(enabled: boolean) {
+  const trpc = useTRPC();
+  return useQuery(
+    trpc.kiloclaw.getStreamChatCredentials.queryOptions(undefined, {
+      enabled,
+      staleTime: 5 * 60_000,
+    })
+  );
+}
+
 // ── Mutations ────────────────────────────────────────────────────────
 
 const onMutationError = (error: { message: string }) => {

kilo-app/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
+    "noUncheckedIndexedAccess": true,
     "paths": {
       "@/*": ["./src/*"],
       "@/assets/*": ["./assets/*"]