huskies/frontend/src/components/ChatPipelinePanel.tsx

import type { AgentConfigInfo } from "../api/agents";
import type { PipelineStageItem, PipelineState } from "../api/client";
import { AgentPanel } from "./AgentPanel";
import { LozengeFlyProvider } from "./LozengeFlyContext";
import type { LogEntry } from "./ServerLogsPanel";
import { ServerLogsPanel } from "./ServerLogsPanel";
import { StagePanel } from "./StagePanel";
import { WorkItemDetailPanel } from "./WorkItemDetailPanel";

interface ChatPipelinePanelProps {
	isNarrowScreen: boolean;
	pipeline: PipelineState;
	pipelineVersion: number;
	agentConfigVersion: number;
	agentStateVersion: number;
	storyTokenCosts: Map<string, number>;
	agentRoster: AgentConfigInfo[];
	busyAgentNames: Set<string>;
	selectedWorkItemId: string | null;
	serverLogs: LogEntry[];
	onSelectWorkItem: (id: string) => void;
	onCloseWorkItem: () => void;
	onStartAgent: (storyId: string, agentName?: string) => void;
	onStopAgent: (storyId: string, agentName: string) => void;
	onDeleteItem: (item: PipelineStageItem) => void;
}

export function ChatPipelinePanel({
	isNarrowScreen,
	pipeline,
	pipelineVersion,
	agentConfigVersion,
	agentStateVersion,
	storyTokenCosts,
	agentRoster,
	busyAgentNames,
	selectedWorkItemId,
	serverLogs,
	onSelectWorkItem,
	onCloseWorkItem,
	onStartAgent,
	onStopAgent,
	onDeleteItem,
}: ChatPipelinePanelProps) {
	return (
		<div
			data-testid="chat-right-column"
			style={{
				flex: "0 0 40%",
				overflowY: "auto",
				borderLeft: isNarrowScreen ? "none" : "1px solid #333",
				borderTop: isNarrowScreen ? "1px solid #333" : "none",
				padding: "12px",
				display: "flex",
				flexDirection: "column",
				gap: "12px",
			}}
		>
			<LozengeFlyProvider pipeline={pipeline}>
				{selectedWorkItemId ? (
					<WorkItemDetailPanel
						storyId={selectedWorkItemId}
						pipelineVersion={pipelineVersion}
						onClose={onCloseWorkItem}
					/>
				) : (
					<>
						<AgentPanel
							configVersion={agentConfigVersion}
							stateVersion={agentStateVersion}
						/>
						<StagePanel
							title="Done"
							items={pipeline.done ?? []}
							costs={storyTokenCosts}
							onItemClick={(item) => onSelectWorkItem(item.story_id)}
							onStopAgent={onStopAgent}
							onDeleteItem={onDeleteItem}
						/>
						<StagePanel
							title="To Merge"
							items={pipeline.merge}
							costs={storyTokenCosts}
							onItemClick={(item) => onSelectWorkItem(item.story_id)}
							onStopAgent={onStopAgent}
							onDeleteItem={onDeleteItem}
						/>
						<StagePanel
							title="QA"
							items={pipeline.qa}
							costs={storyTokenCosts}
							onItemClick={(item) => onSelectWorkItem(item.story_id)}
							onStopAgent={onStopAgent}
							onDeleteItem={onDeleteItem}
						/>
						<StagePanel
							title="Current"
							items={pipeline.current}
							costs={storyTokenCosts}
							onItemClick={(item) => onSelectWorkItem(item.story_id)}
							agentRoster={agentRoster}
							busyAgentNames={busyAgentNames}
							onStartAgent={onStartAgent}
							onStopAgent={onStopAgent}
							onDeleteItem={onDeleteItem}
						/>
						<StagePanel
							title="Backlog"
							items={pipeline.backlog}
							costs={storyTokenCosts}
							onItemClick={(item) => onSelectWorkItem(item.story_id)}
							agentRoster={agentRoster}
							busyAgentNames={busyAgentNames}
							onStartAgent={onStartAgent}
							onStopAgent={onStopAgent}
							onDeleteItem={onDeleteItem}
						/>
						<ServerLogsPanel logs={serverLogs} />
					</>
				)}
			</LozengeFlyProvider>
		</div>
	);
}