Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | 24x 11x 11x 24x 24x 24x 24x 24x 11x 2x 2x 2x 11x 11x 11x 24x 606x 604x 604x 604x 604x 24x 16x 24x | import { useState, useEffect, useRef, useCallback } from "react";
export interface DebugMessage {
id: string;
timestamp: Date;
sender: "server" | "frontend";
type: string;
content: string;
protocol?: "websocket" | "http";
}
export function useDebugConsole(activeOutputTab: string) {
const [debugMode, setDebugMode] = useState<boolean>(() => {
try {
return window.localStorage.getItem("unoDebugMode") === "1";
} catch {
return false;
}
});
const [debugMessages, setDebugMessages] = useState<DebugMessage[]>([]);
const [debugMessageFilter, setDebugMessageFilter] = useState<string>("");
const [debugViewMode, setDebugViewMode] = useState<"table" | "tiles">("table");
const debugMessagesContainerRef = useRef<HTMLDivElement | null>(null);
// Listen for debug mode change events from settings dialog
useEffect(() => {
const handler = (ev: any) => {
try {
const newValue = Boolean(ev?.detail?.value);
setDebugMode(newValue);
} catch {
// ignore
}
};
document.addEventListener("debugModeChange", handler as EventListener);
return () =>
document.removeEventListener("debugModeChange", handler as EventListener);
}, []);
const addDebugMessage = useCallback(
(
sender: "server" | "frontend",
type: string,
content: string,
protocol?: "websocket" | "http",
) => {
// Only collect debug messages if debug mode is enabled
if (!debugMode) return;
const message: DebugMessage = {
id: `${Date.now()}-${Math.random()}`,
timestamp: new Date(),
sender,
type,
content,
protocol,
};
setDebugMessages((prev) => {
const updated = [...prev, message];
// Keep last 500 messages to avoid memory issues
return updated.slice(-500);
});
},
[debugMode],
);
// Auto-scroll debug console to latest message
useEffect(() => {
Iif (activeOutputTab === "debug" && debugMessagesContainerRef.current) {
requestAnimationFrame(() => {
debugMessagesContainerRef.current?.scrollTo(
0,
debugMessagesContainerRef.current.scrollHeight,
);
});
}
}, [debugMessages, activeOutputTab]);
return {
debugMode,
setDebugMode,
debugMessages,
setDebugMessages,
debugMessageFilter,
setDebugMessageFilter,
debugViewMode,
setDebugViewMode,
debugMessagesContainerRef,
addDebugMessage,
};
}
|