fix: resolve TUI component crashes in provider commands

- Remove invalid `bold: true` style prop (not supported by @OpenTui)
- Disable chat keyboard handler when provider modals are open
- Simplify model picker, provider wizard, and settings panel components
- Remove nested box layouts that could cause rendering issues

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: yethikrishna

cli/src/chat.tsx

@@ -1209,7 +1209,7 @@ export const Chat = ({
   useChatKeyboard({
     state: chatKeyboardState,
     handlers: chatKeyboardHandlers,
-    disabled: askUserState !== null || reviewMode,
+    disabled: askUserState !== null || reviewMode || providerWizardMode || modelPickerMode || providerSettingsMode,
   })
 
   // Sync message block context to zustand store for child components

cli/src/components/model-picker.tsx

@@ -4,10 +4,9 @@ import React, { useState, useMemo, useCallback } from 'react'
 import { useTheme } from '../hooks/use-theme'
 import { useProviderStore } from '../state/provider-store'
 import { BORDER_CHARS } from '../utils/ui-constants'
-import { PROVIDER_DEFINITIONS } from '@levelcode/common/providers/provider-registry'
+import { getProviderDefinition } from '@levelcode/common/providers/provider-registry'
 
 import type { KeyEvent } from '@opentui/core'
-import type { ModelCatalogEntry } from '@levelcode/common/providers/provider-types'
 
 interface ModelPickerProps {
   onClose: () => void
@@ -18,53 +17,34 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({ onClose }) => {
 
   const [searchQuery, setSearchQuery] = useState('')
   const [selectedIndex, setSelectedIndex] = useState(0)
-  const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null)
 
   const catalogModels = useProviderStore((state) => state.catalogModels)
   const activeModel = useProviderStore((state) => state.config.activeModel)
   const activeProvider = useProviderStore((state) => state.config.activeProvider)
-  const configuredProviders = useProviderStore(
-    (state) => Object.keys(state.config.providers),
-  )
 
   const filteredModels = useMemo(() => {
-    let models = catalogModels
-
-    // Filter by selected provider
-    if (selectedProviderId) {
-      models = models.filter((m) => m.providerId === selectedProviderId)
-    }
-
-    // Filter by search query
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase()
-      models = models.filter(
-        (m) =>
-          m.name.toLowerCase().includes(query) ||
-          m.id.toLowerCase().includes(query),
-      )
-    }
-
-    return models
-  }, [catalogModels, selectedProviderId, searchQuery])
-
-  const formatCost = (model: ModelCatalogEntry): string => {
-    if (!model.cost) return '-'
-    return `$${model.cost.input.toFixed(2)}/$${model.cost.output.toFixed(2)}`
-  }
-
-  const formatContext = (model: ModelCatalogEntry): string => {
-    if (!model.limit?.context) return '-'
-    const ctx = model.limit.context
-    if (ctx >= 1_000_000) return `${(ctx / 1_000_000).toFixed(1)}M`
-    if (ctx >= 1_000) return `${Math.round(ctx / 1_000)}K`
-    return String(ctx)
-  }
-
-  const getProviderName = (providerId: string): string => {
-    const def = PROVIDER_DEFINITIONS[providerId]
-    return def?.name ?? providerId
-  }
+    if (!searchQuery.trim()) return catalogModels
+    const query = searchQuery.toLowerCase()
+    return catalogModels.filter(
+      (m) =>
+        m.name.toLowerCase().includes(query) ||
+        m.id.toLowerCase().includes(query),
+    )
+  }, [catalogModels, searchQuery])
+
+  // Clamp selectedIndex
+  const clampedIndex = Math.min(selectedIndex, Math.max(0, filteredModels.length - 1))
+
+  // Visible window
+  const maxVisible = 10
+  const scrollOffset = Math.max(
+    0,
+    Math.min(clampedIndex - Math.floor(maxVisible / 2), filteredModels.length - maxVisible),
+  )
+  const visibleModels = filteredModels.slice(
+    Math.max(0, scrollOffset),
+    Math.max(0, scrollOffset) + maxVisible,
+  )
 
   useKeyboard(
     useCallback(
@@ -73,82 +53,39 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({ onClose }) => {
           onClose()
           return
         }
-
         if (key.name === 'up') {
           setSelectedIndex((prev) => Math.max(0, prev - 1))
           return
         }
         if (key.name === 'down') {
-          setSelectedIndex((prev) =>
-            Math.min(filteredModels.length - 1, prev + 1),
-          )
+          setSelectedIndex((prev) => Math.min(filteredModels.length - 1, prev + 1))
           return
         }
-
         if (key.name === 'return' || key.name === 'enter') {
-          const model = filteredModels[selectedIndex]
+          const model = filteredModels[clampedIndex]
           if (model) {
-            useProviderStore
-              .getState()
-              .setActiveModel(model.providerId, model.id)
-            onClose()
-          }
-          return
-        }
-
-        // Tab cycles through provider filters
-        if (key.name === 'tab') {
-          if (!selectedProviderId) {
-            setSelectedProviderId(configuredProviders[0] ?? null)
-          } else {
-            const currentIdx = configuredProviders.indexOf(selectedProviderId)
-            const nextIdx = currentIdx + 1
-            if (nextIdx >= configuredProviders.length) {
-              setSelectedProviderId(null) // cycle back to "all"
-            } else {
-              setSelectedProviderId(configuredProviders[nextIdx] ?? null)
-            }
+            useProviderStore.getState().setActiveModel(model.providerId, model.id)
           }
-          setSelectedIndex(0)
+          onClose()
           return
         }
-
-        // Backspace in search
         if (key.name === 'backspace' || key.name === 'delete') {
           setSearchQuery((prev) => prev.slice(0, -1))
           setSelectedIndex(0)
           return
         }
-
-        // Printable character input for search
         if (key.sequence && key.sequence.length === 1 && !key.ctrl && !key.meta) {
           setSearchQuery((prev) => prev + key.sequence)
           setSelectedIndex(0)
           return
         }
       },
-      [filteredModels, selectedIndex, selectedProviderId, configuredProviders, onClose],
+      [filteredModels, clampedIndex, onClose],
     ),
   )
 
-  // Determine visible range for scrolling
-  const maxVisible = 12
-  const scrollOffset = Math.max(
-    0,
-    Math.min(
-      selectedIndex - Math.floor(maxVisible / 2),
-      filteredModels.length - maxVisible,
-    ),
-  )
-  const visibleModels = filteredModels.slice(
-    scrollOffset,
-    scrollOffset + maxVisible,
-  )
-
   return (
     <box
-      title=" Model Picker "
-      titleAlignment="center"
       style={{
         width: '100%',
         borderStyle: 'single',
@@ -159,83 +96,42 @@ export const ModelPicker: React.FC<ModelPickerProps> = ({ onClose }) => {
         flexDirection: 'column',
       }}
     >
-      {/* Search bar */}
-      <box style={{ flexDirection: 'row', height: 1 }}>
-        <text style={{ fg: theme.primary }}>Search: </text>
-        <text style={{ fg: theme.foreground }}>
-          {searchQuery || ''}
-        </text>
-        <text style={{ fg: theme.muted }}>
-          {searchQuery ? '' : '(type to filter)'}
-        </text>
-      </box>
-
-      {/* Provider filter indicator */}
-      <box style={{ flexDirection: 'row', height: 1 }}>
-        <text style={{ fg: theme.muted }}>
-          Filter:{' '}
-        </text>
-        <text
-          style={{
-            fg: selectedProviderId ? theme.info : theme.muted,
-          }}
-        >
-          {selectedProviderId
-            ? getProviderName(selectedProviderId)
-            : 'All providers'}
-        </text>
-        <text style={{ fg: theme.muted }}>
-          {'  '}({filteredModels.length} models)
-        </text>
-      </box>
-
-      {/* Column header */}
+      <text style={{ fg: theme.primary }}>
+        {'Model Picker'}
+      </text>
       <text style={{ fg: theme.muted }}>
-        {'  '}{'Name'.padEnd(32)}{'Provider'.padEnd(16)}{'Cost'.padEnd(16)}{'Context'}
+        {'Search: '}{searchQuery || '(type to filter)'}
+      </text>
+      <text style={{ fg: theme.muted }}>
+        {filteredModels.length}{' models available'}
       </text>
-
-      {/* Model list */}
       {visibleModels.map((model, visibleIdx) => {
-        const realIndex = scrollOffset + visibleIdx
-        const isSelected = realIndex === selectedIndex
-        const isActive =
-          model.id === activeModel && model.providerId === activeProvider
+        const realIndex = Math.max(0, scrollOffset) + visibleIdx
+        const isSelected = realIndex === clampedIndex
+        const isActive = model.id === activeModel && model.providerId === activeProvider
+        const providerName = getProviderDefinition(model.providerId)?.name ?? model.providerId
 
         return (
-          <box key={`${model.providerId}-${model.id}`} style={{ flexDirection: 'row', height: 1 }}>
-            <text
-              style={{
-                fg: isActive
-                  ? theme.success
-                  : isSelected
-                    ? theme.primary
-                    : theme.foreground,
-                bg: isSelected ? theme.surface : undefined,
-              }}
-            >
-              {isSelected ? '> ' : '  '}
-              {model.name.slice(0, 30).padEnd(30)}
-              {'  '}
-              {getProviderName(model.providerId).slice(0, 14).padEnd(14)}
-              {'  '}
-              {formatCost(model).padEnd(14)}
-              {'  '}
-              {formatContext(model)}
-              {isActive ? ' *' : ''}
-            </text>
-          </box>
+          <text
+            key={`${model.providerId}-${model.id}-${visibleIdx}`}
+            style={{
+              fg: isActive ? theme.success : isSelected ? theme.primary : theme.foreground,
+            }}
+          >
+            {isSelected ? '> ' : '  '}
+            {model.name.slice(0, 30).padEnd(32)}
+            {providerName.slice(0, 14).padEnd(16)}
+            {isActive ? '*' : ''}
+          </text>
         )
       })}
-
       {filteredModels.length === 0 && (
         <text style={{ fg: theme.muted }}>
-          {'  '}No models found.
+          {'  No models found. Run /provider:add first.'}
         </text>
       )}
-
-      {/* Help text */}
       <text style={{ fg: theme.muted }}>
-        {'\u2191\u2193 navigate \u00B7 Enter select \u00B7 Tab filter provider \u00B7 Esc close'}
+        {'Up/Down navigate | Enter select | Esc close'}
       </text>
     </box>
   )