claude-code/src/components/DesktopHandoff.tsx

import React, { useEffect, useState } from 'react'
import type { CommandResultDisplay } from '../commands.js'
// eslint-disable-next-line custom-rules/prefer-use-keybindings -- raw input for "any key" dismiss and y/n prompt
import { Box, Text, useInput, LoadingState } from '@anthropic/ink'
import { getDesktopInstallStatus, openCurrentSessionInDesktop } from '../utils/desktopDeepLink.js'
import { openBrowser } from '../utils/browser.js'

import { errorMessage } from '../utils/errors.js'
import { gracefulShutdown } from '../utils/gracefulShutdown.js'
import { flushSessionStorage } from '../utils/sessionStorage.js'

const DESKTOP_DOCS_URL = 'https://clau.de/desktop'

export function getDownloadUrl(): string {
  switch (process.platform) {
    case 'win32':
      return 'https://claude.ai/api/desktop/win32/x64/exe/latest/redirect'
    default:
      return 'https://claude.ai/api/desktop/darwin/universal/dmg/latest/redirect'
  }
}

type DesktopHandoffState =
  | 'checking'
  | 'prompt-download'
  | 'flushing'
  | 'opening'
  | 'success'
  | 'error'

type Props = {
  onDone: (
    result?: string,
    options?: { display?: CommandResultDisplay },
  ) => void
}

export function DesktopHandoff({ onDone }: Props): React.ReactNode {
  const [state, setState] = useState<DesktopHandoffState>('checking')
  const [error, setError] = useState<string | null>(null)
  const [downloadMessage, setDownloadMessage] = useState<string>('')

  // Handle keyboard input for error and prompt-download states
  useInput(input => {
    if (state === 'error') {
      onDone(error ?? 'Unknown error', { display: 'system' })
      return
    }
    if (state === 'prompt-download') {
      if (input === 'y' || input === 'Y') {
        openBrowser(getDownloadUrl()).catch(() => {})
        onDone(
          `Starting download. Re-run /desktop once you\u2019ve installed the app.\nLearn more at ${DESKTOP_DOCS_URL}`,
          { display: 'system' },
        )
      } else if (input === 'n' || input === 'N') {
        onDone(
          `The desktop app is required for /desktop. Learn more at ${DESKTOP_DOCS_URL}`,
          { display: 'system' },
        )
      }
    }
  })

  useEffect(() => {
    async function performHandoff(): Promise<void> {
      // Check Desktop install status
      setState('checking')
      const installStatus = await getDesktopInstallStatus()

      if (installStatus.status === 'not-installed') {
        setDownloadMessage('Claude Desktop is not installed.')
        setState('prompt-download')
        return
      }

      if (installStatus.status === 'version-too-old') {
        setDownloadMessage(
          `Claude Desktop needs to be updated (found v${installStatus.version}, need v1.1.2396+).`,
        )
        setState('prompt-download')
        return
      }

      // Flush session storage to ensure transcript is fully written
      setState('flushing')
      await flushSessionStorage()

      // Open the deep link (uses claude-dev:// in dev mode)
      setState('opening')
      const result = await openCurrentSessionInDesktop()

      if (!result.success) {
        setError(result.error ?? 'Failed to open Claude Desktop')
        setState('error')
        return
      }

      // Success - exit the CLI
      setState('success')

      // Give the user a moment to see the success message
      setTimeout(
        async (onDone: Props['onDone']) => {
          onDone('Session transferred to Claude Desktop', { display: 'system' })
          await gracefulShutdown(0, 'other')
        },
        500,
        onDone,
      )
    }

    performHandoff().catch(err => {
      setError(errorMessage(err))
      setState('error')
    })
  }, [onDone])

  if (state === 'error') {
    return (
      <Box flexDirection="column" paddingX={2}>
        <Text color="error">Error: {error}</Text>
        <Text dimColor>Press any key to continue…</Text>
      </Box>
    )
  }

  if (state === 'prompt-download') {
    return (
      <Box flexDirection="column" paddingX={2}>
        <Text>{downloadMessage}</Text>
        <Text>Download now? (y/n)</Text>
      </Box>
    )
  }

  const messages: Record<
    Exclude<DesktopHandoffState, 'error' | 'prompt-download'>,
    string
  > = {
    checking: 'Checking for Claude Desktop…',
    flushing: 'Saving session…',
    opening: 'Opening Claude Desktop…',
    success: 'Opening in Claude Desktop…',
  }

  return <LoadingState message={messages[state]} />
}