Function ChatHistoryScreen

cli/src/components/chat-history-screen.tsx:39–396

({
  onSelectChat,
  onCancel,
  onNewChat,
})

}

export const ChatHistoryScreen: React.FC<ChatHistoryScreenProps> = ({
  onSelectChat,
  onCancel,
  onNewChat,
}) => {
  const theme = useTheme()
  const { terminalWidth, terminalHeight } = useTerminalLayout()

  // Layout calculations - use full width
  const contentWidth = terminalWidth - LAYOUT.CONTENT_PADDING

  // Two-phase loading: load initial chats immediately, then more in background
  const [chats, setChats] = useState(() => getAllChats(LAYOUT.INITIAL_CHATS))
  const [statusMessage, setStatusMessage] = useState<string | null>(null)

  // Load more chats in the background after initial render
  useEffect(() => {
    // Use setTimeout to defer the expensive loading to after first paint
    const timer = setTimeout(() => {
      setChats(getAllChats(LAYOUT.INITIAL_CHATS + LAYOUT.BACKGROUND_CHATS))
    }, 0)
    return () => clearTimeout(timer)
  }, [])

  const handleDeleteChat = useCallback((chatId: string) => {
    const deleted = deleteChatSession(chatId)
    if (deleted) {
      setChats((prev) => prev.filter((chat) => chat.chatId !== chatId))
      setStatusMessage('Chat deleted')
      return
    }

    setStatusMessage('Could not delete chat')
  }, [])

  // Calculate available width for the prompt text (last column, variable width)
  // Format: "[time]   [msgs]   [prompt...] [×]"
  // reservedWidth accounts for: time col, msgs col, delete button area,
  // 2 gaps between columns, list border (2), scrollbar (1), and button padding (2)
  const reservedWidth =
    LAYOUT.TIME_COL_WIDTH +
    LAYOUT.MSGS_COL_WIDTH +
    LAYOUT.DELETE_COL_WIDTH +
    LAYOUT.GAP_WIDTH * 2 +
    5 // border + scrollbar + button padding
  const maxPromptWidth = Math.max(20, contentWidth - reservedWidth)

  // Truncate text to fit single line
  const truncateText = (text: string, maxLen: number): string => {
    const singleLine = text.replace(/\n/g, ' ').trim()
    if (singleLine.length <= maxLen) return singleLine
    return singleLine.slice(0, maxLen - 1) + '…'
  }

  // Pad text to fixed width (right-pad with spaces)
  const padRight = (text: string, width: number): string => {
    // Use Array.from to count code points so emoji/wide chars don't break padding
    const len = Array.from(text).length