@shareai-lab/kode 1.0.9

package/src/components/messages/TaskToolMessage.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState, useMemo } from 'react'
+import { Text } from 'ink'
+import { getAgentByType } from '../../utils/agentLoader'
+import { getTheme } from '../../utils/theme'
+
+interface Props {
+  agentType: string
+  children: React.ReactNode
+  bold?: boolean
+}
+
+// Simple cache to prevent re-fetching agent configs
+const agentConfigCache = new Map<string, any>()
+
+export function TaskToolMessage({ agentType, children, bold = true }: Props) {
+  const theme = getTheme()
+  const [agentConfig, setAgentConfig] = useState<any>(() => {
+    // Return cached config immediately if available
+    return agentConfigCache.get(agentType) || null
+  })
+
+  useEffect(() => {
+    // Skip if already cached
+    if (agentConfigCache.has(agentType)) {
+      setAgentConfig(agentConfigCache.get(agentType))
+      return
+    }
+
+    // Load and cache agent configuration
+    let mounted = true
+    getAgentByType(agentType).then(config => {
+      if (mounted) {
+        agentConfigCache.set(agentType, config)
+        setAgentConfig(config)
+      }
+    }).catch(() => {
+      // Silently handle errors to prevent console noise
+      if (mounted) {
+        agentConfigCache.set(agentType, null)
+      }
+    })
+
+    return () => {
+      mounted = false
+    }
+  }, [agentType])
+
+  // Memoize color calculation to prevent unnecessary re-renders
+  const color = useMemo(() => {
+    return agentConfig?.color || theme.text
+  }, [agentConfig?.color, theme.text])
+
+  return (
+    <Text color={color} bold={bold}>
+      {children}
+    </Text>
+  )
+}

package/src/components/messages/UserBashInputMessage.tsx

@@ -0,0 +1,28 @@
+import { Box, Text } from 'ink'
+import * as React from 'react'
+import { extractTag } from '../../utils/messages'
+import { getTheme } from '../../utils/theme'
+import { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+
+type Props = {
+  addMargin: boolean
+  param: TextBlockParam
+}
+
+export function UserBashInputMessage({
+  param: { text },
+  addMargin,
+}: Props): React.ReactNode {
+  const input = extractTag(text, 'bash-input')
+  if (!input) {
+    return null
+  }
+  return (
+    <Box flexDirection="column" marginTop={addMargin ? 1 : 0} width="100%">
+      <Box>
+        <Text color={getTheme().bashBorder}>!</Text>
+        <Text color={getTheme().secondaryText}> {input}</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/messages/UserCommandMessage.tsx

@@ -0,0 +1,30 @@
+import { Box, Text } from 'ink'
+import * as React from 'react'
+import { getTheme } from '../../utils/theme'
+import { extractTag } from '../../utils/messages'
+import { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+
+type Props = {
+  addMargin: boolean
+  param: TextBlockParam
+}
+
+export function UserCommandMessage({
+  addMargin,
+  param: { text },
+}: Props): React.ReactNode {
+  const commandMessage = extractTag(text, 'command-message')
+  const args = extractTag(text, 'command-args')
+  if (!commandMessage) {
+    return null
+  }
+
+  const theme = getTheme()
+  return (
+    <Box flexDirection="column" marginTop={addMargin ? 1 : 0} width="100%">
+      <Text color={theme.secondaryText}>
+        &gt; /{commandMessage} {args}
+      </Text>
+    </Box>
+  )
+}

package/src/components/messages/UserKodingInputMessage.tsx

@@ -0,0 +1,28 @@
+import { Box, Text } from 'ink'
+import * as React from 'react'
+import { extractTag } from '../../utils/messages'
+import { getTheme } from '../../utils/theme'
+import { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+
+type Props = {
+  addMargin: boolean
+  param: TextBlockParam
+}
+
+export function UserKodingInputMessage({
+  param: { text },
+  addMargin,
+}: Props): React.ReactNode {
+  const input = extractTag(text, 'koding-input')
+  if (!input) {
+    return null
+  }
+  return (
+    <Box flexDirection="column" marginTop={addMargin ? 1 : 0} width="100%">
+      <Box>
+        <Text color={getTheme().noting}>#</Text>
+        <Text color={getTheme().secondaryText}> {input}</Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/messages/UserPromptMessage.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+import { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import { Box, Text } from 'ink'
+import { getTheme } from '../../utils/theme'
+import { logError } from '../../utils/log'
+import { useTerminalSize } from '../../hooks/useTerminalSize'
+
+type Props = {
+  addMargin: boolean
+  param: TextBlockParam
+}
+
+export function UserPromptMessage({
+  addMargin,
+  param: { text },
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize()
+  if (!text) {
+    logError('No content found in user prompt message')
+    return null
+  }
+
+  return (
+    <Box flexDirection="row" marginTop={addMargin ? 1 : 0} width="100%">
+      <Box minWidth={2} width={2}>
+        <Text color={getTheme().secondaryText}>&gt;</Text>
+      </Box>
+      <Box flexDirection="column" width={columns - 4}>
+        <Text color={getTheme().secondaryText} wrap="wrap">
+          {text}
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/messages/UserTextMessage.tsx

@@ -0,0 +1,39 @@
+import { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import { UserBashInputMessage } from './UserBashInputMessage'
+import { UserKodingInputMessage } from './UserKodingInputMessage'
+import { UserCommandMessage } from './UserCommandMessage'
+import { UserPromptMessage } from './UserPromptMessage'
+import * as React from 'react'
+import { NO_CONTENT_MESSAGE } from '../../services/claude'
+
+type Props = {
+  addMargin: boolean
+  param: TextBlockParam
+}
+
+export function UserTextMessage({ addMargin, param }: Props): React.ReactNode {
+  if (param.text.trim() === NO_CONTENT_MESSAGE) {
+    return null
+  }
+
+  // Koding inputs!
+  if (param.text.includes('<koding-input>')) {
+    return <UserKodingInputMessage addMargin={addMargin} param={param} />
+  }
+
+  // Bash inputs!
+  if (param.text.includes('<bash-input>')) {
+    return <UserBashInputMessage addMargin={addMargin} param={param} />
+  }
+
+  // Slash commands/
+  if (
+    param.text.includes('<command-name>') ||
+    param.text.includes('<command-message>')
+  ) {
+    return <UserCommandMessage addMargin={addMargin} param={param} />
+  }
+
+  // User prompts>
+  return <UserPromptMessage addMargin={addMargin} param={param} />
+}

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

@@ -0,0 +1,12 @@
+import { Text } from 'ink'
+import * as React from 'react'
+import { getTheme } from '../../../utils/theme'
+
+export function UserToolCanceledMessage(): React.ReactNode {
+  return (
+    <Text>
+      &nbsp;&nbsp;⎿ &nbsp;
+      <Text color={getTheme().error}>Interrupted by user</Text>
+    </Text>
+  )
+}

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

@@ -0,0 +1,36 @@
+import { ToolResultBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import { Box, Text } from 'ink'
+import * as React from 'react'
+import { getTheme } from '../../../utils/theme'
+
+const MAX_RENDERED_LINES = 10
+
+type Props = {
+  param: ToolResultBlockParam
+  verbose: boolean
+}
+
+export function UserToolErrorMessage({
+  param,
+  verbose,
+}: Props): React.ReactNode {
+  const error =
+    typeof param.content === 'string' ? param.content.trim() : 'Error'
+  return (
+    <Box flexDirection="row" width="100%">
+      <Text>&nbsp;&nbsp;⎿ &nbsp;</Text>
+      <Box flexDirection="column">
+        <Text color={getTheme().error}>
+          {verbose
+            ? error
+            : error.split('\n').slice(0, MAX_RENDERED_LINES).join('\n') || ''}
+        </Text>
+        {!verbose && error.split('\n').length > MAX_RENDERED_LINES && (
+          <Text color={getTheme().secondaryText}>
+            ... (+{error.split('\n').length - MAX_RENDERED_LINES} lines)
+          </Text>
+        )}
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { Tool } from '../../../Tool'
+import { Message } from '../../../query'
+import { FallbackToolUseRejectedMessage } from '../../FallbackToolUseRejectedMessage'
+import { useGetToolFromMessages } from './utils'
+import { useTerminalSize } from '../../../hooks/useTerminalSize'
+
+type Props = {
+  toolUseID: string
+  messages: Message[]
+  tools: Tool[]
+  verbose: boolean
+}
+
+export function UserToolRejectMessage({
+  toolUseID,
+  tools,
+  messages,
+  verbose,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize()
+  const { tool, toolUse } = useGetToolFromMessages(toolUseID, tools, messages)
+  const input = tool.inputSchema.safeParse(toolUse.input)
+  if (input.success) {
+    return tool.renderToolUseRejectedMessage(input.data, {
+      columns,
+      verbose,
+    })
+  }
+  return <FallbackToolUseRejectedMessage />
+}

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

@@ -0,0 +1,57 @@
+import { ToolResultBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import * as React from 'react'
+import { Tool } from '../../../Tool'
+import { Message, UserMessage } from '../../../query'
+import { CANCEL_MESSAGE, REJECT_MESSAGE } from '../../../utils/messages'
+import { UserToolCanceledMessage } from './UserToolCanceledMessage'
+import { UserToolErrorMessage } from './UserToolErrorMessage'
+import { UserToolRejectMessage } from './UserToolRejectMessage'
+import { UserToolSuccessMessage } from './UserToolSuccessMessage'
+
+type Props = {
+  param: ToolResultBlockParam
+  message: UserMessage
+  messages: Message[]
+  tools: Tool[]
+  verbose: boolean
+  width: number | string
+}
+
+export function UserToolResultMessage({
+  param,
+  message,
+  messages,
+  tools,
+  verbose,
+  width,
+}: Props): React.ReactNode {
+  if (param.content === CANCEL_MESSAGE) {
+    return <UserToolCanceledMessage />
+  }
+
+  if (param.content === REJECT_MESSAGE) {
+    return (
+      <UserToolRejectMessage
+        toolUseID={param.tool_use_id}
+        tools={tools}
+        messages={messages}
+        verbose={verbose}
+      />
+    )
+  }
+
+  if (param.is_error) {
+    return <UserToolErrorMessage param={param} verbose={verbose} />
+  }
+
+  return (
+    <UserToolSuccessMessage
+      param={param}
+      message={message}
+      messages={messages}
+      tools={tools}
+      verbose={verbose}
+      width={width}
+    />
+  )
+}

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