@shareai-lab/kode 1.0.70 → 1.0.71

package/src/components/SentryErrorBoundary.ts

@@ -0,0 +1,33 @@
+import * as React from 'react'
+import { captureException } from '../services/sentry'
+
+interface Props {
+  children: React.ReactNode
+}
+
+interface State {
+  hasError: boolean
+}
+
+export class SentryErrorBoundary extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error: Error): void {
+    captureException(error)
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      return null
+    }
+
+    return this.props.children
+  }
+}

package/src/components/Spinner.tsx

@@ -0,0 +1,129 @@
+import { Box, Text } from 'ink'
+import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
+import { getTheme } from '../utils/theme'
+import { sample } from 'lodash-es'
+import { getSessionState } from '../utils/sessionState'
+// NB: The third character in this string is an emoji that
+// renders on Windows consoles with a green background
+const CHARACTERS =
+  process.platform === 'darwin'
+    ? ['·', '✢', '✳', '∗', '✻', '✽']
+    : ['·', '✢', '*', '∗', '✻', '✽']
+
+const MESSAGES = [
+  'Accomplishing',
+  'Actioning',
+  'Actualizing',
+  'Baking',
+  'Brewing',
+  'Calculating',
+  'Cerebrating',
+  'Churning',
+  'Coding',
+  'Coalescing',
+  'Cogitating',
+  'Computing',
+  'Conjuring',
+  'Considering',
+  'Cooking',
+  'Crafting',
+  'Creating',
+  'Crunching',
+  'Deliberating',
+  'Determining',
+  'Doing',
+  'Effecting',
+  'Finagling',
+  'Forging',
+  'Forming',
+  'Generating',
+  'Hatching',
+  'Herding',
+  'Honking',
+  'Hustling',
+  'Ideating',
+  'Inferring',
+  'Manifesting',
+  'Marinating',
+  'Moseying',
+  'Mulling',
+  'Mustering',
+  'Musing',
+  'Noodling',
+  'Percolating',
+  'Pondering',
+  'Processing',
+  'Puttering',
+  'Reticulating',
+  'Ruminating',
+  'Schlepping',
+  'Shucking',
+  'Simmering',
+  'Smooshing',
+  'Spinning',
+  'Stewing',
+  'Synthesizing',
+  'Thinking',
+  'Transmuting',
+  'Vibing',
+  'Working',
+]
+
+export function Spinner(): React.ReactNode {
+  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]
+  const [frame, setFrame] = useState(0)
+  const [elapsedTime, setElapsedTime] = useState(0)
+  const message = useRef(sample(MESSAGES))
+  const startTime = useRef(Date.now())
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame(f => (f + 1) % frames.length)
+    }, 120)
+
+    return () => clearInterval(timer)
+  }, [frames.length])
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setElapsedTime(Math.floor((Date.now() - startTime.current) / 1000))
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <Box flexDirection="row" marginTop={1}>
+      <Box flexWrap="nowrap" height={1} width={2}>
+        <Text color={getTheme().claude}>{frames[frame]}</Text>
+      </Box>
+      <Text color={getTheme().claude}>{message.current}… </Text>
+      <Text color={getTheme().secondaryText}>
+        ({elapsedTime}s · <Text bold>esc</Text> to interrupt)
+      </Text>
+      <Text color={getTheme().secondaryText}>
+        · {getSessionState('currentError')}
+      </Text>
+    </Box>
+  )
+}
+
+export function SimpleSpinner(): React.ReactNode {
+  const frames = [...CHARACTERS, ...[...CHARACTERS].reverse()]
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setFrame(f => (f + 1) % frames.length)
+    }, 120)
+
+    return () => clearInterval(timer)
+  }, [frames.length])
+
+  return (
+    <Box flexWrap="nowrap" height={1} width={2}>
+      <Text color={getTheme().claude}>{frames[frame]}</Text>
+    </Box>
+  )
+}

package/src/components/StructuredDiff.tsx

@@ -0,0 +1,184 @@
+import { Box, Text } from 'ink'
+import * as React from 'react'
+import { Hunk } from 'diff'
+import { getTheme, ThemeNames } from '../utils/theme'
+import { useMemo } from 'react'
+import { wrapText } from '../utils/format'
+
+type Props = {
+  patch: Hunk
+  dim: boolean
+  width: number
+  overrideTheme?: ThemeNames // custom theme for previews
+}
+
+export function StructuredDiff({
+  patch,
+  dim,
+  width,
+  overrideTheme,
+}: Props): React.ReactNode {
+  const diff = useMemo(
+    () => formatDiff(patch.lines, patch.oldStart, width, dim, overrideTheme),
+    [patch.lines, patch.oldStart, width, dim, overrideTheme],
+  )
+
+  return diff.map((_, i) => <Box key={i}>{_}</Box>)
+}
+
+function formatDiff(
+  lines: string[],
+  startingLineNumber: number,
+  width: number,
+  dim: boolean,
+  overrideTheme?: ThemeNames,
+): React.ReactNode[] {
+  const theme = getTheme(overrideTheme)
+
+  const ls = numberDiffLines(
+    lines.map(code => {
+      if (code.startsWith('+')) {
+        return {
+          code: ' ' + code.slice(1),
+          i: 0,
+          type: 'add',
+        }
+      }
+      if (code.startsWith('-')) {
+        return {
+          code: ' ' + code.slice(1),
+          i: 0,
+          type: 'remove',
+        }
+      }
+      return { code, i: 0, type: 'nochange' }
+    }),
+    startingLineNumber,
+  )
+
+  const maxLineNumber = Math.max(...ls.map(({ i }) => i))
+  const maxWidth = maxLineNumber.toString().length
+
+  return ls.flatMap(({ type, code, i }) => {
+    const wrappedLines = wrapText(code, width - maxWidth)
+    return wrappedLines.map((line, lineIndex) => {
+      const key = `${type}-${i}-${lineIndex}`
+      switch (type) {
+        case 'add':
+          return (
+            <Text key={key}>
+              <LineNumber
+                i={lineIndex === 0 ? i : undefined}
+                width={maxWidth}
+              />
+              <Text
+                color={overrideTheme ? theme.text : undefined}
+                backgroundColor={
+                  dim ? theme.diff.addedDimmed : theme.diff.added
+                }
+                dimColor={dim}
+              >
+                {line}
+              </Text>
+            </Text>
+          )
+        case 'remove':
+          return (
+            <Text key={key}>
+              <LineNumber
+                i={lineIndex === 0 ? i : undefined}
+                width={maxWidth}
+              />
+              <Text
+                color={overrideTheme ? theme.text : undefined}
+                backgroundColor={
+                  dim ? theme.diff.removedDimmed : theme.diff.removed
+                }
+                dimColor={dim}
+              >
+                {line}
+              </Text>
+            </Text>
+          )
+        case 'nochange':
+          return (
+            <Text key={key}>
+              <LineNumber
+                i={lineIndex === 0 ? i : undefined}
+                width={maxWidth}
+              />
+              <Text
+                color={overrideTheme ? theme.text : undefined}
+                dimColor={dim}
+              >
+                {line}
+              </Text>
+            </Text>
+          )
+      }
+    })
+  })
+}
+
+function LineNumber({
+  i,
+  width,
+}: {
+  i: number | undefined
+  width: number
+}): React.ReactNode {
+  return (
+    <Text color={getTheme().secondaryText}>
+      {i !== undefined ? i.toString().padStart(width) : ' '.repeat(width)}{' '}
+    </Text>
+  )
+}
+
+function numberDiffLines(
+  diff: { code: string; type: string }[],
+  startLine: number,
+): { code: string; type: string; i: number }[] {
+  let i = startLine
+  const result: { code: string; type: string; i: number }[] = []
+  const queue = [...diff]
+
+  while (queue.length > 0) {
+    const { code, type } = queue.shift()!
+    const line = {
+      code: code,
+      type,
+      i,
+    }
+
+    // Update counters based on change type
+    switch (type) {
+      case 'nochange':
+        i++
+        result.push(line)
+        break
+      case 'add':
+        i++
+        result.push(line)
+        break
+      case 'remove': {
+        result.push(line)
+        let numRemoved = 0
+        while (queue[0]?.type === 'remove') {
+          i++
+          const { code, type } = queue.shift()!
+          const line = {
+            code: code,
+            type,
+            i,
+          }
+          result.push(line)
+          numRemoved++
+        }
+        i -= numRemoved
+        break
+      }
+    }
+  }
+
+  return result
+}

package/src/components/TextInput.tsx

@@ -0,0 +1,246 @@
+import React from 'react'
+import { Text, useInput } from 'ink'
+import chalk from 'chalk'
+import { useTextInput } from '../hooks/useTextInput'
+import { getTheme } from '../utils/theme'
+import { type Key } from 'ink'
+
+export type Props = {
+  /**
+   * Optional callback for handling history navigation on up arrow at start of input
+   */
+  readonly onHistoryUp?: () => void
+
+  /**
+   * Optional callback for handling history navigation on down arrow at end of input
+   */
+  readonly onHistoryDown?: () => void
+
+  /**
+   * Text to display when `value` is empty.
+   */
+  readonly placeholder?: string
+
+  /**
+   * Allow multi-line input via line ending with backslash (default: `true`)
+   */
+  readonly multiline?: boolean
+
+  /**
+   * Listen to user's input. Useful in case there are multiple input components
+   * at the same time and input must be "routed" to a specific component.
+   */
+  readonly focus?: boolean
+
+  /**
+   * Replace all chars and mask the value. Useful for password inputs.
+   */
+  readonly mask?: string
+
+  /**
+   * Whether to show cursor and allow navigation inside text input with arrow keys.
+   */
+  readonly showCursor?: boolean
+
+  /**
+   * Highlight pasted text
+   */
+  readonly highlightPastedText?: boolean
+
+  /**
+   * Value to display in a text input.
+   */
+  readonly value: string
+
+  /**
+   * Function to call when value updates.
+   */
+  readonly onChange: (value: string) => void
+
+  /**
+   * Function to call when `Enter` is pressed, where first argument is a value of the input.
+   */
+  readonly onSubmit?: (value: string) => void
+
+  /**
+   * Function to call when Ctrl+C is pressed to exit.
+   */
+  readonly onExit?: () => void
+
+  /**
+   * Optional callback to show exit message
+   */
+  readonly onExitMessage?: (show: boolean, key?: string) => void
+
+  /**
+   * Optional callback to show custom message
+   */
+  readonly onMessage?: (show: boolean, message?: string) => void
+
+  /**
+   * Optional callback to reset history position
+   */
+  readonly onHistoryReset?: () => void
+
+  /**
+   * Number of columns to wrap text at
+   */
+  readonly columns: number
+
+  /**
+   * Optional callback when an image is pasted
+   */
+  readonly onImagePaste?: (base64Image: string) => void
+
+  /**
+   * Optional callback when a large text (over 800 chars) is pasted
+   */
+  readonly onPaste?: (text: string) => void
+
+  /**
+   * Whether the input is dimmed and non-interactive
+   */
+  readonly isDimmed?: boolean
+
+  /**
+   * Whether to disable cursor movement for up/down arrow keys
+   */
+  readonly disableCursorMovementForUpDownKeys?: boolean
+
+  readonly cursorOffset: number
+
+  /**
+   * Callback to set the offset of the cursor
+   */
+  onChangeCursorOffset: (offset: number) => void
+}
+
+export default function TextInput({
+  value: originalValue,
+  placeholder = '',
+  focus = true,
+  mask,
+  multiline = false,
+  highlightPastedText = false,
+  showCursor = true,
+  onChange,
+  onSubmit,
+  onExit,
+  onHistoryUp,
+  onHistoryDown,
+  onExitMessage,
+  onMessage,
+  onHistoryReset,
+  columns,
+  onImagePaste,
+  onPaste,
+  isDimmed = false,
+  disableCursorMovementForUpDownKeys = false,
+  cursorOffset,
+  onChangeCursorOffset,
+}: Props) {
+  const { onInput, renderedValue } = useTextInput({
+    value: originalValue,
+    onChange,
+    onSubmit,
+    onExit,
+    onExitMessage,
+    onMessage,
+    onHistoryReset,
+    onHistoryUp,
+    onHistoryDown,
+    focus,
+    mask,
+    multiline,
+    cursorChar: showCursor ? ' ' : '',
+    highlightPastedText,
+    invert: chalk.inverse,
+    themeText: (text: string) => chalk.hex(getTheme().text)(text),
+    columns,
+    onImagePaste,
+    disableCursorMovementForUpDownKeys,
+    externalOffset: cursorOffset,
+    onOffsetChange: onChangeCursorOffset,
+  })
+
+  // Paste detection state
+  const [pasteState, setPasteState] = React.useState<{
+    chunks: string[]
+    timeoutId: ReturnType<typeof setTimeout> | null
+  }>({ chunks: [], timeoutId: null })
+
+  const resetPasteTimeout = (
+    currentTimeoutId: ReturnType<typeof setTimeout> | null,
+  ) => {
+    if (currentTimeoutId) {
+      clearTimeout(currentTimeoutId)
+    }
+    return setTimeout(() => {
+      setPasteState(({ chunks }) => {
+        const pastedText = chunks.join('')
+        // Schedule callback after current render to avoid state updates during render
+        Promise.resolve().then(() => onPaste!(pastedText))
+        return { chunks: [], timeoutId: null }
+      })
+    }, 100)
+  }
+
+  const wrappedOnInput = (input: string, key: Key): void => {
+    // Special handling for backspace or delete
+    if (
+      key.backspace ||
+      key.delete ||
+      input === '\b' ||
+      input === '\x7f' ||
+      input === '\x08'
+    ) {
+      // Ensure backspace is handled directly
+      onInput(input, {
+        ...key,
+        backspace: true,
+      })
+      return
+    }
+
+    // Handle pastes (>800 chars)
+    // Usually we get one or two input characters at a time. If we
+    // get a bunch, the user has probably pasted.
+    // Unfortunately node batches long pastes, so it's possible
+    // that we would see e.g. 1024 characters and then just a few
+    // more in the next frame that belong with the original paste.
+    // This batching number is not consistent.
+    if (onPaste && (input.length > 800 || pasteState.timeoutId)) {
+      setPasteState(({ chunks, timeoutId }) => {
+        return {
+          chunks: [...chunks, input],
+          timeoutId: resetPasteTimeout(timeoutId),
+        }
+      })
+      return
+    }
+
+    onInput(input, key)
+  }
+
+  useInput(wrappedOnInput, { isActive: focus })
+
+  let renderedPlaceholder = placeholder
+    ? chalk.hex(getTheme().secondaryText)(placeholder)
+    : undefined
+
+  // Fake mouse cursor, because we like punishment
+  if (showCursor && focus) {
+    renderedPlaceholder =
+      placeholder.length > 0
+        ? chalk.inverse(placeholder[0]) +
+          chalk.hex(getTheme().secondaryText)(placeholder.slice(1))
+        : chalk.inverse(' ')
+  }
+
+  const showPlaceholder = originalValue.length == 0 && placeholder
+  return (
+    <Text wrap="truncate-end" dimColor={isDimmed}>
+      {showPlaceholder ? renderedPlaceholder : renderedValue}
+    </Text>
+  )
+}

package/src/components/TokenWarning.tsx

@@ -0,0 +1,31 @@
+import { Box, Text } from 'ink'
+import * as React from 'react'
+import { getTheme } from '../utils/theme'
+
+type Props = {
+  tokenUsage: number
+}
+
+const MAX_TOKENS = 190_000
+export const WARNING_THRESHOLD = MAX_TOKENS * 0.6
+const ERROR_THRESHOLD = MAX_TOKENS * 0.8
+
+export function TokenWarning({ tokenUsage }: Props): React.ReactNode {
+  const theme = getTheme()
+
+  if (tokenUsage < WARNING_THRESHOLD) {
+    return null
+  }
+
+  const isError = tokenUsage >= ERROR_THRESHOLD
+
+  return (
+    <Box flexDirection="row">
+      <Text color={isError ? theme.error : theme.warning}>
+        Context low (
+        {Math.max(0, 100 - Math.round((tokenUsage / MAX_TOKENS) * 100))}%
+        remaining) &middot; Run /compact to compact & continue
+      </Text>
+    </Box>
+  )
+}

package/src/components/ToolUseLoader.tsx

@@ -0,0 +1,40 @@
+import { Box, Text } from 'ink'
+import React from 'react'
+import { useInterval } from '../hooks/useInterval'
+import { getTheme } from '../utils/theme'
+import { BLACK_CIRCLE } from '../constants/figures'
+
+type Props = {
+  isError: boolean
+  isUnresolved: boolean
+  shouldAnimate: boolean
+}
+
+export function ToolUseLoader({
+  isError,
+  isUnresolved,
+  shouldAnimate,
+}: Props): React.ReactNode {
+  const [isVisible, setIsVisible] = React.useState(true)
+
+  useInterval(() => {
+    if (!shouldAnimate) {
+      return
+    }
+    // To avoid flickering when the tool use confirm is visible, we set the loader to be visible
+    // when the tool use confirm is visible.
+    setIsVisible(_ => !_)
+  }, 600)
+
+  const color = isUnresolved
+    ? getTheme().secondaryText
+    : isError
+      ? getTheme().error
+      : getTheme().success
+
+  return (
+    <Box minWidth={2}>
+      <Text color={color}>{isVisible ? BLACK_CIRCLE : '  '}</Text>
+    </Box>
+  )
+}