frontend/js/ui/logging.js

APP.ui.logging = {};

APP.ui.logging.log = function (msg, type = "i") {
    const { $ } = APP.core.utils;
    const consoleHook = $("#sysLog"); // Fixed ID: sysLog from html
    if (!consoleHook) return;
    const div = document.createElement("div");
    div.className = "log-line";
    const ts = new Date().toISOString().split("T")[1].slice(0, 8);
    let color = "#94a3b8"; // dim
    if (type === "g") color = "var(--good)";
    if (type === "w") color = "var(--warn)";
    if (type === "e") color = "var(--bad)";
    if (type === "t") color = "var(--theme)";

    div.innerHTML = `<span class="ts">[${ts}]</span> <span style="color:${color}">${msg}</span>`;
    consoleHook.appendChild(div);
    consoleHook.scrollTop = consoleHook.scrollHeight;
};

APP.ui.logging.setStatus = function (level, text) {
    const { $ } = APP.core.utils;
    const sysDot = $("#sys-dot");
    const sysStatus = $("#sys-status");
    if (!sysDot || !sysStatus) return;
    let color = "var(--text-dim)";
    if (level === "good") color = "var(--good)";
    if (level === "warn") color = "var(--warn)";
    if (level === "bad") color = "var(--bad)";

    sysDot.style.background = color;
    sysDot.style.boxShadow = `0 0 10px ${color}`;
    sysStatus.textContent = text;
    sysStatus.style.color = color === "var(--text-dim)" ? "var(--text-main)" : color;
};

APP.ui.logging.setHfStatus = function (msg) {
    const { $ } = APP.core.utils;
    const el = $("#hfBackendStatus");
    if (el) el.textContent = `HF Backend: ${msg}`;

    if (msg && (msg.toLowerCase().includes("error") || msg.toLowerCase().includes("failed"))) {
        APP.ui.logging.log(msg, "e");
    }
};