@shareai-lab/kode 1.0.69 → 1.0.71

package/src/components/messages/UserToolResultMessage/UserToolSuccessMessage.tsx

@@ -0,0 +1,35 @@
+import { ToolResultBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import { Box } from 'ink'
+import * as React from 'react'
+import { Tool } from '../../../Tool'
+import { Message, UserMessage } from '../../../query'
+import { useGetToolFromMessages } from './utils'
+
+type Props = {
+  param: ToolResultBlockParam
+  message: UserMessage
+  messages: Message[]
+  verbose: boolean
+  tools: Tool[]
+  width: number | string
+}
+
+export function UserToolSuccessMessage({
+  param,
+  message,
+  messages,
+  tools,
+  verbose,
+  width,
+}: Props): React.ReactNode {
+  const { tool } = useGetToolFromMessages(param.tool_use_id, tools, messages)
+
+  return (
+    // TODO: Distinguish UserMessage from UserToolResultMessage
+    <Box flexDirection="column" width={width}>
+      {tool.renderToolResultMessage?.(message.toolUseResult!.data as never, {
+        verbose,
+      })}
+    </Box>
+  )
+}

package/src/components/messages/UserToolResultMessage/utils.tsx

@@ -0,0 +1,56 @@
+import { ToolUseBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import { Message } from '../../../query'
+import { useMemo } from 'react'
+import { Tool } from '../../../Tool'
+import { GlobTool } from '../../../tools/GlobTool/GlobTool'
+import { GrepTool } from '../../../tools/GrepTool/GrepTool'
+import { logEvent } from '../../../services/statsig'
+
+function getToolUseFromMessages(
+  toolUseID: string,
+  messages: Message[],
+): ToolUseBlockParam | null {
+  let toolUse: ToolUseBlockParam | null = null
+  for (const message of messages) {
+    if (
+      message.type !== 'assistant' ||
+      !Array.isArray(message.message.content)
+    ) {
+      continue
+    }
+    for (const content of message.message.content) {
+      if (content.type === 'tool_use' && content.id === toolUseID) {
+        toolUse = content
+      }
+    }
+  }
+  return toolUse
+}
+
+export function useGetToolFromMessages(
+  toolUseID: string,
+  tools: Tool[],
+  messages: Message[],
+) {
+  return useMemo(() => {
+    const toolUse = getToolUseFromMessages(toolUseID, messages)
+    if (!toolUse) {
+      throw new ReferenceError(
+        `Tool use not found for tool_use_id ${toolUseID}`,
+      )
+    }
+    // Hack: we don't expose GlobTool and GrepTool in getTools anymore,
+    // but we still want to be able to load old transcripts.
+    // TODO: Remove this when logging hits zero
+    const tool = [...tools, GlobTool, GrepTool].find(
+      _ => _.name === toolUse.name,
+    )
+    if (tool === GlobTool || tool === GrepTool) {
+      logEvent('tengu_legacy_tool_lookup', {})
+    }
+    if (!tool) {
+      throw new ReferenceError(`Tool not found for ${toolUse.name}`)
+    }
+    return { tool, toolUse }
+  }, [toolUseID, messages, tools])
+}

package/src/components/permissions/BashPermissionRequest/BashPermissionRequest.tsx

@@ -0,0 +1,121 @@
+import { Box, Text } from 'ink'
+import React, { useMemo } from 'react'
+import { UnaryEvent } from '../../../hooks/usePermissionRequestLogging'
+import { savePermission } from '../../../permissions'
+import { BashTool } from '../../../tools/BashTool/BashTool'
+import { getTheme } from '../../../utils/theme'
+import { usePermissionRequestLogging } from '../hooks'
+import {
+  type ToolUseConfirm,
+  toolUseConfirmGetPrefix,
+} from '../PermissionRequest.js'
+import { PermissionRequestTitle } from '../PermissionRequestTitle'
+import { logUnaryPermissionEvent } from '../utils'
+import { Select } from '../../CustomSelect/select'
+import { toolUseOptions } from '../toolUseOptions'
+
+type Props = {
+  toolUseConfirm: ToolUseConfirm
+  onDone(): void
+}
+
+export function BashPermissionRequest({
+  toolUseConfirm,
+  onDone,
+}: Props): React.ReactNode {
+  const theme = getTheme()
+
+  // ok to use parse since we've already validated args earliers
+  const { command } = BashTool.inputSchema.parse(toolUseConfirm.input)
+
+  const unaryEvent = useMemo<UnaryEvent>(
+    () => ({ completion_type: 'tool_use_single', language_name: 'none' }),
+    [],
+  )
+
+  usePermissionRequestLogging(toolUseConfirm, unaryEvent)
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={theme.permission}
+      marginTop={1}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingBottom={1}
+    >
+      <PermissionRequestTitle
+        title="Bash command"
+        riskScore={toolUseConfirm.riskScore}
+      />
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        <Text>{BashTool.renderToolUseMessage({ command })}</Text>
+        <Text color={theme.secondaryText}>{toolUseConfirm.description}</Text>
+      </Box>
+
+      <Box flexDirection="column">
+        <Text>Do you want to proceed?</Text>
+        <Select
+          options={toolUseOptions({ toolUseConfirm, command })}
+          onChange={newValue => {
+            switch (newValue) {
+              case 'yes':
+                logUnaryPermissionEvent(
+                  'tool_use_single',
+                  toolUseConfirm,
+                  'accept',
+                )
+                toolUseConfirm.onAllow('temporary')
+                onDone()
+                break
+              case 'yes-dont-ask-again-prefix': {
+                const prefix = toolUseConfirmGetPrefix(toolUseConfirm)
+                if (prefix !== null) {
+                  logUnaryPermissionEvent(
+                    'tool_use_single',
+                    toolUseConfirm,
+                    'accept',
+                  )
+                  savePermission(
+                    toolUseConfirm.tool,
+                    toolUseConfirm.input,
+                    prefix,
+                  ).then(() => {
+                    toolUseConfirm.onAllow('permanent')
+                    onDone()
+                  })
+                }
+                break
+              }
+              case 'yes-dont-ask-again-full':
+                logUnaryPermissionEvent(
+                  'tool_use_single',
+                  toolUseConfirm,
+                  'accept',
+                )
+                savePermission(
+                  toolUseConfirm.tool,
+                  toolUseConfirm.input,
+                  null, // Save without prefix
+                ).then(() => {
+                  toolUseConfirm.onAllow('permanent')
+                  onDone()
+                })
+                break
+              case 'no':
+                logUnaryPermissionEvent(
+                  'tool_use_single',
+                  toolUseConfirm,
+                  'reject',
+                )
+                toolUseConfirm.onReject()
+                onDone()
+                break
+            }
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}

package/src/components/permissions/FallbackPermissionRequest.tsx

@@ -0,0 +1,155 @@
+import { Box, Text } from 'ink'
+import React, { useMemo } from 'react'
+import { Select } from '@inkjs/ui'
+import { getTheme } from '../../utils/theme'
+import {
+  PermissionRequestTitle,
+  textColorForRiskScore,
+} from './PermissionRequestTitle.js'
+import { logUnaryEvent } from '../../utils/unaryLogging'
+import { env } from '../../utils/env'
+import { getCwd } from '../../utils/state'
+import { savePermission } from '../../permissions'
+import {
+  type ToolUseConfirm,
+  toolUseConfirmGetPrefix,
+} from './PermissionRequest.js'
+import chalk from 'chalk'
+import {
+  UnaryEvent,
+  usePermissionRequestLogging,
+} from '../../hooks/usePermissionRequestLogging.js'
+
+type Props = {
+  toolUseConfirm: ToolUseConfirm
+  onDone(): void
+  verbose: boolean
+}
+
+export function FallbackPermissionRequest({
+  toolUseConfirm,
+  onDone,
+  verbose,
+}: Props): React.ReactNode {
+  const theme = getTheme()
+
+  // TODO: Avoid these special cases
+  const originalUserFacingName = toolUseConfirm.tool.userFacingName(
+    toolUseConfirm.input as never,
+  )
+  const userFacingName = originalUserFacingName.endsWith(' (MCP)')
+    ? originalUserFacingName.slice(0, -6)
+    : originalUserFacingName
+
+  const unaryEvent = useMemo<UnaryEvent>(
+    () => ({
+      completion_type: 'tool_use_single',
+      language_name: 'none',
+    }),
+    [],
+  )
+
+  usePermissionRequestLogging(toolUseConfirm, unaryEvent)
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={textColorForRiskScore(toolUseConfirm.riskScore)}
+      marginTop={1}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingBottom={1}
+    >
+      <PermissionRequestTitle
+        title="Tool use"
+        riskScore={toolUseConfirm.riskScore}
+      />
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        <Text>
+          {userFacingName}(
+          {toolUseConfirm.tool.renderToolUseMessage(
+            toolUseConfirm.input as never,
+            { verbose },
+          )}
+          )
+          {originalUserFacingName.endsWith(' (MCP)') ? (
+            <Text color={theme.secondaryText}> (MCP)</Text>
+          ) : (
+            ''
+          )}
+        </Text>
+        <Text color={theme.secondaryText}>{toolUseConfirm.description}</Text>
+      </Box>
+
+      <Box flexDirection="column">
+        <Text>Do you want to proceed?</Text>
+        <Select
+          options={[
+            {
+              label: 'Yes',
+              value: 'yes',
+            },
+            {
+              label: `Yes, and don't ask again for ${chalk.bold(userFacingName)} commands in ${chalk.bold(getCwd())}`,
+              value: 'yes-dont-ask-again',
+            },
+            {
+              label: `No, and provide instructions (${chalk.bold.hex(getTheme().warning)('esc')})`,
+              value: 'no',
+            },
+          ]}
+          onChange={newValue => {
+            switch (newValue) {
+              case 'yes':
+                logUnaryEvent({
+                  completion_type: 'tool_use_single',
+                  event: 'accept',
+                  metadata: {
+                    language_name: 'none',
+                    message_id: toolUseConfirm.assistantMessage.message.id,
+                    platform: env.platform,
+                  },
+                })
+                toolUseConfirm.onAllow('temporary')
+                onDone()
+                break
+              case 'yes-dont-ask-again':
+                logUnaryEvent({
+                  completion_type: 'tool_use_single',
+                  event: 'accept',
+                  metadata: {
+                    language_name: 'none',
+                    message_id: toolUseConfirm.assistantMessage.message.id,
+                    platform: env.platform,
+                  },
+                })
+                savePermission(
+                  toolUseConfirm.tool,
+                  toolUseConfirm.input,
+                  toolUseConfirmGetPrefix(toolUseConfirm),
+                ).then(() => {
+                  toolUseConfirm.onAllow('permanent')
+                  onDone()
+                })
+                break
+              case 'no':
+                logUnaryEvent({
+                  completion_type: 'tool_use_single',
+                  event: 'reject',
+                  metadata: {
+                    language_name: 'none',
+                    message_id: toolUseConfirm.assistantMessage.message.id,
+                    platform: env.platform,
+                  },
+                })
+                toolUseConfirm.onReject()
+                onDone()
+                break
+            }
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}

package/src/components/permissions/FileEditPermissionRequest/FileEditPermissionRequest.tsx

@@ -0,0 +1,182 @@
+import { Select } from '@inkjs/ui'
+import chalk from 'chalk'
+import { Box, Text } from 'ink'
+import { basename, extname } from 'path'
+import React, { useMemo } from 'react'
+import {
+  UnaryEvent,
+  usePermissionRequestLogging,
+} from '../../../hooks/usePermissionRequestLogging.js'
+import { savePermission } from '../../../permissions'
+import { env } from '../../../utils/env'
+import { getTheme } from '../../../utils/theme'
+import { logUnaryEvent } from '../../../utils/unaryLogging'
+import {
+  type ToolUseConfirm,
+  toolUseConfirmGetPrefix,
+} from '../PermissionRequest.js'
+import {
+  PermissionRequestTitle,
+  textColorForRiskScore,
+} from '../PermissionRequestTitle.js'
+import { FileEditToolDiff } from './FileEditToolDiff'
+import { useTerminalSize } from '../../../hooks/useTerminalSize'
+import { pathInOriginalCwd } from '../../../utils/permissions/filesystem'
+
+function getOptions(path: string) {
+  // Only show don't ask again option for edits in original working directory
+  const showDontAskAgainOptions = pathInOriginalCwd(path)
+    ? [
+        {
+          label: "Yes, and don't ask again this session",
+          value: 'yes-dont-ask-again',
+        },
+      ]
+    : []
+
+  return [
+    {
+      label: 'Yes',
+      value: 'yes',
+    },
+    ...showDontAskAgainOptions,
+    {
+      label: `No, and provide instructions (${chalk.bold.hex(getTheme().warning)('esc')})`,
+      value: 'no',
+    },
+  ]
+}
+
+type Props = {
+  toolUseConfirm: ToolUseConfirm
+  onDone(): void
+  verbose: boolean
+}
+
+export function FileEditPermissionRequest({
+  toolUseConfirm,
+  onDone,
+  verbose,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize()
+  const { file_path, new_string, old_string } = toolUseConfirm.input as {
+    file_path: string
+    new_string: string
+    old_string: string
+  }
+
+  const unaryEvent = useMemo<UnaryEvent>(
+    () => ({
+      completion_type: 'str_replace_single',
+      language_name: extractLanguageName(file_path),
+    }),
+    [file_path],
+  )
+
+  usePermissionRequestLogging(toolUseConfirm, unaryEvent)
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={textColorForRiskScore(toolUseConfirm.riskScore)}
+      marginTop={1}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingBottom={1}
+    >
+      <PermissionRequestTitle
+        title="Edit file"
+        riskScore={toolUseConfirm.riskScore}
+      />
+      <FileEditToolDiff
+        file_path={file_path}
+        new_string={new_string}
+        old_string={old_string}
+        verbose={verbose}
+        width={columns - 12}
+      />
+      <Box flexDirection="column">
+        <Text>
+          Do you want to make this edit to{' '}
+          <Text bold>{basename(file_path)}</Text>?
+        </Text>
+        <Select
+          options={getOptions(file_path)}
+          onChange={newValue => {
+            switch (newValue) {
+              case 'yes':
+                extractLanguageName(file_path).then(language => {
+                  logUnaryEvent({
+                    completion_type: 'str_replace_single',
+                    event: 'accept',
+                    metadata: {
+                      language_name: language,
+                      message_id: toolUseConfirm.assistantMessage.message.id,
+                      platform: env.platform,
+                    },
+                  })
+                })
+                // Note: We call onDone before onAllow to hide the
+                // permission request before we render the next message
+                onDone()
+                toolUseConfirm.onAllow('temporary')
+                break
+              case 'yes-dont-ask-again':
+                extractLanguageName(file_path).then(language => {
+                  logUnaryEvent({
+                    completion_type: 'str_replace_single',
+                    event: 'accept',
+                    metadata: {
+                      language_name: language,
+                      message_id: toolUseConfirm.assistantMessage.message.id,
+                      platform: env.platform,
+                    },
+                  })
+                })
+                savePermission(
+                  toolUseConfirm.tool,
+                  toolUseConfirm.input,
+                  toolUseConfirmGetPrefix(toolUseConfirm),
+                ).then(() => {
+                  // Note: We call onDone before onAllow to hide the
+                  // permission request before we render the next message
+                  onDone()
+                  toolUseConfirm.onAllow('permanent')
+                })
+                break
+              case 'no':
+                extractLanguageName(file_path).then(language => {
+                  logUnaryEvent({
+                    completion_type: 'str_replace_single',
+                    event: 'reject',
+                    metadata: {
+                      language_name: language,
+                      message_id: toolUseConfirm.assistantMessage.message.id,
+                      platform: env.platform,
+                    },
+                  })
+                })
+                // Note: We call onDone before onAllow to hide the
+                // permission request before we render the next message
+                onDone()
+                toolUseConfirm.onReject()
+                break
+            }
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+async function extractLanguageName(file_path: string): Promise<string> {
+  const ext = extname(file_path)
+  if (!ext) {
+    return 'unknown'
+  }
+  const Highlight = (await import('highlight.js')) as unknown as {
+    default: { getLanguage(ext: string): { name: string | undefined } }
+  }
+  return Highlight.default.getLanguage(ext.slice(1))?.name ?? 'unknown'
+}

package/src/components/permissions/FileEditPermissionRequest/FileEditToolDiff.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { existsSync, readFileSync } from 'fs'
+import { useMemo } from 'react'
+import { StructuredDiff } from '../../StructuredDiff'
+import { Box, Text } from 'ink'
+import { getTheme } from '../../../utils/theme'
+import { intersperse } from '../../../utils/array'
+import { getCwd } from '../../../utils/state'
+import { relative } from 'path'
+import { getPatch } from '../../../utils/diff'
+
+type Props = {
+  file_path: string
+  new_string: string
+  old_string: string
+  verbose: boolean
+  useBorder?: boolean
+  width: number
+}
+
+export function FileEditToolDiff({
+  file_path,
+  new_string,
+  old_string,
+  verbose,
+  useBorder = true,
+  width,
+}: Props): React.ReactNode {
+  const file = useMemo(
+    () => (existsSync(file_path) ? readFileSync(file_path, 'utf8') : ''),
+    [file_path],
+  )
+  const patch = useMemo(
+    () =>
+      getPatch({
+        filePath: file_path,
+        fileContents: file,
+        oldStr: old_string,
+        newStr: new_string,
+      }),
+    [file_path, file, old_string, new_string],
+  )
+
+  return (
+    <Box flexDirection="column">
+      <Box
+        borderColor={getTheme().secondaryBorder}
+        borderStyle={useBorder ? 'round' : undefined}
+        flexDirection="column"
+        paddingX={1}
+      >
+        <Box paddingBottom={1}>
+          <Text bold>
+            {verbose ? file_path : relative(getCwd(), file_path)}
+          </Text>
+        </Box>
+        {intersperse(
+          patch.map(_ => (
+            <StructuredDiff
+              key={_.newStart}
+              patch={_}
+              dim={false}
+              width={width}
+            />
+          )),
+          i => (
+            <Text color={getTheme().secondaryText} key={`ellipsis-${i}`}>
+              ...
+            </Text>
+          ),
+        )}
+      </Box>
+    </Box>
+  )
+}