import { feature } from 'bun:bundle'; import { toString as qrToString } from 'qrcode'; import * as React from 'react'; import { useEffect, useState } from 'react'; import { getBridgeAccessToken } from '../../bridge/bridgeConfig.js'; import { checkBridgeMinVersion, getBridgeDisabledReason, isEnvLessBridgeEnabled } from '../../bridge/bridgeEnabled.js'; import { checkEnvLessBridgeMinVersion } from '../../bridge/envLessBridgeConfig.js'; import { BRIDGE_LOGIN_INSTRUCTION, REMOTE_CONTROL_DISCONNECTED_MSG } from '../../bridge/types.js'; import { Dialog, ListItem } from '@anthropic/ink'; import { shouldShowRemoteCallout } from '../../components/RemoteCallout.js'; import { useRegisterOverlay } from '../../context/overlayContext.js'; import { Box, Text } from '@anthropic/ink'; import { useKeybindings } from '../../keybindings/useKeybinding.js'; import { type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS, logEvent, } from '../../services/analytics/index.js'; import { useAppState, useSetAppState } from '../../state/AppState.js'; import type { ToolUseContext } from '../../Tool.js'; import type { LocalJSXCommandContext, LocalJSXCommandOnDone } from '../../types/command.js'; import { logForDebugging } from '../../utils/debug.js'; type Props = { onDone: LocalJSXCommandOnDone; name?: string; }; /** * /remote-control command — manages the bidirectional bridge connection. * * When enabled, sets replBridgeEnabled in AppState, which triggers * useReplBridge in REPL.tsx to initialize the bridge connection. * The bridge registers an environment, creates a session with the current * conversation, polls for work, and connects an ingress WebSocket for * bidirectional messaging between the CLI and claude.ai. * * Running /remote-control when already connected shows a dialog with the session * URL and options to disconnect or continue. */ function BridgeToggle({ onDone, name }: Props): React.ReactNode { const setAppState = useSetAppState(); const replBridgeConnected = useAppState(s => s.replBridgeConnected); const replBridgeEnabled = useAppState(s => s.replBridgeEnabled); const replBridgeOutboundOnly = useAppState(s => s.replBridgeOutboundOnly); const [showDisconnectDialog, setShowDisconnectDialog] = useState(false); useEffect(() => { // If already connected or enabled in full bidirectional mode, show // disconnect confirmation. Outbound-only (CCR mirror) doesn't count — // /remote-control upgrades it to full RC instead. if ((replBridgeConnected || replBridgeEnabled) && !replBridgeOutboundOnly) { setShowDisconnectDialog(true); return; } let cancelled = false; void (async () => { // Pre-flight checks before enabling (awaits GrowthBook init if disk // cache is stale — so Max users don't get a false "not enabled" error) const error = await checkBridgePrerequisites(); if (cancelled) return; if (error) { logEvent('tengu_bridge_command', { action: 'preflight_failed' as AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS, }); onDone(error, { display: 'system' }); return; } // Show first-time remote dialog if not yet seen. // Store the name now so it's in AppState when the callout handler later // enables the bridge (the handler only sets replBridgeEnabled, not the name). if (shouldShowRemoteCallout()) { setAppState(prev => { if (prev.showRemoteCallout) return prev; return { ...prev, showRemoteCallout: true, replBridgeInitialName: name, }; }); onDone('', { display: 'system' }); return; } // Enable the bridge — useReplBridge in REPL.tsx handles the rest: // registers environment, creates session with conversation, connects WebSocket logEvent('tengu_bridge_command', { action: 'connect' as AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS, }); setAppState(prev => { if (prev.replBridgeEnabled && !prev.replBridgeOutboundOnly) return prev; return { ...prev, replBridgeEnabled: true, replBridgeExplicit: true, replBridgeOutboundOnly: false, replBridgeInitialName: name, }; }); onDone('Remote Control connecting\u2026', { display: 'system', }); })(); return () => { cancelled = true; }; }, []); // eslint-disable-line react-hooks/exhaustive-deps -- run once on mount if (showDisconnectDialog) { return ; } return null; } /** * Dialog shown when /remote-control is used while the bridge is already connected. * Shows the session URL and lets the user disconnect or continue. */ function BridgeDisconnectDialog({ onDone }: Props): React.ReactNode { useRegisterOverlay('bridge-disconnect-dialog'); const setAppState = useSetAppState(); const sessionUrl = useAppState(s => s.replBridgeSessionUrl); const connectUrl = useAppState(s => s.replBridgeConnectUrl); const sessionActive = useAppState(s => s.replBridgeSessionActive); const [focusIndex, setFocusIndex] = useState(2); const [showQR, setShowQR] = useState(false); const [qrText, setQrText] = useState(''); const displayUrl = sessionActive ? sessionUrl : connectUrl; // Generate QR code when URL changes or QR is toggled on useEffect(() => { if (!showQR || !displayUrl) { setQrText(''); return; } qrToString(displayUrl, { type: 'utf8', errorCorrectionLevel: 'L', small: true, } as Parameters[1]) .then(setQrText) .catch(() => setQrText('')); }, [showQR, displayUrl]); function handleDisconnect(): void { setAppState(prev => { if (!prev.replBridgeEnabled) return prev; return { ...prev, replBridgeEnabled: false, replBridgeExplicit: false, replBridgeOutboundOnly: false, }; }); logEvent('tengu_bridge_command', { action: 'disconnect' as AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS, }); onDone(REMOTE_CONTROL_DISCONNECTED_MSG, { display: 'system' }); } function handleShowQR(): void { setShowQR(prev => !prev); } function handleContinue(): void { onDone(undefined, { display: 'skip' }); } const ITEM_COUNT = 3; useKeybindings( { 'select:next': () => setFocusIndex(i => (i + 1) % ITEM_COUNT), 'select:previous': () => setFocusIndex(i => (i - 1 + ITEM_COUNT) % ITEM_COUNT), 'select:accept': () => { if (focusIndex === 0) { handleDisconnect(); } else if (focusIndex === 1) { handleShowQR(); } else { handleContinue(); } }, }, { context: 'Select' }, ); const qrLines = qrText ? qrText.split('\n').filter(l => l.length > 0) : []; return ( This session is available via Remote Control {displayUrl ? ` at ${displayUrl}` : ''}. {showQR && qrLines.length > 0 && ( {qrLines.map((line, i) => ( {line} ))} )} Disconnect this session {showQR ? 'Hide QR code' : 'Show QR code'} Continue Enter to select · Esc to continue ); } /** * Check bridge prerequisites. Returns an error message if a precondition * fails, or null if all checks pass. Awaits GrowthBook init if the disk * cache is stale, so a user who just became entitled (e.g. upgraded to Max, * or the flag just launched) gets an accurate result on the first try. */ async function checkBridgePrerequisites(): Promise { // Check organization policy — remote control may be disabled const { waitForPolicyLimitsToLoad, isPolicyAllowed } = await import('../../services/policyLimits/index.js'); await waitForPolicyLimitsToLoad(); if (!isPolicyAllowed('allow_remote_control')) { return "Remote Control is disabled by your organization's policy."; } const disabledReason = await getBridgeDisabledReason(); if (disabledReason) { return disabledReason; } // Mirror the v1/v2 branching logic in initReplBridge: env-less (v2) is used // only when the flag is on AND the session is not perpetual. In assistant // mode (KAIROS) useReplBridge sets perpetual=true, which forces // initReplBridge onto the v1 path — so the prerequisite check must match. let useV2 = isEnvLessBridgeEnabled(); if (feature('KAIROS') && useV2) { const { isAssistantMode } = await import('../../assistant/index.js'); if (isAssistantMode()) { useV2 = false; } } const versionError = useV2 ? await checkEnvLessBridgeMinVersion() : checkBridgeMinVersion(); if (versionError) { return versionError; } if (!getBridgeAccessToken()) { return BRIDGE_LOGIN_INSTRUCTION; } logForDebugging('[bridge] Prerequisites passed, enabling bridge'); return null; } export async function call( onDone: LocalJSXCommandOnDone, _context: ToolUseContext & LocalJSXCommandContext, args: string, ): Promise { const name = args.trim() || undefined; return ; }