(null);
+
+ // Resize handlers
+ const handleMouseDown = useCallback((e: React.MouseEvent) => {
+ e.preventDefault();
+ setIsResizing(true);
+ }, []);
+
+ const handleMouseMove = useCallback(
+ (e: MouseEvent) => {
+ if (!isResizing) return;
+
+ if (config.position === "bottom") {
+ const newHeight = window.innerHeight - e.clientY;
+ const minHeight = 200;
+ const maxHeight = window.innerHeight * 0.8;
+ setPanelHeight(Math.max(minHeight, Math.min(maxHeight, newHeight)));
+ } else {
+ const newWidth = window.innerWidth - e.clientX;
+ const minWidth = 500;
+ const maxWidth = window.innerWidth * 0.8;
+ setPanelWidth(Math.max(minWidth, Math.min(maxWidth, newWidth)));
+ }
+ },
+ [isResizing, config.position],
+ );
+
+ const handleMouseUp = useCallback(() => {
+ setIsResizing(false);
+ }, []);
+
+ // Add global mouse event listeners
+ React.useEffect(() => {
+ if (isResizing) {
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ document.body.style.cursor =
+ config.position === "bottom" ? "ns-resize" : "ew-resize";
+ document.body.style.userSelect = "none";
+ } else {
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ document.body.style.cursor = "";
+ document.body.style.userSelect = "";
+ }
+
+ return () => {
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ document.body.style.cursor = "";
+ document.body.style.userSelect = "";
+ };
+ }, [isResizing, handleMouseMove, handleMouseUp, config.position]);
+
+ // Add keyboard event listener for Escape key
+ React.useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if (e.key === "Escape") {
+ onClose?.();
+ }
+ };
+
+ document.addEventListener("keydown", handleKeyDown);
+ return () => {
+ document.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [onClose]);
+
+ return (
+
+ {/* Resize Handle */}
+
+ );
+}
+
+export function DevtoolsPanelContent({
+ events,
+ isCapturing,
+ toggleCapturing: onToggleCapturing,
+ clearEvents: onClearEvents,
+ onClose,
+ onTogglePosition,
+ position,
+ modelId,
+}: Omit & {
+ position: DevtoolsConfig["position"] | undefined;
+}) {
const [showFilters] = useState(false);
const [showSearchSuggestions, setShowSearchSuggestions] = useState(false);
const [filters, setFilters] = useState({
@@ -118,13 +273,6 @@ export function DevtoolsPanel({
}
}, [availableStoreIds, selectedStoreId]);
- // Resize functionality
- const [isResizing, setIsResizing] = useState(false);
- const [panelHeight, setPanelHeight] = useState(config.height || 300);
- const [panelWidth, setPanelWidth] = useState(config.width || 500);
- const panelRef = useRef(null);
- const resizeRef = useRef(null);
-
// Animation state for REC indicator
const [isReceivingEvents, setIsReceivingEvents] = useState(false);
const lastEventCountRef = useRef(events.length);
@@ -214,72 +362,6 @@ export function DevtoolsPanel({
filters.toolNames.length > 0 ||
filters.searchQuery.trim().length > 0;
- // Resize handlers
- const handleMouseDown = useCallback((e: React.MouseEvent) => {
- e.preventDefault();
- setIsResizing(true);
- }, []);
-
- const handleMouseMove = useCallback(
- (e: MouseEvent) => {
- if (!isResizing) return;
-
- if (config.position === "bottom") {
- const newHeight = window.innerHeight - e.clientY;
- const minHeight = 200;
- const maxHeight = window.innerHeight * 0.8;
- setPanelHeight(Math.max(minHeight, Math.min(maxHeight, newHeight)));
- } else {
- const newWidth = window.innerWidth - e.clientX;
- const minWidth = 500;
- const maxWidth = window.innerWidth * 0.8;
- setPanelWidth(Math.max(minWidth, Math.min(maxWidth, newWidth)));
- }
- },
- [isResizing, config.position],
- );
-
- const handleMouseUp = useCallback(() => {
- setIsResizing(false);
- }, []);
-
- // Add global mouse event listeners
- React.useEffect(() => {
- if (isResizing) {
- document.addEventListener("mousemove", handleMouseMove);
- document.addEventListener("mouseup", handleMouseUp);
- document.body.style.cursor =
- config.position === "bottom" ? "ns-resize" : "ew-resize";
- document.body.style.userSelect = "none";
- } else {
- document.removeEventListener("mousemove", handleMouseMove);
- document.removeEventListener("mouseup", handleMouseUp);
- document.body.style.cursor = "";
- document.body.style.userSelect = "";
- }
-
- return () => {
- document.removeEventListener("mousemove", handleMouseMove);
- document.removeEventListener("mouseup", handleMouseUp);
- document.body.style.cursor = "";
- document.body.style.userSelect = "";
- };
- }, [isResizing, handleMouseMove, handleMouseUp, config.position]);
-
- // Add keyboard event listener for Escape key
- React.useEffect(() => {
- const handleKeyDown = (e: KeyboardEvent) => {
- if (e.key === "Escape") {
- onClose();
- }
- };
-
- document.addEventListener("keydown", handleKeyDown);
- return () => {
- document.removeEventListener("keydown", handleKeyDown);
- };
- }, [onClose]);
-
// Calculate streaming speed metrics (tokens per second, characters per second)
const streamingSpeed = useMemo(() => {
const now = Date.now();
@@ -345,44 +427,7 @@ export function DevtoolsPanel({
}, [events.length]);
return (
-
- {/* Resize Handle */}
-