@shareai-lab/kode 1.0.70 → 1.0.73

package/src/components/messages/AssistantLocalCommandOutputMessage.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react'
+import { extractTag } from '../../utils/messages'
+import { getTheme } from '../../utils/theme'
+import { Box, Text } from 'ink'
+
+export function AssistantLocalCommandOutputMessage({
+  content,
+}: {
+  content: string
+}): React.ReactNode[] {
+  const stdout = extractTag(content, 'local-command-stdout')
+  const stderr = extractTag(content, 'local-command-stderr')
+  if (!stdout && !stderr) {
+    return []
+  }
+  const theme = getTheme()
+  let insides = [
+    format(stdout?.trim(), theme.text),
+    format(stderr?.trim(), theme.error),
+  ].filter(Boolean)
+
+  if (insides.length === 0) {
+    insides = [
+      <React.Fragment key="0">
+        <Text>(No output)</Text>
+      </React.Fragment>
+    ]
+  }
+
+  return [
+    <Box key="0" gap={1}>
+      <Box>
+        <Text color={theme.secondaryText}>{'  '}⎿ </Text>
+      </Box>
+      {insides.map((_, index) => (
+        <Box key={index} flexDirection="column">
+          {_}
+        </Box>
+      ))}
+    </Box>,
+  ]
+}
+
+function format(content: string | undefined, color: string): React.ReactNode {
+  if (!content) {
+    return null
+  }
+  return <Text color={color}>{content}</Text>
+}

package/src/components/messages/AssistantRedactedThinkingMessage.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { getTheme } from '../../utils/theme'
+
+type Props = {
+  addMargin: boolean
+}
+
+export function AssistantRedactedThinkingMessage({
+  addMargin = false,
+}: Props): React.ReactNode {
+  return (
+    <Box marginTop={addMargin ? 1 : 0}>
+      <Text color={getTheme().secondaryText} italic>
+        ✻ Thinking…
+      </Text>
+    </Box>
+  )
+}

package/src/components/messages/AssistantTextMessage.tsx

@@ -0,0 +1,144 @@
+import { TextBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import React from 'react'
+import { AssistantBashOutputMessage } from './AssistantBashOutputMessage'
+import { AssistantLocalCommandOutputMessage } from './AssistantLocalCommandOutputMessage'
+import { getTheme } from '../../utils/theme'
+import { Box, Text } from 'ink'
+import { Cost } from '../Cost'
+import {
+  API_ERROR_MESSAGE_PREFIX,
+  CREDIT_BALANCE_TOO_LOW_ERROR_MESSAGE,
+  INVALID_API_KEY_ERROR_MESSAGE,
+  PROMPT_TOO_LONG_ERROR_MESSAGE,
+} from '../../services/claude.js'
+import {
+  CANCEL_MESSAGE,
+  INTERRUPT_MESSAGE,
+  INTERRUPT_MESSAGE_FOR_TOOL_USE,
+  isEmptyMessageText,
+  NO_RESPONSE_REQUESTED,
+} from '../../utils/messages.js'
+import { BLACK_CIRCLE } from '../../constants/figures'
+import { applyMarkdown } from '../../utils/markdown'
+import { useTerminalSize } from '../../hooks/useTerminalSize'
+
+type Props = {
+  param: TextBlockParam
+  costUSD: number
+  durationMs: number
+  debug: boolean
+  addMargin: boolean
+  shouldShowDot: boolean
+  verbose?: boolean
+  width?: number | string
+}
+
+export function AssistantTextMessage({
+  param: { text },
+  costUSD,
+  durationMs,
+  debug,
+  addMargin,
+  shouldShowDot,
+  verbose,
+}: Props): React.ReactNode {
+  const { columns } = useTerminalSize()
+  if (isEmptyMessageText(text)) {
+    return null
+  }
+
+  // Show bash output
+  if (text.startsWith('<bash-stdout') || text.startsWith('<bash-stderr')) {
+    return <AssistantBashOutputMessage content={text} verbose={verbose} />
+  }
+
+  // Show command output
+  if (
+    text.startsWith('<local-command-stdout') ||
+    text.startsWith('<local-command-stderr')
+  ) {
+    return <AssistantLocalCommandOutputMessage content={text} />
+  }
+
+  if (text.startsWith(API_ERROR_MESSAGE_PREFIX)) {
+    return (
+      <Text>
+        &nbsp;&nbsp;⎿ &nbsp;
+        <Text color={getTheme().error}>
+          {text === API_ERROR_MESSAGE_PREFIX
+            ? `${API_ERROR_MESSAGE_PREFIX}: Please wait a moment and try again.`
+            : text}
+        </Text>
+      </Text>
+    )
+  }
+
+  switch (text) {
+    // Local JSX commands don't need a response, but we still want Claude to see them
+    // Tool results render their own interrupt messages
+    case NO_RESPONSE_REQUESTED:
+    case INTERRUPT_MESSAGE_FOR_TOOL_USE:
+      return null
+
+    case INTERRUPT_MESSAGE:
+    case CANCEL_MESSAGE:
+      return (
+        <Text>
+          &nbsp;&nbsp;⎿ &nbsp;
+          <Text color={getTheme().error}>Interrupted by user</Text>
+        </Text>
+      )
+
+    case PROMPT_TOO_LONG_ERROR_MESSAGE:
+      return (
+        <Text>
+          &nbsp;&nbsp;⎿ &nbsp;
+          <Text color={getTheme().error}>
+            Context low &middot; Run /compact to compact & continue
+          </Text>
+        </Text>
+      )
+
+    case CREDIT_BALANCE_TOO_LOW_ERROR_MESSAGE:
+      return (
+        <Text>
+          &nbsp;&nbsp;⎿ &nbsp;
+          <Text color={getTheme().error}>
+            Credit balance too low &middot; Add funds:
+            https://console.anthropic.com/settings/billing
+          </Text>
+        </Text>
+      )
+
+    case INVALID_API_KEY_ERROR_MESSAGE:
+      return (
+        <Text>
+          &nbsp;&nbsp;⎿ &nbsp;
+          <Text color={getTheme().error}>{INVALID_API_KEY_ERROR_MESSAGE}</Text>
+        </Text>
+      )
+
+    default:
+      return (
+        <Box
+          alignItems="flex-start"
+          flexDirection="row"
+          justifyContent="space-between"
+          marginTop={addMargin ? 1 : 0}
+          width="100%"
+        >
+          <Box flexDirection="row">
+            {shouldShowDot && (
+              <Box minWidth={2}>
+                <Text color={getTheme().text}>{BLACK_CIRCLE}</Text>
+              </Box>
+            )}
+            <Box flexDirection="column" width={columns - 6}>
+              <Text>{applyMarkdown(text)}</Text>
+            </Box>
+          </Box>
+          <Cost costUSD={costUSD} durationMs={durationMs} debug={debug} />
+        </Box>
+      )
+  }
+}

package/src/components/messages/AssistantThinkingMessage.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { getTheme } from '../../utils/theme'
+import { applyMarkdown } from '../../utils/markdown'
+import {
+  ThinkingBlock,
+  ThinkingBlockParam,
+} from '@anthropic-ai/sdk/resources/index.mjs'
+
+type Props = {
+  param: ThinkingBlock | ThinkingBlockParam
+  addMargin: boolean
+}
+
+export function AssistantThinkingMessage({
+  param: { thinking },
+  addMargin = false,
+}: Props): React.ReactNode {
+  if (!thinking) {
+    return null
+  }
+
+  return (
+    <Box
+      flexDirection="column"
+      gap={1}
+      marginTop={addMargin ? 1 : 0}
+      width="100%"
+    >
+      <Text color={getTheme().secondaryText} italic>
+        ✻ Thinking…
+      </Text>
+      <Box paddingLeft={2}>
+        <Text color={getTheme().secondaryText} italic>
+          {applyMarkdown(thinking)}
+        </Text>
+      </Box>
+    </Box>
+  )
+}

package/src/components/messages/AssistantToolUseMessage.tsx

@@ -0,0 +1,133 @@
+import { Box, Text } from 'ink'
+import React from 'react'
+import { logError } from '../../utils/log'
+import { ToolUseBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
+import { Tool } from '../../Tool'
+import { Cost } from '../Cost'
+import { ToolUseLoader } from '../ToolUseLoader'
+import { getTheme } from '../../utils/theme'
+import { BLACK_CIRCLE } from '../../constants/figures'
+import { ThinkTool } from '../../tools/ThinkTool/ThinkTool'
+import { AssistantThinkingMessage } from './AssistantThinkingMessage'
+import { TaskToolMessage } from './TaskToolMessage'
+
+type Props = {
+  param: ToolUseBlockParam
+  costUSD: number
+  durationMs: number
+  addMargin: boolean
+  tools: Tool[]
+  debug: boolean
+  verbose: boolean
+  erroredToolUseIDs: Set<string>
+  inProgressToolUseIDs: Set<string>
+  unresolvedToolUseIDs: Set<string>
+  shouldAnimate: boolean
+  shouldShowDot: boolean
+}
+
+export function AssistantToolUseMessage({
+  param,
+  costUSD,
+  durationMs,
+  addMargin,
+  tools,
+  debug,
+  verbose,
+  erroredToolUseIDs,
+  inProgressToolUseIDs,
+  unresolvedToolUseIDs,
+  shouldAnimate,
+  shouldShowDot,
+}: Props): React.ReactNode {
+  const tool = tools.find(_ => _.name === param.name)
+  if (!tool) {
+    logError(`Tool ${param.name} not found`)
+    return null
+  }
+  const isQueued =
+    !inProgressToolUseIDs.has(param.id) && unresolvedToolUseIDs.has(param.id)
+  // Keeping color undefined makes the OS use the default color regardless of appearance
+  const color = isQueued ? getTheme().secondaryText : undefined
+
+  // TODO: Avoid this special case
+  if (tool === ThinkTool) {
+    // params were already validated in query(), so this won't throe
+    const { thought } = ThinkTool.inputSchema.parse(param.input)
+    return (
+      <AssistantThinkingMessage
+        param={{ thinking: thought, signature: '', type: 'thinking' }}
+        addMargin={addMargin}
+      />
+    )
+  }
+
+  const userFacingToolName = tool.userFacingName ? tool.userFacingName(param.input) : tool.name
+  return (
+    <Box
+      flexDirection="row"
+      justifyContent="space-between"
+      marginTop={addMargin ? 1 : 0}
+      width="100%"
+    >
+      <Box>
+        <Box
+          flexWrap="nowrap"
+          minWidth={userFacingToolName.length + (shouldShowDot ? 2 : 0)}
+        >
+          {shouldShowDot &&
+            (isQueued ? (
+              <Box minWidth={2}>
+                <Text color={color}>{BLACK_CIRCLE}</Text>
+              </Box>
+            ) : (
+              <ToolUseLoader
+                shouldAnimate={shouldAnimate}
+                isUnresolved={unresolvedToolUseIDs.has(param.id)}
+                isError={erroredToolUseIDs.has(param.id)}
+              />
+            ))}
+          {tool.name === 'Task' && param.input ? (
+            <TaskToolMessage
+              agentType={(param.input as any).subagent_type || 'general-purpose'}
+              bold={!isQueued}
+            >
+              {userFacingToolName}
+            </TaskToolMessage>
+          ) : (
+            <Text color={color} bold={!isQueued}>
+              {userFacingToolName}
+            </Text>
+          )}
+        </Box>
+        <Box flexWrap="nowrap">
+          {Object.keys(param.input as { [key: string]: unknown }).length > 0 &&
+            (() => {
+              const toolMessage = tool.renderToolUseMessage(
+                param.input as never,
+                {
+                  verbose,
+                },
+              )
+
+              // If the tool returns a React component, render it directly
+              if (React.isValidElement(toolMessage)) {
+                return (
+                  <Box flexDirection="row">
+                    <Text color={color}>(</Text>
+                    {toolMessage}
+                    <Text color={color}>)</Text>
+                  </Box>
+                )
+              }
+
+              // If it's a string, wrap it in Text
+              return <Text color={color}>({toolMessage})</Text>
+            })()}
+          <Text color={color}>…</Text>
+        </Box>
+      </Box>
+      <Cost costUSD={costUSD} durationMs={durationMs} debug={debug} />
+    </Box>
+  )
+}

package/src/components/messages/TaskProgressMessage.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Box, Text } from 'ink'
+import { getTheme } from '../../utils/theme'
+
+interface Props {
+  agentType: string
+  status: string
+  toolCount?: number
+}
+
+export function TaskProgressMessage({ agentType, status, toolCount }: Props) {
+  const theme = getTheme()
+  
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      <Box flexDirection="row">
+        <Text color={theme.claude}>⎯ </Text>
+        <Text color={theme.text} bold>
+          [{agentType}]
+        </Text>
+        <Text color={theme.secondaryText}> {status}</Text>
+      </Box>
+      {toolCount && toolCount > 0 && (
+        <Box marginLeft={3}>
+          <Text color={theme.secondaryText}>
+            Tools used: {toolCount}
+          </Text>
+        </Box>
+      )}
+    </Box>
+  )
+}

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().koding}>#</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>
+  )
+}