storkit/frontend/src/components/ChatHeader.tsx

interface ContextUsage {
	used: number;
	total: number;
	percentage: number;
}

interface ChatHeaderProps {
	projectPath: string;
	onCloseProject: () => void;
	contextUsage: ContextUsage;
	onClearSession: () => void;
	model: string;
	availableModels: string[];
	claudeModels: string[];
	hasAnthropicKey: boolean;
	onModelChange: (model: string) => void;
	enableTools: boolean;
	onToggleTools: (enabled: boolean) => void;
}

const getContextEmoji = (percentage: number): string => {
	if (percentage >= 90) return "🔴";
	if (percentage >= 75) return "🟡";
	return "🟢";
};

export function ChatHeader({
	projectPath,
	onCloseProject,
	contextUsage,
	onClearSession,
	model,
	availableModels,
	claudeModels,
	hasAnthropicKey,
	onModelChange,
	enableTools,
	onToggleTools,
}: ChatHeaderProps) {
	const hasModelOptions = availableModels.length > 0 || claudeModels.length > 0;

	return (
		<div
			style={{
				padding: "12px 24px",
				borderBottom: "1px solid #333",
				display: "flex",
				alignItems: "center",
				justifyContent: "space-between",
				background: "#171717",
				flexShrink: 0,
				fontSize: "0.9rem",
				color: "#ececec",
			}}
		>
			<div
				style={{
					display: "flex",
					alignItems: "center",
					gap: "12px",
					overflow: "hidden",
					flex: 1,
					marginRight: "20px",
				}}
			>
				<div
					title={projectPath}
					style={{
						whiteSpace: "nowrap",
						overflow: "hidden",
						textOverflow: "ellipsis",
						fontWeight: "500",
						color: "#aaa",
						direction: "rtl",
						textAlign: "left",
						fontFamily: "monospace",
						fontSize: "0.85em",
					}}
				>
					{projectPath}
				</div>
				<button
					type="button"
					onClick={onCloseProject}
					style={{
						background: "transparent",
						border: "none",
						cursor: "pointer",
						color: "#999",
						fontSize: "0.8em",
						padding: "4px 8px",
						borderRadius: "4px",
					}}
					onMouseOver={(e) => {
						e.currentTarget.style.background = "#333";
					}}
					onMouseOut={(e) => {
						e.currentTarget.style.background = "transparent";
					}}
					onFocus={(e) => {
						e.currentTarget.style.background = "#333";
					}}
					onBlur={(e) => {
						e.currentTarget.style.background = "transparent";
					}}
				>
					✕
				</button>
			</div>

			<div style={{ display: "flex", alignItems: "center", gap: "16px" }}>
				<div
					style={{
						fontSize: "0.9em",
						color: "#ccc",
						whiteSpace: "nowrap",
					}}
					title={`Context: ${contextUsage.used.toLocaleString()} / ${contextUsage.total.toLocaleString()} tokens (${contextUsage.percentage}%)`}
				>
					{getContextEmoji(contextUsage.percentage)} {contextUsage.percentage}%
				</div>

				<button
					type="button"
					onClick={onClearSession}
					style={{
						padding: "6px 12px",
						borderRadius: "99px",
						border: "none",
						fontSize: "0.85em",
						backgroundColor: "#2f2f2f",
						color: "#888",
						cursor: "pointer",
						outline: "none",
						transition: "all 0.2s",
					}}
					onMouseOver={(e) => {
						e.currentTarget.style.backgroundColor = "#3f3f3f";
						e.currentTarget.style.color = "#ccc";
					}}
					onMouseOut={(e) => {
						e.currentTarget.style.backgroundColor = "#2f2f2f";
						e.currentTarget.style.color = "#888";
					}}
					onFocus={(e) => {
						e.currentTarget.style.backgroundColor = "#3f3f3f";
						e.currentTarget.style.color = "#ccc";
					}}
					onBlur={(e) => {
						e.currentTarget.style.backgroundColor = "#2f2f2f";
						e.currentTarget.style.color = "#888";
					}}
				>
					🔄 New Session
				</button>

				{hasModelOptions ? (
					<select
						value={model}
						onChange={(e) => onModelChange(e.target.value)}
						style={{
							padding: "6px 32px 6px 16px",
							borderRadius: "99px",
							border: "none",
							fontSize: "0.9em",
							backgroundColor: "#2f2f2f",
							color: "#ececec",
							cursor: "pointer",
							outline: "none",
							appearance: "none",
							WebkitAppearance: "none",
							backgroundImage: `url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ececec%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E")`,
							backgroundRepeat: "no-repeat",
							backgroundPosition: "right 12px center",
							backgroundSize: "10px",
						}}
					>
						<optgroup label="Claude Code (PTY)">
							<option value="claude-code-pty">
								claude-code-pty
							</option>
						</optgroup>
						{(claudeModels.length > 0 || !hasAnthropicKey) && (
							<optgroup label="Anthropic">
								{claudeModels.length > 0 ? (
									claudeModels.map((m: string) => (
										<option key={m} value={m}>
											{m}
										</option>
									))
								) : (
									<option value="" disabled>
										Add Anthropic API key to load models
									</option>
								)}
							</optgroup>
						)}
						{availableModels.length > 0 && (
							<optgroup label="Ollama">
								{availableModels.map((m: string) => (
									<option key={m} value={m}>
										{m}
									</option>
								))}
							</optgroup>
						)}
					</select>
				) : (
					<input
						value={model}
						onChange={(e) => onModelChange(e.target.value)}
						placeholder="Model"
						style={{
							padding: "6px 12px",
							borderRadius: "99px",
							border: "none",
							fontSize: "0.9em",
							background: "#2f2f2f",
							color: "#ececec",
							outline: "none",
						}}
					/>
				)}

				<label
					style={{
						display: "flex",
						alignItems: "center",
						gap: "6px",
						cursor: "pointer",
						fontSize: "0.9em",
						color: "#aaa",
					}}
					title="Allow the Agent to read/write files"
				>
					<input
						type="checkbox"
						checked={enableTools}
						onChange={(e) => onToggleTools(e.target.checked)}
						style={{ accentColor: "#000" }}
					/>
					<span>Tools</span>
				</label>
			</div>
		</div>
	);
}