@shareai-lab/kode 1.0.9

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>
+  )
+}

package/src/components/TrustDialog.tsx

@@ -0,0 +1,106 @@
+import React from 'react'
+import { Box, Text, useInput } from 'ink'
+import { getTheme } from '../utils/theme'
+import { Select } from './CustomSelect/select'
+import {
+  saveCurrentProjectConfig,
+  getCurrentProjectConfig,
+} from '../utils/config.js'
+import { PRODUCT_NAME } from '../constants/product'
+import { logEvent } from '../services/statsig'
+import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
+import { homedir } from 'os'
+import { getCwd } from '../utils/state'
+import Link from './Link'
+
+type Props = {
+  onDone(): void
+}
+
+export function TrustDialog({ onDone }: Props): React.ReactNode {
+  const theme = getTheme()
+  React.useEffect(() => {
+    // Log when dialog is shown
+    logEvent('trust_dialog_shown', {})
+  }, [])
+
+  function onChange(value: 'yes' | 'no') {
+    const config = getCurrentProjectConfig()
+    switch (value) {
+      case 'yes': {
+        // Log when user accepts
+        const isHomeDir = homedir() === getCwd()
+        logEvent('trust_dialog_accept', {
+          isHomeDir: String(isHomeDir),
+        })
+
+        if (!isHomeDir) {
+          saveCurrentProjectConfig({
+            ...config,
+            hasTrustDialogAccepted: true,
+          })
+        }
+        onDone()
+        break
+      }
+      case 'no': {
+        process.exit(1)
+        break
+      }
+    }
+  }
+
+  const exitState = useExitOnCtrlCD(() => process.exit(0))
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      process.exit(0)
+      return
+    }
+  })
+
+  return (
+    <>
+      <Box
+        flexDirection="column"
+        gap={1}
+        padding={1}
+        borderStyle="round"
+        borderColor={theme.warning}
+      >
+        <Text bold color={theme.warning}>
+          Do you trust the files in this folder?
+        </Text>
+        <Text bold>{process.cwd()}</Text>
+
+        <Box flexDirection="column" gap={1}>
+          <Text>
+            {PRODUCT_NAME} may read files in this folder. Reading untrusted
+            files may lead to {PRODUCT_NAME} to behave in an unexpected ways.
+          </Text>
+          <Text>
+            With your permission {PRODUCT_NAME} may execute files in this
+            folder. Executing untrusted code is unsafe.
+          </Text>
+        </Box>
+
+        <Select
+          options={[
+            { label: 'Yes, proceed', value: 'yes' },
+            { label: 'No, exit', value: 'no' },
+          ]}
+          onChange={value => onChange(value as 'yes' | 'no')}
+        />
+      </Box>
+      <Box marginLeft={3}>
+        <Text dimColor>
+          {exitState.pending ? (
+            <>Press {exitState.keyName} again to exit</>
+          ) : (
+            <>Enter to confirm · Esc to exit</>
+          )}
+        </Text>
+      </Box>
+    </>
+  )
+}

package/src/components/binary-feedback/BinaryFeedback.tsx

@@ -0,0 +1,63 @@
+import { default as React, useCallback } from 'react'
+import { useNotifyAfterTimeout } from '../../hooks/useNotifyAfterTimeout'
+import { AssistantMessage, BinaryFeedbackResult } from '../../query'
+import type { Tool } from '../../Tool'
+import type { NormalizedMessage } from '../../utils/messages'
+import { BinaryFeedbackView } from './BinaryFeedbackView'
+import {
+  type BinaryFeedbackChoose,
+  getBinaryFeedbackResultForChoice,
+  logBinaryFeedbackEvent,
+} from './utils.js'
+import { PRODUCT_NAME } from '../../constants/product'
+
+type Props = {
+  m1: AssistantMessage
+  m2: AssistantMessage
+  resolve: (result: BinaryFeedbackResult) => void
+  debug: boolean
+  erroredToolUseIDs: Set<string>
+  inProgressToolUseIDs: Set<string>
+  normalizedMessages: NormalizedMessage[]
+  tools: Tool[]
+  unresolvedToolUseIDs: Set<string>
+  verbose: boolean
+}
+
+export function BinaryFeedback({
+  m1,
+  m2,
+  resolve,
+  debug,
+  erroredToolUseIDs,
+  inProgressToolUseIDs,
+  normalizedMessages,
+  tools,
+  unresolvedToolUseIDs,
+  verbose,
+}: Props): React.ReactNode {
+  const onChoose = useCallback<BinaryFeedbackChoose>(
+    choice => {
+      logBinaryFeedbackEvent(m1, m2, choice)
+      resolve(getBinaryFeedbackResultForChoice(m1, m2, choice))
+    },
+    [m1, m2, resolve],
+  )
+  useNotifyAfterTimeout(
+    `${PRODUCT_NAME} needs your input on a response comparison`,
+  )
+  return (
+    <BinaryFeedbackView
+      debug={debug}
+      erroredToolUseIDs={erroredToolUseIDs}
+      inProgressToolUseIDs={inProgressToolUseIDs}
+      m1={m1}
+      m2={m2}
+      normalizedMessages={normalizedMessages}
+      tools={tools}
+      unresolvedToolUseIDs={unresolvedToolUseIDs}
+      verbose={verbose}
+      onChoose={onChoose}
+    />
+  )
+}

package/src/components/binary-feedback/BinaryFeedbackOption.tsx

@@ -0,0 +1,111 @@
+import { FileEditTool } from '../../tools/FileEditTool/FileEditTool'
+import { FileEditToolDiff } from '../permissions/FileEditPermissionRequest/FileEditToolDiff'
+import { Message } from '../Message'
+import {
+  normalizeMessages,
+  type NormalizedMessage,
+} from '../../utils/messages.js'
+import type { Tool } from '../../Tool'
+import { useTerminalSize } from '../../hooks/useTerminalSize'
+import { FileWriteTool } from '../../tools/FileWriteTool/FileWriteTool'
+import { FileWriteToolDiff } from '../permissions/FileWritePermissionRequest/FileWriteToolDiff'
+import type { AssistantMessage } from '../../query'
+import * as React from 'react'
+import { Box } from 'ink'
+
+type Props = {
+  debug: boolean
+  erroredToolUseIDs: Set<string>
+  inProgressToolUseIDs: Set<string>
+  message: AssistantMessage
+  normalizedMessages: NormalizedMessage[]
+  tools: Tool[]
+  unresolvedToolUseIDs: Set<string>
+  verbose: boolean
+}
+
+export function BinaryFeedbackOption({
+  debug,
+  erroredToolUseIDs,
+  inProgressToolUseIDs,
+  message,
+  normalizedMessages,
+  tools,
+  unresolvedToolUseIDs,
+  verbose,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize()
+  return normalizeMessages([message])
+    .filter(_ => _.type !== 'progress')
+    .map((_, index) => (
+      <Box flexDirection="column" key={index}>
+        <Message
+          addMargin={false}
+          erroredToolUseIDs={erroredToolUseIDs}
+          debug={debug}
+          inProgressToolUseIDs={inProgressToolUseIDs}
+          message={_}
+          messages={normalizedMessages}
+          shouldAnimate={false}
+          shouldShowDot={true}
+          tools={tools}
+          unresolvedToolUseIDs={unresolvedToolUseIDs}
+          verbose={verbose}
+          width={columns / 2 - 6}
+        />
+        <AdditionalContext message={_} verbose={verbose} />
+      </Box>
+    ))
+}
+
+function AdditionalContext({
+  message,
+  verbose,
+}: {
+  message: NormalizedMessage
+  verbose: boolean
+}) {
+  const { columns } = useTerminalSize()
+  if (message.type !== 'assistant') {
+    return null
+  }
+  const content = message.message.content[0]!
+  switch (content.type) {
+    case 'tool_use':
+      switch (content.name) {
+        case FileEditTool.name: {
+          const input = FileEditTool.inputSchema.safeParse(content.input)
+          if (!input.success) {
+            return null
+          }
+          return (
+            <FileEditToolDiff
+              file_path={input.data.file_path}
+              new_string={input.data.new_string}
+              old_string={input.data.old_string}
+              verbose={verbose}
+              width={columns / 2 - 12}
+            />
+          )
+        }
+        case FileWriteTool.name: {
+          const input = FileWriteTool.inputSchema.safeParse(content.input)
+          if (!input.success) {
+            return null
+          }
+          return (
+            <FileWriteToolDiff
+              file_path={input.data.file_path}
+              content={input.data.content}
+              verbose={verbose}
+              width={columns / 2 - 12}
+            />
+          )
+        }
+        default:
+          return null
+      }
+    default:
+      return null
+  }
+}

package/src/components/binary-feedback/BinaryFeedbackView.tsx

@@ -0,0 +1,172 @@
+import { Option, SelectProps } from '@inkjs/ui'
+import chalk from 'chalk'
+import { Box, Text, useInput } from 'ink'
+import Link from 'ink-link'
+import React, { useState } from 'react'
+import { getTheme } from '../../utils/theme'
+import { Select } from '../CustomSelect/select'
+import type { Tool } from '../../Tool'
+import type { NormalizedMessage } from '../../utils/messages'
+import { BinaryFeedbackOption } from './BinaryFeedbackOption'
+import type { AssistantMessage } from '../../query'
+import type { BinaryFeedbackChoose } from './utils'
+import { useExitOnCtrlCD } from '../../hooks/useExitOnCtrlCD'
+import { BinaryFeedbackChoice } from './utils'
+import { PRODUCT_NAME } from '../../constants/product'
+
+const HELP_URL = 'https://go/cli-feedback'
+
+type BinaryFeedbackOption = Option & { value: BinaryFeedbackChoice }
+
+// Make options a function to avoid early theme access during module initialization
+export function getOptions(): BinaryFeedbackOption[] {
+  return [
+    {
+      // This option combines the follow user intents:
+      // - The two options look about equally good to me
+      // - I don't feel confident enough to choose
+      // - I don't want to choose right now
+      label: 'Choose for me',
+      value: 'no-preference',
+    },
+    {
+      label: 'Left option looks better',
+      value: 'prefer-left',
+    },
+    {
+      label: 'Right option looks better',
+      value: 'prefer-right',
+    },
+    {
+      label: `Neither, and tell ${PRODUCT_NAME} what to do differently (${chalk.bold.hex(getTheme().warning)('esc')})`,
+      value: 'neither',
+    },
+  ]
+}
+
+type Props = {
+  m1: AssistantMessage
+  m2: AssistantMessage
+  onChoose?: BinaryFeedbackChoose
+  debug: boolean
+  erroredToolUseIDs: Set<string>
+  inProgressToolUseIDs: Set<string>
+  normalizedMessages: NormalizedMessage[]
+  tools: Tool[]
+  unresolvedToolUseIDs: Set<string>
+  verbose: boolean
+}
+
+export function BinaryFeedbackView({
+  m1,
+  m2,
+  onChoose,
+  debug,
+  erroredToolUseIDs,
+  inProgressToolUseIDs,
+  normalizedMessages,
+  tools,
+  unresolvedToolUseIDs,
+  verbose,
+}: Props) {
+  const theme = getTheme()
+  const [focused, setFocus] = useState('no-preference')
+  const [focusValue, setFocusValue] = useState<string | undefined>(undefined)
+  const exitState = useExitOnCtrlCD(() => process.exit(1))
+
+  useInput((_input, key) => {
+    if (key.leftArrow) {
+      setFocusValue('prefer-left')
+    } else if (key.rightArrow) {
+      setFocusValue('prefer-right')
+    } else if (key.escape) {
+      onChoose?.('neither')
+    }
+  })
+
+  return (
+    <>
+      <Box
+        flexDirection="column"
+        height="100%"
+        width="100%"
+        borderStyle="round"
+        borderColor={theme.permission}
+      >
+        <Box width="100%" justifyContent="space-between" paddingX={1}>
+          <Text bold color={theme.permission}>
+            [ANT-ONLY] Help train {PRODUCT_NAME}
+          </Text>
+          <Text>
+            <Link url={HELP_URL}>[?]</Link>
+          </Text>
+        </Box>
+        <Box flexDirection="row" width="100%" flexGrow={1} paddingTop={1}>
+          <Box
+            flexDirection="column"
+            flexGrow={1}
+            flexBasis={1}
+            gap={1}
+            borderStyle={focused === 'prefer-left' ? 'bold' : 'single'}
+            borderColor={
+              focused === 'prefer-left' ? theme.success : theme.secondaryBorder
+            }
+            marginRight={1}
+            padding={1}
+          >
+            <BinaryFeedbackOption
+              erroredToolUseIDs={erroredToolUseIDs}
+              debug={debug}
+              inProgressToolUseIDs={inProgressToolUseIDs}
+              message={m1}
+              normalizedMessages={normalizedMessages}
+              tools={tools}
+              unresolvedToolUseIDs={unresolvedToolUseIDs}
+              verbose={verbose}
+            />
+          </Box>
+          <Box
+            flexDirection="column"
+            flexGrow={1}
+            flexBasis={1}
+            gap={1}
+            borderStyle={focused === 'prefer-right' ? 'bold' : 'single'}
+            borderColor={
+              focused === 'prefer-right' ? theme.success : theme.secondaryBorder
+            }
+            marginLeft={1}
+            padding={1}
+          >
+            <BinaryFeedbackOption
+              erroredToolUseIDs={erroredToolUseIDs}
+              debug={debug}
+              inProgressToolUseIDs={inProgressToolUseIDs}
+              message={m2}
+              normalizedMessages={normalizedMessages}
+              tools={tools}
+              unresolvedToolUseIDs={unresolvedToolUseIDs}
+              verbose={verbose}
+            />
+          </Box>
+        </Box>
+        <Box flexDirection="column" paddingTop={1} paddingX={1}>
+          <Text>How do you want to proceed?</Text>
+          <Select
+            options={getOptions()}
+            onFocus={setFocus}
+            focusValue={focusValue}
+            onChange={onChoose as SelectProps['onChange']}
+          />
+        </Box>
+      </Box>
+      {exitState.pending ? (
+        <Box marginLeft={3}>
+          <Text dimColor>Press {exitState.keyName} again to exit</Text>
+        </Box>
+      ) : (
+        // Render a blank line so that the UI doesn't reflow when the exit message is shown
+        <Text> </Text>
+      )}
+    </>
+  )
+}