@roj-ai/debug 0.0.2

package/src/components/debug/TimelineDetailInspector.tsx

@@ -0,0 +1,204 @@
+import type { TimelineItem } from '@roj-ai/shared'
+import { LLMCallDetail } from './LLMCallDetail'
+
+export function TimelineDetailInspector({
+	sessionId,
+	item,
+	onNavigate,
+}: {
+	sessionId: string
+	item: TimelineItem
+	onNavigate?: (path: string) => void
+}) {
+	const agentLink = (agentId: string, name: string) =>
+		onNavigate
+			? (
+				<button type="button" onClick={() => onNavigate(`agents/${agentId}`)} className="text-violet-600 hover:underline cursor-pointer">
+					{name}
+				</button>
+			)
+			: <span>{name}</span>
+
+	// LLM with detailed call log
+	if (item.type === 'llm' && item.llmCallId) {
+		return (
+			<div className="space-y-4">
+				<div className="flex items-center gap-3">
+					<TypeBadge type={item.type} />
+					<span className="font-medium">{item.model?.split('/').pop() ?? 'LLM Call'}</span>
+					<StatusBadge status={item.status} />
+				</div>
+				<LLMCallDetail sessionId={sessionId} callId={item.llmCallId} />
+			</div>
+		)
+	}
+
+	// LLM without detailed log
+	if (item.type === 'llm') {
+		return (
+			<div className="space-y-4">
+				<div className="flex items-center gap-3">
+					<TypeBadge type={item.type} />
+					<span className="font-medium">{item.model?.split('/').pop() ?? 'LLM Call'}</span>
+					<StatusBadge status={item.status} />
+				</div>
+
+				<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+					<MetricCard label="Agent">{agentLink(item.agentId, item.agentName)}</MetricCard>
+					{item.model && <MetricCard label="Model"><span className="font-mono text-xs">{item.model}</span></MetricCard>}
+					{item.durationMs !== undefined && <MetricCard label="Duration">{(item.durationMs / 1000).toFixed(2)}s</MetricCard>}
+					{item.cost !== undefined && <MetricCard label="Cost"><span className="text-green-600">${item.cost.toFixed(6)}</span></MetricCard>}
+				</div>
+
+				{(item.promptTokens !== undefined || item.completionTokens !== undefined) && (
+					<div className="bg-violet-50 border border-violet-200 rounded-md p-4">
+						<h3 className="font-medium text-violet-800 mb-3">Token Usage</h3>
+						<div className="grid grid-cols-3 gap-4 text-sm">
+							<div>
+								<div className="text-xs text-violet-600 mb-1">Prompt</div>
+								<div className="font-mono font-medium text-green-600">{(item.promptTokens ?? 0).toLocaleString()}</div>
+							</div>
+							<div>
+								<div className="text-xs text-violet-600 mb-1">Completion</div>
+								<div className="font-mono font-medium text-violet-600">{(item.completionTokens ?? 0).toLocaleString()}</div>
+							</div>
+							<div>
+								<div className="text-xs text-violet-600 mb-1">Total</div>
+								<div className="font-mono font-medium">{((item.promptTokens ?? 0) + (item.completionTokens ?? 0)).toLocaleString()}</div>
+							</div>
+						</div>
+					</div>
+				)}
+
+				<div className="text-xs text-slate-500 space-y-1">
+					<div>Started: {new Date(item.startedAt).toLocaleString()}</div>
+					{item.completedAt && <div>Completed: {new Date(item.completedAt).toLocaleString()}</div>}
+				</div>
+
+				{item.error && (
+					<div className="bg-red-50 border border-red-200 rounded-md p-4">
+						<h3 className="font-semibold text-red-800 mb-2">Error</h3>
+						<div className="text-red-700 font-mono text-sm whitespace-pre-wrap">{item.error}</div>
+					</div>
+				)}
+			</div>
+		)
+	}
+
+	// Tool
+	if (item.type === 'tool') {
+		return (
+			<div className="space-y-4">
+				<div className="flex items-center gap-3">
+					<TypeBadge type={item.type} />
+					<span className="font-medium font-mono">{item.toolName ?? 'Tool'}</span>
+					<StatusBadge status={item.status} />
+				</div>
+
+				<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+					<MetricCard label="Agent">{agentLink(item.agentId, item.agentName)}</MetricCard>
+					{item.durationMs !== undefined && <MetricCard label="Duration">{(item.durationMs / 1000).toFixed(2)}s</MetricCard>}
+					<MetricCard label="Started">{new Date(item.startedAt).toLocaleTimeString()}</MetricCard>
+					{item.completedAt && <MetricCard label="Completed">{new Date(item.completedAt).toLocaleTimeString()}</MetricCard>}
+				</div>
+
+				{item.toolInput !== undefined && (
+					<div className="border border-slate-200 rounded-md overflow-hidden">
+						<div className="px-4 py-2 bg-slate-50 border-b border-slate-200">
+							<h3 className="text-sm font-medium text-slate-700">Input</h3>
+						</div>
+						<div className="p-4 max-h-64 overflow-auto">
+							<pre className="font-mono text-xs whitespace-pre-wrap break-words">{JSON.stringify(item.toolInput, null, 2)}</pre>
+						</div>
+					</div>
+				)}
+
+				{item.toolResult !== undefined && (
+					<div className="border border-emerald-200 rounded-md overflow-hidden">
+						<div className="px-4 py-2 bg-emerald-50 border-b border-emerald-200">
+							<h3 className="text-sm font-medium text-emerald-700">Result</h3>
+						</div>
+						<div className="p-4 max-h-64 overflow-auto">
+							<pre className="font-mono text-xs whitespace-pre-wrap break-words">{JSON.stringify(item.toolResult, null, 2)}</pre>
+						</div>
+					</div>
+				)}
+
+				{item.error && (
+					<div className="bg-red-50 border border-red-200 rounded-md p-4">
+						<h3 className="font-semibold text-red-800 mb-2">Error</h3>
+						<div className="text-red-700 font-mono text-sm whitespace-pre-wrap">{item.error}</div>
+					</div>
+				)}
+			</div>
+		)
+	}
+
+	// Compaction
+	if (item.type === 'compaction') {
+		return (
+			<div className="space-y-4">
+				<div className="flex items-center gap-3">
+					<TypeBadge type={item.type} />
+					<span className="font-medium">Context Compaction</span>
+				</div>
+
+				<div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+					<MetricCard label="Agent">{agentLink(item.agentId, item.agentName)}</MetricCard>
+					{item.originalTokens !== undefined && <MetricCard label="Original Tokens">{item.originalTokens.toLocaleString()}</MetricCard>}
+					{item.compactedTokens !== undefined && <MetricCard label="Compacted Tokens">{item.compactedTokens.toLocaleString()}</MetricCard>}
+					{item.messagesRemoved !== undefined && <MetricCard label="Messages Removed">{item.messagesRemoved}</MetricCard>}
+				</div>
+
+				{item.originalTokens !== undefined && item.compactedTokens !== undefined && (
+					<div className="bg-amber-50 border border-amber-200 rounded-md p-4">
+						<h3 className="font-medium text-amber-800 mb-3">Compression</h3>
+						<div className="flex items-center gap-4">
+							<div className="text-2xl font-bold text-amber-600">
+								{Math.round((1 - item.compactedTokens / item.originalTokens) * 100)}%
+							</div>
+							<div className="text-sm text-amber-700">
+								reduced ({item.originalTokens.toLocaleString()} &rarr; {item.compactedTokens.toLocaleString()} tokens)
+							</div>
+						</div>
+					</div>
+				)}
+
+				<div className="text-xs text-slate-500">
+					Compacted at: {new Date(item.startedAt).toLocaleString()}
+				</div>
+			</div>
+		)
+	}
+
+	return <div className="text-slate-500 text-sm">Unknown item type</div>
+}
+
+function StatusBadge({ status }: { status: string }) {
+	if (status === 'error') return <span className="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded-full font-medium">Error</span>
+	if (status === 'running') return <span className="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full font-medium animate-pulse">Running</span>
+	return null
+}
+
+function TypeBadge({ type }: { type: TimelineItem['type'] }) {
+	const config: Record<TimelineItem['type'], string> = {
+		llm: 'bg-violet-100 text-violet-700',
+		tool: 'bg-emerald-100 text-emerald-700',
+		compaction: 'bg-amber-100 text-amber-700',
+	}
+	const labels: Record<TimelineItem['type'], string> = {
+		llm: 'LLM',
+		tool: 'Tool',
+		compaction: 'Compact',
+	}
+	return <span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${config[type]}`}>{labels[type]}</span>
+}
+
+function MetricCard({ label, children }: { label: string; children: React.ReactNode }) {
+	return (
+		<div className="bg-slate-50 rounded-md p-3">
+			<div className="text-xs text-slate-500 mb-1">{label}</div>
+			<div className="font-medium text-slate-900">{children}</div>
+		</div>
+	)
+}

package/src/components/debug/communication/CommunicationDiagram.tsx

@@ -0,0 +1,260 @@
+import { useState } from 'react'
+import { DiagramHeader } from './DiagramHeader'
+import { IdleGap } from './elements/IdleGap'
+import { LLMBlock } from './elements/LLMBlock'
+import { MessageArrow } from './elements/MessageArrow'
+import { ToolBlock } from './elements/ToolBlock'
+import { useZoomPan } from './hooks/useZoomPan'
+import { ParticipantLane } from './ParticipantLane'
+import { ElementPopover } from './popovers/ElementPopover'
+import { TimeAxis } from './TimeAxis'
+import type { DiagramData, DiagramLLMBlock, DiagramMessage, DiagramToolBlock, PopoverState, TimeSegment } from './types'
+import { LAYOUT } from './types'
+
+interface CommunicationDiagramProps {
+	data: DiagramData & {
+		timestampToY: (timestamp: number) => number
+		formatIdleDuration: (ms: number) => string
+	}
+}
+
+export function CommunicationDiagram({ data }: CommunicationDiagramProps) {
+	const [popover, setPopover] = useState<PopoverState>({ element: null, x: 0, y: 0 })
+	const [showLabels, setShowLabels] = useState(false)
+
+	const { state: zoomPan, containerRef, zoomIn, zoomOut, resetZoom, toggleAutoScroll, handleScroll, handleWheel } = useZoomPan(data.totalHeight)
+
+	// Calculate dimensions
+	const totalWidth = LAYOUT.timeAxisWidth + data.participants.length * (LAYOUT.participantWidth + LAYOUT.participantGap) + LAYOUT.padding
+	const scaledHeight = data.totalHeight * zoomPan.zoom
+	const scaledWidth = totalWidth * zoomPan.zoom
+
+	// Calculate cumulative Y positions for idle gaps
+	const idleGapPositions: Array<{ segment: TimeSegment; yPosition: number }> = []
+	let cumulativeY = 0
+	for (const segment of data.timeSegments) {
+		if (segment.type === 'idle') {
+			idleGapPositions.push({ segment, yPosition: cumulativeY })
+		}
+		cumulativeY += segment.displayHeight
+	}
+
+	const handleMessageHover = (message: DiagramMessage | null, x: number, y: number) => {
+		if (message) {
+			setPopover({ element: { type: 'message', data: message }, x, y })
+		} else {
+			setPopover({ element: null, x: 0, y: 0 })
+		}
+	}
+
+	const handleLLMHover = (block: DiagramLLMBlock | null, x: number, y: number) => {
+		if (block) {
+			setPopover({ element: { type: 'llm', data: block }, x, y })
+		} else {
+			setPopover({ element: null, x: 0, y: 0 })
+		}
+	}
+
+	const handleToolHover = (block: DiagramToolBlock | null, x: number, y: number) => {
+		if (block) {
+			setPopover({ element: { type: 'tool', data: block }, x, y })
+		} else {
+			setPopover({ element: null, x: 0, y: 0 })
+		}
+	}
+
+	return (
+		<div className="h-full flex flex-col">
+			{/* Toolbar */}
+			<div className="flex items-center gap-3 px-3 py-2 bg-slate-50/80 border-b border-slate-100 shrink-0">
+				{/* Zoom controls */}
+				<div className="flex items-center gap-1 bg-white rounded-md border border-slate-200 p-0.5">
+					<button
+						onClick={zoomOut}
+						className="w-7 h-7 flex items-center justify-center text-slate-500 hover:bg-slate-100 rounded-md transition-colors"
+						title="Zoom Out (Ctrl+-)"
+					>
+						<MinusIcon />
+					</button>
+					<span className="text-xs text-slate-600 w-12 text-center font-medium">
+						{Math.round(zoomPan.zoom * 100)}%
+					</span>
+					<button
+						onClick={zoomIn}
+						className="w-7 h-7 flex items-center justify-center text-slate-500 hover:bg-slate-100 rounded-md transition-colors"
+						title="Zoom In (Ctrl++)"
+					>
+						<PlusIcon />
+					</button>
+				</div>
+
+				<button
+					onClick={resetZoom}
+					className="px-2 py-1 text-xs text-slate-500 hover:text-slate-700 hover:bg-white rounded border border-transparent hover:border-slate-200 transition-colors"
+				>
+					Reset
+				</button>
+
+				<div className="h-4 w-px bg-slate-200" />
+
+				<button
+					onClick={toggleAutoScroll}
+					className={`flex items-center gap-1.5 px-2.5 py-1 text-xs rounded-md transition-colors ${
+						zoomPan.autoScroll
+							? 'bg-violet-50 text-violet-600 border border-violet-200'
+							: 'bg-white text-slate-500 border border-slate-200 hover:border-slate-300'
+					}`}
+				>
+					<AutoScrollIcon active={zoomPan.autoScroll} />
+					Auto-scroll
+				</button>
+
+				<div className="h-4 w-px bg-slate-200" />
+
+				{/* Show labels toggle */}
+				<label className="flex items-center gap-2 cursor-pointer select-none">
+					<input
+						type="checkbox"
+						checked={showLabels}
+						onChange={(e) => setShowLabels(e.target.checked)}
+						className="w-3.5 h-3.5 rounded border-slate-300 text-violet-500 focus:ring-violet-500 focus:ring-offset-0"
+					/>
+					<span className="text-xs text-slate-600">Show message text</span>
+				</label>
+
+				<div className="flex-1" />
+
+				{/* Legend */}
+				<div className="flex items-center gap-4 text-[10px] text-slate-400">
+					<span className="flex items-center gap-1.5">
+						<span className="w-4 h-px bg-blue-300" />
+						Messages
+					</span>
+					<span className="flex items-center gap-1.5">
+						<span className="w-3 h-3 bg-violet-50 border border-violet-200 rounded" />
+						LLM
+					</span>
+					<span className="flex items-center gap-1.5">
+						<span className="w-3 h-3 bg-teal-50 border border-teal-200 rounded" />
+						Tools
+					</span>
+				</div>
+			</div>
+
+			{/* Diagram container */}
+			<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+				{/* Header (sticky) - scales with zoom */}
+				<DiagramHeader participants={data.participants} zoom={zoomPan.zoom} />
+
+				{/* Scrollable SVG area */}
+				<div
+					ref={containerRef}
+					className="flex-1 overflow-auto bg-white"
+					onScroll={handleScroll}
+					onWheel={handleWheel}
+				>
+					<svg
+						width={scaledWidth}
+						height={scaledHeight + LAYOUT.padding * 2}
+					>
+						<g transform={`scale(${zoomPan.zoom})`}>
+							<g transform={`translate(0, ${LAYOUT.padding})`}>
+								{/* Background grid lines for participant lanes */}
+								{data.participants.map((participant) => (
+									<ParticipantLane
+										key={participant.id}
+										participant={participant}
+										totalHeight={data.totalHeight}
+									/>
+								))}
+
+								{/* Time axis */}
+								<TimeAxis
+									segments={data.timeSegments}
+									sessionStartTime={data.sessionStartTime}
+									timestampToY={data.timestampToY}
+									totalHeight={data.totalHeight}
+								/>
+
+								{/* Idle gaps */}
+								{idleGapPositions.map((item, idx) => (
+									<IdleGap
+										key={idx}
+										segment={item.segment}
+										participants={data.participants}
+										yPosition={item.yPosition}
+										formatDuration={data.formatIdleDuration}
+									/>
+								))}
+
+								{/* LLM blocks */}
+								{data.llmBlocks.map((block) => (
+									<LLMBlock
+										key={block.id}
+										block={block}
+										participants={data.participants}
+										onHover={handleLLMHover}
+									/>
+								))}
+
+								{/* Tool blocks */}
+								{data.toolBlocks.map((block) => (
+									<ToolBlock
+										key={block.id}
+										block={block}
+										participants={data.participants}
+										onHover={handleToolHover}
+									/>
+								))}
+
+								{/* Messages (on top) */}
+								{data.messages.map((message) => (
+									<MessageArrow
+										key={message.id}
+										message={message}
+										participants={data.participants}
+										showLabel={showLabels}
+										onHover={handleMessageHover}
+									/>
+								))}
+							</g>
+						</g>
+					</svg>
+				</div>
+			</div>
+
+			{/* Popover */}
+			{popover.element && (
+				<ElementPopover
+					element={popover.element}
+					x={popover.x}
+					y={popover.y}
+				/>
+			)}
+		</div>
+	)
+}
+
+function MinusIcon() {
+	return (
+		<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+		</svg>
+	)
+}
+
+function PlusIcon() {
+	return (
+		<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+		</svg>
+	)
+}
+
+function AutoScrollIcon({ active }: { active: boolean }) {
+	return (
+		<svg className={`w-3.5 h-3.5 ${active ? 'text-violet-500' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+		</svg>
+	)
+}

package/src/components/debug/communication/DiagramHeader.tsx

@@ -0,0 +1,113 @@
+import { DebugLink } from '../DebugNavigation'
+import type { DiagramParticipant } from './types'
+import { COLORS, LAYOUT } from './types'
+
+interface DiagramHeaderProps {
+	participants: DiagramParticipant[]
+	zoom: number
+}
+
+export function DiagramHeader({ participants, zoom }: DiagramHeaderProps) {
+	const scaledTimeAxisWidth = LAYOUT.timeAxisWidth * zoom
+	const scaledParticipantWidth = LAYOUT.participantWidth * zoom
+	const scaledParticipantGap = LAYOUT.participantGap * zoom
+
+	return (
+		<div
+			className="sticky top-0 z-10 bg-white border-b border-slate-200 flex shrink-0 overflow-hidden"
+			style={{ height: LAYOUT.headerHeight }}
+		>
+			{/* Time axis header */}
+			<div
+				className="flex items-center justify-center text-[10px] font-medium text-slate-400 uppercase tracking-wider border-r border-slate-200 shrink-0 bg-slate-50"
+				style={{ width: scaledTimeAxisWidth }}
+			>
+				Time
+			</div>
+
+			{/* Participant headers */}
+			{participants.map((participant, idx) => {
+				const isOdd = idx % 2 === 1
+				return (
+					<div
+						key={participant.id}
+						className={`flex flex-col items-center justify-center shrink-0 py-2 border-l border-slate-200 ${isOdd ? 'bg-slate-50/80' : 'bg-white'}`}
+						style={{
+							width: scaledParticipantWidth + scaledParticipantGap,
+							paddingLeft: scaledParticipantGap / 2,
+							paddingRight: scaledParticipantGap / 2,
+						}}
+					>
+						{participant.id === 'user'
+							? (
+								<div className="flex items-center gap-1.5">
+									<UserIcon />
+									<span className={`text-xs font-semibold ${COLORS.participant.user}`}>
+										{participant.name}
+									</span>
+								</div>
+							)
+							: (
+								<DebugLink
+									to={`agents/${participant.id}`}
+									className={`text-xs font-semibold hover:underline truncate max-w-full ${COLORS.participant[participant.role]}`}
+								>
+									{participant.name}
+								</DebugLink>
+							)}
+
+						<div className="flex items-center gap-1.5 mt-1">
+							<RoleBadge role={participant.role} />
+							<StatusIndicator status={participant.status} />
+						</div>
+					</div>
+				)
+			})}
+		</div>
+	)
+}
+
+function UserIcon() {
+	return (
+		<svg className="w-3.5 h-3.5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+		</svg>
+	)
+}
+
+function RoleBadge({ role }: { role: DiagramParticipant['role'] }) {
+	const config: Record<DiagramParticipant['role'], { bg: string; text: string; label: string }> = {
+		user: { bg: 'bg-blue-100', text: 'text-blue-700', label: 'User' },
+		communicator: { bg: 'bg-emerald-100', text: 'text-emerald-700', label: 'Comm' },
+		orchestrator: { bg: 'bg-violet-100', text: 'text-violet-700', label: 'Orch' },
+		worker: { bg: 'bg-slate-100', text: 'text-slate-700', label: 'Worker' },
+	}
+
+	const { bg, text, label } = config[role]
+
+	return (
+		<span className={`text-[9px] px-1.5 py-0.5 rounded-full ${bg} ${text} font-medium`}>
+			{label}
+		</span>
+	)
+}
+
+function StatusIndicator({ status }: { status: DiagramParticipant['status'] }) {
+	const config: Record<DiagramParticipant['status'], { bg: string; ring?: string; animate?: boolean }> = {
+		idle: { bg: 'bg-slate-300' },
+		thinking: { bg: 'bg-amber-400', ring: 'ring-amber-200', animate: true },
+		responding: { bg: 'bg-blue-400', ring: 'ring-blue-200' },
+		waiting_for_user: { bg: 'bg-purple-400', ring: 'ring-purple-200' },
+		error: { bg: 'bg-red-400', ring: 'ring-red-200' },
+		paused: { bg: 'bg-amber-400', ring: 'ring-amber-200' },
+	}
+
+	const { bg, ring, animate } = config[status]
+
+	return (
+		<span
+			className={`w-1.5 h-1.5 rounded-full ${bg} ${ring ? `ring-2 ${ring}` : ''} ${animate ? 'animate-pulse' : ''}`}
+			title={status.replace(/_/g, ' ')}
+		/>
+	)
+}

package/src/components/debug/communication/ParticipantLane.tsx

@@ -0,0 +1,60 @@
+import type { DiagramParticipant } from './types'
+import { LAYOUT } from './types'
+
+interface ParticipantLaneProps {
+	participant: DiagramParticipant
+	totalHeight: number
+}
+
+export function ParticipantLane({ participant, totalHeight }: ParticipantLaneProps) {
+	const x = LAYOUT.timeAxisWidth + participant.columnIndex * (LAYOUT.participantWidth + LAYOUT.participantGap)
+	const centerX = x + LAYOUT.participantWidth / 2
+	const isOdd = participant.columnIndex % 2 === 1
+	const columnWidth = LAYOUT.participantWidth + LAYOUT.participantGap
+
+	return (
+		<g>
+			{/* Column background - alternating */}
+			<rect
+				x={x - LAYOUT.participantGap / 2}
+				y={0}
+				width={columnWidth}
+				height={totalHeight}
+				className={isOdd ? 'fill-slate-50/80' : 'fill-white'}
+			/>
+
+			{/* Column border - left side */}
+			<line
+				x1={x - LAYOUT.participantGap / 2}
+				y1={0}
+				x2={x - LAYOUT.participantGap / 2}
+				y2={totalHeight}
+				className="stroke-slate-200"
+				strokeWidth={1}
+			/>
+
+			{/* Column border - right side (only for last column) */}
+			{participant.columnIndex === 0 && (
+				<line
+					x1={x - LAYOUT.participantGap / 2 + columnWidth}
+					y1={0}
+					x2={x - LAYOUT.participantGap / 2 + columnWidth}
+					y2={totalHeight}
+					className="stroke-slate-200"
+					strokeWidth={1}
+				/>
+			)}
+
+			{/* Center line - dashed, subtle */}
+			<line
+				x1={centerX}
+				y1={0}
+				x2={centerX}
+				y2={totalHeight}
+				className="stroke-slate-300"
+				strokeWidth={1}
+				strokeDasharray="2 8"
+			/>
+		</g>
+	)
+}