@agentprojectcontext/apx 1.42.2 → 1.44.0

package/src/host/daemon/api/transcribe.js

@@ -2,10 +2,49 @@
 // Raw audio bytes in the body. Headers:
 //   X-Audio-Format  webm | ogg | wav | mp3 (defaults to webm)
 //   X-Language      ISO code or "auto"
-//   X-Provider      auto | local | openai   (overrides config)
+//   X-Provider      auto | local | openai | custom   (overrides config)
 //
 // Shared by overlay, telegram voice messages, and any external caller.
 export function register(app) {
+  // GET /transcribe/providers — STT engine list + availability for the web
+  // admin (mirror of /tts/providers). local = embedded faster-whisper;
+  // openai = cloud Whisper; custom = any OpenAI-compatible server (mlx-audio
+  // on Metal, a Radeon/NVIDIA box on the LAN, a remote endpoint).
+  app.get("/transcribe/providers", async (_req, res) => {
+    try {
+      const { readConfig } = await import("#core/config/index.js");
+      const { listSttProviders } = await import("#core/voice/transcription.js");
+      res.json(listSttProviders(readConfig()));
+    } catch (e) {
+      res.status(500).json({ error: e.message });
+    }
+  });
+
+  // GET /transcribe/hardware — detected machine + the recommended local backend
+  // (mlx on Apple Silicon, faster-whisper cuda on NVIDIA, else CPU). Drives the
+  // "engine adapts itself" UX in the web admin.
+  app.get("/transcribe/hardware", async (_req, res) => {
+    try {
+      const { detectHardware, recommendStt } = await import("#core/voice/stt-hardware.js");
+      const hw = detectHardware();
+      res.json({ hardware: hw, recommended: recommendStt(hw) });
+    } catch (e) {
+      res.status(500).json({ error: e.message });
+    }
+  });
+
+  // GET /transcribe/models?backend=faster|mlx — model catalog with on-disk
+  // status (downloaded? size) for the model-manager UI.
+  app.get("/transcribe/models", async (req, res) => {
+    try {
+      const backend = String(req.query.backend || "faster");
+      const { listSttModels } = await import("#core/voice/stt-models.js");
+      res.json({ backend, models: listSttModels(backend) });
+    } catch (e) {
+      res.status(500).json({ error: e.message });
+    }
+  });
+
   // GET /transcribe/warmup — load the local whisper model (if needed) and reset
   // its idle watchdog. Callers (e.g. the desktop window) ping this while open so
   // the first real utterance doesn't pay the cold-load cost.

package/src/host/daemon/whisper-server.js

@@ -23,6 +23,7 @@ const WHISPER_SERVER = path.join(__dirname, "whisper-server.py");
 
 let _serverProcess = null;
 let _serverModel = null;
+let _serverBackend = null;   // "faster" | "mlx" — restart when this changes too
 
 function _sleep(ms) {
   return new Promise((r) => setTimeout(r, ms));
@@ -39,14 +40,14 @@ async function _isServerHealthy() {
   }
 }
 
-async function _serverModelName() {
+async function _serverHealthInfo() {
   try {
     const res = await fetch(`http://127.0.0.1:${WHISPER_LOCAL_PORT}/health`, {
       signal: AbortSignal.timeout(800),
     });
     if (!res.ok) return null;
     const j = await res.json();
-    return j?.model || null;
+    return { model: j?.model || null, backend: j?.backend || "faster" };
   } catch {
     return null;
   }
@@ -82,17 +83,20 @@ async function _killOrphanWhisper() {
 
 export async function ensureWhisperServer(opts) {
   const model = opts.model || DEFAULT_LOCAL.model;
+  const backend = opts.backend || "faster";
 
-  if (_serverProcess && _serverModel === model) {
+  if (_serverProcess && _serverModel === model && _serverBackend === backend) {
     if (await _isServerHealthy()) return;
     _serverProcess = null;
     _serverModel = null;
+    _serverBackend = null;
   }
 
   if (!_serverProcess) {
-    const existing = await _serverModelName();
-    if (existing === model) {
+    const existing = await _serverHealthInfo();
+    if (existing && existing.model === model && existing.backend === backend) {
       _serverModel = model;
+      _serverBackend = backend;
       return;
     }
     if (existing) {
@@ -104,16 +108,18 @@ export async function ensureWhisperServer(opts) {
     try { _serverProcess.kill(); } catch {}
     _serverProcess = null;
     _serverModel = null;
+    _serverBackend = null;
     await _sleep(300);
   }
 
-  await _spawnWhisper(opts, model, /* retried */ false);
+  await _spawnWhisper(opts, model, backend, /* retried */ false);
 }
 
-async function _spawnWhisper(opts, model, retried) {
+async function _spawnWhisper(opts, model, backend, retried) {
   const args = [
     WHISPER_SERVER,
     "--port", String(WHISPER_LOCAL_PORT),
+    "--backend", String(backend || "faster"),
     "--model", model,
     "--device", String(opts.device || DEFAULT_LOCAL.device),
     "--compute-type", String(opts.compute_type || DEFAULT_LOCAL.compute_type),
@@ -127,11 +133,13 @@ async function _spawnWhisper(opts, model, retried) {
 
   _serverProcess = proc;
   _serverModel = model;
+  _serverBackend = backend;
 
   proc.on("exit", () => {
     if (_serverProcess === proc) {
       _serverProcess = null;
       _serverModel = null;
+      _serverBackend = null;
     }
   });
 
@@ -167,8 +175,9 @@ async function _spawnWhisper(opts, model, retried) {
     if (!retried && /address already in use|errno 48|eaddrinuse/i.test(msg)) {
       _serverProcess = null;
       _serverModel = null;
+      _serverBackend = null;
       await _killOrphanWhisper();
-      return _spawnWhisper(opts, model, /* retried */ true);
+      return _spawnWhisper(opts, model, backend, /* retried */ true);
     }
     throw e;
   }
@@ -210,6 +219,7 @@ export async function shutdownWhisperServer() {
     try { _serverProcess.kill(); } catch {}
     _serverProcess = null;
     _serverModel = null;
+    _serverBackend = null;
   } else {
     try {
       await fetch(`http://127.0.0.1:${WHISPER_LOCAL_PORT}/shutdown`, {

package/src/host/daemon/whisper-server.py

@@ -39,6 +39,9 @@ def _touch():
     _last_used = time.monotonic()
 
 
+_mlx_loaded = False  # mlx_whisper caches models internally; we just track readiness
+
+
 def _load_model_if_needed(model_name, device, compute_type):
     global _model, _model_name
     if _model is not None and _model_name == model_name:
@@ -51,11 +54,61 @@ def _load_model_if_needed(model_name, device, compute_type):
     return m
 
 
+def _warmup_model():
+    """Eagerly load the active backend's model into RAM. Returns True if loaded."""
+    global _mlx_loaded
+    if _Handler.backend == "mlx":
+        import mlx_whisper  # noqa: F401  (raises ImportError if the stack is missing)
+        try:
+            from mlx_whisper.load_models import load_model
+            load_model(_Handler.model_name)
+            _mlx_loaded = True
+        except Exception:
+            pass  # first transcribe will load it lazily
+        return _mlx_loaded
+    _load_model_if_needed(_Handler.model_name, _Handler.device, _Handler.compute_type)
+    return _model is not None
+
+
+def _transcribe_file(audio_path, language, beam_size):
+    """Backend-agnostic transcription → result dict. Raises on failure."""
+    global _mlx_loaded
+    if _Handler.backend == "mlx":
+        import mlx_whisper
+        kw = {"path_or_hf_repo": _Handler.model_name}
+        if language:
+            kw["language"] = language
+        r = mlx_whisper.transcribe(audio_path, **kw)
+        _mlx_loaded = True
+        return {
+            "ok": True,
+            "text": (r.get("text") or "").strip(),
+            "language": r.get("language"),
+            "language_probability": None,
+            "duration": None,
+            "model": _Handler.model_name,
+            "compute_type": "mlx-metal",
+        }
+    m = _load_model_if_needed(_Handler.model_name, _Handler.device, _Handler.compute_type)
+    segments, info = m.transcribe(audio_path, beam_size=beam_size, language=language)
+    text = " ".join(seg.text.strip() for seg in segments).strip()
+    return {
+        "ok": True,
+        "text": text,
+        "language": info.language,
+        "language_probability": round(info.language_probability, 4),
+        "duration": round(info.duration, 2) if hasattr(info, "duration") else None,
+        "model": _model_name,
+        "compute_type": _Handler.compute_type,
+    }
+
+
 # ---------------------------------------------------------------------------
 # HTTP handler
 # ---------------------------------------------------------------------------
 
 class _Handler(BaseHTTPRequestHandler):
+    backend = "faster"   # "faster" (CTranslate2, CPU/CUDA) | "mlx" (Apple Metal)
     model_name = "small"
     device = "cpu"
     compute_type = "int8"
@@ -89,10 +142,12 @@ class _Handler(BaseHTTPRequestHandler):
     def do_GET(self):
         if self.path == "/health":
             _touch()
+            loaded = _mlx_loaded if _Handler.backend == "mlx" else (_model is not None)
             self._send_json(200, {
                 "ok": True,
+                "backend": _Handler.backend,
                 "model": _model_name or _Handler.model_name,
-                "loaded": _model is not None,
+                "loaded": loaded,
             })
         elif self.path == "/warmup":
             # Eagerly load the model into RAM (no audio needed) and reset the
@@ -101,8 +156,10 @@ class _Handler(BaseHTTPRequestHandler):
             _touch()
             with _model_lock:
                 try:
-                    _load_model_if_needed(_Handler.model_name, _Handler.device, _Handler.compute_type)
-                    self._send_json(200, {"ok": True, "loaded": _model is not None, "model": _model_name})
+                    loaded = _warmup_model()
+                    self._send_json(200, {"ok": True, "loaded": loaded, "model": _Handler.model_name, "backend": _Handler.backend})
+                except ImportError as e:
+                    self._send_json(500, {"ok": False, "error": f"{_Handler.backend} backend not installed: {e}"})
                 except Exception as e:
                     self._send_json(500, {"ok": False, "error": f"model load failed: {e}"})
         else:
@@ -124,29 +181,14 @@ class _Handler(BaseHTTPRequestHandler):
             beam_size = int(self.headers.get("X-Beam-Size") or 3)
 
             with _model_lock:
-                try:
-                    m = _load_model_if_needed(_Handler.model_name, _Handler.device, _Handler.compute_type)
-                except ImportError:
-                    self._send_json(500, {"ok": False, "error": "faster-whisper not installed"})
-                    return
-                except Exception as e:
-                    self._send_json(500, {"ok": False, "error": f"model load failed: {e}"})
-                    return
-
                 import tempfile
                 tmp = tempfile.NamedTemporaryFile(suffix=f".{audio_format}", delete=False)
                 try:
                     tmp.write(audio_bytes)
                     tmp.close()
-                    segments, info = m.transcribe(tmp.name, beam_size=beam_size, language=language)
-                    text = " ".join(seg.text.strip() for seg in segments).strip()
-                    self._send_json(200, {
-                        "ok": True, "text": text,
-                        "language": info.language,
-                        "language_probability": round(info.language_probability, 4),
-                        "duration": round(info.duration, 2) if hasattr(info, "duration") else None,
-                        "model": _model_name,
-                    })
+                    self._send_json(200, _transcribe_file(tmp.name, language, beam_size))
+                except ImportError as e:
+                    self._send_json(500, {"ok": False, "error": f"{_Handler.backend} backend not installed: {e}"})
                 except Exception as e:
                     self._send_json(500, {"ok": False, "error": f"chunk transcription failed: {e}"})
                 finally:
@@ -168,29 +210,11 @@ class _Handler(BaseHTTPRequestHandler):
 
             with _model_lock:
                 try:
-                    m = _load_model_if_needed(_Handler.model_name, _Handler.device, _Handler.compute_type)
-                except ImportError:
-                    self._send_json(500, {
-                        "ok": False,
-                        "error": "faster-whisper not installed — run: pip3 install faster-whisper",
-                    })
-                    return
-                except Exception as e:
-                    self._send_json(500, {"ok": False, "error": f"model load failed: {e}"})
-                    return
-
-                try:
-                    segments, info = m.transcribe(audio_path, beam_size=beam_size, language=language)
-                    text = " ".join(seg.text.strip() for seg in segments).strip()
-                    self._send_json(200, {
-                        "ok": True,
-                        "text": text,
-                        "language": info.language,
-                        "language_probability": round(info.language_probability, 4),
-                        "duration": round(info.duration, 2),
-                        "model": _model_name,
-                        "compute_type": _Handler.compute_type,
-                    })
+                    self._send_json(200, _transcribe_file(audio_path, language, beam_size))
+                except ImportError as e:
+                    hint = ("pip3 install faster-whisper" if _Handler.backend == "faster"
+                            else "pip3 install mlx-whisper")
+                    self._send_json(500, {"ok": False, "error": f"{_Handler.backend} backend not installed — run: {hint} ({e})"})
                 except Exception as e:
                     self._send_json(500, {"ok": False, "error": f"transcription failed: {e}"})
 
@@ -231,12 +255,14 @@ def main():
 
     parser = argparse.ArgumentParser(description="Persistent APX Whisper server")
     parser.add_argument("--port", type=int, default=18765)
+    parser.add_argument("--backend", default="faster", choices=["faster", "mlx"])
     parser.add_argument("--model", default="small")
     parser.add_argument("--device", default="cpu")
     parser.add_argument("--compute-type", dest="compute_type", default="int8")
     parser.add_argument("--idle-minutes", dest="idle_minutes", type=int, default=10)
     args = parser.parse_args()
 
+    _Handler.backend = args.backend
     _Handler.model_name = args.model
     _Handler.device = args.device
     _Handler.compute_type = args.compute_type
@@ -252,6 +278,7 @@ def main():
     print(json.dumps({
         "status": "ready",
         "port": args.port,
+        "backend": args.backend,
         "model": args.model,
         "idle_minutes": args.idle_minutes,
     }), flush=True)

package/src/interfaces/cli/commands/desktop.js

@@ -16,19 +16,26 @@ import {
   WIN_RUN_KEY,
   WIN_RUN_NAME,
 } from "#core/desktop/autostart.js";
+import {
+  DESKTOP_MAIN,
+  readPid, writePid, clearPid, pidAlive, isDesktopRunning,
+  findElectron as _findElectron,
+  buildElectronSpawn as _buildElectronSpawn,
+  startDesktopDetached,
+  stopDesktop,
+} from "#core/desktop/process.js";
 
 // Re-exports — kept so existing tests (tests/desktop-autostart.test.js)
 // can still import these directly from the CLI module.
 export const getApxRunner = _getApxRunner;
 export const buildPlist   = _buildPlist;
 export const autostartIsOn = _autostartIsOn;
+export const findElectron = _findElectron;
+export const buildElectronSpawn = _buildElectronSpawn;
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname  = path.dirname(__filename);
 
-const DESKTOP_MAIN  = path.resolve(__dirname, "../../desktop/main.js");
-const DESKTOP_PID   = path.join(os.homedir(), ".apx", "desktop.pid");
-
 // ── ANSI ─────────────────────────────────────────────────────────────────────
 const c = { reset:"\x1b[0m", bold:"\x1b[1m", dim:"\x1b[2m", green:"\x1b[32m",
             red:"\x1b[31m", yellow:"\x1b[33m", cyan:"\x1b[36m", gray:"\x1b[90m" };
@@ -38,71 +45,9 @@ const fmt = {
   cyan:(s)=>`${c.cyan}${s}${c.reset}`,  gray:(s)=>`${c.gray}${s}${c.reset}`,
 };
 
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function readPid() {
-  try { return parseInt(fs.readFileSync(DESKTOP_PID, "utf8").trim(), 10); } catch { return null; }
-}
-function writePid(pid) {
-  fs.mkdirSync(path.dirname(DESKTOP_PID), { recursive: true });
-  fs.writeFileSync(DESKTOP_PID, String(pid));
-}
-function clearPid() { try { fs.unlinkSync(DESKTOP_PID); } catch {} }
-function pidAlive(pid) {
-  if (!pid) return false;
-  try { process.kill(pid, 0); return true; } catch { return false; }
-}
-
-// Validate that an electron candidate actually runs (a pnpm shim can exist as a
-// file while its underlying package was never built — `--version` smokes that out).
-function electronRuns(cmd, argv) {
-  try {
-    execFileSync(cmd, argv, { stdio: "ignore", timeout: 5000 });
-    return true;
-  } catch { return false; }
-}
-
-// Returns a descriptor used by buildElectronSpawn():
-//   absolute path to a real electron binary,
-//   absolute path to electron's cli.js (".js" → run via node),
-//   "npx" as a last-resort fallback (downloads/uses electron via npx).
-// Never returns null — npx is always attempted so the user gets a real error
-// from the spawn (and a one-time download) rather than a silent no-op.
-export function findElectron() {
-  // commands/ is 4 levels under the project root: src/interfaces/cli/commands/
-  const root = path.resolve(__dirname, "..", "..", "..", "..");
-  const bin  = path.join(root, "node_modules", ".bin", "electron");
-  // The .bin shim is a shell wrapper that `exec node …`. Under launchd's
-  // minimal PATH (`/usr/bin:/bin:/usr/sbin:/sbin`) `node` isn't found, so the
-  // shim fails. We try it first (cheap, works for terminal use) and then fall
-  // back to invoking electron's cli.js directly with process.execPath, which
-  // is launchd-safe.
-  if (fs.existsSync(bin) && electronRuns(bin, ["--version"])) return bin;
-
-  const cli = path.join(root, "node_modules", "electron", "cli.js");
-  if (fs.existsSync(cli) && electronRuns(process.execPath, [cli, "--version"])) return cli;
-
-  // Global electron on PATH (works from terminal, usually not from launchd)
-  try {
-    const which = execFileSync("which", ["electron"], { stdio: ["ignore", "pipe", "ignore"] }).toString().trim();
-    if (which && electronRuns(which, ["--version"])) return which;
-  } catch {}
-
-  // Last resort: npx (pulls electron if absent). Will ENOENT under launchd if
-  // npx isn't on PATH — that's why we try cli.js BEFORE this.
-  return "npx";
-}
-
-// Turn a findElectron() descriptor + the app entry into a { cmd, argv } pair.
-export function buildElectronSpawn(descriptor, mainPath, port) {
-  if (descriptor === "npx") {
-    return { cmd: "npx", argv: ["-y", "electron", mainPath, "--port", port] };
-  }
-  if (descriptor.endsWith(".js")) {
-    return { cmd: process.execPath, argv: [descriptor, mainPath, "--port", port] };
-  }
-  return { cmd: descriptor, argv: [mainPath, "--port", port] };
-}
+// PID + electron-resolution helpers live in #core/desktop/process.js (shared
+// with the daemon's /desktop/{start,stop} endpoints). findElectron and
+// buildElectronSpawn are re-exported above for the existing tests.
 
 // ── Commands ──────────────────────────────────────────────────────────────────
 

package/src/interfaces/desktop/main.js

@@ -99,9 +99,12 @@ function getTheme() {
   try {
     const cfg = JSON.parse(fs.readFileSync(CONFIG_PATH, "utf8"));
     const t = cfg?.desktop?.theme;
-    if (t === "light" || t === "dark") return t;
+    if (t === "light" || t === "dark" || t === "system") return t;
   } catch {}
-  return "light";
+  // "system" follows the OS appearance (the renderer resolves it via
+  // prefers-color-scheme). It's the default so a fresh install matches the
+  // user's macOS/Windows light/dark setting out of the box.
+  return "system";
 }
 
 // Resolve the agent's display name from ~/.apx/identity.json + config.
@@ -316,6 +319,25 @@ function hideOverlay() {
   if (isRecording) stopRecording();
 }
 
+// Soft-restart the floating window: re-read ~/.apx/config.json, move the window
+// to the (possibly new) configured position, and reload the renderer so it
+// re-applies theme/position/shortcut. Triggered by the web admin's Restart
+// button via a "reload" WS event — far cheaper than killing + relaunching the
+// Electron process (which would drop the tray + global shortcut). Recreates the
+// window if it was closed.
+function reloadDesktopWindow() {
+  try {
+    if (!mainWindow) { createWindow(); showOverlay(); return; }
+    const [, currentH] = mainWindow.getSize();
+    const origin = getWindowOrigin(currentH);
+    mainWindow.setPosition(origin.x, origin.y);
+    mainWindow.webContents.reload();
+    showOverlay();
+  } catch (e) {
+    console.warn("desktop: reload failed —", e.message);
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Global shortcut: Cmd/Ctrl+Shift+Space toggles recording
 // ---------------------------------------------------------------------------
@@ -527,8 +549,10 @@ function transcribeChunk(buf, format, language) {
         "Content-Length": buf.length,
         "X-Audio-Format": format,
         "X-Language": language,
-        // Overlay is real-time → local whisper only. Never fall back to OpenAI.
-        "X-Provider": "local",
+        // No X-Provider override: the desktop honours the configured STT engine
+        // (transcription.provider in ~/.apx/config.json) — local faster-whisper,
+        // OpenAI cloud, or a custom OpenAI-compatible server (mlx-audio / a
+        // Radeon/NVIDIA box on the LAN). Set it in the web admin → /m/voice.
         ...(token ? { "Authorization": `Bearer ${token}` } : {}),
       },
     };
@@ -585,6 +609,10 @@ function connectDaemon() {
       wsConn.on("message", (raw) => {
         let msg;
         try { msg = JSON.parse(raw.toString()); } catch { return; }
+        // "reload" is a control event from the web admin's Restart button (POST
+        // /desktop/restart). Re-read config, reposition, and soft-reload the
+        // renderer so theme/position changes apply without killing the process.
+        if (msg && msg.type === "reload") { reloadDesktopWindow(); return; }
         // Forward all daemon events to the renderer
         mainWindow?.webContents.send("daemon-event", msg);
       });

package/src/interfaces/desktop/renderer.js

@@ -84,7 +84,7 @@
   let turnWatchdog = null;        // flushes the queue if a segment's TTS hangs
 
   let history = [];               // [{role:'user'|'assistant', content}] sent to daemon for context
-  let theme = "light";
+  let theme = "system";           // "light" | "dark" | "system" (config value, pre-resolution)
   let position = "right";
   let agentName = "Superagente";  // overwritten from config on first render
 
@@ -161,20 +161,20 @@
   // the agent name stays wrong until the user changes mode.
   let configReady = false;
   Promise.all([
-    window.apx?.getTheme?.()     ?? "light",
+    window.apx?.getTheme?.()     ?? "system",
     window.apx?.getPosition?.()  ?? "right",
     window.apx?.getShortcut?.()  ?? "CommandOrControl+G",
     window.apx?.getAgentName?.() ?? "Superagente",
     window.apx?.getVoiceTiming?.() ?? null,
   ]).then(([th, pos, shortcut, name, timing]) => {
-    theme = th || "light";
+    theme = th || "system";
     position = pos || "right";
     agentName = (name && String(name).trim()) || "Superagente";
     if (timing) {
       if (typeof timing.silence_ms === "number") SILENCE_MS = timing.silence_ms;
       if (typeof timing.voice_rms === "number")  VOICE_RMS  = timing.voice_rms;
     }
-    document.documentElement.setAttribute("data-theme", theme);
+    applyTheme(theme);
     setPosition(position);
     captionShortcut = shortcut || "CommandOrControl+G";
     configReady = true;
@@ -186,13 +186,34 @@
     if (input) input.placeholder = `Hablá o escribí a ${agentName}…`;
     render();
   }).catch(() => {
-    document.documentElement.setAttribute("data-theme", "light");
+    applyTheme("system");
     setPosition("right");
     captionShortcut = "CommandOrControl+G";
     configReady = true;
     render();
   });
 
+  // Resolve the configured theme to a concrete data-theme value. "system"
+  // follows the OS appearance via prefers-color-scheme; "light"/"dark" are
+  // used verbatim. We also subscribe to OS changes so a window left on
+  // "system" flips live when the user toggles macOS/Windows dark mode.
+  function prefersDark() {
+    try { return !!(window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches); }
+    catch { return false; }
+  }
+  function resolveTheme(pref) {
+    return pref === "system" ? (prefersDark() ? "dark" : "light") : (pref || "light");
+  }
+  function applyTheme(pref) {
+    theme = pref || "system";
+    document.documentElement.setAttribute("data-theme", resolveTheme(theme));
+  }
+  try {
+    window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
+      if (theme === "system") document.documentElement.setAttribute("data-theme", resolveTheme("system"));
+    });
+  } catch {}
+
   function setPosition(p) {
     $root.classList.remove("pos-left", "pos-center", "pos-right");
     $root.classList.add("pos-" + p);