@shareai-lab/kode 1.1.14 → 1.1.16-dev.2

package/src/components/ConsoleOAuthFlow.tsx

@@ -1,327 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react'
-import { Static, Box, Text, useInput } from 'ink'
-import TextInput from './TextInput'
-import { OAuthService, createAndStoreApiKey } from '../services/oauth'
-import { getTheme } from '../utils/theme'
-import { logEvent } from '../services/statsig'
-import { AsciiLogo } from './AsciiLogo'
-import { useTerminalSize } from '../hooks/useTerminalSize'
-import { logError } from '../utils/log'
-import { clearTerminal } from '../utils/terminal'
-import { SimpleSpinner } from './Spinner'
-import { WelcomeBox } from './Onboarding'
-import { PRODUCT_NAME } from '../constants/product'
-import { sendNotification } from '../services/notifier'
-
-type Props = {
-  onDone(): void
-}
-
-type OAuthStatus =
-  | { state: 'idle' }
-  | { state: 'ready_to_start' }
-  | { state: 'waiting_for_login'; url: string }
-  | { state: 'creating_api_key' }
-  | { state: 'about_to_retry'; nextState: OAuthStatus }
-  | { state: 'success'; apiKey: string }
-  | {
-      state: 'error'
-      message: string
-      toRetry?: OAuthStatus
-    }
-
-const PASTE_HERE_MSG = 'Paste code here if prompted > '
-
-export function ConsoleOAuthFlow({ onDone }: Props): React.ReactNode {
-  const [oauthStatus, setOAuthStatus] = useState<OAuthStatus>({
-    state: 'idle',
-  })
-  const theme = getTheme()
-
-  const [pastedCode, setPastedCode] = useState('')
-  const [cursorOffset, setCursorOffset] = useState(0)
-  const [oauthService] = useState(() => new OAuthService())
-  // After a few seconds we suggest the user to copy/paste url if the
-  // browser did not open automatically. In this flow we expect the user to
-  // copy the code from the browser and paste it in the terminal
-  const [showPastePrompt, setShowPastePrompt] = useState(false)
-  // we need a special clearing state to correctly re-render Static elements
-  const [isClearing, setIsClearing] = useState(false)
-
-  const textInputColumns = useTerminalSize().columns - PASTE_HERE_MSG.length - 1
-
-  useEffect(() => {
-    if (isClearing) {
-      clearTerminal()
-      setIsClearing(false)
-    }
-  }, [isClearing])
-
-  // Retry logic
-  useEffect(() => {
-    if (oauthStatus.state === 'about_to_retry') {
-      setIsClearing(true)
-      setTimeout(() => {
-        setOAuthStatus(oauthStatus.nextState)
-      }, 1000)
-    }
-  }, [oauthStatus])
-
-  useInput(async (_, key) => {
-    if (key.return) {
-      if (oauthStatus.state === 'idle') {
-        logEvent('tengu_oauth_start', {})
-        setOAuthStatus({ state: 'ready_to_start' })
-      } else if (oauthStatus.state === 'success') {
-        logEvent('tengu_oauth_success', {})
-        await clearTerminal() // needed to clear out Static components
-        onDone()
-      } else if (oauthStatus.state === 'error' && oauthStatus.toRetry) {
-        setPastedCode('')
-        setOAuthStatus({
-          state: 'about_to_retry',
-          nextState: oauthStatus.toRetry,
-        })
-      }
-    }
-  })
-
-  async function handleSubmitCode(value: string, url: string) {
-    try {
-      // Expecting format "authorizationCode#state" from the authorization callback URL
-      const [authorizationCode, state] = value.split('#')
-
-      if (!authorizationCode || !state) {
-        setOAuthStatus({
-          state: 'error',
-          message: 'Invalid code. Please make sure the full code was copied',
-          toRetry: { state: 'waiting_for_login', url },
-        })
-        return
-      }
-
-      // Track which path the user is taking (manual code entry)
-      logEvent('tengu_oauth_manual_entry', {})
-      oauthService.processCallback({
-        authorizationCode,
-        state,
-        useManualRedirect: true,
-      })
-    } catch (err) {
-      logError(err)
-      setOAuthStatus({
-        state: 'error',
-        message: (err as Error).message,
-        toRetry: { state: 'waiting_for_login', url },
-      })
-    }
-  }
-
-  const startOAuth = useCallback(async () => {
-    try {
-      const result = await oauthService
-        .startOAuthFlow(async url => {
-          setOAuthStatus({ state: 'waiting_for_login', url })
-          setTimeout(() => setShowPastePrompt(true), 3000)
-        })
-        .catch(err => {
-          // Handle token exchange errors specifically
-          if (err.message.includes('Token exchange failed')) {
-            setOAuthStatus({
-              state: 'error',
-              message:
-                'Failed to exchange authorization code for access token. Please try again.',
-              toRetry: { state: 'ready_to_start' },
-            })
-            logEvent('tengu_oauth_token_exchange_error', { error: err.message })
-          } else {
-            // Handle other errors
-            setOAuthStatus({
-              state: 'error',
-              message: err.message,
-              toRetry: { state: 'ready_to_start' },
-            })
-          }
-          throw err
-        })
-
-      setOAuthStatus({ state: 'creating_api_key' })
-
-      const apiKey = await createAndStoreApiKey(result.accessToken).catch(
-        err => {
-          setOAuthStatus({
-            state: 'error',
-            message: 'Failed to create API key: ' + err.message,
-            toRetry: { state: 'ready_to_start' },
-          })
-          logEvent('tengu_oauth_api_key_error', { error: err.message })
-          throw err
-        },
-      )
-
-      if (apiKey) {
-        setOAuthStatus({ state: 'success', apiKey })
-        sendNotification({ message: 'Kode login successful' })
-      } else {
-        setOAuthStatus({
-          state: 'error',
-          message:
-            "Unable to create API key. The server accepted the request but didn't return a key.",
-          toRetry: { state: 'ready_to_start' },
-        })
-        logEvent('tengu_oauth_api_key_error', {
-          error: 'server_returned_no_key',
-        })
-      }
-    } catch (err) {
-      const errorMessage = (err as Error).message
-      logEvent('tengu_oauth_error', { error: errorMessage })
-    }
-  }, [oauthService, setShowPastePrompt])
-
-  useEffect(() => {
-    if (oauthStatus.state === 'ready_to_start') {
-      startOAuth()
-    }
-  }, [oauthStatus.state, startOAuth])
-
-  // Helper function to render the appropriate status message
-  function renderStatusMessage(): React.ReactNode {
-    switch (oauthStatus.state) {
-      case 'idle':
-        return (
-          <Box flexDirection="column" gap={1}>
-            <Text bold>
-              {PRODUCT_NAME} is billed based on API usage through your Anthropic
-              Console account.
-            </Text>
-
-            <Box>
-              <Text>
-                Pricing may evolve as we move towards general availability.
-              </Text>
-            </Box>
-
-            <Box marginTop={1}>
-              <Text color={theme.permission}>
-                Press <Text bold>Enter</Text> to login to your Anthropic Console
-                account…
-              </Text>
-            </Box>
-          </Box>
-        )
-
-      case 'waiting_for_login':
-        return (
-          <Box flexDirection="column" gap={1}>
-            {!showPastePrompt && (
-              <Box>
-                <SimpleSpinner />
-                <Text>Opening browser to sign in…</Text>
-              </Box>
-            )}
-
-            {showPastePrompt && (
-              <Box>
-                <Text>{PASTE_HERE_MSG}</Text>
-                <TextInput
-                  value={pastedCode}
-                  onChange={setPastedCode}
-                  onSubmit={(value: string) =>
-                    handleSubmitCode(value, oauthStatus.url)
-                  }
-                  cursorOffset={cursorOffset}
-                  onChangeCursorOffset={setCursorOffset}
-                  columns={textInputColumns}
-                />
-              </Box>
-            )}
-          </Box>
-        )
-
-      case 'creating_api_key':
-        return (
-          <Box flexDirection="column" gap={1}>
-            <Box>
-              <SimpleSpinner />
-              <Text>Creating API key for Kode…</Text>
-            </Box>
-          </Box>
-        )
-
-      case 'about_to_retry':
-        return (
-          <Box flexDirection="column" gap={1}>
-            <Text color={theme.permission}>Retrying…</Text>
-          </Box>
-        )
-
-      case 'success':
-        return (
-          <Box flexDirection="column" gap={1}>
-            <Text color={theme.success}>
-              Login successful. Press <Text bold>Enter</Text> to continue…
-            </Text>
-          </Box>
-        )
-
-      case 'error':
-        return (
-          <Box flexDirection="column" gap={1}>
-            <Text color={theme.error}>OAuth error: {oauthStatus.message}</Text>
-
-            {oauthStatus.toRetry && (
-              <Box marginTop={1}>
-                <Text color={theme.permission}>
-                  Press <Text bold>Enter</Text> to retry.
-                </Text>
-              </Box>
-            )}
-          </Box>
-        )
-
-      default:
-        return null
-    }
-  }
-
-  // We need to render the copy-able URL statically to prevent Ink <Text> from inserting
-  // newlines in the middle of the URL (this breaks Safari). Because <Static> components are
-  // only rendered once top-to-bottom, we also need to make everything above the URL static.
-  const staticItems: Record<string, React.JSX.Element> = {}
-  if (!isClearing) {
-    staticItems.header = (
-      <Box key="header" flexDirection="column" gap={1}>
-        <WelcomeBox />
-        <Box paddingBottom={1} paddingLeft={1}>
-          <AsciiLogo />
-        </Box>
-      </Box>
-    )
-  }
-  if (oauthStatus.state === 'waiting_for_login' && showPastePrompt) {
-    staticItems.urlToCopy = (
-      <Box flexDirection="column" key="urlToCopy" gap={1} paddingBottom={1}>
-        <Box paddingX={1}>
-          <Text dimColor>
-            Browser didn&apos;t open? Use the url below to sign in:
-          </Text>
-        </Box>
-        <Box width={1000}>
-          <Text dimColor>{oauthStatus.url}</Text>
-        </Box>
-      </Box>
-    )
-  }
-  return (
-    <Box flexDirection="column" gap={1}>
-      <Static 
-        items={Object.keys(staticItems)}
-        children={(item: string) => staticItems[item]}
-      />
-      <Box paddingLeft={1} flexDirection="column" gap={1}>
-        {renderStatusMessage()}
-      </Box>
-    </Box>
-  )
-}

package/src/components/Cost.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react'
-import { Box, Text } from 'ink'
-
-type Props = {
-  costUSD: number
-  durationMs: number
-  debug: boolean
-}
-
-export function Cost({ costUSD, durationMs, debug }: Props): React.ReactNode {
-  if (!debug) {
-    return null
-  }
-
-  const durationInSeconds = (durationMs / 1000).toFixed(1)
-  return (
-    <Box flexDirection="column" minWidth={23} width={23}>
-      <Text dimColor>
-        Cost: ${costUSD.toFixed(4)} ({durationInSeconds}s)
-      </Text>
-    </Box>
-  )
-}

package/src/components/CostThresholdDialog.tsx

@@ -1,46 +0,0 @@
-import { Box, Text, useInput } from 'ink'
-import React from 'react'
-import { Select } from './CustomSelect/select'
-import { getTheme } from '../utils/theme'
-import Link from './Link'
-
-interface Props {
-  onDone: () => void
-}
-
-export function CostThresholdDialog({ onDone }: Props): React.ReactNode {
-  // Handle Ctrl+C, Ctrl+D and Esc
-  useInput((input, key) => {
-    if ((key.ctrl && (input === 'c' || input === 'd')) || key.escape) {
-      onDone()
-    }
-  })
-
-  return (
-    <Box
-      flexDirection="column"
-      borderStyle="round"
-      padding={1}
-      borderColor={getTheme().secondaryBorder}
-    >
-      <Box marginBottom={1} flexDirection="column">
-        <Text bold>
-          You&apos;ve spent $5 on AI model API calls this session.
-        </Text>
-        <Text>Learn more about monitoring your AI usage costs:</Text>
-        <Link url="https://github.com/anthropics/claude-code/docs/cost-monitoring" />
-      </Box>
-      <Box>
-        <Select
-          options={[
-            {
-              value: 'ok',
-              label: 'Got it, thanks!',
-            },
-          ]}
-          onChange={onDone}
-        />
-      </Box>
-    </Box>
-  )
-}

package/src/components/CustomSelect/option-map.ts

@@ -1,42 +0,0 @@
-import { type Option } from '@inkjs/ui'
-import { optionHeaderKey, type OptionHeader } from './select'
-
-type OptionMapItem = (Option | OptionHeader) & {
-  previous: OptionMapItem | undefined
-  next: OptionMapItem | undefined
-  index: number
-}
-
-export default class OptionMap extends Map<string, OptionMapItem> {
-  readonly first: OptionMapItem | undefined
-
-  constructor(options: (Option | OptionHeader)[]) {
-    const items: Array<[string, OptionMapItem]> = []
-    let firstItem: OptionMapItem | undefined
-    let previous: OptionMapItem | undefined
-    let index = 0
-
-    for (const option of options) {
-      const item = {
-        ...option,
-        previous,
-        next: undefined,
-        index,
-      }
-
-      if (previous) {
-        previous.next = item
-      }
-
-      firstItem ||= item
-
-      const key = 'value' in option ? option.value : optionHeaderKey(option)
-      items.push([key, item])
-      index++
-      previous = item
-    }
-
-    super(items)
-    this.first = firstItem
-  }
-}

package/src/components/CustomSelect/select-option.tsx

@@ -1,78 +0,0 @@
-import figures from 'figures'
-import { Box, Text } from 'ink'
-import React, { type ReactNode } from 'react'
-import { type Theme } from './theme'
-import { getTheme } from '../../utils/theme'
-
-export type SelectOptionProps = {
-  /**
-   * Determines if option is focused.
-   */
-  readonly isFocused: boolean
-
-  /**
-   * Determines if option is selected.
-   */
-  readonly isSelected: boolean
-
-  /**
-   * Determines if pointer is shown when selected
-   */
-  readonly smallPointer?: boolean
-
-  /**
-   * Option label.
-   */
-  readonly children: ReactNode
-
-  /**
-   * React key prop (handled internally by React)
-   */
-  readonly key?: React.Key
-}
-
-export function SelectOption({
-  isFocused,
-  isSelected,
-  smallPointer,
-  children,
-  ...props
-}: SelectOptionProps) {
-  const appTheme = getTheme()
-  const styles = {
-    option: ({ isFocused }: { isFocused: boolean }) => ({
-      paddingLeft: 2,
-      paddingRight: 1,
-    }),
-    focusIndicator: () => ({
-      color: appTheme.kode,
-    }),
-    label: ({ isFocused, isSelected }: { isFocused: boolean; isSelected: boolean }) => ({
-      color: isSelected 
-        ? appTheme.success 
-        : isFocused 
-          ? appTheme.kode 
-          : appTheme.text,
-      bold: isSelected,
-    }),
-    selectedIndicator: () => ({
-      color: appTheme.success,
-    }),
-  }
-
-  return (
-    <Box {...styles.option({ isFocused })}>
-      {isFocused && (
-        <Text {...styles.focusIndicator()}>
-          {smallPointer ? figures.triangleDownSmall : figures.pointer}
-        </Text>
-      )}
-
-      <Text {...styles.label({ isFocused, isSelected })}>{children}</Text>
-
-      {isSelected && (
-        <Text {...styles.selectedIndicator()}>{figures.tick}</Text>
-      )}
-    </Box>
-  )
-}

package/src/components/CustomSelect/select.tsx

@@ -1,152 +0,0 @@
-import { Box, Text } from 'ink'
-import React, { type ReactNode } from 'react'
-import { SelectOption } from './select-option'
-import { type Theme } from './theme'
-import { useSelectState } from './use-select-state'
-import { useSelect } from './use-select'
-import { Option } from '@inkjs/ui'
-import { getTheme } from '../../utils/theme'
-
-export type OptionSubtree = {
-  /**
-   * Header to show above sub-options.
-   */
-  readonly header?: string
-
-  /**
-   * Options.
-   */
-  readonly options: (Option | OptionSubtree)[]
-}
-
-export type OptionHeader = {
-  readonly header: string
-
-  readonly optionValues: string[]
-}
-
-export const optionHeaderKey = (optionHeader: OptionHeader): string =>
-  `HEADER-${optionHeader.optionValues.join(',')}`
-
-export type SelectProps = {
-  /**
-   * When disabled, user input is ignored.
-   *
-   * @default false
-   */
-  readonly isDisabled?: boolean
-
-  /**
-   * Number of visible options.
-   *
-   * @default 5
-   */
-  readonly visibleOptionCount?: number
-
-  /**
-   * Highlight text in option labels.
-   */
-  readonly highlightText?: string
-
-  /**
-   * Options.
-   */
-  readonly options: (Option | OptionSubtree)[]
-
-  /**
-   * Default value.
-   */
-  readonly defaultValue?: string
-
-  /**
-   * Callback when selected option changes.
-   */
-  readonly onChange?: (value: string) => void
-
-  /**
-   * Callback when focused option changes.
-   */
-  readonly onFocus?: (value: string) => void
-
-  /**
-   * Value to focus
-   */
-  readonly focusValue?: string
-}
-
-export function Select({
-  isDisabled = false,
-  visibleOptionCount = 5,
-  highlightText,
-  options,
-  defaultValue,
-  onChange,
-  onFocus,
-  focusValue,
-}: SelectProps) {
-  const state = useSelectState({
-    visibleOptionCount,
-    options,
-    defaultValue,
-    onChange,
-    onFocus,
-    focusValue,
-  })
-
-  useSelect({ isDisabled, state })
-
-  const appTheme = getTheme()
-  const styles = {
-    container: () => ({
-      flexDirection: 'column' as const,
-    }),
-    highlightedText: () => ({
-      color: appTheme.text,
-      backgroundColor: appTheme.warning,
-    }),
-  }
-
-  return (
-    <Box {...styles.container()}>
-      {state.visibleOptions.map(option => {
-        const key = 'value' in option ? option.value : optionHeaderKey(option)
-        const isFocused =
-          !isDisabled &&
-          state.focusedValue !== undefined &&
-          ('value' in option
-            ? state.focusedValue === option.value
-            : option.optionValues.includes(state.focusedValue))
-        const isSelected =
-          !!state.value &&
-          ('value' in option
-            ? state.value === option.value
-            : option.optionValues.includes(state.value))
-        const smallPointer = 'header' in option
-        const labelText = 'label' in option ? option.label : option.header
-        let label: ReactNode = labelText
-
-        if (highlightText && labelText.includes(highlightText)) {
-          const index = labelText.indexOf(highlightText)
-
-          label = (
-            <>
-              {labelText.slice(0, index)}
-              <Text {...styles.highlightedText()}>{highlightText}</Text>
-              {labelText.slice(index + highlightText.length)}
-            </>
-          )
-        }
-
-        return (
-          <SelectOption
-            key={key}
-            isFocused={isFocused}
-            isSelected={isSelected}
-            smallPointer={smallPointer}
-            children={label}
-          />
-        )
-      })}
-    </Box>
-  )
-}