@shareai-lab/kode 1.0.70 → 1.0.71

package/src/components/MCPServerApprovalDialog.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { Box, Text, useInput } from 'ink'
+import { getTheme } from '../utils/theme'
+import { Select } from '@inkjs/ui'
+import {
+  saveCurrentProjectConfig,
+  getCurrentProjectConfig,
+} from '../utils/config.js'
+import { MCPServerDialogCopy } from './MCPServerDialogCopy'
+import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
+
+type Props = {
+  serverName: string
+  onDone(): void
+}
+
+export function MCPServerApprovalDialog({
+  serverName,
+  onDone,
+}: Props): React.ReactNode {
+  const theme = getTheme()
+  function onChange(value: 'yes' | 'no') {
+    const config = getCurrentProjectConfig()
+    switch (value) {
+      case 'yes': {
+        if (!config.approvedMcprcServers) {
+          config.approvedMcprcServers = []
+        }
+        if (!config.approvedMcprcServers.includes(serverName)) {
+          config.approvedMcprcServers.push(serverName)
+        }
+        saveCurrentProjectConfig(config)
+        onDone()
+        break
+      }
+      case 'no': {
+        if (!config.rejectedMcprcServers) {
+          config.rejectedMcprcServers = []
+        }
+        if (!config.rejectedMcprcServers.includes(serverName)) {
+          config.rejectedMcprcServers.push(serverName)
+        }
+        saveCurrentProjectConfig(config)
+        onDone()
+        break
+      }
+    }
+  }
+
+  const exitState = useExitOnCtrlCD(() => process.exit(0))
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      onDone()
+      return
+    }
+  })
+
+  return (
+    <>
+      <Box
+        flexDirection="column"
+        gap={1}
+        padding={1}
+        borderStyle="round"
+        borderColor={theme.warning}
+      >
+        <Text bold color={theme.warning}>
+          New MCP Server Detected
+        </Text>
+        <Text>
+          This project contains a .mcprc file with an MCP server that requires
+          your approval:
+        </Text>
+        <Text bold>{serverName}</Text>
+
+        <MCPServerDialogCopy />
+
+        <Text>Do you want to approve this MCP server?</Text>
+
+        <Select
+          options={[
+            { label: 'Yes, approve this server', value: 'yes' },
+            { label: 'No, reject this server', value: 'no' },
+          ]}
+          onChange={value => onChange(value as 'yes' | 'no')}
+        />
+      </Box>
+      <Box marginLeft={3}>
+        <Text dimColor>
+          {exitState.pending ? (
+            <>Press {exitState.keyName} again to exit</>
+          ) : (
+            <>Enter to confirm · Esc to reject</>
+          )}
+        </Text>
+      </Box>
+    </>
+  )
+}

package/src/components/MCPServerDialogCopy.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Text } from 'ink'
+import Link from 'ink-link'
+import { PRODUCT_NAME, PRODUCT_COMMAND } from '../constants/product'
+
+export function MCPServerDialogCopy(): React.ReactNode {
+  return (
+    <>
+      <Text>
+        MCP servers provide additional functionality to {PRODUCT_NAME}. They may
+        execute code, make network requests, or access system resources via tool
+        calls. All tool calls will require your explicit approval before
+        execution. For more information, see{' '}
+        <Link url="https://docs.anthropic.com/s/claude-code-mcp">
+          MCP documentation
+        </Link>
+      </Text>
+
+      <Text dimColor>
+        Remember: You can always change these choices later by running `
+        {PRODUCT_COMMAND} mcp reset-mcprc-choices`
+      </Text>
+    </>
+  )
+}

package/src/components/MCPServerMultiselectDialog.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Box, Text, useInput } from 'ink'
+import { getTheme } from '../utils/theme'
+import { MultiSelect } from '@inkjs/ui'
+import {
+  saveCurrentProjectConfig,
+  getCurrentProjectConfig,
+} from '../utils/config.js'
+import { partition } from 'lodash-es'
+import { MCPServerDialogCopy } from './MCPServerDialogCopy'
+import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
+
+type Props = {
+  serverNames: string[]
+  onDone(): void
+}
+
+export function MCPServerMultiselectDialog({
+  serverNames,
+  onDone,
+}: Props): React.ReactNode {
+  const theme = getTheme()
+  function onSubmit(selectedServers: string[]) {
+    const config = getCurrentProjectConfig()
+
+    // Initialize arrays if they don't exist
+    if (!config.approvedMcprcServers) {
+      config.approvedMcprcServers = []
+    }
+    if (!config.rejectedMcprcServers) {
+      config.rejectedMcprcServers = []
+    }
+
+    // Use partition to separate approved and rejected servers
+    const [approvedServers, rejectedServers] = partition(serverNames, server =>
+      selectedServers.includes(server),
+    )
+
+    // Add new servers directly to the respective lists
+    config.approvedMcprcServers.push(...approvedServers)
+    config.rejectedMcprcServers.push(...rejectedServers)
+
+    saveCurrentProjectConfig(config)
+    onDone()
+  }
+
+  const exitState = useExitOnCtrlCD(() => process.exit())
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      // On escape, treat all servers as rejected
+      const config = getCurrentProjectConfig()
+      if (!config.rejectedMcprcServers) {
+        config.rejectedMcprcServers = []
+      }
+
+      for (const server of serverNames) {
+        if (!config.rejectedMcprcServers.includes(server)) {
+          config.rejectedMcprcServers.push(server)
+        }
+      }
+
+      saveCurrentProjectConfig(config)
+      onDone()
+      return
+    }
+  })
+
+  return (
+    <>
+      <Box
+        flexDirection="column"
+        gap={1}
+        padding={1}
+        borderStyle="round"
+        borderColor={theme.warning}
+      >
+        <Text bold color={theme.warning}>
+          New MCP Servers Detected
+        </Text>
+        <Text>
+          This project contains a .mcprc file with {serverNames.length} MCP
+          servers that require your approval.
+        </Text>
+        <MCPServerDialogCopy />
+
+        <Text>Please select the servers you want to enable:</Text>
+
+        <MultiSelect
+          options={serverNames.map(server => ({
+            label: server,
+            value: server,
+          }))}
+          defaultValue={serverNames}
+          onSubmit={onSubmit}
+        />
+      </Box>
+      <Box marginLeft={3}>
+        <Text dimColor>
+          {exitState.pending ? (
+            <>Press {exitState.keyName} again to exit</>
+          ) : (
+            <>Space to select · Enter to confirm · Esc to reject all</>
+          )}
+        </Text>
+      </Box>
+    </>
+  )
+}

package/src/components/Message.tsx

@@ -0,0 +1,219 @@
+import { Box } from 'ink'
+import * as React from 'react'
+import type { AssistantMessage, Message, UserMessage } from '../query'
+import type {
+  ContentBlock,
+  DocumentBlockParam,
+  ImageBlockParam,
+  TextBlockParam,
+  ThinkingBlockParam,
+  ToolResultBlockParam,
+  ToolUseBlockParam,
+} from '@anthropic-ai/sdk/resources/index.mjs'
+import { Tool } from '../Tool'
+import { logError } from '../utils/log'
+import { UserToolResultMessage } from './messages/UserToolResultMessage/UserToolResultMessage'
+import { AssistantToolUseMessage } from './messages/AssistantToolUseMessage'
+import { AssistantTextMessage } from './messages/AssistantTextMessage'
+import { UserTextMessage } from './messages/UserTextMessage'
+import { NormalizedMessage } from '../utils/messages'
+import { AssistantThinkingMessage } from './messages/AssistantThinkingMessage'
+import { AssistantRedactedThinkingMessage } from './messages/AssistantRedactedThinkingMessage'
+import { useTerminalSize } from '../hooks/useTerminalSize'
+
+type Props = {
+  message: UserMessage | AssistantMessage
+  messages: NormalizedMessage[]
+  // TODO: Find a way to remove this, and leave spacing to the consumer
+  addMargin: boolean
+  tools: Tool[]
+  verbose: boolean
+  debug: boolean
+  erroredToolUseIDs: Set<string>
+  inProgressToolUseIDs: Set<string>
+  unresolvedToolUseIDs: Set<string>
+  shouldAnimate: boolean
+  shouldShowDot: boolean
+  width?: number | string
+}
+
+export function Message({
+  message,
+  messages,
+  addMargin,
+  tools,
+  verbose,
+  debug,
+  erroredToolUseIDs,
+  inProgressToolUseIDs,
+  unresolvedToolUseIDs,
+  shouldAnimate,
+  shouldShowDot,
+  width,
+}: Props): React.ReactNode {
+  // Assistant message
+  if (message.type === 'assistant') {
+    return (
+      <Box flexDirection="column" width="100%">
+        {message.message.content.map((_, index) => (
+          <AssistantMessage
+            key={index}
+            param={_}
+            costUSD={message.costUSD}
+            durationMs={message.durationMs}
+            addMargin={addMargin}
+            tools={tools}
+            debug={debug}
+            options={{ verbose }}
+            erroredToolUseIDs={erroredToolUseIDs}
+            inProgressToolUseIDs={inProgressToolUseIDs}
+            unresolvedToolUseIDs={unresolvedToolUseIDs}
+            shouldAnimate={shouldAnimate}
+            shouldShowDot={shouldShowDot}
+            width={width}
+          />
+        ))}
+      </Box>
+    )
+  }
+
+  // User message
+  // TODO: normalize upstream
+  const content =
+    typeof message.message.content === 'string'
+      ? [{ type: 'text', text: message.message.content } as TextBlockParam]
+      : message.message.content
+  return (
+    <Box flexDirection="column" width="100%">
+      {content.map((_, index) => (
+        <UserMessage
+          key={index}
+          message={message}
+          messages={messages}
+          addMargin={addMargin}
+          tools={tools}
+          param={_ as TextBlockParam}
+          options={{ verbose }}
+        />
+      ))}
+    </Box>
+  )
+}
+
+function UserMessage({
+  message,
+  messages,
+  addMargin,
+  tools,
+  param,
+  options: { verbose },
+}: {
+  message: UserMessage
+  messages: Message[]
+  addMargin: boolean
+  tools: Tool[]
+  param:
+    | TextBlockParam
+    | DocumentBlockParam
+    | ImageBlockParam
+    | ToolUseBlockParam
+    | ToolResultBlockParam
+  options: {
+    verbose: boolean
+  }
+}): React.ReactNode {
+  const { columns } = useTerminalSize()
+  switch (param.type) {
+    case 'text':
+      return <UserTextMessage addMargin={addMargin} param={param} />
+    case 'tool_result':
+      return (
+        <UserToolResultMessage
+          param={param}
+          message={message}
+          messages={messages}
+          tools={tools}
+          verbose={verbose}
+          width={columns - 5}
+        />
+      )
+  }
+}
+
+function AssistantMessage({
+  param,
+  costUSD,
+  durationMs,
+  addMargin,
+  tools,
+  debug,
+  options: { verbose },
+  erroredToolUseIDs,
+  inProgressToolUseIDs,
+  unresolvedToolUseIDs,
+  shouldAnimate,
+  shouldShowDot,
+  width,
+}: {
+  param:
+    | ContentBlock
+    | TextBlockParam
+    | ImageBlockParam
+    | ThinkingBlockParam
+    | ToolUseBlockParam
+    | ToolResultBlockParam
+  costUSD: number
+  durationMs: number
+  addMargin: boolean
+  tools: Tool[]
+  debug: boolean
+  options: {
+    verbose: boolean
+  }
+  erroredToolUseIDs: Set<string>
+  inProgressToolUseIDs: Set<string>
+  unresolvedToolUseIDs: Set<string>
+  shouldAnimate: boolean
+  shouldShowDot: boolean
+  width?: number | string
+}): React.ReactNode {
+  switch (param.type) {
+    case 'tool_use':
+      return (
+        <AssistantToolUseMessage
+          param={param}
+          costUSD={costUSD}
+          durationMs={durationMs}
+          addMargin={addMargin}
+          tools={tools}
+          debug={debug}
+          verbose={verbose}
+          erroredToolUseIDs={erroredToolUseIDs}
+          inProgressToolUseIDs={inProgressToolUseIDs}
+          unresolvedToolUseIDs={unresolvedToolUseIDs}
+          shouldAnimate={shouldAnimate}
+          shouldShowDot={shouldShowDot}
+        />
+      )
+    case 'text':
+      return (
+        <AssistantTextMessage
+          param={param}
+          costUSD={costUSD}
+          durationMs={durationMs}
+          debug={debug}
+          addMargin={addMargin}
+          shouldShowDot={shouldShowDot}
+          verbose={verbose}
+          width={width}
+        />
+      )
+    case 'redacted_thinking':
+      return <AssistantRedactedThinkingMessage addMargin={addMargin} />
+    case 'thinking':
+      return <AssistantThinkingMessage addMargin={addMargin} param={param} />
+    default:
+      logError(`Unable to render message type: ${param.type}`)
+      return null
+  }
+}

package/src/components/MessageResponse.tsx

@@ -0,0 +1,15 @@
+import { Box, Text } from 'ink'
+import * as React from 'react'
+
+type Props = {
+  children: React.ReactNode
+}
+
+export function MessageResponse({ children }: Props): React.ReactNode {
+  return (
+    <Box flexDirection="row" height={1} overflow="hidden">
+      <Text>{'  '}⎿ &nbsp;</Text>
+      {children}
+    </Box>
+  )
+}

package/src/components/MessageSelector.tsx

@@ -0,0 +1,211 @@
+import { Box, Text, useInput } from 'ink'
+import * as React from 'react'
+import { useMemo, useState, useEffect } from 'react'
+import figures from 'figures'
+import { getTheme } from '../utils/theme'
+import { Message as MessageComponent } from './Message'
+import { randomUUID } from 'crypto'
+import { type Tool } from '../Tool'
+import {
+  createUserMessage,
+  isEmptyMessageText,
+  isNotEmptyMessage,
+  normalizeMessages,
+} from '../utils/messages.js'
+import { logEvent } from '../services/statsig'
+import type { AssistantMessage, UserMessage } from '../query'
+import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
+
+type Props = {
+  erroredToolUseIDs: Set<string>
+  messages: (UserMessage | AssistantMessage)[]
+  onSelect: (message: UserMessage) => void
+  onEscape: () => void
+  tools: Tool[]
+  unresolvedToolUseIDs: Set<string>
+}
+
+const MAX_VISIBLE_MESSAGES = 7
+
+export function MessageSelector({
+  erroredToolUseIDs,
+  messages,
+  onSelect,
+  onEscape,
+  tools,
+  unresolvedToolUseIDs,
+}: Props): React.ReactNode {
+  const currentUUID = useMemo(randomUUID, [])
+
+  // Log when selector is opened
+  useEffect(() => {
+    logEvent('tengu_message_selector_opened', {})
+  }, [])
+
+  function handleSelect(message: UserMessage) {
+    const indexFromEnd = messages.length - 1 - messages.indexOf(message)
+    logEvent('tengu_message_selector_selected', {
+      index_from_end: indexFromEnd.toString(),
+      message_type: message.type,
+      is_current_prompt: (message.uuid === currentUUID).toString(),
+    })
+    onSelect(message)
+  }
+
+  function handleEscape() {
+    logEvent('tengu_message_selector_cancelled', {})
+    onEscape()
+  }
+
+  // Add current prompt as a virtual message
+  const allItems = useMemo(
+    () => [
+      // Filter out tool results
+      ...messages
+        .filter(
+          _ =>
+            !(
+              _.type === 'user' &&
+              Array.isArray(_.message.content) &&
+              _.message.content[0]?.type === 'tool_result'
+            ),
+        )
+        // Filter out assistant messages, until we have a way to kick off the tool use loop from REPL
+        .filter(_ => _.type !== 'assistant'),
+      { ...createUserMessage(''), uuid: currentUUID } as UserMessage,
+    ],
+    [messages, currentUUID],
+  )
+  const [selectedIndex, setSelectedIndex] = useState(allItems.length - 1)
+
+  const exitState = useExitOnCtrlCD(() => process.exit(0))
+
+  useInput((input, key) => {
+    if (key.tab || key.escape) {
+      handleEscape()
+      return
+    }
+    if (key.return) {
+      handleSelect(allItems[selectedIndex]!)
+      return
+    }
+    if (key.upArrow) {
+      if (key.ctrl || key.shift || key.meta) {
+        // Jump to top with any modifier key
+        setSelectedIndex(0)
+      } else {
+        setSelectedIndex(prev => Math.max(0, prev - 1))
+      }
+    }
+    if (key.downArrow) {
+      if (key.ctrl || key.shift || key.meta) {
+        // Jump to bottom with any modifier key
+        setSelectedIndex(allItems.length - 1)
+      } else {
+        setSelectedIndex(prev => Math.min(allItems.length - 1, prev + 1))
+      }
+    }
+
+    // Handle number keys (1-9)
+    const num = Number(input)
+    if (!isNaN(num) && num >= 1 && num <= Math.min(9, allItems.length)) {
+      if (!allItems[num - 1]) {
+        return
+      }
+      handleSelect(allItems[num - 1]!)
+    }
+  })
+
+  const firstVisibleIndex = Math.max(
+    0,
+    Math.min(
+      selectedIndex - Math.floor(MAX_VISIBLE_MESSAGES / 2),
+      allItems.length - MAX_VISIBLE_MESSAGES,
+    ),
+  )
+
+  const normalizedMessages = useMemo(
+    () => normalizeMessages(messages).filter(isNotEmptyMessage),
+    [messages],
+  )
+
+  return (
+    <>
+      <Box
+        flexDirection="column"
+        borderStyle="round"
+        borderColor={getTheme().secondaryBorder}
+        height={4 + Math.min(MAX_VISIBLE_MESSAGES, allItems.length) * 2}
+        paddingX={1}
+        marginTop={1}
+      >
+        <Box flexDirection="column" minHeight={2} marginBottom={1}>
+          <Text bold>Jump to a previous message</Text>
+          <Text dimColor>This will fork the conversation</Text>
+        </Box>
+        {allItems
+          .slice(firstVisibleIndex, firstVisibleIndex + MAX_VISIBLE_MESSAGES)
+          .map((msg, index) => {
+            const actualIndex = firstVisibleIndex + index
+            const isSelected = actualIndex === selectedIndex
+            const isCurrent = msg.uuid === currentUUID
+
+            return (
+              <Box key={msg.uuid} flexDirection="row" height={2} minHeight={2}>
+                <Box width={7}>
+                  {isSelected ? (
+                    <Text color="blue" bold>
+                      {figures.pointer} {firstVisibleIndex + index + 1}{' '}
+                    </Text>
+                  ) : (
+                    <Text>
+                      {'  '}
+                      {firstVisibleIndex + index + 1}{' '}
+                    </Text>
+                  )}
+                </Box>
+                <Box height={1} overflow="hidden" width={100}>
+                  {isCurrent ? (
+                    <Box width="100%">
+                      <Text dimColor italic>
+                        {'(current)'}
+                      </Text>
+                    </Box>
+                  ) : Array.isArray(msg.message.content) &&
+                    msg.message.content[0]?.type === 'text' &&
+                    isEmptyMessageText(msg.message.content[0].text) ? (
+                    <Text dimColor italic>
+                      (empty message)
+                    </Text>
+                  ) : (
+                    <MessageComponent
+                      message={msg}
+                      messages={normalizedMessages}
+                      addMargin={false}
+                      tools={tools}
+                      verbose={false}
+                      debug={false}
+                      erroredToolUseIDs={erroredToolUseIDs}
+                      inProgressToolUseIDs={new Set()}
+                      unresolvedToolUseIDs={unresolvedToolUseIDs}
+                      shouldAnimate={false}
+                      shouldShowDot={false}
+                    />
+                  )}
+                </Box>
+              </Box>
+            )
+          })}
+      </Box>
+      <Box marginLeft={3}>
+        <Text dimColor>
+          {exitState.pending ? (
+            <>Press {exitState.keyName} again to exit</>
+          ) : (
+            <>↑/↓ to select · Enter to confirm · Tab/Esc to cancel</>
+          )}
+        </Text>
+      </Box>
+    </>
+  )
+}