@roj-ai/debug 0.0.2

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

@@ -0,0 +1,106 @@
+import type { TimeSegment } from './types'
+import { LAYOUT } from './types'
+
+interface TimeAxisProps {
+	segments: TimeSegment[]
+	sessionStartTime: number
+	timestampToY: (timestamp: number) => number
+	totalHeight: number
+}
+
+export function TimeAxis({ segments, sessionStartTime, timestampToY, totalHeight }: TimeAxisProps) {
+	// Generate time markers every ~80px on active segments
+	const markers: Array<{ timestamp: number; y: number; label: string }> = []
+
+	for (const segment of segments) {
+		if (segment.type === 'idle') continue
+
+		const interval = calculateInterval(segment.actualDuration)
+		let current = segment.startTime
+
+		while (current <= segment.endTime) {
+			const y = timestampToY(current)
+			// Only add if not too close to previous marker
+			const lastMarker = markers[markers.length - 1]
+			if (!lastMarker || y - lastMarker.y > 40) {
+				markers.push({
+					timestamp: current,
+					y,
+					label: formatTime(current, sessionStartTime),
+				})
+			}
+			current += interval
+		}
+	}
+
+	return (
+		<g className="time-axis">
+			{/* Vertical axis line */}
+			<line
+				x1={LAYOUT.timeAxisWidth - 1}
+				y1={0}
+				x2={LAYOUT.timeAxisWidth - 1}
+				y2={totalHeight}
+				className="stroke-slate-100"
+				strokeWidth={1}
+			/>
+
+			{/* Time markers */}
+			{markers.map((marker, idx) => (
+				<g key={idx}>
+					{/* Tick mark */}
+					<line
+						x1={LAYOUT.timeAxisWidth - 6}
+						y1={marker.y}
+						x2={LAYOUT.timeAxisWidth - 1}
+						y2={marker.y}
+						className="stroke-slate-200"
+						strokeWidth={1}
+					/>
+
+					{/* Time label */}
+					<text
+						x={LAYOUT.timeAxisWidth - 10}
+						y={marker.y}
+						textAnchor="end"
+						dominantBaseline="middle"
+						className="text-[9px] text-slate-400 fill-current font-mono"
+					>
+						{marker.label}
+					</text>
+
+					{/* Subtle horizontal guide line */}
+					<line
+						x1={LAYOUT.timeAxisWidth}
+						y1={marker.y}
+						x2={LAYOUT.timeAxisWidth + 2000}
+						y2={marker.y}
+						className="stroke-slate-50"
+						strokeWidth={1}
+					/>
+				</g>
+			))}
+		</g>
+	)
+}
+
+function calculateInterval(durationMs: number): number {
+	// Choose interval based on duration to get ~5-10 markers per segment
+	if (durationMs < 10000) return 2000 // Every 2s for < 10s
+	if (durationMs < 60000) return 10000 // Every 10s for < 1min
+	if (durationMs < 300000) return 30000 // Every 30s for < 5min
+	if (durationMs < 3600000) return 60000 // Every 1min for < 1h
+	return 300000 // Every 5min for > 1h
+}
+
+function formatTime(timestamp: number, sessionStartTime: number): string {
+	const elapsed = timestamp - sessionStartTime
+	const seconds = Math.floor(elapsed / 1000)
+	const minutes = Math.floor(seconds / 60)
+	const hours = Math.floor(minutes / 60)
+
+	if (hours > 0) {
+		return `${hours}:${String(minutes % 60).padStart(2, '0')}:${String(seconds % 60).padStart(2, '0')}`
+	}
+	return `${minutes}:${String(seconds % 60).padStart(2, '0')}`
+}

package/src/components/debug/communication/elements/IdleGap.tsx

@@ -0,0 +1,90 @@
+import type { DiagramParticipant, TimeSegment } from '../types'
+import { COLORS, LAYOUT } from '../types'
+
+interface IdleGapProps {
+	segment: TimeSegment
+	participants: DiagramParticipant[]
+	yPosition: number
+	formatDuration: (ms: number) => string
+}
+
+export function IdleGap({ segment, participants, yPosition, formatDuration }: IdleGapProps) {
+	const totalWidth = LAYOUT.timeAxisWidth + participants.length * (LAYOUT.participantWidth + LAYOUT.participantGap)
+	const height = segment.displayHeight
+	const centerX = (LAYOUT.timeAxisWidth + totalWidth) / 2
+
+	return (
+		<g className="idle-gap">
+			{/* Background fill with gradient effect */}
+			<rect
+				x={LAYOUT.timeAxisWidth}
+				y={yPosition + 2}
+				width={totalWidth - LAYOUT.timeAxisWidth}
+				height={height - 4}
+				className="fill-slate-50"
+				rx={2}
+			/>
+
+			{/* Top dashed line */}
+			<line
+				x1={LAYOUT.timeAxisWidth}
+				y1={yPosition}
+				x2={totalWidth}
+				y2={yPosition}
+				className={COLORS.idle.stroke}
+				strokeWidth={1}
+				strokeDasharray="4 4"
+			/>
+
+			{/* Bottom dashed line */}
+			<line
+				x1={LAYOUT.timeAxisWidth}
+				y1={yPosition + height}
+				x2={totalWidth}
+				y2={yPosition + height}
+				className={COLORS.idle.stroke}
+				strokeWidth={1}
+				strokeDasharray="4 4"
+			/>
+
+			{/* Duration label in center */}
+			<g transform={`translate(${centerX}, ${yPosition + height / 2})`}>
+				<rect
+					x={-36}
+					y={-10}
+					width={72}
+					height={20}
+					rx={10}
+					className="fill-white stroke-slate-200"
+					strokeWidth={1}
+				/>
+				<text
+					x={0}
+					y={0}
+					textAnchor="middle"
+					dominantBaseline="middle"
+					className={`text-[10px] ${COLORS.idle.text} fill-current`}
+				>
+					{formatDuration(segment.actualDuration)}
+				</text>
+			</g>
+
+			{/* Vertical lane continuations (subtle dots) */}
+			{participants.map((participant) => {
+				const laneX = LAYOUT.timeAxisWidth + participant.columnIndex * (LAYOUT.participantWidth + LAYOUT.participantGap) + LAYOUT.participantWidth / 2
+				return (
+					<line
+						key={participant.id}
+						x1={laneX}
+						y1={yPosition + 4}
+						x2={laneX}
+						y2={yPosition + height - 4}
+						className={COLORS.idle.stroke}
+						strokeWidth={1}
+						strokeDasharray="2 6"
+					/>
+				)
+			})}
+		</g>
+	)
+}

package/src/components/debug/communication/elements/LLMBlock.tsx

@@ -0,0 +1,107 @@
+import { useDebugNavigate } from '../../DebugNavigation'
+import type { DiagramLLMBlock, DiagramParticipant } from '../types'
+import { COLORS, LAYOUT } from '../types'
+
+interface LLMBlockProps {
+	block: DiagramLLMBlock
+	participants: DiagramParticipant[]
+	onHover?: (block: DiagramLLMBlock | null, x: number, y: number) => void
+	onClick?: (block: DiagramLLMBlock) => void
+}
+
+export function LLMBlock({ block, participants, onHover, onClick }: LLMBlockProps) {
+	const navigate = useDebugNavigate()
+	const participant = participants.find((p) => p.id === block.participantId)
+
+	if (!participant) {
+		return null
+	}
+
+	const laneX = LAYOUT.timeAxisWidth + participant.columnIndex * (LAYOUT.participantWidth + LAYOUT.participantGap) + LAYOUT.participantWidth / 2
+	const x = laneX - LAYOUT.blockWidth / 2
+	const y = block.yStart
+	const height = Math.max(LAYOUT.blockMinHeight, block.yEnd - block.yStart)
+
+	const isRunning = block.status === 'running'
+	const isError = block.status === 'error'
+
+	const content = (
+		<g
+			className="cursor-pointer group"
+			onMouseEnter={(e) => onHover?.(block, e.clientX, e.clientY)}
+			onMouseLeave={() => onHover?.(null, 0, 0)}
+			onClick={() => onClick?.(block)}
+		>
+			{/* Block rectangle */}
+			<rect
+				x={x}
+				y={y}
+				width={LAYOUT.blockWidth}
+				height={height}
+				rx={4}
+				ry={4}
+				className={`
+          ${isError ? COLORS.error.fill : isRunning ? COLORS.llm.fillRunning : COLORS.llm.fill}
+          ${isError ? COLORS.error.stroke : COLORS.llm.stroke}
+          stroke-1
+          group-hover:stroke-violet-400
+          transition-colors
+          ${isRunning ? 'animate-pulse' : ''}
+        `}
+			/>
+
+			{/* Icon */}
+			<g transform={`translate(${x + 6}, ${y + height / 2 - 5})`}>
+				<svg width="10" height="10" viewBox="0 0 24 24" fill="none" className={isError ? COLORS.error.text : COLORS.llm.text}>
+					<path
+						d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</svg>
+			</g>
+
+			{/* Label */}
+			<text
+				x={x + 20}
+				y={y + height / 2}
+				dominantBaseline="middle"
+				className={`text-[10px] font-medium ${isError ? COLORS.error.text : COLORS.llm.text} fill-current`}
+			>
+				LLM
+			</text>
+
+			{/* Status indicators */}
+			{isRunning && (
+				<circle
+					cx={x + LAYOUT.blockWidth - 8}
+					cy={y + 8}
+					r={3}
+					className="fill-violet-500 animate-pulse"
+				/>
+			)}
+
+			{isError && (
+				<circle
+					cx={x + LAYOUT.blockWidth - 8}
+					cy={y + 8}
+					r={3}
+					className="fill-red-500"
+				/>
+			)}
+		</g>
+	)
+
+	// Wrap in clickable group if we have an LLM call ID
+	if (block.llmCallId) {
+		return (
+			<g style={{ cursor: 'pointer' }} onClick={() => navigate(`llm-calls/${block.llmCallId}`)}>
+				{content}
+			</g>
+		)
+	}
+
+	return content
+}

package/src/components/debug/communication/elements/MessageArrow.tsx

@@ -0,0 +1,119 @@
+import type { DiagramMessage, DiagramParticipant } from '../types'
+import { LAYOUT } from '../types'
+
+interface MessageArrowProps {
+	message: DiagramMessage
+	participants: DiagramParticipant[]
+	showLabel?: boolean
+	onHover?: (message: DiagramMessage | null, x: number, y: number) => void
+	onClick?: (message: DiagramMessage) => void
+}
+
+export function MessageArrow({ message, participants, showLabel = false, onHover, onClick }: MessageArrowProps) {
+	const fromParticipant = participants.find((p) => p.id === message.fromId)
+	const toParticipant = participants.find((p) => p.id === message.toId)
+
+	if (!fromParticipant || !toParticipant) {
+		return null
+	}
+
+	const fromX = LAYOUT.timeAxisWidth + fromParticipant.columnIndex * (LAYOUT.participantWidth + LAYOUT.participantGap) + LAYOUT.participantWidth / 2
+	const toX = LAYOUT.timeAxisWidth + toParticipant.columnIndex * (LAYOUT.participantWidth + LAYOUT.participantGap) + LAYOUT.participantWidth / 2
+
+	const y = message.yPosition
+	const isLeftToRight = fromX < toX
+
+	// Arrow head size
+	const arrowSize = 6
+	const arrowDirection = isLeftToRight ? 1 : -1
+
+	// Calculate label position
+	const midX = (fromX + toX) / 2
+	const labelMaxWidth = Math.abs(toX - fromX) - 20
+
+	// Truncate content for label
+	const truncatedContent = message.content.length > 50
+		? message.content.slice(0, 50) + '…'
+		: message.content
+
+	return (
+		<g
+			className="cursor-pointer group"
+			onMouseEnter={(e) => onHover?.(message, e.clientX, e.clientY)}
+			onMouseLeave={() => onHover?.(null, 0, 0)}
+			onClick={() => onClick?.(message)}
+		>
+			{/* Invisible wider hit area for easier hovering */}
+			<line
+				x1={fromX}
+				y1={y}
+				x2={toX}
+				y2={y}
+				stroke="transparent"
+				strokeWidth={16}
+			/>
+
+			{/* Arrow line */}
+			<line
+				x1={fromX}
+				y1={y}
+				x2={toX - arrowDirection * arrowSize}
+				y2={y}
+				className="stroke-blue-300 group-hover:stroke-blue-500 transition-colors"
+				strokeWidth={1.5}
+			/>
+
+			{/* Arrow head */}
+			<polygon
+				points={`
+          ${toX},${y}
+          ${toX - arrowDirection * arrowSize},${y - arrowSize / 2}
+          ${toX - arrowDirection * arrowSize},${y + arrowSize / 2}
+        `}
+				className="fill-blue-300 group-hover:fill-blue-500 transition-colors"
+			/>
+
+			{/* Small dot at start */}
+			<circle
+				cx={fromX}
+				cy={y}
+				r={2.5}
+				className="fill-blue-300 group-hover:fill-blue-500 transition-colors"
+			/>
+
+			{/* Label (optional) */}
+			{showLabel && labelMaxWidth > 40 && (
+				<g>
+					{/* Label background */}
+					<rect
+						x={midX - labelMaxWidth / 2}
+						y={y - 18}
+						width={labelMaxWidth}
+						height={14}
+						rx={3}
+						className="fill-white/90 stroke-blue-200 group-hover:stroke-blue-300"
+						strokeWidth={0.5}
+					/>
+					{/* Label text */}
+					<text
+						x={midX}
+						y={y - 9}
+						textAnchor="middle"
+						dominantBaseline="middle"
+						className="text-[9px] fill-slate-600 group-hover:fill-slate-800"
+						style={{
+							fontSize: '9px',
+							clipPath: `inset(0 0 0 0)`,
+						}}
+					>
+						<tspan>
+							{truncatedContent.length > labelMaxWidth / 5
+								? truncatedContent.slice(0, Math.floor(labelMaxWidth / 5)) + '…'
+								: truncatedContent}
+						</tspan>
+					</text>
+				</g>
+			)}
+		</g>
+	)
+}

package/src/components/debug/communication/elements/ToolBlock.tsx

@@ -0,0 +1,99 @@
+import type { DiagramParticipant, DiagramToolBlock } from '../types'
+import { COLORS, LAYOUT } from '../types'
+
+interface ToolBlockProps {
+	block: DiagramToolBlock
+	participants: DiagramParticipant[]
+	onHover?: (block: DiagramToolBlock | null, x: number, y: number) => void
+	onClick?: (block: DiagramToolBlock) => void
+}
+
+export function ToolBlock({ block, participants, onHover, onClick }: ToolBlockProps) {
+	const participant = participants.find((p) => p.id === block.participantId)
+
+	if (!participant) {
+		return null
+	}
+
+	const laneX = LAYOUT.timeAxisWidth + participant.columnIndex * (LAYOUT.participantWidth + LAYOUT.participantGap) + LAYOUT.participantWidth / 2
+	const x = laneX - LAYOUT.blockWidth / 2
+	const y = block.yStart
+	const height = Math.max(LAYOUT.blockMinHeight - 4, block.yEnd - block.yStart)
+
+	const isRunning = block.status === 'running'
+	const isError = block.status === 'error'
+
+	// Truncate tool name
+	const toolName = block.toolName.length > 8
+		? block.toolName.slice(0, 8) + '…'
+		: block.toolName
+
+	return (
+		<g
+			className="cursor-pointer group"
+			onMouseEnter={(e) => onHover?.(block, e.clientX, e.clientY)}
+			onMouseLeave={() => onHover?.(null, 0, 0)}
+			onClick={() => onClick?.(block)}
+		>
+			{/* Block rectangle */}
+			<rect
+				x={x}
+				y={y}
+				width={LAYOUT.blockWidth}
+				height={height}
+				rx={4}
+				ry={4}
+				className={`
+          ${isError ? COLORS.error.fill : isRunning ? COLORS.tool.fillRunning : COLORS.tool.fill}
+          ${isError ? COLORS.error.stroke : COLORS.tool.stroke}
+          stroke-1
+          group-hover:stroke-teal-400
+          transition-colors
+          ${isRunning ? 'animate-pulse' : ''}
+        `}
+			/>
+
+			{/* Tool icon */}
+			<g transform={`translate(${x + 6}, ${y + height / 2 - 5})`}>
+				<svg width="10" height="10" viewBox="0 0 24 24" fill="none" className={isError ? COLORS.error.text : COLORS.tool.text}>
+					<path
+						d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</svg>
+			</g>
+
+			{/* Tool name */}
+			<text
+				x={x + 20}
+				y={y + height / 2}
+				dominantBaseline="middle"
+				className={`text-[9px] font-mono ${isError ? COLORS.error.text : COLORS.tool.text} fill-current`}
+			>
+				{toolName}
+			</text>
+
+			{/* Status indicators */}
+			{isRunning && (
+				<circle
+					cx={x + LAYOUT.blockWidth - 8}
+					cy={y + 8}
+					r={3}
+					className="fill-teal-500 animate-pulse"
+				/>
+			)}
+
+			{isError && (
+				<circle
+					cx={x + LAYOUT.blockWidth - 8}
+					cy={y + 8}
+					r={3}
+					className="fill-red-500"
+				/>
+			)}
+		</g>
+	)
+}