diff --git a/mobile/src/components/MobileHostCard.test.ts b/mobile/src/components/MobileHostCard.test.ts index b9342b8d5e5..ef92ebcb236 100644 --- a/mobile/src/components/MobileHostCard.test.ts +++ b/mobile/src/components/MobileHostCard.test.ts @@ -99,6 +99,7 @@ describe('MobileHostCard', () => { state: 'connected', verdict: { kind: 'normal', label: 'Connected' }, path: 'tailscale', + worktreeCounts: { total: 3, active: 2 }, onPress: vi.fn(), onLongPress: vi.fn(), onOpenActions: vi.fn() @@ -109,7 +110,41 @@ describe('MobileHostCard', () => { const navigationButton = renderer.root.findAllByType('Pressable')[0] expect(navigationButton.props.accessibilityLabel).toBe( - 'Open Desk, Connected, Direct via Tailscale' + 'Open Desk, Connected, Direct via Tailscale, 3 worktrees, 2 active' + ) + }) + + it('includes visible offline recovery guidance in the navigation label', async () => { + const consoleError = suppressRendererDeprecation() + await act(async () => { + renderer = create( + createElement(MobileHostCard, { + host: { + id: 'desk', + name: 'Desk', + endpoint: 'ws://192.168.1.2:6768', + deviceToken: 'token', + publicKeyB64: 'key', + lastConnected: 1 + }, + state: 'reconnecting', + verdict: { + kind: 'unreachable', + label: "Can't reach desktop", + reason: 'never-connected' + }, + path: 'lan', + onPress: vi.fn(), + onLongPress: vi.fn(), + onOpenActions: vi.fn() + }) + ) + }) + consoleError.mockRestore() + + const navigationButton = renderer.root.findAllByType('Pressable')[0] + expect(navigationButton.props.accessibilityLabel).toBe( + "Open Desk, Can't reach desktop, Update desktop Orca and sign in to connect from anywhere" ) }) }) diff --git a/mobile/src/components/MobileHostCard.tsx b/mobile/src/components/MobileHostCard.tsx index 19c93b19a19..12bb088354a 100644 --- a/mobile/src/components/MobileHostCard.tsx +++ b/mobile/src/components/MobileHostCard.tsx @@ -26,11 +26,25 @@ export function MobileHostCard(props: { const worktreeSummary = props.worktreeCounts ? `${props.worktreeCounts.total} worktree${props.worktreeCounts.total === 1 ? '' : 's'}${props.worktreeCounts.active > 0 ? ` · ${props.worktreeCounts.active} active` : ''}` : null + const accessibleWorktreeSummary = connected ? worktreeSummary?.replace(' · ', ', ') : null + const discoveryHint = + props.verdict.kind === 'unreachable' && !props.host.relay + ? 'Update desktop Orca and sign in to connect from anywhere' + : null + const accessibilityLabel = [ + `Open ${props.host.name}`, + statusLabel, + accessibleConnectionPathLabel, + accessibleWorktreeSummary, + discoveryHint + ] + .filter(Boolean) + .join(', ') return ( [styles.cardMain, pressed && styles.cardPressed]} onPress={props.onPress} onLongPress={props.onLongPress} @@ -61,9 +75,9 @@ export function MobileHostCard(props: { {worktreeSummary} ) : null} - {props.verdict.kind === 'unreachable' && !props.host.relay ? ( + {discoveryHint ? ( - Update desktop Orca and sign in to connect from anywhere + {discoveryHint} ) : null}