@shareai-lab/kode 1.0.9

package/src/components/ModelStatusDisplay.tsx

@@ -0,0 +1,230 @@
+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

@@ -0,0 +1,274 @@
+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

@@ -0,0 +1,11 @@
+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>
+  )
+}