@shareai-lab/kode 1.1.14 → 1.1.16-dev.1

package/src/components/Help.tsx

@@ -1,215 +0,0 @@
-import { Command } from '../commands'
-import { PRODUCT_COMMAND, PRODUCT_NAME } from '../constants/product'
-import {
-  getCustomCommandDirectories,
-  hasCustomCommands,
-  type CustomCommandWithScope,
-} from '../services/customCommands'
-import * as React from 'react'
-import { Box, Text, useInput } from 'ink'
-import { getTheme } from '../utils/theme'
-import { PressEnterToContinue } from './PressEnterToContinue'
-import { MACRO } from '../constants/macros'
-
-/**
- * Help Component - Interactive help system with progressive disclosure
- *
- * This component provides a comprehensive help interface that progressively
- * reveals information to avoid overwhelming users. It categorizes commands
- * into built-in and custom types, providing clear guidance on usage.
- *
- * The progressive disclosure pattern (count-based) ensures users can absorb
- * information at their own pace while maintaining a responsive interface.
- */
-export function Help({
-  commands,
-  onClose,
-}: {
-  commands: Command[]
-  onClose: () => void
-}): React.ReactNode {
-  const theme = getTheme()
-  const moreHelp = `Learn more at: ${MACRO.README_URL}`
-
-  // Filter out hidden commands from the help display
-  const filteredCommands = commands.filter(cmd => !cmd.isHidden)
-
-  // Separate built-in commands from custom commands
-  // Built-in commands are those that don't follow the custom command patterns
-  const builtInCommands = filteredCommands.filter(
-    cmd => !cmd.name.startsWith('project:') && !cmd.name.startsWith('user:'),
-  )
-
-  // Custom commands are those with project: or user: prefixes
-  const customCommands = filteredCommands.filter(
-    cmd => cmd.name.startsWith('project:') || cmd.name.startsWith('user:'),
-  ) as CustomCommandWithScope[]
-
-  // Progressive disclosure state for managing information flow
-  const [count, setCount] = React.useState(0)
-
-  // Timer-based progressive disclosure to prevent information overload
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      if (count < 3) {
-        setCount(count + 1)
-      }
-    }, 250)
-
-    return () => clearTimeout(timer)
-  }, [count])
-
-  // Handle Enter key to close help
-  useInput((_, key) => {
-    if (key.return) onClose()
-  })
-
-  return (
-    <Box flexDirection="column" padding={1}>
-      <Text bold color={theme.kode}>
-        {`${PRODUCT_NAME} v${MACRO.VERSION}`}
-      </Text>
-
-      <Box marginTop={1} flexDirection="column">
-        <Text>
-          {PRODUCT_NAME} is a beta research preview. Always review{' '}
-          {PRODUCT_NAME}&apos;s responses, especially when running code.{' '}
-          {PRODUCT_NAME} has read access to files in the current directory and
-          can run commands and edit files with your permission.
-        </Text>
-      </Box>
-
-      {count >= 1 && (
-        <Box flexDirection="column" marginTop={1}>
-          <Text bold>Usage Modes:</Text>
-          <Text>
-            • REPL: <Text bold>{PRODUCT_COMMAND}</Text> (interactive session)
-          </Text>
-          <Text>
-            • Non-interactive:{' '}
-            <Text bold>{PRODUCT_COMMAND} -p &quot;question&quot;</Text>
-          </Text>
-          <Box marginTop={1}>
-            <Text>
-              Run <Text bold>{PRODUCT_COMMAND} -h</Text> for all command line
-              options
-            </Text>
-          </Box>
-        </Box>
-      )}
-
-      {count >= 2 && (
-        <Box marginTop={1} flexDirection="column">
-          <Text bold>Common Tasks:</Text>
-          <Text>
-            • Ask questions about your codebase{' '}
-            <Text color={getTheme().secondaryText}>
-              &gt; How does foo.py work?
-            </Text>
-          </Text>
-          <Text>
-            • Edit files{' '}
-            <Text color={getTheme().secondaryText}>
-              &gt; Update bar.ts to...
-            </Text>
-          </Text>
-          <Text>
-            • Fix errors{' '}
-            <Text color={getTheme().secondaryText}>&gt; cargo build</Text>
-          </Text>
-          <Text>
-            • Run commands{' '}
-            <Text color={getTheme().secondaryText}>&gt; /help</Text>
-          </Text>
-          <Text>
-            • Run bash commands{' '}
-            <Text color={getTheme().secondaryText}>&gt; !ls</Text>
-          </Text>
-        </Box>
-      )}
-
-      {count >= 3 && (
-        <Box marginTop={1} flexDirection="column">
-          <Text bold>Built-in Commands:</Text>
-
-          <Box flexDirection="column">
-            {builtInCommands.map((cmd, i) => (
-              <Box key={i} marginLeft={1}>
-                <Text bold>{`/${cmd.name}`}</Text>
-                <Text> - {cmd.description}</Text>
-              </Box>
-            ))}
-          </Box>
-
-          {customCommands.length > 0 && (
-            <>
-              <Box marginTop={1}>
-                <Text bold>Custom Commands:</Text>
-              </Box>
-
-              <Box flexDirection="column">
-                {customCommands.map((cmd, i) => (
-                  <Box key={i} marginLeft={1}>
-                    <Text bold color={theme.kode}>{`/${cmd.name}`}</Text>
-                    <Text> - {cmd.description}</Text>
-                    {cmd.aliases && cmd.aliases.length > 0 && (
-                      <Text color={theme.secondaryText}>
-                        {' '}
-                        (aliases: {cmd.aliases.join(', ')})
-                      </Text>
-                    )}
-                    {/* Show scope indicator for debugging */}
-                    {cmd.scope && (
-                      <Text color={theme.secondaryText}> [{cmd.scope}]</Text>
-                    )}
-                  </Box>
-                ))}
-              </Box>
-            </>
-          )}
-
-          {/* Show custom command directory information */}
-          {hasCustomCommands() || customCommands.length > 0 ? (
-            <Box marginTop={1}>
-              <Text color={theme.secondaryText}>
-                Custom commands loaded from:
-              </Text>
-              <Text color={theme.secondaryText}>
-                • {getCustomCommandDirectories().userClaude} (user: prefix)
-              </Text>
-              <Text color={theme.secondaryText}>
-                • {getCustomCommandDirectories().projectClaude} (project: prefix)
-              </Text>
-              <Text color={theme.secondaryText}>
-                Use /refresh-commands to reload after changes
-              </Text>
-            </Box>
-          ) : (
-            <Box marginTop={1}>
-              <Text color={theme.secondaryText}>
-                Create custom commands by adding .md files to:
-              </Text>
-              <Text color={theme.secondaryText}>
-                • {getCustomCommandDirectories().userClaude} (user: prefix)
-              </Text>
-              <Text color={theme.secondaryText}>
-                • {getCustomCommandDirectories().projectClaude} (project: prefix)
-              </Text>
-              <Text color={theme.secondaryText}>
-                Use /refresh-commands to reload after creation
-              </Text>
-            </Box>
-          )}
-        </Box>
-      )}
-
-      <Box marginTop={1}>
-        <Text color={theme.secondaryText}>{moreHelp}</Text>
-      </Box>
-
-      <Box marginTop={2}>
-        <PressEnterToContinue />
-      </Box>
-    </Box>
-  )
-}

package/src/components/HighlightedCode.tsx

@@ -1,33 +0,0 @@
-import { highlight, supportsLanguage } from 'cli-highlight'
-import { Text } from 'ink'
-import React, { useMemo } from 'react'
-import { logError } from '../utils/log'
-
-type Props = {
-  code: string
-  language: string
-}
-
-export function HighlightedCode({ code, language }: Props): React.ReactElement {
-  const highlightedCode = useMemo(() => {
-    try {
-      if (supportsLanguage(language)) {
-        return highlight(code, { language })
-      } else {
-        logError(
-          `Language not supported while highlighting code, falling back to markdown: ${language}`,
-        )
-        return highlight(code, { language: 'markdown' })
-      }
-    } catch (e) {
-      if (e instanceof Error && e.message.includes('Unknown language')) {
-        logError(
-          `Language not supported while highlighting code, falling back to markdown: ${e}`,
-        )
-        return highlight(code, { language: 'markdown' })
-      }
-    }
-  }, [code, language])
-
-  return <Text>{highlightedCode}</Text>
-}

package/src/components/InvalidConfigDialog.tsx

@@ -1,113 +0,0 @@
-import React from 'react'
-import { Box, Newline, Text, useInput } from 'ink'
-import { getTheme } from '../utils/theme'
-import { Select } from './CustomSelect/select'
-import { render } from 'ink'
-import { writeFileSync } from 'fs'
-import { ConfigParseError } from '../utils/errors'
-import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
-interface InvalidConfigHandlerProps {
-  error: ConfigParseError
-}
-
-interface InvalidConfigDialogProps {
-  filePath: string
-  errorDescription: string
-  onExit: () => void
-  onReset: () => void
-}
-
-/**
- * Dialog shown when the Claude config file contains invalid JSON
- */
-function InvalidConfigDialog({
-  filePath,
-  errorDescription,
-  onExit,
-  onReset,
-}: InvalidConfigDialogProps): React.ReactNode {
-  const theme = getTheme()
-
-  // Handle escape key
-  useInput((_, key) => {
-    if (key.escape) {
-      onExit()
-    }
-  })
-
-  const exitState = useExitOnCtrlCD(() => process.exit(0))
-
-  // Handler for Select onChange
-  const handleSelect = (value: string) => {
-    if (value === 'exit') {
-      onExit()
-    } else {
-      onReset()
-    }
-  }
-
-  return (
-    <>
-      <Box
-        flexDirection="column"
-        borderColor={theme.error}
-        borderStyle="round"
-        padding={1}
-        width={70}
-        gap={1}
-      >
-        <Text bold>Configuration Error</Text>
-
-        <Box flexDirection="column" gap={1}>
-          <Text>
-            The configuration file at <Text bold>{filePath}</Text> contains
-            invalid JSON.
-          </Text>
-          <Text>{errorDescription}</Text>
-        </Box>
-
-        <Box flexDirection="column">
-          <Text bold>Choose an option:</Text>
-          <Select
-            options={[
-              { label: 'Exit and fix manually', value: 'exit' },
-              { label: 'Reset with default configuration', value: 'reset' },
-            ]}
-            onChange={handleSelect}
-          />
-        </Box>
-      </Box>
-      {exitState.pending ? (
-        <Text dimColor>Press {exitState.keyName} again to exit</Text>
-      ) : (
-        <Newline />
-      )}
-    </>
-  )
-}
-
-export function showInvalidConfigDialog({
-  error,
-}: InvalidConfigHandlerProps): Promise<void> {
-  return new Promise(resolve => {
-    render(
-      <InvalidConfigDialog
-        filePath={error.filePath}
-        errorDescription={error.message}
-        onExit={() => {
-          resolve()
-          process.exit(1)
-        }}
-        onReset={() => {
-          writeFileSync(
-            error.filePath,
-            JSON.stringify(error.defaultConfig, null, 2),
-          )
-          resolve()
-          process.exit(0)
-        }}
-      />,
-      { exitOnCtrlC: false },
-    )
-  })
-}

package/src/components/Link.tsx

@@ -1,32 +0,0 @@
-import InkLink from 'ink-link'
-import { Text } from 'ink'
-import React from 'react'
-import { env } from '../utils/env'
-
-type LinkProps = {
-  url: string
-  children?: React.ReactNode
-}
-
-// Terminals that support hyperlinks
-const LINK_SUPPORTING_TERMINALS = ['iTerm.app', 'WezTerm', 'Hyper', 'VSCode']
-
-export default function Link({ url, children }: LinkProps): React.ReactNode {
-  const supportsLinks = LINK_SUPPORTING_TERMINALS.includes(env.terminal ?? '')
-
-  // Determine what text to display - use children or fall back to the URL itself
-  const displayContent = children || url
-
-  // Use InkLink to get clickable links when we can, or to get a nice fallback when we can't
-  if (supportsLinks || displayContent !== url) {
-    return (
-      <InkLink url={url}>
-        <Text>{displayContent}</Text>
-      </InkLink>
-    )
-  } else {
-    // But if we don't have a title and just have a url *and* are not a terminal that supports links
-    // that doesn't support clickable links anyway, just show the URL
-    return <Text underline>{displayContent}</Text>
-  }
-}

package/src/components/LogSelector.tsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import { Box, Text } from 'ink'
-import { Select } from './CustomSelect/select'
-import type { LogOption } from '../types/logs'
-import { getTheme } from '../utils/theme'
-import { useTerminalSize } from '../hooks/useTerminalSize'
-import { formatDate } from '../utils/log'
-
-type LogSelectorProps = {
-  logs: LogOption[]
-  onSelect: (logValue: number) => void
-}
-
-export function LogSelector({
-  logs,
-  onSelect,
-}: LogSelectorProps): React.ReactNode {
-  const { rows, columns } = useTerminalSize()
-  if (logs.length === 0) {
-    return null
-  }
-
-  const visibleCount = rows - 3 // Account for header and footer
-  const hiddenCount = Math.max(0, logs.length - visibleCount)
-
-  // Create formatted options
-  // Calculate column widths
-  const indexWidth = 7 // [0] to [99] with extra spaces
-  const modifiedWidth = 21 // "Yesterday at 7:49 pm" with space
-  const createdWidth = 21 // "Yesterday at 7:49 pm" with space
-  const countWidth = 9 // "999 msgs" (right-aligned)
-
-  const options = logs.map((log, i) => {
-    const index = `[${i}]`.padEnd(indexWidth)
-    const modified = formatDate(log.modified).padEnd(modifiedWidth)
-    const created = formatDate(log.created).padEnd(createdWidth)
-    const msgCount = `${log.messageCount}`.padStart(countWidth)
-    const prompt = log.firstPrompt
-    let branchInfo = ''
-    if (log.forkNumber) branchInfo += ` (fork #${log.forkNumber})`
-    if (log.sidechainNumber)
-      branchInfo += ` (sidechain #${log.sidechainNumber})`
-
-    const labelTxt = `${index}${modified}${created}${msgCount} ${prompt}${branchInfo}`
-    const truncated =
-      labelTxt.length > columns - 2 // Account for "> " selection cursor
-        ? `${labelTxt.slice(0, columns - 5)}...`
-        : labelTxt
-    return {
-      label: truncated,
-      value: log.value.toString(),
-    }
-  })
-
-  return (
-    <Box flexDirection="column" height="100%" width="100%">
-      <Box paddingLeft={9}>
-        <Text bold color={getTheme().text}>
-          Modified
-        </Text>
-        <Text>{'             '}</Text>
-        <Text bold color={getTheme().text}>
-          Created
-        </Text>
-        <Text>{'             '}</Text>
-        <Text bold color={getTheme().text}>
-          # Messages
-        </Text>
-        <Text> </Text>
-        <Text bold color={getTheme().text}>
-          First message
-        </Text>
-      </Box>
-      <Select
-        options={options}
-        onChange={index => onSelect(parseInt(index, 10))}
-        visibleOptionCount={visibleCount}
-      />
-      {hiddenCount > 0 && (
-        <Box paddingLeft={2}>
-          <Text color={getTheme().secondaryText}>and {hiddenCount} more…</Text>
-        </Box>
-      )}
-    </Box>
-  )
-}

package/src/components/Logo.tsx

@@ -1,170 +0,0 @@
-import { Box, Text, Newline } from 'ink'
-import * as React from 'react'
-import { getTheme } from '../utils/theme'
-import { PRODUCT_NAME } from '../constants/product'
-import { getAnthropicApiKey, getGlobalConfig } from '../utils/config'
-import { getCwd } from '../utils/state'
-import { AsciiLogo } from './AsciiLogo'
-import type { WrappedClient } from '../services/mcpClient'
-import { getModelManager } from '../utils/model'
-
-export const MIN_LOGO_WIDTH = 50
-
-export function Logo({
-  mcpClients,
-  isDefaultModel = false,
-  updateBannerVersion,
-  updateBannerCommands,
-}: {
-  mcpClients: WrappedClient[]
-  isDefaultModel?: boolean
-  updateBannerVersion?: string | null
-  updateBannerCommands?: string[] | null
-}): React.ReactNode {
-  const width = Math.max(MIN_LOGO_WIDTH, getCwd().length + 12)
-  const theme = getTheme()
-  const config = getGlobalConfig()
-
-  const modelManager = getModelManager()
-  const mainModelName = modelManager.getModelName('main')
-  const currentModel = mainModelName || 'No model configured'
-  const apiKey = getAnthropicApiKey()
-  const hasOverrides = Boolean(
-    process.env.ANTHROPIC_API_KEY ||
-      process.env.DISABLE_PROMPT_CACHING ||
-      process.env.API_TIMEOUT_MS ||
-      process.env.MAX_THINKING_TOKENS,
-  )
-
-  return (
-    <Box flexDirection="column">
-      <Box
-        borderColor={theme.kode}
-        borderStyle="round"
-        flexDirection="column"
-        gap={1}
-        paddingLeft={1}
-        marginRight={2}
-        width={width}
-      >
-        {updateBannerVersion ? (
-          <Box flexDirection="column">
-            <Text color="yellow">New version available: {updateBannerVersion}</Text>
-            <Text>Run the following command to update:</Text>
-            <Text>
-              {'  '}
-              {updateBannerCommands?.[0] ?? 'bun add -g @shareai-lab/kode@latest'}
-            </Text>
-            <Text>Or:</Text>
-            <Text>
-              {'  '}
-              {updateBannerCommands?.[1] ?? 'npm install -g @shareai-lab/kode@latest'}
-            </Text>
-            {process.platform !== 'win32' && (
-              <Text dimColor>
-                Note: you may need to prefix with "sudo" on macOS/Linux.
-              </Text>
-            )}
-          </Box>
-        ) : null}
-        <Text>
-          <Text color={theme.kode}>✻</Text> Welcome to{' '}
-          <Text bold>{PRODUCT_NAME}</Text> <Text>research preview!</Text>
-        </Text>
-        {/* <AsciiLogo /> */}
-
-        <>
-          <Box paddingLeft={2} flexDirection="column" gap={1}>
-            <Text color={theme.secondaryText} italic>
-              /help for help
-            </Text>
-            <Text color={theme.secondaryText}>cwd: {getCwd()}</Text>
-          </Box>
-
-          {hasOverrides && (
-            <Box
-              borderColor={theme.secondaryBorder}
-              borderStyle="single"
-              borderBottom={false}
-              borderLeft={false}
-              borderRight={false}
-              borderTop={true}
-              flexDirection="column"
-              marginLeft={2}
-              marginRight={1}
-              paddingTop={1}
-            >
-              <Box marginBottom={1}>
-                <Text color={theme.secondaryText}>Overrides (via env):</Text>
-              </Box>
-              {process.env.ANTHROPIC_API_KEY && apiKey ? (
-                <Text color={theme.secondaryText}>
-                  • API Key:{' '}
-                  <Text bold>sk-ant-…{apiKey!.slice(-width + 25)}</Text>
-                </Text>
-              ) : null}
-              {process.env.DISABLE_PROMPT_CACHING ? (
-                <Text color={theme.secondaryText}>
-                  • Prompt caching:{' '}
-                  <Text color={theme.error} bold>
-                    off
-                  </Text>
-                </Text>
-              ) : null}
-              {process.env.API_TIMEOUT_MS ? (
-                <Text color={theme.secondaryText}>
-                  • API timeout:{' '}
-                  <Text bold>{process.env.API_TIMEOUT_MS}ms</Text>
-                </Text>
-              ) : null}
-              {process.env.MAX_THINKING_TOKENS ? (
-                <Text color={theme.secondaryText}>
-                  • Max thinking tokens:{' '}
-                  <Text bold>{process.env.MAX_THINKING_TOKENS}</Text>
-                </Text>
-              ) : null}
-              {process.env.ANTHROPIC_BASE_URL ? (
-                <Text color={theme.secondaryText}>
-                  • API Base URL:{' '}
-                  <Text bold>{process.env.ANTHROPIC_BASE_URL}</Text>
-                </Text>
-              ) : null}
-            </Box>
-          )}
-        </>
-        {mcpClients.length ? (
-          <Box
-            borderColor={theme.secondaryBorder}
-            borderStyle="single"
-            borderBottom={false}
-            borderLeft={false}
-            borderRight={false}
-            borderTop={true}
-            flexDirection="column"
-            marginLeft={2}
-            marginRight={1}
-            paddingTop={1}
-          >
-            <Box marginBottom={1}>
-              <Text color={theme.secondaryText}>MCP Servers:</Text>
-            </Box>
-            {mcpClients.map((client, idx) => (
-              <Box key={idx} width={width - 6}>
-                <Text color={theme.secondaryText}>• {client.name}</Text>
-                <Box flexGrow={1} />
-                <Text
-                  bold
-                  color={
-                    client.type === 'connected' ? theme.success : theme.error
-                  }
-                >
-                  {client.type === 'connected' ? 'connected' : 'failed'}
-                </Text>
-              </Box>
-            ))}
-          </Box>
-        ) : null}
-      </Box>
-    </Box>
-  )
-}