Header.tsx

import { memo } from "react"
import { Text, Box } from "ink"

import type { TokenUsage } from "@roo-code/types"

import { ASCII_ROO } from "@/types/constants.js"

import { ExtensionHostOptions } from "@/agent/index.js"
import { useTerminalSize } from "../hooks/TerminalSizeContext.js"
import * as theme from "../theme.js"

import MetricsDisplay from "./MetricsDisplay.js"

interface HeaderProps extends ExtensionHostOptions {
	version: string
	tokenUsage?: TokenUsage | null
	contextWindow?: number
}

function Header({
	workspacePath,
	provider,
	model,
	mode,
	reasoningEffort,
	nonInteractive,
	version,
	tokenUsage,
	contextWindow,
}: HeaderProps) {
	const { columns } = useTerminalSize()

	const homeDir = process.env.HOME || process.env.USERPROFILE || ""
	const title = `Roo Code CLI v${version}`
	const remainingDashes = Math.max(0, columns - `── ${title} `.length)

	return (
		<Box flexDirection="column" width={columns}>
			<Text color={theme.borderColor}>
				── <Text color={theme.titleColor}>{title}</Text> {"─".repeat(remainingDashes)}
			</Text>
			<Box width={columns}>
				<Box flexDirection="row">
					<Box marginY={1}>
						<Text color="magenta">{ASCII_ROO}</Text>
					</Box>
					<Box flexDirection="column" marginLeft={1} marginTop={1}>
						<Text color={theme.dimText}>
							cwd:{" "}
							{workspacePath.startsWith(homeDir) ? workspacePath.replace(homeDir, "~") : workspacePath}
						</Text>
						<Text color={theme.dimText}>
							{provider}: {model} [{reasoningEffort}]
						</Text>
						<Text color={theme.dimText}>
							mode: {mode}
							{nonInteractive && " (YOLO)"}
						</Text>
					</Box>
				</Box>
			</Box>
			{tokenUsage && contextWindow && contextWindow > 0 && (
				<Box alignSelf="flex-end" marginTop={-1}>
					<MetricsDisplay tokenUsage={tokenUsage} contextWindow={contextWindow} />
				</Box>
			)}
			<Text color={theme.borderColor}>{"─".repeat(columns)}</Text>
		</Box>
	)
}

export default memo(Header)