@shareai-lab/kode 1.0.69 → 1.0.71

package/src/components/permissions/FileWritePermissionRequest/FileWritePermissionRequest.tsx

@@ -0,0 +1,164 @@
+import { Box, Text } from 'ink'
+import React, { useMemo } from 'react'
+import { Select } from '@inkjs/ui'
+import { basename, extname } from 'path'
+import { getTheme } from '../../../utils/theme'
+import {
+  PermissionRequestTitle,
+  textColorForRiskScore,
+} from '../PermissionRequestTitle.js'
+import { logUnaryEvent } from '../../../utils/unaryLogging'
+import { env } from '../../../utils/env'
+import { savePermission } from '../../../permissions'
+import {
+  type ToolUseConfirm,
+  toolUseConfirmGetPrefix,
+} from '../PermissionRequest.js'
+import { existsSync } from 'fs'
+import chalk from 'chalk'
+import {
+  UnaryEvent,
+  usePermissionRequestLogging,
+} from '../../../hooks/usePermissionRequestLogging.js'
+import { FileWriteToolDiff } from './FileWriteToolDiff'
+import { useTerminalSize } from '../../../hooks/useTerminalSize'
+
+type Props = {
+  toolUseConfirm: ToolUseConfirm
+  onDone(): void
+  verbose: boolean
+}
+
+export function FileWritePermissionRequest({
+  toolUseConfirm,
+  onDone,
+  verbose,
+}: Props): React.ReactNode {
+  const { file_path, content } = toolUseConfirm.input as {
+    file_path: string
+    content: string
+  }
+  const fileExists = useMemo(() => existsSync(file_path), [file_path])
+  const unaryEvent = useMemo<UnaryEvent>(
+    () => ({
+      completion_type: 'write_file_single',
+      language_name: extractLanguageName(file_path),
+    }),
+    [file_path],
+  )
+  const { columns } = useTerminalSize()
+  usePermissionRequestLogging(toolUseConfirm, unaryEvent)
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={textColorForRiskScore(toolUseConfirm.riskScore)}
+      marginTop={1}
+      paddingLeft={1}
+      paddingRight={1}
+      paddingBottom={1}
+    >
+      <PermissionRequestTitle
+        title={`${fileExists ? 'Edit' : 'Create'} file`}
+        riskScore={toolUseConfirm.riskScore}
+      />
+      <Box flexDirection="column">
+        <FileWriteToolDiff
+          file_path={file_path}
+          content={content}
+          verbose={verbose}
+          width={columns - 12}
+        />
+      </Box>
+      <Box flexDirection="column">
+        <Text>
+          Do you want to {fileExists ? 'make this edit to' : 'create'}{' '}
+          <Text bold>{basename(file_path)}</Text>?
+        </Text>
+        <Select
+          options={[
+            {
+              label: 'Yes',
+              value: 'yes',
+            },
+            {
+              label: "Yes, and don't ask again this session",
+              value: 'yes-dont-ask-again',
+            },
+            {
+              label: `No, and provide instructions (${chalk.bold.hex(getTheme().warning)('esc')})`,
+              value: 'no',
+            },
+          ]}
+          onChange={newValue => {
+            switch (newValue) {
+              case 'yes':
+                extractLanguageName(file_path).then(language => {
+                  logUnaryEvent({
+                    completion_type: 'write_file_single',
+                    event: 'accept',
+                    metadata: {
+                      language_name: language,
+                      message_id: toolUseConfirm.assistantMessage.message.id,
+                      platform: env.platform,
+                    },
+                  })
+                })
+                toolUseConfirm.onAllow('temporary')
+                onDone()
+                break
+              case 'yes-dont-ask-again':
+                extractLanguageName(file_path).then(language => {
+                  logUnaryEvent({
+                    completion_type: 'write_file_single',
+                    event: 'accept',
+                    metadata: {
+                      language_name: language,
+                      message_id: toolUseConfirm.assistantMessage.message.id,
+                      platform: env.platform,
+                    },
+                  })
+                })
+                savePermission(
+                  toolUseConfirm.tool,
+                  toolUseConfirm.input,
+                  toolUseConfirmGetPrefix(toolUseConfirm),
+                ).then(() => {
+                  toolUseConfirm.onAllow('permanent')
+                  onDone()
+                })
+                break
+              case 'no':
+                extractLanguageName(file_path).then(language => {
+                  logUnaryEvent({
+                    completion_type: 'write_file_single',
+                    event: 'reject',
+                    metadata: {
+                      language_name: language,
+                      message_id: toolUseConfirm.assistantMessage.message.id,
+                      platform: env.platform,
+                    },
+                  })
+                })
+                toolUseConfirm.onReject()
+                onDone()
+                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/FileWritePermissionRequest/FileWriteToolDiff.tsx

@@ -0,0 +1,81 @@
+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 { extname, relative } from 'path'
+import { detectFileEncoding } from '../../../utils/file'
+import { HighlightedCode } from '../../HighlightedCode'
+import { getPatch } from '../../../utils/diff'
+
+type Props = {
+  file_path: string
+  content: string
+  verbose: boolean
+  width: number
+}
+
+export function FileWriteToolDiff({
+  file_path,
+  content,
+  verbose,
+  width,
+}: Props): React.ReactNode {
+  const fileExists = useMemo(() => existsSync(file_path), [file_path])
+  const oldContent = useMemo(() => {
+    if (!fileExists) {
+      return ''
+    }
+    const enc = detectFileEncoding(file_path)
+    return readFileSync(file_path, enc)
+  }, [file_path, fileExists])
+  const hunks = useMemo(() => {
+    if (!fileExists) {
+      return null
+    }
+    return getPatch({
+      filePath: file_path,
+      fileContents: oldContent,
+      oldStr: oldContent,
+      newStr: content,
+    })
+  }, [fileExists, file_path, oldContent, content])
+
+  return (
+    <Box
+      borderColor={getTheme().secondaryBorder}
+      borderStyle="round"
+      flexDirection="column"
+      paddingX={1}
+    >
+      <Box paddingBottom={1}>
+        <Text bold>{verbose ? file_path : relative(getCwd(), file_path)}</Text>
+      </Box>
+      {hunks ? (
+        intersperse(
+          hunks.map(_ => (
+            <StructuredDiff
+              key={_.newStart}
+              patch={_}
+              dim={false}
+              width={width}
+            />
+          )),
+          i => (
+            <Text color={getTheme().secondaryText} key={`ellipsis-${i}`}>
+              ...
+            </Text>
+          ),
+        )
+      ) : (
+        <HighlightedCode
+          code={content || '(No content)'}
+          language={extname(file_path).slice(1)}
+        />
+      )}
+    </Box>
+  )
+}

package/src/components/permissions/FilesystemPermissionRequest/FilesystemPermissionRequest.tsx

@@ -0,0 +1,242 @@
+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 {
+  type PermissionRequestProps,
+  type ToolUseConfirm,
+} from '../PermissionRequest.js'
+import chalk from 'chalk'
+import {
+  UnaryEvent,
+  usePermissionRequestLogging,
+} from '../../../hooks/usePermissionRequestLogging.js'
+import { FileEditTool } from '../../../tools/FileEditTool/FileEditTool'
+import { FileWriteTool } from '../../../tools/FileWriteTool/FileWriteTool'
+import { GrepTool } from '../../../tools/GrepTool/GrepTool'
+import { GlobTool } from '../../../tools/GlobTool/GlobTool'
+import { LSTool } from '../../../tools/lsTool/lsTool'
+import { FileReadTool } from '../../../tools/FileReadTool/FileReadTool'
+import { NotebookEditTool } from '../../../tools/NotebookEditTool/NotebookEditTool'
+import { NotebookReadTool } from '../../../tools/NotebookReadTool/NotebookReadTool'
+import { FallbackPermissionRequest } from '../FallbackPermissionRequest'
+import {
+  grantWritePermissionForOriginalDir,
+  pathInOriginalCwd,
+  toAbsolutePath,
+} from '../../../utils/permissions/filesystem.js'
+import { getCwd } from '../../../utils/state'
+
+function pathArgNameForToolUse(toolUseConfirm: ToolUseConfirm): string | null {
+  switch (toolUseConfirm.tool) {
+    case FileWriteTool:
+    case FileEditTool:
+    case FileReadTool: {
+      return 'file_path'
+    }
+    case GlobTool:
+    case GrepTool:
+    case LSTool: {
+      return 'path'
+    }
+    case NotebookEditTool:
+    case NotebookReadTool: {
+      return 'notebook_path'
+    }
+  }
+  return null
+}
+
+function isMultiFile(toolUseConfirm: ToolUseConfirm): boolean {
+  switch (toolUseConfirm.tool) {
+    case GlobTool:
+    case GrepTool:
+    case LSTool: {
+      return true
+    }
+  }
+  return false
+}
+
+function pathFromToolUse(toolUseConfirm: ToolUseConfirm): string | null {
+  const pathArgName = pathArgNameForToolUse(toolUseConfirm)
+  const input = toolUseConfirm.input
+  if (pathArgName && pathArgName in input) {
+    if (typeof input[pathArgName] === 'string') {
+      return toAbsolutePath(input[pathArgName])
+    } else {
+      return toAbsolutePath(getCwd())
+    }
+  }
+  return null
+}
+
+export function FilesystemPermissionRequest({
+  toolUseConfirm,
+  onDone,
+  verbose,
+}: PermissionRequestProps): React.ReactNode {
+  const path = pathFromToolUse(toolUseConfirm)
+  if (!path) {
+    // Fall back to generic permission request if no path is found
+    return (
+      <FallbackPermissionRequest
+        toolUseConfirm={toolUseConfirm}
+        onDone={onDone}
+        verbose={verbose}
+      />
+    )
+  }
+  return (
+    <FilesystemPermissionRequestImpl
+      toolUseConfirm={toolUseConfirm}
+      path={path}
+      onDone={onDone}
+      verbose={verbose}
+    />
+  )
+}
+
+function getDontAskAgainOptions(toolUseConfirm: ToolUseConfirm, path: string) {
+  if (toolUseConfirm.tool.isReadOnly()) {
+    // "Always allow" is not an option for read-only tools,
+    // because they always have write permission in the project directory.
+    return []
+  }
+  // Only show don't ask again option for edits in original working directory
+  return pathInOriginalCwd(path)
+    ? [
+        {
+          label: "Yes, and don't ask again for file edits this session",
+          value: 'yes-dont-ask-again',
+        },
+      ]
+    : []
+}
+
+type Props = {
+  toolUseConfirm: ToolUseConfirm
+  path: string
+  onDone(): void
+  verbose: boolean
+}
+
+function FilesystemPermissionRequestImpl({
+  toolUseConfirm,
+  path,
+  onDone,
+  verbose,
+}: Props): React.ReactNode {
+  const userFacingName = toolUseConfirm.tool.userFacingName(
+    toolUseConfirm.input as never,
+  )
+
+  const userFacingReadOrWrite = toolUseConfirm.tool.isReadOnly()
+    ? 'Read'
+    : 'Edit'
+  const title = `${userFacingReadOrWrite} ${isMultiFile(toolUseConfirm) ? 'files' : 'file'}`
+
+  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={title}
+        riskScore={toolUseConfirm.riskScore}
+      />
+      <Box flexDirection="column" paddingX={2} paddingY={1}>
+        <Text>
+          {userFacingName}(
+          {toolUseConfirm.tool.renderToolUseMessage(
+            toolUseConfirm.input as never,
+            { verbose },
+          )}
+          )
+        </Text>
+      </Box>
+
+      <Box flexDirection="column">
+        <Text>Do you want to proceed?</Text>
+        <Select
+          options={[
+            {
+              label: 'Yes',
+              value: 'yes',
+            },
+            ...getDontAskAgainOptions(toolUseConfirm, path),
+            {
+              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,
+                  },
+                })
+                grantWritePermissionForOriginalDir()
+                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/PermissionRequest.tsx

@@ -0,0 +1,103 @@
+import { useInput } from 'ink'
+import * as React from 'react'
+import { Tool } from '../../Tool'
+import { AssistantMessage } from '../../query'
+import { FileEditTool } from '../../tools/FileEditTool/FileEditTool'
+import { FileWriteTool } from '../../tools/FileWriteTool/FileWriteTool'
+import { BashTool } from '../../tools/BashTool/BashTool'
+import { FileEditPermissionRequest } from './FileEditPermissionRequest/FileEditPermissionRequest'
+import { BashPermissionRequest } from './BashPermissionRequest/BashPermissionRequest'
+import { FallbackPermissionRequest } from './FallbackPermissionRequest'
+import { useNotifyAfterTimeout } from '../../hooks/useNotifyAfterTimeout'
+import { FileWritePermissionRequest } from './FileWritePermissionRequest/FileWritePermissionRequest'
+import { type CommandSubcommandPrefixResult } from '../../utils/commands'
+import { FilesystemPermissionRequest } from './FilesystemPermissionRequest/FilesystemPermissionRequest'
+import { NotebookEditTool } from '../../tools/NotebookEditTool/NotebookEditTool'
+import { GlobTool } from '../../tools/GlobTool/GlobTool'
+import { GrepTool } from '../../tools/GrepTool/GrepTool'
+import { LSTool } from '../../tools/lsTool/lsTool'
+import { FileReadTool } from '../../tools/FileReadTool/FileReadTool'
+import { NotebookReadTool } from '../../tools/NotebookReadTool/NotebookReadTool'
+import { PRODUCT_NAME } from '../../constants/product'
+
+function permissionComponentForTool(tool: Tool) {
+  switch (tool) {
+    case FileEditTool:
+      return FileEditPermissionRequest
+    case FileWriteTool:
+      return FileWritePermissionRequest
+    case BashTool:
+      return BashPermissionRequest
+    case GlobTool:
+    case GrepTool:
+    case LSTool:
+    case FileReadTool:
+    case NotebookReadTool:
+    case NotebookEditTool:
+      return FilesystemPermissionRequest
+    default:
+      return FallbackPermissionRequest
+  }
+}
+
+export type PermissionRequestProps = {
+  toolUseConfirm: ToolUseConfirm
+  onDone(): void
+  verbose: boolean
+}
+
+export function toolUseConfirmGetPrefix(
+  toolUseConfirm: ToolUseConfirm,
+): string | null {
+  return (
+    (toolUseConfirm.commandPrefix &&
+      !toolUseConfirm.commandPrefix.commandInjectionDetected &&
+      toolUseConfirm.commandPrefix.commandPrefix) ||
+    null
+  )
+}
+
+export type ToolUseConfirm = {
+  assistantMessage: AssistantMessage
+  tool: Tool
+  description: string
+  input: { [key: string]: unknown }
+  commandPrefix: CommandSubcommandPrefixResult | null
+  // TODO: remove riskScore from ToolUseConfirm
+  riskScore: number | null
+  onAbort(): void
+  onAllow(type: 'permanent' | 'temporary'): void
+  onReject(): void
+}
+
+// TODO: Move this to Tool.renderPermissionRequest
+export function PermissionRequest({
+  toolUseConfirm,
+  onDone,
+  verbose,
+}: PermissionRequestProps): React.ReactNode {
+  // Handle Ctrl+C
+  useInput((input, key) => {
+    if (key.ctrl && input === 'c') {
+      onDone()
+      toolUseConfirm.onReject()
+    }
+  })
+
+  const toolName = toolUseConfirm.tool.userFacingName(
+    toolUseConfirm.input as never,
+  )
+  useNotifyAfterTimeout(
+    `${PRODUCT_NAME} needs your permission to use ${toolName}`,
+  )
+
+  const PermissionComponent = permissionComponentForTool(toolUseConfirm.tool)
+
+  return (
+    <PermissionComponent
+      toolUseConfirm={toolUseConfirm}
+      onDone={onDone}
+      verbose={verbose}
+    />
+  )
+}

package/src/components/permissions/PermissionRequestTitle.tsx

@@ -0,0 +1,69 @@
+import * as React from 'react'
+import { Box, Text } from 'ink'
+import { getTheme } from '../../utils/theme'
+
+export type RiskScoreCategory = 'low' | 'moderate' | 'high'
+
+export function categoryForRiskScore(riskScore: number): RiskScoreCategory {
+  return riskScore >= 70 ? 'high' : riskScore >= 30 ? 'moderate' : 'low'
+}
+
+function colorSchemeForRiskScoreCategory(category: RiskScoreCategory): {
+  highlightColor: string
+  textColor: string
+} {
+  const theme = getTheme()
+  switch (category) {
+    case 'low':
+      return {
+        highlightColor: theme.success,
+        textColor: theme.permission,
+      }
+    case 'moderate':
+      return {
+        highlightColor: theme.warning,
+        textColor: theme.warning,
+      }
+    case 'high':
+      return {
+        highlightColor: theme.error,
+        textColor: theme.error,
+      }
+  }
+}
+
+export function textColorForRiskScore(riskScore: number | null): string {
+  if (riskScore === null) {
+    return getTheme().permission
+  }
+  const category = categoryForRiskScore(riskScore)
+  return colorSchemeForRiskScoreCategory(category).textColor
+}
+
+export function PermissionRiskScore({
+  riskScore,
+}: {
+  riskScore: number
+}): React.ReactNode {
+  const category = categoryForRiskScore(riskScore)
+  return <Text color={textColorForRiskScore(riskScore)}>Risk: {category}</Text>
+}
+
+type Props = {
+  title: string
+  riskScore: number | null
+}
+
+export function PermissionRequestTitle({
+  title,
+  riskScore,
+}: Props): React.ReactNode {
+  return (
+    <Box flexDirection="column">
+      <Text bold color={getTheme().permission}>
+        {title}
+      </Text>
+      {riskScore !== null && <PermissionRiskScore riskScore={riskScore} />}
+    </Box>
+  )
+}

package/src/components/permissions/hooks.ts

@@ -0,0 +1,44 @@
+import { useEffect } from 'react'
+import { logUnaryEvent, CompletionType } from '../../utils/unaryLogging'
+import { ToolUseConfirm } from '../../components/permissions/PermissionRequest'
+import { env } from '../../utils/env'
+import { logEvent } from '../../services/statsig'
+
+type UnaryEventType = {
+  completion_type: CompletionType
+  language_name: string | Promise<string>
+}
+
+/**
+ * Logs permission request events using Statsig and unary logging.
+ * Handles both the Statsig event and the unary event logging.
+ * Can handle either a string or Promise<string> for language_name.
+ */
+export function usePermissionRequestLogging(
+  toolUseConfirm: ToolUseConfirm,
+  unaryEvent: UnaryEventType,
+): void {
+  useEffect(() => {
+    // Log Statsig event
+    logEvent('tengu_tool_use_show_permission_request', {
+      messageID: toolUseConfirm.assistantMessage.message.id,
+      toolName: toolUseConfirm.tool.name,
+    })
+
+    // Handle string or Promise language name
+    const languagePromise = Promise.resolve(unaryEvent.language_name)
+
+    // Log unary event once language is resolved
+    languagePromise.then(language => {
+      logUnaryEvent({
+        completion_type: unaryEvent.completion_type,
+        event: 'response',
+        metadata: {
+          language_name: language,
+          message_id: toolUseConfirm.assistantMessage.message.id,
+          platform: env.platform,
+        },
+      })
+    })
+  }, [toolUseConfirm, unaryEvent])
+}