huskies/frontend/src/components/AgentLogsSection.tsx

/** Agent logs card sub-component for WorkItemDetailPanel. */

import type { AgentInfo, AgentStatusValue } from "../api/agents";
import { STATUS_COLORS } from "./workItemDetailPanelUtils";

interface AgentLogsSectionProps {
	agentInfo: AgentInfo | null;
	agentStatus: AgentStatusValue | null;
	agentLog: string[];
}

/**
 * Renders the "Agent Logs" card when an agent is active, or a placeholder
 * when no agent is assigned to the story.
 */
export function AgentLogsSection({
	agentInfo,
	agentStatus,
	agentLog,
}: AgentLogsSectionProps) {
	if (!agentInfo) {
		return (
			<div
				data-testid="placeholder-agent-logs"
				style={{
					border: "1px solid #2a2a2a",
					borderRadius: "8px",
					padding: "10px 12px",
					background: "#161616",
				}}
			>
				<div
					style={{
						fontWeight: 600,
						fontSize: "0.8em",
						color: "#555",
						marginBottom: "4px",
					}}
				>
					Agent Logs
				</div>
				<div style={{ fontSize: "0.75em", color: "#444" }}>Coming soon</div>
			</div>
		);
	}

	return (
		<div
			data-testid="agent-logs-section"
			style={{
				border: "1px solid #2a2a2a",
				borderRadius: "8px",
				padding: "10px 12px",
				background: "#161616",
			}}
		>
			<div
				style={{
					display: "flex",
					alignItems: "center",
					justifyContent: "space-between",
					marginBottom: "6px",
				}}
			>
				<div
					style={{
						fontWeight: 600,
						fontSize: "0.8em",
						color: "#888",
					}}
				>
					Agent Logs
				</div>
				{agentStatus && (
					<div
						data-testid="agent-status-badge"
						style={{
							fontSize: "0.7em",
							color: STATUS_COLORS[agentStatus],
							fontWeight: 600,
						}}
					>
						{agentInfo.agent_name} — {agentStatus}
					</div>
				)}
			</div>
			{agentLog.length > 0 ? (
				<div
					data-testid="agent-log-output"
					style={{
						fontSize: "0.75em",
						fontFamily: "monospace",
						color: "#ccc",
						whiteSpace: "pre-wrap",
						wordBreak: "break-word",
						lineHeight: "1.5",
						maxHeight: "200px",
						overflowY: "auto",
					}}
				>
					{agentLog.join("")}
				</div>
			) : (
				<div style={{ fontSize: "0.75em", color: "#444" }}>
					{agentStatus === "running" || agentStatus === "pending"
						? "Waiting for output..."
						: "No output."}
				</div>
			)}
		</div>
	);
}