@shareai-lab/kode 1.0.70 → 1.0.71

package/src/components/Config.tsx

@@ -0,0 +1,289 @@
+import { Box, Text, useInput } from 'ink'
+import * as React from 'react'
+import { useState } from 'react'
+import figures from 'figures'
+import { getTheme } from '../utils/theme'
+import {
+  GlobalConfig,
+  saveGlobalConfig,
+  getGlobalConfig,
+} from '../utils/config.js'
+import chalk from 'chalk'
+import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
+import { getModelManager } from '../utils/model'
+
+type Props = {
+  onClose: () => void
+}
+
+type Setting =
+  | {
+      id: string
+      label: string
+      value: boolean
+      onChange(value: boolean): void
+      type: 'boolean'
+      disabled?: boolean
+    }
+  | {
+      id: string
+      label: string
+      value: string
+      options: string[]
+      onChange(value: string): void
+      type: 'enum'
+      disabled?: boolean
+    }
+  | {
+      id: string
+      label: string
+      value: string
+      onChange(value: string): void
+      type: 'string'
+      disabled?: boolean
+    }
+  | {
+      id: string
+      label: string
+      value: number
+      onChange(value: number): void
+      type: 'number'
+      disabled?: boolean
+    }
+
+export function Config({ onClose }: Props): React.ReactNode {
+  const [globalConfig, setGlobalConfig] = useState(getGlobalConfig())
+  const initialConfig = React.useRef(getGlobalConfig())
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const exitState = useExitOnCtrlCD(() => process.exit(0))
+  const [editingString, setEditingString] = useState(false)
+  const [currentInput, setCurrentInput] = useState('')
+  const [inputError, setInputError] = useState<string | null>(null)
+
+  const modelManager = getModelManager()
+  const activeProfiles = modelManager.getAvailableModels()
+
+  const settings: Setting[] = [
+    // Global settings
+    {
+      id: 'theme',
+      label: 'Theme',
+      value: globalConfig.theme ?? 'dark',
+      options: ['dark', 'light'],
+      onChange(theme: string) {
+        const config = { ...getGlobalConfig(), theme: theme as any }
+        saveGlobalConfig(config)
+        setGlobalConfig(config)
+      },
+      type: 'enum',
+    },
+    {
+      id: 'verbose',
+      label: 'Verbose mode',
+      value: globalConfig.verbose ?? false,
+      onChange(verbose: boolean) {
+        const config = { ...getGlobalConfig(), verbose }
+        saveGlobalConfig(config)
+        setGlobalConfig(config)
+      },
+      type: 'boolean',
+    },
+    {
+      id: 'stream',
+      label: 'Stream responses',
+      value: globalConfig.stream ?? true,
+      onChange(stream: boolean) {
+        const config = { ...getGlobalConfig(), stream }
+        saveGlobalConfig(config)
+        setGlobalConfig(config)
+      },
+      type: 'boolean',
+    },
+  ]
+
+  const theme = getTheme()
+
+  useInput((input, key) => {
+    if (editingString) {
+      if (key.return) {
+        const currentSetting = settings[selectedIndex]
+        if (currentSetting?.type === 'string') {
+          try {
+            currentSetting.onChange(currentInput)
+            setEditingString(false)
+            setCurrentInput('')
+            setInputError(null)
+          } catch (error) {
+            setInputError(
+              error instanceof Error ? error.message : 'Invalid input',
+            )
+          }
+        } else if (currentSetting?.type === 'number') {
+          const numValue = parseFloat(currentInput)
+          if (isNaN(numValue)) {
+            setInputError('Please enter a valid number')
+          } else {
+            try {
+              ;(currentSetting as any).onChange(numValue)
+              setEditingString(false)
+              setCurrentInput('')
+              setInputError(null)
+            } catch (error) {
+              setInputError(
+                error instanceof Error ? error.message : 'Invalid input',
+              )
+            }
+          }
+        }
+      } else if (key.escape) {
+        setEditingString(false)
+        setCurrentInput('')
+        setInputError(null)
+      } else if (key.delete || key.backspace) {
+        setCurrentInput(prev => prev.slice(0, -1))
+      } else if (input) {
+        setCurrentInput(prev => prev + input)
+      }
+      return
+    }
+
+    if (key.upArrow && !exitState.pending) {
+      setSelectedIndex(prev => Math.max(0, prev - 1))
+    } else if (key.downArrow && !exitState.pending) {
+      setSelectedIndex(prev => Math.min(settings.length - 1, prev + 1))
+    } else if (key.return && !exitState.pending) {
+      const currentSetting = settings[selectedIndex]
+      if (currentSetting?.disabled) return
+
+      if (currentSetting?.type === 'boolean') {
+        currentSetting.onChange(!currentSetting.value)
+      } else if (currentSetting?.type === 'enum') {
+        const currentIndex = currentSetting.options.indexOf(
+          currentSetting.value,
+        )
+        const nextIndex = (currentIndex + 1) % currentSetting.options.length
+        currentSetting.onChange(currentSetting.options[nextIndex])
+      } else if (
+        currentSetting?.type === 'string' ||
+        currentSetting?.type === 'number'
+      ) {
+        setCurrentInput(String(currentSetting.value))
+        setEditingString(true)
+        setInputError(null)
+      }
+    } else if (key.escape && !exitState.pending) {
+      // Check if config has changed
+      const currentConfigString = JSON.stringify(getGlobalConfig())
+      const initialConfigString = JSON.stringify(initialConfig.current)
+
+      if (currentConfigString !== initialConfigString) {
+        // Config has changed, save it
+        saveGlobalConfig(getGlobalConfig())
+      }
+
+      onClose()
+    }
+  })
+
+  return (
+    <Box flexDirection="column" gap={1}>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={theme.secondaryBorder}
+        paddingX={2}
+        paddingY={1}
+        gap={1}
+      >
+        <Text bold>
+          Configuration{' '}
+          {exitState.pending
+            ? `(press ${exitState.keyName} again to exit)`
+            : ''}
+        </Text>
+
+        {/* Model Configuration Summary */}
+        <Box flexDirection="column" marginY={1}>
+          <Text bold color={theme.success}>
+            Model Configuration:
+          </Text>
+          {activeProfiles.length === 0 ? (
+            <Text color={theme.secondaryText}>
+              No models configured. Use /model to add models.
+            </Text>
+          ) : (
+            <Box flexDirection="column" marginLeft={2}>
+              {activeProfiles.map(profile => (
+                <Text key={profile.modelName} color={theme.secondaryText}>
+                  • {profile.name} ({profile.provider})
+                </Text>
+              ))}
+              <Text color={theme.suggestion} marginTop={1}>
+                Use /model to manage model configurations
+              </Text>
+            </Box>
+          )}
+        </Box>
+
+        {/* Settings List */}
+        <Box flexDirection="column">
+          {settings.map((setting, index) => (
+            <Box key={setting.id} flexDirection="column">
+              <Box flexDirection="row" gap={1}>
+                <Text
+                  color={
+                    index === selectedIndex
+                      ? theme.success
+                      : setting.disabled
+                        ? theme.secondaryText
+                        : theme.text
+                  }
+                >
+                  {index === selectedIndex ? figures.pointer : ' '}{' '}
+                  {setting.label}
+                </Text>
+                <Text
+                  color={
+                    setting.disabled ? theme.secondaryText : theme.suggestion
+                  }
+                >
+                  {setting.type === 'boolean'
+                    ? setting.value
+                      ? 'enabled'
+                      : 'disabled'
+                    : setting.type === 'enum'
+                      ? setting.value
+                      : String(setting.value)}
+                </Text>
+              </Box>
+              {index === selectedIndex && editingString && (
+                <Box flexDirection="column" marginLeft={2}>
+                  <Text color={theme.suggestion}>
+                    Enter new value: {currentInput}
+                  </Text>
+                  {inputError && <Text color="red">{inputError}</Text>}
+                </Box>
+              )}
+            </Box>
+          ))}
+        </Box>
+
+        <Box marginTop={1}>
+          <Text dimColor>
+            {editingString ? (
+              'Enter to save · Esc to cancel'
+            ) : (
+              <>
+                ↑/↓ to navigate · Enter to change · Esc to close
+                <Text color={theme.suggestion}>
+                  {' '}
+                  · Use /model for model config
+                </Text>
+              </>
+            )}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  )
+}

package/src/components/ConsoleOAuthFlow.tsx

@@ -0,0 +1,326 @@
+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, 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)}>
+        {item => staticItems[item]}
+      </Static>
+      <Box paddingLeft={1} flexDirection="column" gap={1}>
+        {renderStatusMessage()}
+      </Box>
+    </Box>
+  )
+}

package/src/components/Cost.tsx

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,46 @@
+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>
+  )
+}