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

package/src/components/ModelStatusDisplay.tsx

@@ -1,230 +0,0 @@
-import React from 'react'
-import { Text, Box } from 'ink'
-import { getModelManager } from '../utils/model'
-import { getGlobalConfig } from '../utils/config'
-import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
-import { getTheme } from '../utils/theme'
-
-type Props = {
-  onClose: () => void
-}
-
-export function ModelStatusDisplay({ onClose }: Props): React.ReactNode {
-  const theme = getTheme()
-  const exitState = useExitOnCtrlCD(onClose)
-
-  try {
-    const modelManager = getModelManager()
-    const config = getGlobalConfig()
-
-    // 显示所有模型指针的当前状态
-    const pointers = ['main', 'task', 'reasoning', 'quick'] as const
-
-    return (
-      <Box
-        flexDirection="column"
-        borderStyle="round"
-        borderColor={theme.secondaryBorder}
-        paddingX={2}
-        paddingY={1}
-      >
-        <Text bold>
-          📊 Current Model Status{' '}
-          {exitState.pending
-            ? `(press ${exitState.keyName} again to exit)`
-            : ''}
-        </Text>
-        <Text> </Text>
-
-        {pointers.map(pointer => {
-          try {
-            const model = modelManager.getModel(pointer)
-            if (model && model.name && model.provider) {
-              return (
-                <Box key={pointer} flexDirection="column" marginBottom={1}>
-                  <Text>
-                    🎯{' '}
-                    <Text bold color={theme.kode}>
-                      {pointer.toUpperCase()}
-                    </Text>{' '}
-                    → {model.name}
-                  </Text>
-                  <Text color={theme.secondaryText}>
-                    {' '}
-                    Provider: {model.provider}
-                  </Text>
-                  <Text color={theme.secondaryText}>
-                    {' '}
-                    Model: {model.modelName || 'unknown'}
-                  </Text>
-                  <Text color={theme.secondaryText}>
-                    {' '}
-                    Context:{' '}
-                    {model.contextLength
-                      ? Math.round(model.contextLength / 1000)
-                      : 'unknown'}
-                    k tokens
-                  </Text>
-                  <Text color={theme.secondaryText}>
-                    {' '}
-                    Active: {model.isActive ? '✅' : '❌'}
-                  </Text>
-                </Box>
-              )
-            } else {
-              return (
-                <Box key={pointer} flexDirection="column" marginBottom={1}>
-                  <Text>
-                    🎯{' '}
-                    <Text bold color={theme.kode}>
-                      {pointer.toUpperCase()}
-                    </Text>{' '}
-                    → <Text color={theme.error}>❌ Not configured</Text>
-                  </Text>
-                </Box>
-              )
-            }
-          } catch (pointerError) {
-            return (
-              <Box key={pointer} flexDirection="column" marginBottom={1}>
-                <Text>
-                  🎯{' '}
-                  <Text bold color={theme.kode}>
-                    {pointer.toUpperCase()}
-                  </Text>{' '}
-                  →{' '}
-                  <Text color={theme.error}>
-                    ❌ Error: {String(pointerError)}
-                  </Text>
-                </Text>
-              </Box>
-            )
-          }
-        })}
-
-        <Text> </Text>
-        <Text bold>📚 Available Models:</Text>
-
-        {(() => {
-          try {
-            const availableModels = modelManager.getAvailableModels() || []
-
-            if (availableModels.length === 0) {
-              return (
-                <Text color={theme.secondaryText}> No models configured</Text>
-              )
-            }
-
-            return availableModels.map((model, index) => {
-              try {
-                const isInUse = pointers.some(p => {
-                  try {
-                    return (
-                      modelManager.getModel(p)?.modelName === model.modelName
-                    )
-                  } catch {
-                    return false
-                  }
-                })
-
-                return (
-                  <Box key={index} flexDirection="column" marginBottom={1}>
-                    <Text>
-                      {' '}
-                      {isInUse ? '🔄' : '💤'} {model.name || 'Unnamed'}{' '}
-                      <Text color={theme.secondaryText}>
-                        ({model.provider || 'unknown'})
-                      </Text>
-                    </Text>
-                    <Text color={theme.secondaryText}>
-                      {' '}
-                      Model: {model.modelName || 'unknown'}
-                    </Text>
-                    <Text color={theme.secondaryText}>
-                      {' '}
-                      Context:{' '}
-                      {model.contextLength
-                        ? Math.round(model.contextLength / 1000)
-                        : 'unknown'}
-                      k tokens
-                    </Text>
-                    {model.lastUsed && (
-                      <Text color={theme.secondaryText}>
-                        {' '}
-                        Last used: {new Date(model.lastUsed).toLocaleString()}
-                      </Text>
-                    )}
-                  </Box>
-                )
-              } catch (modelError) {
-                return (
-                  <Box key={index} flexDirection="column" marginBottom={1}>
-                    <Text color={theme.error}>
-                      {' '}
-                      ❌ Model error: {String(modelError)}
-                    </Text>
-                  </Box>
-                )
-              }
-            })
-          } catch (availableModelsError) {
-            return (
-              <Text color={theme.error}>
-                ❌ Error loading available models:{' '}
-                {String(availableModelsError)}
-              </Text>
-            )
-          }
-        })()}
-
-        <Text> </Text>
-        <Text bold>🔧 Debug Info:</Text>
-        <Text color={theme.secondaryText}>
-          {' '}
-          ModelProfiles: {config.modelProfiles?.length || 0} configured
-        </Text>
-        <Text color={theme.secondaryText}>
-          {' '}
-          DefaultModelId: {(config as any).defaultModelId || 'not set'}
-        </Text>
-        {config.modelPointers && (
-          <>
-            <Text color={theme.secondaryText}>
-              {' '}
-              ModelPointers configured:{' '}
-              {Object.keys(config.modelPointers).length > 0 ? 'Yes' : 'No'}
-            </Text>
-            {Object.entries(config.modelPointers).map(([pointer, modelId]) => (
-              <React.Fragment key={pointer}>
-                <Text color={theme.secondaryText}>
-                  {' '}
-                  {pointer}: {modelId || 'not set'}
-                </Text>
-              </React.Fragment>
-            ))}
-          </>
-        )}
-      </Box>
-    )
-  } catch (error) {
-    return (
-      <Box
-        flexDirection="column"
-        borderStyle="round"
-        borderColor={theme.error}
-        paddingX={2}
-        paddingY={1}
-      >
-        <Text bold>
-          📊 Model Status Error{' '}
-          {exitState.pending
-            ? `(press ${exitState.keyName} again to exit)`
-            : ''}
-        </Text>
-        <Text color={theme.error}>
-          ❌ Error reading model status: {String(error)}
-        </Text>
-      </Box>
-    )
-  }
-}

package/src/components/Onboarding.tsx

@@ -1,274 +0,0 @@
-import React, { useState } from 'react'
-import { PRODUCT_NAME } from '../constants/product'
-import { Box, Newline, Text, useInput } from 'ink'
-import {
-  getGlobalConfig,
-  saveGlobalConfig,
-  DEFAULT_GLOBAL_CONFIG,
-  ProviderType,
-} from '../utils/config.js'
-import { OrderedList } from '@inkjs/ui'
-import { useExitOnCtrlCD } from '../hooks/useExitOnCtrlCD'
-import { MIN_LOGO_WIDTH } from './Logo'
-import { Select } from './CustomSelect/select'
-import { StructuredDiff } from './StructuredDiff'
-import { getTheme, type ThemeNames } from '../utils/theme'
-import { clearTerminal } from '../utils/terminal'
-import { PressEnterToContinue } from './PressEnterToContinue'
-import { ModelSelector } from './ModelSelector'
-type StepId = 'theme' | 'usage' | 'providers' | 'model'
-
-interface OnboardingStep {
-  id: StepId
-  component: React.ReactNode
-}
-
-type Props = {
-  onDone(): void
-}
-
-export function Onboarding({ onDone }: Props): React.ReactNode {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0)
-  const [showModelSelector, setShowModelSelector] = useState(false)
-  const config = getGlobalConfig()
-
-  const [selectedTheme, setSelectedTheme] = useState(
-    DEFAULT_GLOBAL_CONFIG.theme,
-  )
-  const theme = getTheme()
-  function goToNextStep() {
-    if (currentStepIndex < steps.length - 1) {
-      const nextIndex = currentStepIndex + 1
-      setCurrentStepIndex(nextIndex)
-    }
-  }
-
-  function handleThemeSelection(newTheme: string) {
-    saveGlobalConfig({
-      ...config,
-      theme: newTheme as ThemeNames,
-    })
-    goToNextStep()
-  }
-
-  function handleThemePreview(newTheme: string) {
-    setSelectedTheme(newTheme as ThemeNames)
-  }
-
-  function handleProviderSelectionDone() {
-    // After model selection is done, go to the next step
-    goToNextStep()
-  }
-
-  function handleModelSelectionDone() {
-    // After final model selection is done, complete onboarding
-    onDone()
-  }
-
-  const exitState = useExitOnCtrlCD(() => process.exit(0))
-
-  useInput(async (_, key) => {
-    const currentStep = steps[currentStepIndex]
-    if (
-      key.return &&
-      currentStep &&
-      ['usage', 'providers', 'model'].includes(currentStep.id)
-    ) {
-      if (currentStep.id === 'model') {
-        // Navigate to ModelSelector component
-        setShowModelSelector(true)
-      } else if (currentStepIndex === steps.length - 1) {
-        onDone()
-      } else {
-        // HACK: for some reason there's now a jump here otherwise :(
-        await clearTerminal()
-        goToNextStep()
-      }
-    }
-  })
-
-  // Define all onboarding steps
-  const themeStep = (
-    <Box flexDirection="column" gap={1} paddingLeft={1}>
-      <Text>Let&apos;s get started.</Text>
-      <Box flexDirection="column">
-        <Text bold>Choose the option that looks best when you select it:</Text>
-        <Text dimColor>To change this later, run /config</Text>
-      </Box>
-      <Select
-        options={[
-          { label: 'Light text', value: 'dark' },
-          { label: 'Dark text', value: 'light' },
-          {
-            label: 'Light text (colorblind-friendly)',
-            value: 'dark-daltonized',
-          },
-          {
-            label: 'Dark text (colorblind-friendly)',
-            value: 'light-daltonized',
-          },
-        ]}
-        onFocus={handleThemePreview}
-        onChange={handleThemeSelection}
-      />
-      <Box flexDirection="column">
-        <Box
-          paddingLeft={1}
-          marginRight={1}
-          borderStyle="round"
-          borderColor="gray"
-          flexDirection="column"
-        >
-          <StructuredDiff
-            patch={{
-              oldStart: 1,
-              newStart: 1,
-              oldLines: 3,
-              newLines: 3,
-              lines: [
-                'function greet() {',
-                '-  console.log("Hello, World!");',
-                '+  console.log("Hello, anon!");',
-                '}',
-              ],
-            }}
-            dim={false}
-            width={40}
-            overrideTheme={selectedTheme}
-          />
-        </Box>
-      </Box>
-    </Box>
-  )
-
-  const providersStep = (
-    <Box flexDirection="column" gap={1} paddingLeft={1}>
-      <Box flexDirection="column" width={70}>
-        <Text color={theme.secondaryText}>
-          Next, let's select your preferred AI provider and model.
-        </Text>
-      </Box>
-      <ModelSelector
-        onDone={handleProviderSelectionDone}
-        skipModelType={true}
-        isOnboarding={true}
-      />
-    </Box>
-  )
-
-  const usageStep = (
-    <Box flexDirection="column" gap={1} paddingLeft={1}>
-      <Text bold>Using {PRODUCT_NAME} effectively:</Text>
-      <Box flexDirection="column" width={70}>
-        <OrderedList children={[]}>
-          <OrderedList.Item children={[]}>
-            <Text>
-              Start in your project directory
-              <Newline />
-              <Text color={theme.secondaryText}>
-                Files are automatically added to context when needed.
-              </Text>
-              <Newline />
-            </Text>
-          </OrderedList.Item>
-          <OrderedList.Item children={[]}>
-            <Text>
-              Use {PRODUCT_NAME} as a development partner
-              <Newline />
-              <Text color={theme.secondaryText}>
-                Get help with file analysis, editing, bash commands,
-                <Newline />
-                and git history.
-                <Newline />
-              </Text>
-            </Text>
-          </OrderedList.Item>
-          <OrderedList.Item children={[]}>
-            <Text>
-              Provide clear context
-              <Newline />
-              <Text color={theme.secondaryText}>
-                Be as specific as you would with another engineer. <Newline />
-                The better the context, the better the results. <Newline />
-              </Text>
-            </Text>
-          </OrderedList.Item>
-        </OrderedList>
-      </Box>
-      <PressEnterToContinue />
-    </Box>
-  )
-
-  const modelStep = (
-    <Box flexDirection="column" gap={1} paddingLeft={1}>
-      <Text bold>Configure your models:</Text>
-      <Box flexDirection="column" width={70}>
-        <Text>
-          You can customize which models {PRODUCT_NAME} uses for different
-          tasks.
-          <Newline />
-          <Text color={theme.secondaryText}>
-            Let's set up your preferred models for large and small tasks.
-          </Text>
-        </Text>
-        <Box marginTop={1}>
-          <Text>
-            Press <Text color={theme.suggestion}>Enter</Text> to continue to the
-            model selection screen.
-          </Text>
-        </Box>
-      </Box>
-      <PressEnterToContinue />
-    </Box>
-  )
-
-  const steps: OnboardingStep[] = []
-  steps.push({ id: 'theme', component: themeStep })
-  steps.push({ id: 'usage', component: usageStep })
-
-  steps.push({ id: 'model', component: modelStep })
-
-  // If we're showing the model selector screen, render it directly
-  if (showModelSelector) {
-    return (
-      <ModelSelector
-        onDone={handleModelSelectionDone}
-        skipModelType={true}
-        isOnboarding={true}
-      />
-    )
-  }
-
-  return (
-    <Box flexDirection="column" gap={1}>
-      <>
-        <Box flexDirection="column" gap={1}>
-          <Text bold>
-            {PRODUCT_NAME}{' '}
-            {exitState.pending
-              ? `(press ${exitState.keyName} again to exit)`
-              : ''}
-          </Text>
-          {steps[currentStepIndex]?.component}
-        </Box>
-      </>
-    </Box>
-  )
-}
-
-export function WelcomeBox(): React.ReactNode {
-  const theme = getTheme()
-  return (
-    <Box
-      borderColor={theme.kode}
-      borderStyle="round"
-      paddingX={1}
-      width={MIN_LOGO_WIDTH}
-    >
-      <Text>
-        <Text color={theme.kode}>✻</Text> Welcome to{' '}
-        <Text bold>{PRODUCT_NAME}</Text> research preview!
-      </Text>
-    </Box>
-  )
-}

package/src/components/PressEnterToContinue.tsx

@@ -1,11 +0,0 @@
-import * as React from 'react'
-import { getTheme } from '../utils/theme'
-import { Text } from 'ink'
-
-export function PressEnterToContinue(): React.ReactNode {
-  return (
-    <Text color={getTheme().permission}>
-      Press <Text bold>Enter</Text> to continue…
-    </Text>
-  )
-}