@shareai-lab/kode 1.0.9

package/src/components/permissions/FallbackPermissionRequest.tsx

@@ -0,0 +1,153 @@
+import { Box, Text } from 'ink'
+import React, { useMemo } from 'react'
+import { Select } from '../CustomSelect/select'
+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()
+  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 '../../CustomSelect/select'
+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,77 @@
+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 => (
+            <React.Fragment key={`ellipsis-${i}`}>
+              <Text color={getTheme().secondaryText}>
+                ...
+              </Text>
+            </React.Fragment>
+          ),
+        )}
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,164 @@
+import { Box, Text } from 'ink'
+import React, { useMemo } from 'react'
+import { Select } from '../../CustomSelect/select'
+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,83 @@
+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 => (
+            <React.Fragment key={`ellipsis-${i}`}>
+              <Text color={getTheme().secondaryText}>
+                ...
+              </Text>
+            </React.Fragment>
+          ),
+        )
+      ) : (
+        <HighlightedCode
+          code={content || '(No content)'}
+          language={extname(file_path).slice(1)}
+        />
+      )}
+    </Box>
+  )
+}