import React, { useCallback, useEffect, useRef } from 'react'; import { isBridgeEnabled } from '../bridge/bridgeEnabled.js'; import { Box, Text } from '../ink.js'; import { getClaudeAIOAuthTokens } from '../utils/auth.js'; import { getGlobalConfig, saveGlobalConfig } from '../utils/config.js'; import type { OptionWithDescription } from './CustomSelect/select.js'; import { Select } from './CustomSelect/select.js'; import { PermissionDialog } from './permissions/PermissionDialog.js'; type RemoteCalloutSelection = 'enable' | 'dismiss'; type Props = { onDone: (selection: RemoteCalloutSelection) => void; }; export function RemoteCallout({ onDone }: Props): React.ReactNode { const onDoneRef = useRef(onDone); onDoneRef.current = onDone; const handleCancel = useCallback((): void => { onDoneRef.current('dismiss'); }, []); // Permanently mark as seen on mount so it only shows once useEffect(() => { saveGlobalConfig(current => { if (current.remoteDialogSeen) return current; return { ...current, remoteDialogSeen: true }; }); }, []); const handleSelect = useCallback((value: RemoteCalloutSelection): void => { onDoneRef.current(value); }, []); const options: OptionWithDescription[] = [{ label: 'Enable Remote Control for this session', description: 'Opens a secure connection to claude.ai.', value: 'enable' }, { label: 'Never mind', description: 'You can always enable it later with /remote-control.', value: 'dismiss' }]; return Remote Control lets you access this CLI session from the web (claude.ai/code) or the Claude app, so you can pick up where you left off on any device. You can disconnect remote access anytime by running /remote-control again.