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
 
@@ -39,6 +39,8 @@ npx expo install <package-name>
 npx expo install --dev <package-name>   # devDependencies
 ```
 
+After installing or upgrading dependencies, run `pnpx expo-doctor` and fix any issues it reports (version mismatches, duplicate deps, etc.).
+
 ## Data Fetching
 
 - When you need data from the backend, **always add a new tRPC procedure** rather than copying data or inventing client-side alternatives. The app uses tRPC with React Query — adding a procedure is cheap and keeps the source of truth on the server.

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',
@@ -13,6 +13,8 @@ const config = {
     bundleIdentifier: 'com.kilocode.kiloapp',
     infoPlist: {
       ITSAppUsesNonExemptEncryption: false,
+      NSPhotoLibraryUsageDescription:
+        'KiloClaw needs access to your photo library to send images in chat.',
     },
   },
   splash: {

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,51 +20,55 @@
   },
   "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",
-    "@tailwindcss/postcss": "^4.2.1",
+    "@tailwindcss/postcss": "^4.2.2",
     "@tanstack/react-query": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/tanstack-react-query": "catalog:",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "expo": "~55.0.8",
+    "expo": "~55.0.9",
     "expo-application": "~55.0.10",
     "expo-build-properties": "~55.0.10",
     "expo-clipboard": "~55.0.9",
     "expo-constants": "~55.0.9",
-    "expo-dev-client": "~55.0.18",
+    "expo-dev-client": "~55.0.19",
     "expo-haptics": "~55.0.9",
     "expo-image": "~55.0.6",
-    "expo-insights": "55.0.11",
-    "expo-linking": "~55.0.8",
-    "expo-router": "~55.0.7",
+    "expo-image-manipulator": "~55.0.11",
+    "expo-insights": "55.0.12",
+    "expo-linking": "~55.0.9",
+    "expo-router": "~55.0.8",
     "expo-secure-store": "~55.0.9",
-    "expo-splash-screen": "~55.0.12",
+    "expo-splash-screen": "~55.0.13",
     "expo-status-bar": "~55.0.4",
     "expo-web-browser": "~55.0.10",
-    "lucide-react-native": "^0.577.0",
+    "lucide-react-native": "^1.7.0",
     "nativewind": "5.0.0-preview.3",
     "react": "19.2.0",
-    "react-native": "0.83.2",
-    "react-native-css": "3.0.5",
+    "react-native": "0.83.4",
+    "react-native-css": "3.0.6",
     "react-native-gesture-handler": "~2.30.0",
     "react-native-reanimated": "4.2.1",
     "react-native-safe-area-context": "~5.6.2",
     "react-native-screens": "~4.23.0",
     "react-native-svg": "15.15.3",
     "react-native-worklets": "0.7.2",
     "sonner-native": "^0.23.1",
+    "stream-chat": "^9.38.0",
+    "stream-chat-expo": "^8.13.7",
     "tailwind-merge": "^3.5.0",
-    "tailwindcss": "^4.2.1"
+    "tailwindcss": "^4.2.2"
   },
   "devDependencies": {
-    "@sentry/cli": "^3.3.3",
-    "@types/react": "~19.2.2",
+    "@sentry/cli": "^3.3.4",
+    "@types/react": "~19.2.14",
     "@typescript/native-preview": "catalog:",
     "eslint-plugin-sonarjs": "^4.0.2",
-    "knip": "^5.86.0",
+    "knip": "^6.0.6",
     "typescript": "catalog:"
   },
   "private": true

kilo-app/src/app/(app)/(tabs)/(1_kiloclaw)/index.tsx

@@ -34,7 +34,7 @@ export default function KiloClawInstanceList() {
 
   const instanceId = status?.sandboxId ?? 'default';
   const billingPath = `/(app)/(tabs)/(1_kiloclaw)/${instanceId}/billing` as const;
-  const chatPath = `/(app)/(tabs)/(1_kiloclaw)/${instanceId}` as const;
+  const chatPath = `/(app)/chat/${instanceId}` as const;
   const dashboardPath = `/(app)/(tabs)/(1_kiloclaw)/${instanceId}/dashboard` as const;
 
   const isDestroying = status?.status === 'destroying';

kilo-app/src/app/(app)/_layout.tsx

@@ -4,6 +4,7 @@ export default function AppLayout() {
   return (
     <Stack screenOptions={{ headerShown: false }}>
       <Stack.Screen name="(tabs)" />
+      <Stack.Screen name="chat/[instance-id]" />
       <Stack.Screen
         name="profile"
         options={{

kilo-app/src/app/(app)/chat/[instance-id].tsx

@@ -0,0 +1,18 @@
+import { useLocalSearchParams } from 'expo-router';
+import { View } from 'react-native';
+
+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';
+  const machineName = status?.name ?? 'Chat';
+
+  return (
+    <View className="flex-1 bg-background">
+      <KiloClawChat instanceId={instanceId} name={machineName} enabled={isRunning} />
+    </View>
+  );
+}

kilo-app/src/app/_layout.tsx

@@ -25,7 +25,7 @@ const navigationIntegration = Sentry.reactNavigationIntegration({
 Sentry.init({
   dsn: 'https://618cf025f1c6bdea8043fcd80668fe6b@o4509356317474816.ingest.us.sentry.io/4511110711279616',
 
-  enabled: !__DEV__,
+  enabled: true,
 
   // Adds more context data to events (IP address, cookies, user, etc.)
   // For more information, visit: https://docs.sentry.io/platforms/react-native/data-management/data-collected/

kilo-app/src/components/kiloclaw/chat-hooks.ts

@@ -0,0 +1,53 @@
+import { useEffect, useState } from 'react';
+import { Keyboard } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { type Event, type Channel as StreamChannel, type StreamChat } from 'stream-chat';
+
+export function useKeyboardAwareBottomInset() {
+  const { bottom } = useSafeAreaInsets();
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+
+  useEffect(() => {
+    const showSub = Keyboard.addListener('keyboardWillShow', () => {
+      setKeyboardVisible(true);
+    });
+    const hideSub = Keyboard.addListener('keyboardWillHide', () => {
+      setKeyboardVisible(false);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, []);
+
+  return { bottomInset: keyboardVisible ? 0 : bottom, keyboardVisible };
+}
+
+export 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;
+}

kilo-app/src/components/kiloclaw/chat-theme.ts

@@ -0,0 +1,70 @@
+import { useEffect, useState } from 'react';
+import { useColorScheme } from 'react-native';
+import { type DeepPartial, type Theme } from 'stream-chat-expo';
+
+import { useThemeColors } from '@/lib/hooks/use-theme-colors';
+
+export function useStreamChatTheme(): DeepPartial<Theme> {
+  const colorScheme = useColorScheme();
+  const colors = useThemeColors();
+
+  const [theme, setTheme] = useState<DeepPartial<Theme>>(() => buildTheme(colorScheme, colors));
+
+  useEffect(() => {
+    setTheme(buildTheme(colorScheme, colors));
+  }, [colorScheme, colors]);
+
+  return theme;
+}
+
+function buildTheme(
+  colorScheme: ReturnType<typeof useColorScheme>,
+  colors: ReturnType<typeof useThemeColors>
+): DeepPartial<Theme> {
+  return {
+    colors:
+      colorScheme === 'dark'
+        ? {
+            black: colors.foreground,
+            white: colors.background,
+            white_smoke: colors.secondary,
+            white_snow: colors.muted,
+            grey: colors.mutedForeground,
+            grey_dark: colors.mutedForeground,
+            grey_gainsboro: colors.border,
+            grey_whisper: colors.border,
+            light_blue: 'hsl(0, 0%, 20%)',
+            light_gray: 'hsl(0, 0%, 20%)',
+            blue_alice: 'hsl(0, 0%, 18%)',
+            text_high_emphasis: colors.foreground,
+            text_low_emphasis: colors.mutedForeground,
+            bg_gradient_start: colors.background,
+            bg_gradient_end: colors.secondary,
+            icon_background: colors.card,
+            overlay: 'rgba(0, 0, 0, 0.8)',
+          }
+        : {},
+    dateHeader: {
+      container: {
+        backgroundColor: colorScheme === 'dark' ? 'rgba(255, 255, 255, 0.12)' : undefined,
+      },
+      text: {
+        color: colorScheme === 'dark' ? colors.foreground : undefined,
+      },
+    },
+    inlineDateSeparator: {
+      container: {
+        backgroundColor: colorScheme === 'dark' ? 'rgba(255, 255, 255, 0.12)' : undefined,
+      },
+      text: {
+        color: colorScheme === 'dark' ? colors.foreground : undefined,
+      },
+    },
+    messageInput: {
+      container: {
+        paddingHorizontal: 12,
+        borderColor: colors.border,
+      },
+    },
+  };
+}