huskies: merge 715_refactor_decompose_frontend_src_components_workitemdetailpanel_tsx_827_lines

2026-04-27 17:03:43 +00:00
parent fce7e16811
commit 77081926d1
6 changed files with 622 additions and 511 deletions
@@ -0,0 +1,112 @@
+/** 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>
+	);
+}