feat(mobile): hide KiloClaw without an instance

apps/mobile/src/app/(app)/(tabs)/_layout.tsx

@@ -6,13 +6,15 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { BlurBar } from '@/components/ui/blur-bar';
 import { Text } from '@/components/ui/text';
+import { useKiloClawTabVisible } from '@/lib/hooks/use-kiloclaw-tab-visible';
 import { useThemeColors } from '@/lib/hooks/use-theme-colors';
 import {
   getEffectiveTabBarHeight,
   getTabBarIconSize,
   shouldHideTabBar,
   shouldShowTabLabel,
   TAB_LABEL_WRAP_FONT_SCALE,
+  tabAccessibilityLabel,
 } from '@/lib/tab-bar-layout';
 
 const TAB_BAR_ICON_STYLE = {
@@ -61,6 +63,8 @@ export default function TabsLayout() {
     fontScale,
   });
   const tabIconSize = getTabBarIconSize(fontScale);
+  const showKiloClawTab = useKiloClawTabVisible();
+  const tabCount = showKiloClawTab ? 4 : 3;
 
   return (
     <Tabs
@@ -88,7 +92,7 @@ export default function TabsLayout() {
         name="(0_home)"
         options={{
           title: 'Home',
-          tabBarAccessibilityLabel: 'Home, tab, 1 of 4',
+          tabBarAccessibilityLabel: tabAccessibilityLabel('Home', 1, tabCount),
           tabBarLabel: ({ focused }) => <TabLabel label="Home" focused={focused} />,
           tabBarIcon: ({ color, focused }) => (
             <House size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
@@ -103,8 +107,9 @@ export default function TabsLayout() {
       <Tabs.Screen
         name="(1_kiloclaw)"
         options={{
+          href: showKiloClawTab ? undefined : null,
           title: 'KiloClaw',
-          tabBarAccessibilityLabel: 'KiloClaw, tab, 2 of 4',
+          tabBarAccessibilityLabel: tabAccessibilityLabel('KiloClaw', 2, tabCount),
           tabBarLabel: ({ focused }) => (
             <TabLabel
               label={fontScale > TAB_LABEL_WRAP_FONT_SCALE ? 'Kilo\nClaw' : 'KiloClaw'}
@@ -127,7 +132,11 @@ export default function TabsLayout() {
         name="(2_agents)"
         options={{
           title: 'Agents',
-          tabBarAccessibilityLabel: 'Agents, tab, 3 of 4',
+          tabBarAccessibilityLabel: tabAccessibilityLabel(
+            'Agents',
+            showKiloClawTab ? 3 : 2,
+            tabCount
+          ),
           tabBarLabel: ({ focused }) => <TabLabel label="Agents" focused={focused} />,
           tabBarIcon: ({ color, focused }) => (
             <Bot size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />
@@ -143,7 +152,11 @@ export default function TabsLayout() {
         name="(3_profile)"
         options={{
           title: 'Profile',
-          tabBarAccessibilityLabel: 'Profile, tab, 4 of 4',
+          tabBarAccessibilityLabel: tabAccessibilityLabel(
+            'Profile',
+            showKiloClawTab ? 4 : 3,
+            tabCount
+          ),
           tabBarLabel: ({ focused }) => <TabLabel label="Profile" focused={focused} />,
           tabBarIcon: ({ color, focused }) => (
             <UserRound size={tabIconSize} color={color} strokeWidth={focused ? 2 : 1.5} />

apps/mobile/src/components/home/home-screen.mounted.test.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable typescript-eslint/no-deprecated -- react-test-renderer is the DOM-free renderer used to mount React/RN trees under vitest (same pattern as src/test/render-with-providers.tsx) */
+import { createElement } from 'react';
+import TestRenderer, { act } from 'react-test-renderer';
+import { describe, expect, it, vi } from 'vitest';
+
+import { HomeScreen } from '@/components/home/home-screen';
+
+const hasSessions = vi.hoisted(() => ({ value: true }));
+
+vi.mock('@tanstack/react-query', () => ({
+  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
+}));
+vi.mock('react-native', () => ({
+  RefreshControl: 'RefreshControl',
+  ScrollView: 'ScrollView',
+  View: 'View',
+}));
+vi.mock('react-native-reanimated', () => ({
+  default: { View: 'Animated.View' },
+  FadeIn: { duration: vi.fn() },
+  FadeOut: { duration: vi.fn() },
+  LinearTransition: {},
+}));
+vi.mock('@/components/home/agent-sessions-section', () => ({
+  AgentSessionsSection: 'AgentSessionsSection',
+  hasDisplayableAgentSessions: () => hasSessions.value,
+}));
+vi.mock('@/components/home/agents-promo-card', () => ({
+  AgentsPromoCard: 'AgentsPromoCard',
+}));
+vi.mock('@/components/home/greeting', () => ({
+  buildTimedGreeting: () => 'Good morning',
+}));
+vi.mock('@/components/home/new-task-button', () => ({
+  NewTaskButton: 'NewTaskButton',
+}));
+vi.mock('@/components/query-error', () => ({
+  QueryError: () => null,
+}));
+vi.mock('@/components/screen-header', () => ({
+  ScreenHeader: () => null,
+}));
+vi.mock('@/components/tab-screen', () => ({
+  TabScreenScrollView: 'ScrollView',
+}));
+vi.mock('@/components/ui/skeleton', () => ({
+  Skeleton: 'Skeleton',
+}));
+vi.mock('@/lib/hooks/use-agent-sessions', () => ({
+  useAgentSessions: () => ({
+    activeSessions: [],
+    isLoading: false,
+    storedSessions: [{}],
+    storedIsError: false,
+    storedIsSuccess: true,
+    refetch: vi.fn(),
+  }),
+}));
+vi.mock('@/lib/organization-context', () => ({
+  useOrganization: () => ({ organizationId: 'org-1', isLoaded: true }),
+}));
+
+function nodeCount(root: TestRenderer.ReactTestInstance, type: string): number {
+  return root.findAll(node => typeof node.type === 'string' && (node.type as string) === type)
+    .length;
+}
+
+async function mountHome(): Promise<TestRenderer.ReactTestRenderer> {
+  const rendererRef: { current: TestRenderer.ReactTestRenderer | undefined } = {
+    current: undefined,
+  };
+  await act(async () => {
+    await Promise.resolve();
+    rendererRef.current = TestRenderer.create(createElement(HomeScreen));
+  });
+  const renderer = rendererRef.current;
+  if (!renderer) {
+    throw new Error('renderer was not created');
+  }
+  return renderer;
+}
+
+describe('HomeScreen composition', () => {
+  it('renders the sessions section and new-task button when sessions are present', async () => {
+    hasSessions.value = true;
+    const renderer = await mountHome();
+    expect(nodeCount(renderer.root, 'AgentSessionsSection')).toBe(1);
+    expect(nodeCount(renderer.root, 'NewTaskButton')).toBe(1);
+    expect(nodeCount(renderer.root, 'Skeleton')).toBe(0);
+
+    await act(async () => {
+      await Promise.resolve();
+      renderer.unmount();
+    });
+  });
+
+  it('renders only the agents promo card when there are no sessions', async () => {
+    hasSessions.value = false;
+    const renderer = await mountHome();
+    expect(nodeCount(renderer.root, 'AgentsPromoCard')).toBe(1);
+    expect(nodeCount(renderer.root, 'AgentSessionsSection')).toBe(0);
+    expect(nodeCount(renderer.root, 'NewTaskButton')).toBe(0);
+
+    await act(async () => {
+      await Promise.resolve();
+      renderer.unmount();
+    });
+  });
+});

apps/mobile/src/components/home/home-screen.test.ts

@@ -5,12 +5,7 @@ import { HomeScreen } from '@/components/home/home-screen';
 vi.mock('@tanstack/react-query', () => ({
   useQueryClient: () => ({ invalidateQueries: vi.fn() }),
 }));
-vi.mock('expo-router', () => ({
-  useFocusEffect: vi.fn(),
-  useIsFocused: () => true,
-}));
 vi.mock('react-native', () => ({
-  AppState: { addEventListener: vi.fn(() => ({ remove: vi.fn() })) },
   RefreshControl: 'RefreshControl',
   ScrollView: 'ScrollView',
   View: 'View',
@@ -19,9 +14,7 @@ vi.mock('react-native-reanimated', () => ({
   default: { View: 'Animated.View' },
   FadeIn: { duration: vi.fn() },
   FadeOut: { duration: vi.fn() },
-}));
-vi.mock('@kilocode/notifications', () => ({
-  badgeBucketForInstance: (sandboxId: string) => sandboxId,
+  LinearTransition: {},
 }));
 vi.mock('@/components/home/agent-sessions-section', () => ({
   AgentSessionsSection: () => null,
@@ -32,21 +25,9 @@ vi.mock('@/components/home/agents-promo-card', () => ({
 vi.mock('@/components/home/greeting', () => ({
   buildTimedGreeting: () => 'Good morning',
 }));
-vi.mock('@/components/home/kiloclaw-promo-card', () => ({
-  KiloClawPromoCard: () => null,
-}));
 vi.mock('@/components/home/new-task-button', () => ({
   NewTaskButton: () => null,
 }));
-vi.mock('@/components/home/section-header', () => ({
-  SectionHeader: () => null,
-}));
-vi.mock('@/components/kiloclaw/instance-card', () => ({
-  KiloClawCard: () => null,
-}));
-vi.mock('@/components/kiloclaw/status-badge', () => ({
-  isTransitionalStatus: () => false,
-}));
 vi.mock('@/components/query-error', () => ({
   QueryError: () => null,
 }));
@@ -63,30 +44,16 @@ vi.mock('@/components/ui/skeleton', () => ({
 vi.mock('@/lib/hooks/use-agent-sessions', () => ({
   useAgentSessions: () => ({ activeSessions: [], isLoading: false, storedSessions: [] }),
 }));
-vi.mock('@/lib/hooks/use-instance-context', () => ({
-  useAllKiloClawInstances: () => ({
-    data: [],
-    isError: false,
-    isPending: false,
-  }),
-}));
-vi.mock('@/lib/hooks/use-unread-counts', () => ({
-  useUnreadCounts: () => ({ byBadgeBucket: new Map() }),
-}));
 vi.mock('@/lib/organization-context', () => ({
   useOrganization: () => ({ organizationId: null }),
 }));
-vi.mock('@/lib/trpc', () => ({
-  useTRPC: () => ({
-    kiloclaw: {
-      getStatus: { queryKey: () => ['kiloclaw', 'getStatus'] },
-      listAllInstances: { queryKey: () => ['kiloclaw', 'listAllInstances'] },
-    },
-  }),
-}));
 
 describe('HomeScreen copy', () => {
   it('does not show the first-time welcome headline on the main page', () => {
     expect(HomeScreen.toString()).not.toContain('Welcome to Kilo');
   });
+
+  it('renders no KiloClaw surface', () => {
+    expect(HomeScreen.toString()).not.toContain('KiloClaw');
+  });
 });