qol-tray-dev-logginglisted

# qol-tray Frontend Logging Convention ## The Rule **Never use `console.log`, `console.error`, or `console.warn` for diagnostic logs in qol-tray's frontend.** Use the `createDebug(namespace)` utility from `ui/lib/debug.js`. The debug system already exists, has a uniform on/off toggle, and assigns a consistent color per namespace for visual scanning in the console. Raw `console.*` calls: - Can't be toggled off, spamming the console in production - Don't get the colored namespace prefix, making them hard to find - Break the scannable log-grepping the existing namespaces support - Will be caught in review ## The Debug Utility Lives at `ui/lib/debug.js`. Exports: - `createDebug(namespace)` — returns a `log` function for that namespace. Callable as `log(...args)`. - `setDebugEnabled(on)` — global toggle, persists to `localStorage['qol-debug']`. - `isDebugEnabled()` — read the current state. - `elLabel(el)` — formats a DOM element as `tag.class1.class2` for logging. - `rectLabel(r)` — formats a rect as `(x,y wxh)`. Accepts both `DOMRect` (`left`/`top`) and registry-style `{x, y, width, height}` shapes. Returns `none` for null. - `pointLabel(p)` — formats `{x, y}` as `(x,y)` with rounding. Returns `(?)` for null, so pass nullable targets directly instead of branching inline. Additional helpers for specific cases: - `surfaceLabel(el)` from `ui/lib/spatial-nav.js` — formats a focusable surface with more context. Enabling logs at runtime: - From the Developer tab → toggle "Debu