window.useWebSocket = function useWebSocket() {
    const { ref, onUnmounted } = Vue;

    const connected = ref(false);
    const logs = ref([]);
    const paused = ref(false);
    let ws = null;
    let reconnectTimer = null;

    function connect() {
        const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
        ws = new WebSocket(`${proto}//${location.host}/ws`);

        ws.onopen = () => { connected.value = true; };
        ws.onclose = () => {
            connected.value = false;
            reconnectTimer = setTimeout(connect, 3000);
        };
        ws.onmessage = (e) => {
            // 使用新数组引用，确保依赖 logs 的 watch/computed 能稳定触发（用于自动滚动到底部）
            const nextLogs = [...logs.value, e.data];
            logs.value = nextLogs.length > 2000 ? nextLogs.slice(-1500) : nextLogs;
        };
    }

    function clear() { logs.value = []; }
    function togglePause() { paused.value = !paused.value; }

    function destroy() {
        if (reconnectTimer) clearTimeout(reconnectTimer);
        if (ws) ws.close();
    }

    return { connected, logs, paused, connect, clear, togglePause, destroy };
};