claude-code-best/src/components/TeleportError.tsx

import React, { useCallback, useEffect, useState } from 'react';
import { checkIsGitClean, checkNeedsClaudeAiLogin } from 'src/utils/background/remote/preconditions.js';
import { gracefulShutdownSync } from 'src/utils/gracefulShutdown.js';
import { Box, Text } from '@anthropic/ink';
import { ConsoleOAuthFlow } from './ConsoleOAuthFlow.js';
import { Select } from './CustomSelect/index.js';
import { Dialog } from '@anthropic/ink';
import { TeleportStash } from './TeleportStash.js';

export type TeleportLocalErrorType = 'needsLogin' | 'needsGitStash';

type TeleportErrorProps = {
  onComplete: () => void;
  errorsToIgnore?: ReadonlySet<TeleportLocalErrorType>;
};

// Module-level sentinel so the default parameter has stable identity.
// Previously `= new Set()` created a fresh Set every render, which put
// a new object in checkErrors' deps and caused the mount effect to
// re-fire on every render.
const EMPTY_ERRORS_TO_IGNORE: ReadonlySet<TeleportLocalErrorType> = new Set();

export function TeleportError({
  onComplete,
  errorsToIgnore = EMPTY_ERRORS_TO_IGNORE,
}: TeleportErrorProps): React.ReactNode {
  const [currentError, setCurrentError] = useState<TeleportLocalErrorType | null>(null);
  const [isLoggingIn, setIsLoggingIn] = useState<boolean>(false);

  // Check for errors on mount and when error resolution occurs
  const checkErrors = useCallback(async () => {
    const currentErrors = await getTeleportErrors();
    const filteredErrors = new Set(
      Array.from(currentErrors).filter((error: TeleportLocalErrorType) => !errorsToIgnore.has(error)),
    );

    // If no errors remain, call onComplete
    if (filteredErrors.size === 0) {
      onComplete();
      return;
    }

    // Set current error to handle (prioritize login over git)
    if (filteredErrors.has('needsLogin')) {
      setCurrentError('needsLogin');
    } else if (filteredErrors.has('needsGitStash')) {
      setCurrentError('needsGitStash');
    }
  }, [onComplete, errorsToIgnore]);

  // Check errors on mount
  useEffect(() => {
    void checkErrors();
  }, [checkErrors]);

  const onCancel = useCallback(() => {
    gracefulShutdownSync(0);
  }, []);

  const handleLoginComplete = useCallback(() => {
    setIsLoggingIn(false);
    void checkErrors();
  }, [checkErrors]);

  const handleLoginWithClaudeAI = useCallback(() => {
    setIsLoggingIn(true);
  }, [setIsLoggingIn]);

  const handleLoginDialogSelect = useCallback(
    (value: string) => {
      if (value === 'login') {
        handleLoginWithClaudeAI();
      } else {
        // User selected exit
        onCancel();
      }
    },
    [handleLoginWithClaudeAI, onCancel],
  );

  const handleStashComplete = useCallback(() => {
    void checkErrors();
  }, [checkErrors]);

  // Don't render anything if no current error (onComplete will be called)
  if (!currentError) {
    return null;
  }

  switch (currentError) {
    case 'needsGitStash':
      return <TeleportStash onStashAndContinue={handleStashComplete} onCancel={onCancel} />;

    case 'needsLogin': {
      if (isLoggingIn) {
        return <ConsoleOAuthFlow onDone={handleLoginComplete} mode="login" forceLoginMethod="claudeai" />;
      }

      return (
        <Dialog title="Log in to Claude" onCancel={onCancel}>
          <Box flexDirection="column">
            <Text dimColor>Teleport requires a Claude.ai account.</Text>
            <Text dimColor>Your Claude Pro/Max subscription will be used by Claude Code.</Text>
          </Box>
          <Select
            options={[
              { label: 'Login with Claude account', value: 'login' },
              { label: 'Exit', value: 'exit' },
            ]}
            onChange={handleLoginDialogSelect}
          />
        </Dialog>
      );
    }
  }
}

/**
 * Gets current teleport errors that need to be resolved
 * @returns Set of teleport error types that need to be handled
 */
export async function getTeleportErrors(): Promise<Set<TeleportLocalErrorType>> {
  const errors = new Set<TeleportLocalErrorType>();

  const [needsLogin, isGitClean] = await Promise.all([checkNeedsClaudeAiLogin(), checkIsGitClean()]);

  if (needsLogin) {
    errors.add('needsLogin');
  }
  if (!isGitClean) {
    errors.add('needsGitStash');
  }

  return errors;
}