@shareai-lab/kode 1.0.70 → 1.0.73

package/src/screens/ConfigureNpmPrefix.tsx

@@ -0,0 +1,197 @@
+import React, { useState } from 'react'
+import { Box, Text } from 'ink'
+import { Select } from '../components/CustomSelect/select'
+import TextInput from '../components/TextInput'
+import { SimpleSpinner } from '../components/Spinner'
+import { getTheme } from '../utils/theme'
+import { useTerminalSize } from '../hooks/useTerminalSize'
+import { PRODUCT_NAME } from '../constants/product'
+import { setupNewPrefix, installGlobalPackage } from '../utils/autoUpdater'
+import { logError } from '../utils/log'
+import { logEvent } from '../services/statsig'
+import { MACRO } from '../constants/macros'
+type Props = {
+  customPrefix: string
+  onCustomPrefixChange: (value: string) => void
+  onSuccess: () => void
+  onCancel: () => void
+}
+
+export function ConfigureNpmPrefix({
+  customPrefix,
+  onCustomPrefixChange,
+  onSuccess,
+  onCancel,
+}: Props): React.ReactNode {
+  const [cursorOffset, setCursorOffset] = useState(customPrefix.length)
+  const [showConfirmation, setShowConfirmation] = useState(false)
+  const [isSettingUpPrefix, setIsSettingUpPrefix] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [stepsStatus, setStepsStatus] = useState<{
+    completeSteps: boolean[]
+    inProgressStep: number | null
+  }>({
+    completeSteps: [false, false, false, false],
+    inProgressStep: null,
+  })
+  const textInputColumns = useTerminalSize().columns - 6
+  const theme = getTheme()
+
+  async function handleSetupNewPrefix(prefix: string) {
+    setIsSettingUpPrefix(true)
+    setError(null)
+
+    try {
+      // Reset status
+      setStepsStatus({
+        completeSteps: [false, false, false, false],
+        inProgressStep: 0,
+      })
+
+      // Start first three steps
+      await setupNewPrefix(prefix)
+      setStepsStatus({
+        completeSteps: [true, true, true, false],
+        inProgressStep: 3,
+      })
+
+      // Start install step
+      await installGlobalPackage()
+      setStepsStatus({
+        completeSteps: [true, true, true, true],
+        inProgressStep: null,
+      })
+
+      logEvent('tengu_auto_updater_config_complete', {
+        finalStatus: 'enabled',
+        method: 'prefix',
+        success: 'true',
+      })
+
+      onSuccess()
+    } catch (err) {
+      logError(err)
+      const errorMessage =
+        err instanceof Error ? err.message : 'Failed to setup npm prefix'
+      setError(errorMessage)
+      setIsSettingUpPrefix(false)
+
+      logEvent('tengu_auto_updater_config_complete', {
+        finalStatus: 'not_configured',
+        method: 'prefix',
+        success: 'false',
+        error: errorMessage,
+      })
+    }
+  }
+
+  const installSteps = [
+    {
+      label: 'Create new directory for npm global packages',
+      command: `mkdir -p ${customPrefix}`,
+    },
+    {
+      label: 'Configure npm to use new location',
+      command: `npm -g config set prefix ${customPrefix}`,
+    },
+    {
+      label: 'Update shell PATH configuration',
+      command: `export PATH=${customPrefix}/bin:$PATH`,
+    },
+    {
+      label: `Reinstall ${PRODUCT_NAME} globally`,
+      command: `npm install -g ${MACRO.PACKAGE_URL}`,
+    },
+  ]
+
+  return (
+    <Box marginLeft={2} flexDirection="column">
+      <Box flexDirection="column" gap={1}>
+        <Text>
+          ⚠️ Warning: This will modify your global npm configuration and can be
+          dangerous. The following changes will be made:
+        </Text>
+        {installSteps.map((step, index) => (
+          <Box key={index} flexDirection="column">
+            <Box flexDirection="row">
+              <Text
+                color={
+                  stepsStatus.completeSteps[index] ? theme.success : undefined
+                }
+              >
+                {isSettingUpPrefix
+                  ? stepsStatus.completeSteps[index]
+                    ? '✓'
+                    : ' '
+                  : `${index + 1}.`}
+              </Text>
+              <Box width={2}>
+                {stepsStatus.inProgressStep === index && <SimpleSpinner />}
+              </Box>
+              <Text
+                color={
+                  stepsStatus.completeSteps[index] ? theme.success : undefined
+                }
+              >
+                {step.label}
+              </Text>
+            </Box>
+            {step.command && (
+              <Box marginLeft={2}>
+                <Text color={theme.suggestion} dimColor>
+                  $ {step.command}
+                </Text>
+              </Box>
+            )}
+          </Box>
+        ))}
+
+        <Text color={theme.suggestion}>
+          Note: You&apos;ll need to restart your terminal after this change
+        </Text>
+        <Text color={theme.warning}>
+          Important: Any existing global npm packages may need to be reinstalled
+        </Text>
+      </Box>
+      {!isSettingUpPrefix && (
+        <Box marginTop={1} flexDirection="column">
+          <Text>Enter prefix path:</Text>
+          <Box flexDirection="row" gap={1}>
+            <Text>&gt;</Text>
+            <TextInput
+              placeholder={customPrefix}
+              value={customPrefix}
+              onChange={onCustomPrefixChange}
+              onSubmit={() => setShowConfirmation(true)}
+              columns={textInputColumns}
+              cursorOffset={cursorOffset}
+              onChangeCursorOffset={setCursorOffset}
+            />
+          </Box>
+          {showConfirmation && (
+            <Box marginTop={1} flexDirection="column">
+              <Text>
+                Are you sure you want to continue with prefix: {customPrefix}?
+              </Text>
+              <Select
+                options={[
+                  { label: 'Yes', value: 'yes' },
+                  { label: 'No', value: 'no' },
+                ]}
+                onChange={(value: string) => {
+                  setShowConfirmation(false)
+                  if (value === 'yes') {
+                    handleSetupNewPrefix(customPrefix)
+                  } else {
+                    onCancel()
+                  }
+                }}
+              />
+            </Box>
+          )}
+        </Box>
+      )}
+      {error && <Text color={theme.error}>Error: {error}</Text>}
+    </Box>
+  )
+}

package/src/screens/Doctor.tsx

@@ -0,0 +1,219 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { Box, Text, useInput } from 'ink'
+import { Select } from '../components/CustomSelect/select'
+import { getTheme } from '../utils/theme'
+import { ConfigureNpmPrefix } from './ConfigureNpmPrefix.tsx'
+import { platform } from 'process'
+import {
+  checkNpmPermissions,
+  getDefaultNpmPrefix,
+  getPermissionsCommand,
+} from '../utils/autoUpdater.js'
+import { saveGlobalConfig, getGlobalConfig } from '../utils/config'
+import { logEvent } from '../services/statsig'
+import { PRODUCT_NAME } from '../constants/product'
+import { PressEnterToContinue } from '../components/PressEnterToContinue'
+
+type Props = {
+  onDone: () => void
+  doctorMode?: boolean
+}
+
+type Option = {
+  label: string
+  value: 'auto' | 'manual' | 'ignore'
+  description: string
+}
+
+export function Doctor({ onDone, doctorMode = false }: Props): React.ReactNode {
+  const [hasPermissions, setHasPermissions] = useState<boolean | null>(null)
+  const [npmPrefix, setNpmPrefix] = useState<string | null>(null)
+  const [selectedOption, setSelectedOption] = useState<Option['value'] | null>(
+    null,
+  )
+  const [customPrefix, setCustomPrefix] = useState<string>(
+    getDefaultNpmPrefix(),
+  )
+  const theme = getTheme()
+  const [showingPermissionsMessage, setShowingPermissionsMessage] =
+    useState(false)
+
+  const options: Option[] = [
+    {
+      label: `Manually fix permissions on current npm prefix (Recommended)`,
+      value: 'manual',
+      description:
+        platform === 'win32'
+          ? 'Uses icacls to grant write permissions'
+          : 'Uses sudo to change ownership',
+    },
+    {
+      label: 'Create new npm prefix directory',
+      value: 'auto',
+      description:
+        'Creates a new directory for global npm packages in your home directory',
+    },
+    {
+      label: 'Skip configuration until next session',
+      value: 'ignore',
+      description: 'Skip this warning (you will be reminded again later)',
+    },
+  ]
+
+  const checkPermissions = useCallback(async () => {
+    const result = await checkNpmPermissions()
+    logEvent('tengu_auto_updater_permissions_check', {
+      hasPermissions: result.hasPermissions.toString(),
+      npmPrefix: result.npmPrefix ?? 'null',
+    })
+    setHasPermissions(result.hasPermissions)
+    if (result.npmPrefix) {
+      setNpmPrefix(result.npmPrefix)
+    }
+    if (result.hasPermissions) {
+      const config = getGlobalConfig()
+      saveGlobalConfig({
+        ...config,
+        autoUpdaterStatus: 'enabled',
+      })
+      if (!doctorMode) {
+        onDone()
+      }
+    }
+  }, [onDone, doctorMode])
+
+  useEffect(() => {
+    logEvent('tengu_auto_updater_config_start', {})
+    checkPermissions()
+  }, [checkPermissions])
+
+  useInput(
+    (_input, key) => {
+      if (
+        (showingPermissionsMessage ||
+          (doctorMode && hasPermissions === true)) &&
+        key.return
+      ) {
+        onDone()
+      }
+    },
+    {
+      isActive:
+        showingPermissionsMessage || (doctorMode && hasPermissions === true),
+    },
+  )
+
+  if (hasPermissions === null) {
+    return (
+      <Box paddingX={1} paddingTop={1}>
+        <Text color={theme.secondaryText}>Checking npm permissions…</Text>
+      </Box>
+    )
+  }
+
+  if (hasPermissions === true) {
+    if (doctorMode) {
+      return (
+        <Box flexDirection="column" gap={1} paddingX={1} paddingTop={1}>
+          <Text color={theme.success}>✓ npm permissions: OK</Text>
+          <Text>Your installation is healthy and ready for auto-updates.</Text>
+          <PressEnterToContinue />
+        </Box>
+      )
+    }
+    return (
+      <Box paddingX={1} paddingTop={1}>
+        <Text color={theme.success}>✓ Auto-updates enabled</Text>
+      </Box>
+    )
+  }
+  return (
+    <Box
+      borderColor={theme.permission}
+      borderStyle="round"
+      flexDirection="column"
+      gap={1}
+      paddingX={1}
+      paddingTop={1}
+    >
+      <Text bold color={theme.permission}>
+        Enable automatic updates?
+      </Text>
+      <Text>
+        {PRODUCT_NAME} can&apos;t update itself because it doesn&apos;t have
+        permissions. Do you want to fix this to get automatic updates?
+      </Text>
+      <Box flexDirection="column">
+        {!selectedOption && (
+          <Box marginLeft={2}>
+            <Text>Select an option below to fix the permissions issue:</Text>
+            <Select
+              options={options}
+              onChange={(value: string) => {
+                if (
+                  value !== 'auto' &&
+                  value !== 'manual' &&
+                  value !== 'ignore'
+                )
+                  return
+                setSelectedOption(value)
+
+                // Log option selection
+                logEvent('tengu_auto_updater_config_option_selected', {
+                  option: value as 'auto' | 'manual' | 'ignore',
+                  npmPrefix: npmPrefix ?? 'null',
+                })
+
+                if (value === 'manual') {
+                  const config = getGlobalConfig()
+                  saveGlobalConfig({
+                    ...config,
+                    autoUpdaterStatus: 'not_configured',
+                  })
+                  setShowingPermissionsMessage(true)
+                } else if (value === 'ignore') {
+                  const config = getGlobalConfig()
+                  saveGlobalConfig({
+                    ...config,
+                    autoUpdaterStatus: 'not_configured',
+                  })
+                  onDone()
+                }
+              }}
+            />
+          </Box>
+        )}
+
+        {selectedOption === 'auto' && (
+          <Box marginLeft={2}>
+            <ConfigureNpmPrefix
+              customPrefix={customPrefix}
+              onCustomPrefixChange={setCustomPrefix}
+              onSuccess={checkPermissions}
+              onCancel={onDone}
+            />
+          </Box>
+        )}
+
+        {selectedOption === 'manual' && (
+          <>
+            <Box marginLeft={4} flexDirection="column">
+              <Text>Run this command in your terminal:</Text>
+              <Box flexDirection="row" gap={1}>
+                <Text color={theme.warning}>
+                  {getPermissionsCommand(npmPrefix ?? '')}
+                </Text>
+              </Box>
+              <Box flexDirection="row" gap={1}>
+                <Text color={theme.suggestion}>
+                  After running the command, restart {PRODUCT_NAME}
+                </Text>
+              </Box>
+            </Box>
+            <PressEnterToContinue />
+          </>
+        )}
+      </Box>
+    </Box>
+  )
+}

package/src/screens/LogList.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react'
+import { CACHE_PATHS } from '../utils/log'
+import { LogSelector } from '../components/LogSelector'
+import type { LogOption, LogListProps } from '../types/logs'
+import { loadLogList } from '../utils/log'
+import { logError } from '../utils/log'
+
+type Props = LogListProps & {
+  type: 'messages' | 'errors'
+  logNumber?: number
+}
+
+export function LogList({ context, type, logNumber }: Props): React.ReactNode {
+  const [logs, setLogs] = useState<LogOption[]>([])
+  const [didSelectLog, setDidSelectLog] = useState(false)
+
+  useEffect(() => {
+    loadLogList(
+      type === 'messages' ? CACHE_PATHS.messages() : CACHE_PATHS.errors(),
+    )
+      .then(logs => {
+        // If logNumber is provided, immediately display that log
+        if (logNumber !== undefined) {
+          const log = logs[logNumber >= 0 ? logNumber : 0] // Handle out of bounds
+          if (log) {
+            console.log(JSON.stringify(log.messages, null, 2))
+            process.exit(0)
+          } else {
+            console.error('No log found at index', logNumber)
+            process.exit(1)
+          }
+        }
+
+        setLogs(logs)
+      })
+      .catch(error => {
+        logError(error)
+        if (logNumber !== undefined) {
+          process.exit(1)
+        } else {
+          context.unmount?.()
+        }
+      })
+  }, [context, type, logNumber])
+
+  function onSelect(index: number): void {
+    const log = logs[index]
+    if (!log) {
+      return
+    }
+    setDidSelectLog(true)
+    setTimeout(() => {
+      console.log(JSON.stringify(log.messages, null, 2))
+      process.exit(0)
+    }, 100)
+  }
+
+  // If logNumber is provided, don't render the selector
+  if (logNumber !== undefined) {
+    return null
+  }
+
+  if (didSelectLog) {
+    return null
+  }
+
+  return <LogSelector logs={logs} onSelect={onSelect} />
+}