@roj-ai/debug 0.1.3 → 0.1.4

package/dist/components/debug/communication/CommunicationDiagram.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { LAYOUT } from './types';
+export function CommunicationDiagram({ data }) {
+    const [popover, setPopover] = useState({ 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 = [];
+    let cumulativeY = 0;
+    for (const segment of data.timeSegments) {
+        if (segment.type === 'idle') {
+            idleGapPositions.push({ segment, yPosition: cumulativeY });
+        }
+        cumulativeY += segment.displayHeight;
+    }
+    const handleMessageHover = (message, x, y) => {
+        if (message) {
+            setPopover({ element: { type: 'message', data: message }, x, y });
+        }
+        else {
+            setPopover({ element: null, x: 0, y: 0 });
+        }
+    };
+    const handleLLMHover = (block, x, y) => {
+        if (block) {
+            setPopover({ element: { type: 'llm', data: block }, x, y });
+        }
+        else {
+            setPopover({ element: null, x: 0, y: 0 });
+        }
+    };
+    const handleToolHover = (block, x, y) => {
+        if (block) {
+            setPopover({ element: { type: 'tool', data: block }, x, y });
+        }
+        else {
+            setPopover({ element: null, x: 0, y: 0 });
+        }
+    };
+    return (_jsxs("div", { className: "h-full flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-3 px-3 py-2 bg-slate-50/80 border-b border-slate-100 shrink-0", children: [_jsxs("div", { className: "flex items-center gap-1 bg-white rounded-md border border-slate-200 p-0.5", children: [_jsx("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+-)", children: _jsx(MinusIcon, {}) }), _jsxs("span", { className: "text-xs text-slate-600 w-12 text-center font-medium", children: [Math.round(zoomPan.zoom * 100), "%"] }), _jsx("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++)", children: _jsx(PlusIcon, {}) })] }), _jsx("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", children: "Reset" }), _jsx("div", { className: "h-4 w-px bg-slate-200" }), _jsxs("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'}`, children: [_jsx(AutoScrollIcon, { active: zoomPan.autoScroll }), "Auto-scroll"] }), _jsx("div", { className: "h-4 w-px bg-slate-200" }), _jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [_jsx("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" }), _jsx("span", { className: "text-xs text-slate-600", children: "Show message text" })] }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex items-center gap-4 text-[10px] text-slate-400", children: [_jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "w-4 h-px bg-blue-300" }), "Messages"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "w-3 h-3 bg-violet-50 border border-violet-200 rounded" }), "LLM"] }), _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: "w-3 h-3 bg-teal-50 border border-teal-200 rounded" }), "Tools"] })] })] }), _jsxs("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: [_jsx(DiagramHeader, { participants: data.participants, zoom: zoomPan.zoom }), _jsx("div", { ref: containerRef, className: "flex-1 overflow-auto bg-white", onScroll: handleScroll, onWheel: handleWheel, children: _jsx("svg", { width: scaledWidth, height: scaledHeight + LAYOUT.padding * 2, children: _jsx("g", { transform: `scale(${zoomPan.zoom})`, children: _jsxs("g", { transform: `translate(0, ${LAYOUT.padding})`, children: [data.participants.map((participant) => (_jsx(ParticipantLane, { participant: participant, totalHeight: data.totalHeight }, participant.id))), _jsx(TimeAxis, { segments: data.timeSegments, sessionStartTime: data.sessionStartTime, timestampToY: data.timestampToY, totalHeight: data.totalHeight }), idleGapPositions.map((item, idx) => (_jsx(IdleGap, { segment: item.segment, participants: data.participants, yPosition: item.yPosition, formatDuration: data.formatIdleDuration }, idx))), data.llmBlocks.map((block) => (_jsx(LLMBlock, { block: block, participants: data.participants, onHover: handleLLMHover }, block.id))), data.toolBlocks.map((block) => (_jsx(ToolBlock, { block: block, participants: data.participants, onHover: handleToolHover }, block.id))), data.messages.map((message) => (_jsx(MessageArrow, { message: message, participants: data.participants, showLabel: showLabels, onHover: handleMessageHover }, message.id)))] }) }) }) })] }), popover.element && (_jsx(ElementPopover, { element: popover.element, x: popover.x, y: popover.y }))] }));
+}
+function MinusIcon() {
+    return (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20 12H4" }) }));
+}
+function PlusIcon() {
+    return (_jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" }) }));
+}
+function AutoScrollIcon({ active }) {
+    return (_jsx("svg", { className: `w-3.5 h-3.5 ${active ? 'text-violet-500' : 'text-slate-400'}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 14l-7 7m0 0l-7-7m7 7V3" }) }));
+}
+//# sourceMappingURL=CommunicationDiagram.js.map

package/dist/components/debug/communication/CommunicationDiagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommunicationDiagram.js","sourceRoot":"","sources":["../../../../src/components/debug/communication/CommunicationDiagram.tsx"],"names":[],"mappings":"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"}

package/dist/components/debug/communication/DiagramHeader.d.ts

@@ -5,3 +5,4 @@ interface DiagramHeaderProps {
 }
 export declare function DiagramHeader({ participants, zoom }: DiagramHeaderProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=DiagramHeader.d.ts.map

package/dist/components/debug/communication/DiagramHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/debug/communication/DiagramHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD,UAAU,kBAAkB;IAC3B,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,IAAI,EAAE,MAAM,CAAA;CACZ;AAED,wBAAgB,aAAa,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,kBAAkB,2CA0DvE"}

package/dist/components/debug/communication/DiagramHeader.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DebugLink } from '../DebugNavigation';
+import { COLORS, LAYOUT } from './types';
+export function DiagramHeader({ participants, zoom }) {
+    const scaledTimeAxisWidth = LAYOUT.timeAxisWidth * zoom;
+    const scaledParticipantWidth = LAYOUT.participantWidth * zoom;
+    const scaledParticipantGap = LAYOUT.participantGap * zoom;
+    return (_jsxs("div", { className: "sticky top-0 z-10 bg-white border-b border-slate-200 flex shrink-0 overflow-hidden", style: { height: LAYOUT.headerHeight }, children: [_jsx("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 }, children: "Time" }), participants.map((participant, idx) => {
+                const isOdd = idx % 2 === 1;
+                return (_jsxs("div", { 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,
+                    }, children: [participant.id === 'user'
+                            ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(UserIcon, {}), _jsx("span", { className: `text-xs font-semibold ${COLORS.participant.user}`, children: participant.name })] }))
+                            : (_jsx(DebugLink, { to: `agents/${participant.id}`, className: `text-xs font-semibold hover:underline truncate max-w-full ${COLORS.participant[participant.role]}`, children: participant.name })), _jsxs("div", { className: "flex items-center gap-1.5 mt-1", children: [_jsx(RoleBadge, { role: participant.role }), _jsx(StatusIndicator, { status: participant.status })] })] }, participant.id));
+            })] }));
+}
+function UserIcon() {
+    return (_jsx("svg", { className: "w-3.5 h-3.5 text-blue-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("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" }) }));
+}
+function RoleBadge({ role }) {
+    const config = {
+        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 (_jsx("span", { className: `text-[9px] px-1.5 py-0.5 rounded-full ${bg} ${text} font-medium`, children: label }));
+}
+function StatusIndicator({ status }) {
+    const config = {
+        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 (_jsx("span", { className: `w-1.5 h-1.5 rounded-full ${bg} ${ring ? `ring-2 ${ring}` : ''} ${animate ? 'animate-pulse' : ''}`, title: status.replace(/_/g, ' ') }));
+}
+//# sourceMappingURL=DiagramHeader.js.map

package/dist/components/debug/communication/DiagramHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiagramHeader.js","sourceRoot":"","sources":["../../../../src/components/debug/communication/DiagramHeader.tsx"],"names":[],"mappings":"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"}

package/dist/components/debug/communication/ParticipantLane.d.ts

@@ -5,3 +5,4 @@ interface ParticipantLaneProps {
 }
 export declare function ParticipantLane({ participant, totalHeight }: ParticipantLaneProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=ParticipantLane.d.ts.map

package/dist/components/debug/communication/ParticipantLane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantLane.d.ts","sourceRoot":"","sources":["../../../../src/components/debug/communication/ParticipantLane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD,UAAU,oBAAoB;IAC7B,WAAW,EAAE,kBAAkB,CAAA;IAC/B,WAAW,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,eAAe,CAAC,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,oBAAoB,2CAmDjF"}

package/dist/components/debug/communication/ParticipantLane.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LAYOUT } from './types';
+export function ParticipantLane({ participant, totalHeight }) {
+    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 (_jsxs("g", { children: [_jsx("rect", { x: x - LAYOUT.participantGap / 2, y: 0, width: columnWidth, height: totalHeight, className: isOdd ? 'fill-slate-50/80' : 'fill-white' }), _jsx("line", { x1: x - LAYOUT.participantGap / 2, y1: 0, x2: x - LAYOUT.participantGap / 2, y2: totalHeight, className: "stroke-slate-200", strokeWidth: 1 }), participant.columnIndex === 0 && (_jsx("line", { x1: x - LAYOUT.participantGap / 2 + columnWidth, y1: 0, x2: x - LAYOUT.participantGap / 2 + columnWidth, y2: totalHeight, className: "stroke-slate-200", strokeWidth: 1 })), _jsx("line", { x1: centerX, y1: 0, x2: centerX, y2: totalHeight, className: "stroke-slate-300", strokeWidth: 1, strokeDasharray: "2 8" })] }));
+}
+//# sourceMappingURL=ParticipantLane.js.map

package/dist/components/debug/communication/ParticipantLane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticipantLane.js","sourceRoot":"","sources":["../../../../src/components/debug/communication/ParticipantLane.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAOhC,MAAM,UAAU,eAAe,CAAC,EAAE,WAAW,EAAE,WAAW,EAAwB;IACjF,MAAM,CAAC,GAAG,MAAM,CAAC,aAAa,GAAG,WAAW,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA;IAC5G,MAAM,OAAO,GAAG,CAAC,GAAG,MAAM,CAAC,gBAAgB,GAAG,CAAC,CAAA;IAC/C,MAAM,KAAK,GAAG,WAAW,CAAC,WAAW,GAAG,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,WAAW,GAAG,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAA;IAEnE,OAAO,CACN,wBAEC,eACC,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,cAAc,GAAG,CAAC,EAChC,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,WAAW,EAClB,MAAM,EAAE,WAAW,EACnB,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,GACnD,EAGF,eACC,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,cAAc,GAAG,CAAC,EACjC,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,cAAc,GAAG,CAAC,EACjC,EAAE,EAAE,WAAW,EACf,SAAS,EAAC,kBAAkB,EAC5B,WAAW,EAAE,CAAC,GACb,EAGD,WAAW,CAAC,WAAW,KAAK,CAAC,IAAI,CACjC,eACC,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,cAAc,GAAG,CAAC,GAAG,WAAW,EAC/C,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,cAAc,GAAG,CAAC,GAAG,WAAW,EAC/C,EAAE,EAAE,WAAW,EACf,SAAS,EAAC,kBAAkB,EAC5B,WAAW,EAAE,CAAC,GACb,CACF,EAGD,eACC,EAAE,EAAE,OAAO,EACX,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,OAAO,EACX,EAAE,EAAE,WAAW,EACf,SAAS,EAAC,kBAAkB,EAC5B,WAAW,EAAE,CAAC,EACd,eAAe,EAAC,KAAK,GACpB,IACC,CACJ,CAAA;AACF,CAAC"}

package/dist/components/debug/communication/TimeAxis.d.ts

@@ -7,3 +7,4 @@ interface TimeAxisProps {
 }
 export declare function TimeAxis({ segments, sessionStartTime, timestampToY, totalHeight }: TimeAxisProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=TimeAxis.d.ts.map

package/dist/components/debug/communication/TimeAxis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAxis.d.ts","sourceRoot":"","sources":["../../../../src/components/debug/communication/TimeAxis.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAG1C,UAAU,aAAa;IACtB,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,gBAAgB,EAAE,MAAM,CAAA;IACxB,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IAC3C,WAAW,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,gBAAgB,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,aAAa,2CA0EhG"}

package/dist/components/debug/communication/TimeAxis.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LAYOUT } from './types';
+export function TimeAxis({ segments, sessionStartTime, timestampToY, totalHeight }) {
+    // Generate time markers every ~80px on active segments
+    const markers = [];
+    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 (_jsxs("g", { className: "time-axis", children: [_jsx("line", { x1: LAYOUT.timeAxisWidth - 1, y1: 0, x2: LAYOUT.timeAxisWidth - 1, y2: totalHeight, className: "stroke-slate-100", strokeWidth: 1 }), markers.map((marker, idx) => (_jsxs("g", { children: [_jsx("line", { x1: LAYOUT.timeAxisWidth - 6, y1: marker.y, x2: LAYOUT.timeAxisWidth - 1, y2: marker.y, className: "stroke-slate-200", strokeWidth: 1 }), _jsx("text", { x: LAYOUT.timeAxisWidth - 10, y: marker.y, textAnchor: "end", dominantBaseline: "middle", className: "text-[9px] text-slate-400 fill-current font-mono", children: marker.label }), _jsx("line", { x1: LAYOUT.timeAxisWidth, y1: marker.y, x2: LAYOUT.timeAxisWidth + 2000, y2: marker.y, className: "stroke-slate-50", strokeWidth: 1 })] }, idx)))] }));
+}
+function calculateInterval(durationMs) {
+    // 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, sessionStartTime) {
+    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')}`;
+}
+//# sourceMappingURL=TimeAxis.js.map

package/dist/components/debug/communication/TimeAxis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeAxis.js","sourceRoot":"","sources":["../../../../src/components/debug/communication/TimeAxis.tsx"],"names":[],"mappings":"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"}

package/dist/components/debug/communication/elements/IdleGap.d.ts

@@ -7,3 +7,4 @@ interface IdleGapProps {
 }
 export declare function IdleGap({ segment, participants, yPosition, formatDuration }: IdleGapProps): import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=IdleGap.d.ts.map

package/dist/components/debug/communication/elements/IdleGap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IdleGap.d.ts","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/IdleGap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG/D,UAAU,YAAY;IACrB,OAAO,EAAE,WAAW,CAAA;IACpB,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;IACjB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;CACtC;AAED,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,YAAY,2CA+EzF"}

package/dist/components/debug/communication/elements/IdleGap.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLORS, LAYOUT } from '../types';
+export function IdleGap({ segment, participants, yPosition, formatDuration }) {
+    const totalWidth = LAYOUT.timeAxisWidth + participants.length * (LAYOUT.participantWidth + LAYOUT.participantGap);
+    const height = segment.displayHeight;
+    const centerX = (LAYOUT.timeAxisWidth + totalWidth) / 2;
+    return (_jsxs("g", { className: "idle-gap", children: [_jsx("rect", { x: LAYOUT.timeAxisWidth, y: yPosition + 2, width: totalWidth - LAYOUT.timeAxisWidth, height: height - 4, className: "fill-slate-50", rx: 2 }), _jsx("line", { x1: LAYOUT.timeAxisWidth, y1: yPosition, x2: totalWidth, y2: yPosition, className: COLORS.idle.stroke, strokeWidth: 1, strokeDasharray: "4 4" }), _jsx("line", { x1: LAYOUT.timeAxisWidth, y1: yPosition + height, x2: totalWidth, y2: yPosition + height, className: COLORS.idle.stroke, strokeWidth: 1, strokeDasharray: "4 4" }), _jsxs("g", { transform: `translate(${centerX}, ${yPosition + height / 2})`, children: [_jsx("rect", { x: -36, y: -10, width: 72, height: 20, rx: 10, className: "fill-white stroke-slate-200", strokeWidth: 1 }), _jsx("text", { x: 0, y: 0, textAnchor: "middle", dominantBaseline: "middle", className: `text-[10px] ${COLORS.idle.text} fill-current`, children: formatDuration(segment.actualDuration) })] }), participants.map((participant) => {
+                const laneX = LAYOUT.timeAxisWidth + participant.columnIndex * (LAYOUT.participantWidth + LAYOUT.participantGap) + LAYOUT.participantWidth / 2;
+                return (_jsx("line", { x1: laneX, y1: yPosition + 4, x2: laneX, y2: yPosition + height - 4, className: COLORS.idle.stroke, strokeWidth: 1, strokeDasharray: "2 6" }, participant.id));
+            })] }));
+}
+//# sourceMappingURL=IdleGap.js.map

package/dist/components/debug/communication/elements/IdleGap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IdleGap.js","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/IdleGap.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AASzC,MAAM,UAAU,OAAO,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,cAAc,EAAgB;IACzF,MAAM,UAAU,GAAG,MAAM,CAAC,aAAa,GAAG,YAAY,CAAC,MAAM,GAAG,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,CAAA;IACjH,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAA;IACpC,MAAM,OAAO,GAAG,CAAC,MAAM,CAAC,aAAa,GAAG,UAAU,CAAC,GAAG,CAAC,CAAA;IAEvD,OAAO,CACN,aAAG,SAAS,EAAC,UAAU,aAEtB,eACC,CAAC,EAAE,MAAM,CAAC,aAAa,EACvB,CAAC,EAAE,SAAS,GAAG,CAAC,EAChB,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC,aAAa,EACxC,MAAM,EAAE,MAAM,GAAG,CAAC,EAClB,SAAS,EAAC,eAAe,EACzB,EAAE,EAAE,CAAC,GACJ,EAGF,eACC,EAAE,EAAE,MAAM,CAAC,aAAa,EACxB,EAAE,EAAE,SAAS,EACb,EAAE,EAAE,UAAU,EACd,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,EAC7B,WAAW,EAAE,CAAC,EACd,eAAe,EAAC,KAAK,GACpB,EAGF,eACC,EAAE,EAAE,MAAM,CAAC,aAAa,EACxB,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,EAAE,EAAE,UAAU,EACd,EAAE,EAAE,SAAS,GAAG,MAAM,EACtB,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,EAC7B,WAAW,EAAE,CAAC,EACd,eAAe,EAAC,KAAK,GACpB,EAGF,aAAG,SAAS,EAAE,aAAa,OAAO,KAAK,SAAS,GAAG,MAAM,GAAG,CAAC,GAAG,aAC/D,eACC,CAAC,EAAE,CAAC,EAAE,EACN,CAAC,EAAE,CAAC,EAAE,EACN,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,EAAE,EAAE,EAAE,EACN,SAAS,EAAC,6BAA6B,EACvC,WAAW,EAAE,CAAC,GACb,EACF,eACC,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,UAAU,EAAC,QAAQ,EACnB,gBAAgB,EAAC,QAAQ,EACzB,SAAS,EAAE,eAAe,MAAM,CAAC,IAAI,CAAC,IAAI,eAAe,YAExD,cAAc,CAAC,OAAO,CAAC,cAAc,CAAC,GACjC,IACJ,EAGH,YAAY,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE;gBACjC,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,GAAG,WAAW,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,gBAAgB,GAAG,CAAC,CAAA;gBAC9I,OAAO,CACN,eAEC,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,SAAS,GAAG,CAAC,EACjB,EAAE,EAAE,KAAK,EACT,EAAE,EAAE,SAAS,GAAG,MAAM,GAAG,CAAC,EAC1B,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,MAAM,EAC7B,WAAW,EAAE,CAAC,EACd,eAAe,EAAC,KAAK,IAPhB,WAAW,CAAC,EAAE,CAQlB,CACF,CAAA;YACF,CAAC,CAAC,IACC,CACJ,CAAA;AACF,CAAC"}

package/dist/components/debug/communication/elements/LLMBlock.d.ts

@@ -7,3 +7,4 @@ interface LLMBlockProps {
 }
 export declare function LLMBlock({ block, participants, onHover, onClick }: LLMBlockProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
+//# sourceMappingURL=LLMBlock.d.ts.map

package/dist/components/debug/communication/elements/LLMBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LLMBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/LLMBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGnE,UAAU,aAAa;IACtB,KAAK,EAAE,eAAe,CAAA;IACtB,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACvE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;CAC1C;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,aAAa,kDA+FhF"}

package/dist/components/debug/communication/elements/LLMBlock.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDebugNavigate } from '../../DebugNavigation';
+import { COLORS, LAYOUT } from '../types';
+export function LLMBlock({ block, participants, onHover, onClick }) {
+    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 = (_jsxs("g", { className: "cursor-pointer group", onMouseEnter: (e) => onHover?.(block, e.clientX, e.clientY), onMouseLeave: () => onHover?.(null, 0, 0), onClick: () => onClick?.(block), children: [_jsx("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' : ''}
+        ` }), _jsx("g", { transform: `translate(${x + 6}, ${y + height / 2 - 5})`, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", className: isError ? COLORS.error.text : COLORS.llm.text, children: _jsx("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" }) }) }), _jsx("text", { x: x + 20, y: y + height / 2, dominantBaseline: "middle", className: `text-[10px] font-medium ${isError ? COLORS.error.text : COLORS.llm.text} fill-current`, children: "LLM" }), isRunning && (_jsx("circle", { cx: x + LAYOUT.blockWidth - 8, cy: y + 8, r: 3, className: "fill-violet-500 animate-pulse" })), isError && (_jsx("circle", { cx: x + LAYOUT.blockWidth - 8, cy: y + 8, r: 3, className: "fill-red-500" }))] }));
+    // Wrap in clickable group if we have an LLM call ID
+    if (block.llmCallId) {
+        return (_jsx("g", { style: { cursor: 'pointer' }, onClick: () => navigate(`llm-calls/${block.llmCallId}`), children: content }));
+    }
+    return content;
+}
+//# sourceMappingURL=LLMBlock.js.map

package/dist/components/debug/communication/elements/LLMBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LLMBlock.js","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/LLMBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AASzC,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAiB;IAChF,MAAM,QAAQ,GAAG,gBAAgB,EAAE,CAAA;IACnC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,aAAa,CAAC,CAAA;IAE1E,IAAI,CAAC,WAAW,EAAE,CAAC;QAClB,OAAO,IAAI,CAAA;IACZ,CAAC;IAED,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,GAAG,WAAW,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,gBAAgB,GAAG,MAAM,CAAC,cAAc,CAAC,GAAG,MAAM,CAAC,gBAAgB,GAAG,CAAC,CAAA;IAC9I,MAAM,CAAC,GAAG,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,CAAA;IACvC,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,CAAA;IACtB,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAA;IAEzE,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,KAAK,SAAS,CAAA;IAC5C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,KAAK,OAAO,CAAA;IAExC,MAAM,OAAO,GAAG,CACf,aACC,SAAS,EAAC,sBAAsB,EAChC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,EAC3D,YAAY,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,EACzC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC,aAG/B,eACC,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,SAAS,EAAE;YACH,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI;YAClF,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM;;;;YAIjD,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;SACnC,GACJ,EAGF,YAAG,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,YACzD,cAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,YACnH,eACC,CAAC,EAAC,2GAA2G,EAC7G,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,EACf,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,GACrB,GACG,GACH,EAGJ,eACC,CAAC,EAAE,CAAC,GAAG,EAAE,EACT,CAAC,EAAE,CAAC,GAAG,MAAM,GAAG,CAAC,EACjB,gBAAgB,EAAC,QAAQ,EACzB,SAAS,EAAE,2BAA2B,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,eAAe,oBAG5F,EAGN,SAAS,IAAI,CACb,iBACC,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,EAC7B,EAAE,EAAE,CAAC,GAAG,CAAC,EACT,CAAC,EAAE,CAAC,EACJ,SAAS,EAAC,+BAA+B,GACxC,CACF,EAEA,OAAO,IAAI,CACX,iBACC,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC,UAAU,GAAG,CAAC,EAC7B,EAAE,EAAE,CAAC,GAAG,CAAC,EACT,CAAC,EAAE,CAAC,EACJ,SAAS,EAAC,cAAc,GACvB,CACF,IACE,CACJ,CAAA;IAED,oDAAoD;IACpD,IAAI,KAAK,CAAC,SAAS,EAAE,CAAC;QACrB,OAAO,CACN,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,KAAK,CAAC,SAAS,EAAE,CAAC,YACtF,OAAO,GACL,CACJ,CAAA;IACF,CAAC;IAED,OAAO,OAAO,CAAA;AACf,CAAC"}

package/dist/components/debug/communication/elements/MessageArrow.d.ts

@@ -8,3 +8,4 @@ interface MessageArrowProps {
 }
 export declare function MessageArrow({ message, participants, showLabel, onHover, onClick }: MessageArrowProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
+//# sourceMappingURL=MessageArrow.d.ts.map

package/dist/components/debug/communication/elements/MessageArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageArrow.d.ts","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/MessageArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAGlE,UAAU,iBAAiB;IAC1B,OAAO,EAAE,cAAc,CAAA;IACvB,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxE,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,KAAK,IAAI,CAAA;CAC3C;AAED,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,SAAiB,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,iBAAiB,kDA2G7G"}

package/dist/components/debug/communication/elements/MessageArrow.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LAYOUT } from '../types';
+export function MessageArrow({ message, participants, showLabel = false, onHover, onClick }) {
+    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 (_jsxs("g", { className: "cursor-pointer group", onMouseEnter: (e) => onHover?.(message, e.clientX, e.clientY), onMouseLeave: () => onHover?.(null, 0, 0), onClick: () => onClick?.(message), children: [_jsx("line", { x1: fromX, y1: y, x2: toX, y2: y, stroke: "transparent", strokeWidth: 16 }), _jsx("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 }), _jsx("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" }), _jsx("circle", { cx: fromX, cy: y, r: 2.5, className: "fill-blue-300 group-hover:fill-blue-500 transition-colors" }), showLabel && labelMaxWidth > 40 && (_jsxs("g", { children: [_jsx("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 }), _jsx("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)`,
+                        }, children: _jsx("tspan", { children: truncatedContent.length > labelMaxWidth / 5
+                                ? truncatedContent.slice(0, Math.floor(labelMaxWidth / 5)) + '…'
+                                : truncatedContent }) })] }))] }));
+}
+//# sourceMappingURL=MessageArrow.js.map

package/dist/components/debug/communication/elements/MessageArrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageArrow.js","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/MessageArrow.tsx"],"names":[],"mappings":"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"}

package/dist/components/debug/communication/elements/ToolBlock.d.ts

@@ -7,3 +7,4 @@ interface ToolBlockProps {
 }
 export declare function ToolBlock({ block, participants, onHover, onClick }: ToolBlockProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
+//# sourceMappingURL=ToolBlock.d.ts.map

package/dist/components/debug/communication/elements/ToolBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolBlock.d.ts","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/ToolBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAGpE,UAAU,cAAc;IACvB,KAAK,EAAE,gBAAgB,CAAA;IACvB,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC3C;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,cAAc,kDAwFlF"}

package/dist/components/debug/communication/elements/ToolBlock.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { COLORS, LAYOUT } from '../types';
+export function ToolBlock({ block, participants, onHover, onClick }) {
+    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 (_jsxs("g", { className: "cursor-pointer group", onMouseEnter: (e) => onHover?.(block, e.clientX, e.clientY), onMouseLeave: () => onHover?.(null, 0, 0), onClick: () => onClick?.(block), children: [_jsx("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' : ''}
+        ` }), _jsx("g", { transform: `translate(${x + 6}, ${y + height / 2 - 5})`, children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", className: isError ? COLORS.error.text : COLORS.tool.text, children: _jsx("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" }) }) }), _jsx("text", { x: x + 20, y: y + height / 2, dominantBaseline: "middle", className: `text-[9px] font-mono ${isError ? COLORS.error.text : COLORS.tool.text} fill-current`, children: toolName }), isRunning && (_jsx("circle", { cx: x + LAYOUT.blockWidth - 8, cy: y + 8, r: 3, className: "fill-teal-500 animate-pulse" })), isError && (_jsx("circle", { cx: x + LAYOUT.blockWidth - 8, cy: y + 8, r: 3, className: "fill-red-500" }))] }));
+}
+//# sourceMappingURL=ToolBlock.js.map

package/dist/components/debug/communication/elements/ToolBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolBlock.js","sourceRoot":"","sources":["../../../../../src/components/debug/communication/elements/ToolBlock.tsx"],"names":[],"mappings":"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"}

package/dist/components/debug/communication/hooks/useDiagramData.d.ts

@@ -10,3 +10,4 @@ export declare function useDiagramData({ events, agents }: UseDiagramDataProps):
     formatIdleDuration: (ms: number) => string;
 };
 export {};
+//# sourceMappingURL=useDiagramData.d.ts.map

package/dist/components/debug/communication/hooks/useDiagramData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDiagramData.d.ts","sourceRoot":"","sources":["../../../../../src/components/debug/communication/hooks/useDiagramData.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAgB,WAAW,EAAE,MAAM,aAAa,CAAA;AAE5D,OAAO,KAAK,EAAE,WAAW,EAA6G,MAAM,UAAU,CAAA;AAGtJ,UAAU,mBAAmB;IAC5B,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,MAAM,EAAE,aAAa,EAAE,CAAA;CACvB;AAED,wBAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,mBAAmB,GAAG,WAAW,GAAG;IACtF,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAA;IAC3C,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;CAC1C,CAsOA"}