diff --git a/crates/beaver_shell/src/main.rs b/crates/beaver_shell/src/main.rs
index c02ec0f..d7ca5a7 100644
--- a/crates/beaver_shell/src/main.rs
+++ b/crates/beaver_shell/src/main.rs
@@ -363,7 +363,8 @@ impl AppState {
             match command {
                 UserInterfaceCommand::NewWindow(maybe_url, maybe_features) => {
                     let url = maybe_url.unwrap_or(
-                        Url::parse("beaver://system/index.html").expect("Invalid default URL"),
+                        Url::parse("beaver://system/desktop/index.html")
+                            .expect("Invalid default URL"),
                     );
                     self.open_window(event_loop, url, maybe_features);
                 },
@@ -439,9 +440,10 @@ impl AppState {
     /// Open the settings window.
     #[cfg(feature = "status-tray")]
     fn open_settings_window(self: &Rc<Self>, event_loop: &ActiveEventLoop) {
-        let url =
-            Url::parse("beaver://system/index.html?open=beaver%3A%2F%2Fsettings%2Findex.html")
-                .expect("Invalid URL");
+        let url = Url::parse(
+            "beaver://system/desktop/index.html?open=beaver%3A%2F%2Fsettings%2Findex.html",
+        )
+        .expect("Invalid URL");
         self.open_window(event_loop, url, None);
     }
 
@@ -889,7 +891,7 @@ fn index_url(event_loop: &ActiveEventLoop) -> String {
     if pref_override || mobile_screen {
         "beaver://system/mobile/index.html".into()
     } else {
-        "beaver://system/index.html".into()
+        "beaver://system/desktop/index.html".into()
     }
 }
 
diff --git a/ui/system/app.js b/ui/system/app.js
new file mode 100644
index 0000000..f14fe2d
--- /dev/null
+++ b/ui/system/app.js
@@ -0,0 +1,95 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { WebView } from "./web_view.js";
+import { PairingHandler } from "./p2p.js";
+import { notifications, initAll } from "./services/index.js";
+
+let NEW_FRAME_DEFAULT_URL =
+  navigator.servo.getStringPreference("beaver.start_url");
+
+const windowId = `browser-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+
+navigator.embedder.addEventListener("servoerror", (event) => {
+  console.error(`[Servo] ${event.type} ${event.detail}`);
+});
+
+navigator.embedder.addEventListener("preferencechanged", (event) => {
+  if (event.detail.name == "beaver.start_url") {
+    NEW_FRAME_DEFAULT_URL = event.detail.value;
+  }
+});
+
+// P2P pairing handler
+const pairingHandler = new PairingHandler({
+  onNotificationAdd: notifications.add,
+  onNotificationRemove: notifications.removeByTag,
+});
+
+export function createNewView(layoutManager) {
+  const webView = new WebView(NEW_FRAME_DEFAULT_URL, "", {});
+  layoutManager.addWebView(webView);
+}
+
+export function switchToHomescreen(layoutManager) {
+  if (layoutManager.homescreenWebviewId) {
+    layoutManager.setActiveWebView(layoutManager.homescreenWebviewId);
+  }
+}
+
+export function openView(layoutManager, url, title) {
+  const view = new WebView(url, title, {});
+  layoutManager.addWebView(view);
+}
+
+export function newWebViewBuilder() {
+  return new WebView(NEW_FRAME_DEFAULT_URL, "", {});
+}
+
+export function initApp(layoutManager, isMobileMode, mobileComponents) {
+  const services = initAll(layoutManager, {
+    windowId,
+    isMobileMode,
+    createNewView: () => createNewView(layoutManager),
+    switchToHomescreen: () => switchToHomescreen(layoutManager),
+    openView: (url, title) => openView(layoutManager, url, title),
+    mobileComponents,
+  });
+
+  window.servo = {
+    adoptNewWebView(url, webviewId, browsingContextId, pipelineId) {
+      const attrs = {
+        "adopt-webview-id": webviewId,
+        "adopt-browsing-context-id": browsingContextId,
+        "adopt-pipeline-id": pipelineId,
+      };
+      try {
+        layoutManager.addWebView(new WebView(url, "", attrs));
+      } catch (e) {
+        console.error(e);
+      }
+    },
+
+    openKeyboard(inputType, currentValue, position) {
+      services.keyboard.open({
+        inputType,
+        currentValue,
+        placeholder: "",
+        position,
+      });
+    },
+
+    closeEmbedderControl(controlId) {
+      services.keyboard.close();
+    },
+  };
+
+  // Open URL from query params if present
+  const params = new URLSearchParams(window.location.search);
+  const openValue = params.get("open");
+  if (openValue) {
+    layoutManager.addWebView(new WebView(openValue, "", {}));
+  }
+
+  return { services, pairingHandler };
+}
+
diff --git a/ui/system/index.html b/ui/system/desktop/index.html
similarity index 73%
rename from ui/system/index.html
rename to ui/system/desktop/index.html
index 7ce600b..098a6c4 100644
--- a/ui/system/index.html
+++ b/ui/system/desktop/index.html
@@ -4,21 +4,21 @@
   <head>
     <title>Beaver</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
-    <link rel="webtasks" href="tasks.json" />
+    <link rel="webtasks" href="../tasks.json" />
     <link rel="stylesheet" href="beaver://theme/index.css" />
     <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
     <link rel="stylesheet" href="beaver://shared/third_party/lucide/lucide.css" />
     <script type="module" src="beaver://shared/lucide_icon.js"></script>
-    <link rel="stylesheet" href="index.css" />
-    <script src="./third_party/mousetrap/mousetrap.min.js"></script>
-    <script src="./third_party/mousetrap/mousetrap-global-bind.min.js"></script>
-    <script src="./third_party/fend/fend_wasm.js"></script>
+    <link rel="stylesheet" href="../index.css" />
+    <script src="../third_party/mousetrap/mousetrap.min.js"></script>
+    <script src="../third_party/mousetrap/mousetrap-global-bind.min.js"></script>
+    <script src="../third_party/fend/fend_wasm.js"></script>
     <script type="module" src="beaver://shared/theme.js"></script>
-    <script type="module" src="notification_panel.js"></script>
-    <script type="module" src="media_control.js"></script>
-    <script type="module" src="toasts.js"></script>
-    <script type="module" src="task_chooser.js"></script>
-    <script type="module" src="index.js"></script>
+    <script type="module" src="./notification_panel.js"></script>
+    <script type="module" src="../media_control.js"></script>
+    <script type="module" src="../toasts.js"></script>
+    <script type="module" src="../task_chooser.js"></script>
+    <script type="module" src="./index.js"></script>
   </head>
   <body>
     <header id="header">
diff --git a/ui/system/desktop/index.js b/ui/system/desktop/index.js
new file mode 100644
index 0000000..60723ee
--- /dev/null
+++ b/ui/system/desktop/index.js
@@ -0,0 +1,29 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { createNewView, openView, newWebViewBuilder, initApp } from "../app.js";
+import { LayoutManager } from "./layout_manager.js";
+import { initDesktop } from "./init.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const root = document.getElementById("root");
+  const layoutManager = new LayoutManager(root, newWebViewBuilder);
+
+  let modeComponents = {};
+  const { pairingHandler } = initApp(
+    layoutManager,
+    false,
+    () => modeComponents,
+  );
+
+  modeComponents = initDesktop(layoutManager, {
+    createNewView: () => createNewView(layoutManager),
+    openView: (url, title) => openView(layoutManager, url, title),
+    pairingHandler,
+  });
+
+  // Create initial view (unless ?open= handled by initApp)
+  const params = new URLSearchParams(window.location.search);
+  if (!params.get("open")) {
+    createNewView(layoutManager);
+  }
+});
diff --git a/ui/system/desktop/init.js b/ui/system/desktop/init.js
new file mode 100644
index 0000000..7790b7f
--- /dev/null
+++ b/ui/system/desktop/init.js
@@ -0,0 +1,122 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { notifications } from "../services/index.js";
+import "./system_menu.js";
+
+export function initDesktop(
+  layoutManager,
+  { createNewView, openView, pairingHandler },
+) {
+  document.body.classList.remove("mobile-mode");
+
+  const headerSpan = document.querySelector("header span");
+  if (headerSpan) {
+    headerSpan.onpointerdown = (e) => {
+      e.preventDefault();
+      navigator.embedder.startWindowDrag();
+    };
+  }
+
+  const headerResize = document.querySelector("header .resize");
+  if (headerResize) {
+    headerResize.onpointerdown = (e) => {
+      e.preventDefault();
+      navigator.embedder.startWindowResize();
+    };
+  }
+
+  const headerClose = document.querySelector("header .close");
+  if (headerClose) {
+    headerClose.onpointerdown = (e) => {
+      e.preventDefault();
+      navigator.embedder.closeCurrentOSWindow();
+    };
+  }
+
+  const plusIcon = document.getElementById("plus-icon");
+  if (plusIcon) {
+    plusIcon.onclick = () => createNewView();
+  }
+
+  const systemMenu = document.createElement("system-menu");
+  document.body.appendChild(systemMenu);
+
+  const menuIcon = document.getElementById("menu-icon");
+  if (menuIcon) {
+    menuIcon.onclick = () => {
+      systemMenu.open = !systemMenu.open;
+    };
+  }
+
+  systemMenu.addEventListener("menu-action", (event) => {
+    switch (event.detail.action) {
+      case "new-tab":
+        createNewView();
+        break;
+      case "new-window":
+        navigator.embedder.openNewOSWindow("beaver://system/desktop/index.html");
+        break;
+      case "new-search":
+        navigator.embedder.openNewOSWindow(
+          "beaver://system/search.html",
+          "notitle,ontop",
+        );
+        break;
+      case "overview":
+        layoutManager.toggleOverview();
+        break;
+      case "settings":
+        openView("beaver://settings/index.html", "Settings");
+        break;
+      case "atproto":
+        openView("beaver://atproto/index.html", "ATProto");
+        break;
+      case "reload-ui":
+        window.location.reload();
+        break;
+      case "quit":
+        navigator.embedder.exit();
+        break;
+    }
+  });
+
+  const notificationPanel = document.getElementById("notification-panel");
+  if (notificationPanel) {
+    notifications.registerPanel(notificationPanel);
+
+    const notificationsIconContainer = document.getElementById(
+      "notifications-icon-container",
+    );
+    if (notificationsIconContainer) {
+      notificationsIconContainer.onclick = () => {
+        notificationPanel.open = !notificationPanel.open;
+      };
+    }
+
+    notificationPanel.addEventListener("notification-click", (e) => {
+      notifications.handleClick(e.detail.notification, {
+        layoutManager,
+        panel: notificationPanel,
+        pairingHandler,
+      });
+    });
+
+    notificationPanel.addEventListener("notification-dismiss", (e) => {
+      notifications.dismiss(e.detail.notification);
+    });
+
+    notificationPanel.addEventListener("notification-clear-all", () => {
+      notifications.clearAll();
+    });
+
+    notificationPanel.addEventListener("panel-closed", () => {
+      notificationPanel.open = false;
+    });
+  }
+
+  document.addEventListener("mobile-show-notifications", () => {
+    if (notificationPanel) notificationPanel.open = true;
+  });
+
+  return { systemMenu, notificationPanel };
+}
diff --git a/ui/system/layout_manager.js b/ui/system/desktop/layout_manager.js
similarity index 100%
rename from ui/system/layout_manager.js
rename to ui/system/desktop/layout_manager.js
diff --git a/ui/system/notification_panel.css b/ui/system/desktop/notification_panel.css
similarity index 100%
rename from ui/system/notification_panel.css
rename to ui/system/desktop/notification_panel.css
diff --git a/ui/system/notification_panel.js b/ui/system/desktop/notification_panel.js
similarity index 98%
rename from ui/system/notification_panel.js
rename to ui/system/desktop/notification_panel.js
index 267ee69..4762384 100644
--- a/ui/system/notification_panel.js
+++ b/ui/system/desktop/notification_panel.js
@@ -13,7 +13,7 @@ export class NotificationPanel extends LitElement {
   };
 
   static styles = css`
-    @import url("beaver://system/notification_panel.css");
+    @import url("beaver://system/desktop/notification_panel.css");
   `;
 
   constructor() {
diff --git a/ui/system/overview.css b/ui/system/desktop/overview.css
similarity index 100%
rename from ui/system/overview.css
rename to ui/system/desktop/overview.css
diff --git a/ui/system/overview.js b/ui/system/desktop/overview.js
similarity index 100%
rename from ui/system/overview.js
rename to ui/system/desktop/overview.js
diff --git a/ui/system/system_menu.css b/ui/system/desktop/system_menu.css
similarity index 100%
rename from ui/system/system_menu.css
rename to ui/system/desktop/system_menu.css
diff --git a/ui/system/system_menu.js b/ui/system/desktop/system_menu.js
similarity index 98%
rename from ui/system/system_menu.js
rename to ui/system/desktop/system_menu.js
index bc4af29..fbc1878 100644
--- a/ui/system/system_menu.js
+++ b/ui/system/desktop/system_menu.js
@@ -1,6 +1,6 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
-import { MenuBase, html, css } from "./menu_base.js";
+import { MenuBase, html, css } from "../menu_base.js";
 
 export class SystemMenu extends MenuBase {
   static properties = {
@@ -125,7 +125,7 @@ export class SystemMenu extends MenuBase {
   }
 
   static styles = css`
-    @import url(beaver://system/system_menu.css);
+    @import url(beaver://system/desktop/system_menu.css);
 
     .guest-pin-overlay {
       position: absolute;
diff --git a/ui/system/index.js b/ui/system/index.js
deleted file mode 100644
index 946e269..0000000
--- a/ui/system/index.js
+++ /dev/null
@@ -1,1158 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-
-import { WebView } from "./web_view.js";
-import { LayoutManager } from "./layout_manager.js";
-import { MobileLayoutManager } from "./mobile/layout_manager.js";
-import { MobileSplashScreen } from "./mobile/splash_screen.js";
-import { PairingHandler } from "./p2p.js";
-import { MediaBroadcaster } from "./media_broadcast.js";
-import "./system_menu.js";
-
-let NEW_FRAME_DEFAULT_URL =
-  navigator.servo.getStringPreference("beaver.start_url");
-
-// Unique ID for this browser window (used for cross-window communication)
-const windowId = `browser-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-
-navigator.embedder.addEventListener("servoerror", (event) => {
-  console.error(`[Servo] ${event.type} ${event.detail}`);
-});
-
-// ============================================================================
-// Global State and Event Handlers
-// ============================================================================
-
-let layoutManager = null;
-let systemMenu = null;
-let notificationPanel = null;
-let mobileActionBar = null;
-let mobileNotificationSheet = null;
-let mobileOverview = null;
-let mobileRadialMenu = null;
-let isMobileMode = false;
-
-// Detect if we should use mobile mode
-function detectMobileMode() {
-  // Check if mobile simulation is forced via preference
-  const mobileSimulation = navigator.servo.getBoolPreference(
-    "beaver.mobile_simulation",
-  );
-  if (mobileSimulation) {
-    return true;
-  }
-
-  // maxTouchPoints is not yet supported on Servo
-  // const isTouchDevice = navigator.maxTouchPoints > 0;
-  const isNarrowScreen = window.matchMedia("(max-width: 768px)").matches;
-  return isNarrowScreen;
-}
-
-// Create the appropriate layout manager based on device type
-function createLayoutManager(rootElement, webViewBuilder) {
-  isMobileMode = detectMobileMode();
-
-  if (isMobileMode) {
-    return new MobileLayoutManager(rootElement, webViewBuilder);
-  } else {
-    document.body.classList.remove("mobile-mode");
-    return new LayoutManager(rootElement, webViewBuilder);
-  }
-}
-
-navigator.embedder.addEventListener("preferencechanged", (event) => {
-  console.log(
-    `[System PrefChanged] ${event.detail.name} : ${event.detail.value}`,
-  );
-  if (event.detail.name == "beaver.start_url") {
-    NEW_FRAME_DEFAULT_URL = event.detail.value;
-  }
-});
-
-// Notification state
-const MAX_NOTIFICATIONS = 50;
-let notifications = [];
-
-function updateNotificationBadge() {
-  const badge = document.getElementById("notifications-badge");
-  if (!badge) {
-    return;
-  }
-
-  const count = notifications.length;
-  if (count > 0) {
-    badge.textContent =
-      count > MAX_NOTIFICATIONS ? `${MAX_NOTIFICATIONS}+` : count;
-    badge.classList.remove("hidden");
-  } else {
-    badge.classList.add("hidden");
-  }
-}
-
-function updateNotificationUIs() {
-  const snapshot = [...notifications];
-  if (notificationPanel) {
-    notificationPanel.notifications = snapshot;
-  }
-  if (mobileNotificationSheet) {
-    mobileNotificationSheet.notifications = snapshot;
-  }
-  updateNotificationBadge();
-}
-
-function addNotification(notification) {
-  // Add timestamp if not present
-  if (!notification.timestamp) {
-    notification.timestamp = Date.now();
-  }
-
-  // Generate a unique ID if not present
-  if (!notification.id) {
-    notification.id = `notif-${Date.now()}-${Math.random()
-      .toString(36)
-      .slice(2)}`;
-  }
-
-  // Check for same-tag replacement
-  if (notification.tag) {
-    const existingIndex = notifications.findIndex(
-      (n) => n.tag === notification.tag,
-    );
-    if (existingIndex !== -1) {
-      // Replace existing notification with same tag
-      notifications[existingIndex] = notification;
-    } else {
-      // Add to front
-      notifications.unshift(notification);
-    }
-  } else {
-    // No tag, just add to front
-    notifications.unshift(notification);
-  }
-
-  // Enforce max limit (FIFO)
-  if (notifications.length > MAX_NOTIFICATIONS) {
-    notifications = notifications.slice(0, MAX_NOTIFICATIONS);
-  }
-
-  // Update panels and badge
-  updateNotificationUIs();
-
-  // Show a toast for the notification
-  if (notification.title) {
-    toastManager?.add(notification.title);
-  }
-}
-
-function removeNotificationByTag(tag) {
-  notifications = notifications.filter((n) => n.tag !== tag);
-  updateNotificationUIs();
-}
-
-function dismissNotification(notification) {
-  const index = notifications.findIndex((n) => n.id === notification.id);
-  if (index !== -1) {
-    notifications.splice(index, 1);
-    if (notificationPanel) {
-      notificationPanel.notifications = [...notifications];
-    }
-    updateNotificationBadge();
-  }
-}
-
-function clearAllNotifications() {
-  notifications = [];
-  if (notificationPanel) {
-    notificationPanel.notifications = [];
-  }
-  updateNotificationBadge();
-}
-
-// P2P pairing handler
-const pairingHandler = new PairingHandler({
-  onNotificationAdd: addNotification,
-  onNotificationRemove: removeNotificationByTag,
-});
-
-window.servo = {
-  /**
-   * Called by Servo when an embedded webview has opened a new embedded webview
-   * via window.open() or target="_blank" link, and the constellation has already
-   * created the webview. The iframe should adopt the pre-created webview.
-   */
-  adoptNewWebView: function (url, webviewId, browsingContextId, pipelineId) {
-    console.log(
-      "servo.adoptNewWebView:",
-      url,
-      webviewId,
-      browsingContextId,
-      pipelineId,
-    );
-
-    const attrs = {
-      "adopt-webview-id": webviewId,
-      "adopt-browsing-context-id": browsingContextId,
-      "adopt-pipeline-id": pipelineId,
-    };
-    try {
-      const webView = new WebView(url, "", attrs);
-      layoutManager.addWebView(webView);
-    } catch (e) {
-      console.error(e);
-    }
-  },
-
-  openKeyboard: function (inputType, currentValue, position) {
-    console.log(`servo.openKeyboard: ${inputType} ${currentValue} ${position}`);
-    openVirtualKeyboard({
-      inputType,
-      currentValue,
-      placeholder: "",
-      position,
-    });
-  },
-
-  closeEmbedderControl: function (controlId) {
-    console.log(`servo.closeEmbedderControl ${controlId}`);
-    // TODO: proper control tracking (add controlId to openKeyboard).
-    closeVirtualKeyboard();
-  },
-};
-
-function createNewView() {
-  const webView = new WebView(NEW_FRAME_DEFAULT_URL, "", {});
-  layoutManager.addWebView(webView);
-}
-
-function switchToHomescreen() {
-  if (layoutManager.homescreenWebviewId) {
-    layoutManager.setActiveWebView(layoutManager.homescreenWebviewId);
-  }
-}
-
-function openView(url, title) {
-  const settingsView = new WebView(url, title, {});
-  layoutManager.addWebView(settingsView);
-}
-
-// Update the mobile tab overview with current tabs
-function updateTabOverviewData() {
-  if (!mobileOverview || !layoutManager) {
-    return;
-  }
-
-  // Use getOverviewTabs() if available (excludes homescreen in mobile mode)
-  let tabs;
-  if (layoutManager.getOverviewTabs) {
-    tabs = layoutManager.getOverviewTabs();
-  } else {
-    tabs = [];
-    for (const [id, entry] of layoutManager.webviews) {
-      tabs.push({
-        id: id,
-        title: entry.webview.title || "Untitled",
-        favicon: entry.webview.favicon || "",
-        screenshotUrl: entry.webview.screenshotUrl || null,
-      });
-    }
-  }
-
-  mobileOverview.tabs = tabs;
-  mobileOverview.activeTabId = layoutManager.activeWebviewId;
-
-  // Also update notification sheet tab count
-  if (mobileNotificationSheet) {
-    mobileNotificationSheet.tabCount = tabs.length;
-  }
-}
-
-// Handle radial menu actions
-function handleRadialMenuAction(detail) {
-  const { action, originX, originY } = detail;
-
-  switch (action) {
-    case "new-view":
-      createNewView();
-      break;
-    case "home":
-      switchToHomescreen();
-      break;
-    case "back":
-      layoutManager.goBack();
-      break;
-    case "forward":
-      layoutManager.goForward();
-      break;
-    case "reload":
-      layoutManager.reload();
-      break;
-    case "close-view":
-      if (layoutManager.activeWebviewId) {
-        layoutManager.removeWebView(layoutManager.activeWebviewId);
-      }
-      break;
-    case "overview":
-      layoutManager.showOverview();
-      break;
-    case "settings":
-      openView("beaver://settings/index.html", "Settings");
-      break;
-    case "context-menu":
-      // Show the full context menu from the radial menu
-      const entry = layoutManager.getActiveEntry();
-      if (entry?.webview?.showPendingContextMenu) {
-        entry.webview.showPendingContextMenu();
-      }
-      break;
-    default:
-      console.log(`[RadialMenu] Unsupported action: ${action}`);
-  }
-}
-
-// Global keyboard shortcuts
-
-// New tab
-Mousetrap.bindGlobal("mod+t", (e) => {
-  createNewView();
-  return false;
-});
-
-// New OS Window
-Mousetrap.bindGlobal("mod+n", (e) => {
-  console.log("Requesting new OS window");
-  navigator.embedder.openNewOSWindow("beaver://system/index.html");
-  return false;
-});
-
-Mousetrap.bindGlobal("mod+f", (e) => {
-  console.log("Requesting new floating search window");
-  navigator.embedder.openNewOSWindow(
-    "beaver://system/search.html",
-    "notitle,ontop",
-  );
-  return false;
-});
-
-// Close current tab
-Mousetrap.bindGlobal("mod+w", (e) => {
-  if (layoutManager.activeWebviewId) {
-    layoutManager.removeWebView(layoutManager.activeWebviewId);
-  }
-  return false;
-});
-
-// Close current OS Window
-Mousetrap.bindGlobal("mod+shift+w", (e) => {
-  console.log("Closing current OS window");
-  navigator.embedder.closeCurrentOSWindow();
-  return false;
-});
-
-// Exit application
-Mousetrap.bindGlobal("mod+q", (e) => {
-  console.log("Bye bye");
-  navigator.embedder.exit();
-  return false;
-});
-
-// Whole system UI reload
-Mousetrap.bindGlobal("mod+shift+r", (e) => {
-  window.location.reload();
-  return false;
-});
-
-// Navigate to next panel (Cmd+] or Ctrl+Tab)
-Mousetrap.bindGlobal(["mod+]", "ctrl+tab"], (e) => {
-  layoutManager.nextPanel();
-  return false;
-});
-
-// Navigate to previous panel (Cmd+[ or Ctrl+Shift+Tab)
-Mousetrap.bindGlobal(["mod+[", "ctrl+shift+tab"], (e) => {
-  layoutManager.prevPanel();
-  return false;
-});
-
-// Toggle overview mode (Cmd+E or Ctrl+E)
-Mousetrap.bindGlobal("mod+e", (e) => {
-  layoutManager.toggleOverview();
-  return false;
-});
-
-// Exit overview mode or close system menu with Escape
-Mousetrap.bindGlobal("escape", (e) => {
-  if (mobileRadialMenu && mobileRadialMenu.open) {
-    mobileRadialMenu.hide();
-    return false;
-  }
-  if (mobileOverview && mobileOverview.open) {
-    mobileOverview.open = false;
-    return false;
-  }
-  if (mobileNotificationSheet && mobileNotificationSheet.open) {
-    mobileNotificationSheet.open = false;
-    return false;
-  }
-  if (mobileActionBar && mobileActionBar.open) {
-    mobileActionBar.hide();
-    return false;
-  }
-  if (notificationPanel && notificationPanel.open) {
-    notificationPanel.open = false;
-    return false;
-  }
-  if (systemMenu && systemMenu.open) {
-    systemMenu.open = false;
-    return false;
-  }
-  if (layoutManager.overviewMode) {
-    layoutManager.hideOverview();
-    return false;
-  }
-});
-
-// Open URL bar on active webview (Cmd+L or Ctrl+L)
-Mousetrap.bindGlobal("mod+l", (e) => {
-  if (layoutManager.activeWebviewId) {
-    const entry = layoutManager.webviews.get(layoutManager.activeWebviewId);
-    if (entry) {
-      entry.webview.openUrlBar(e);
-    }
-  }
-  return false;
-});
-
-async function openVirtualKeyboard(detail) {
-  // Check if virtual keyboard is enabled.
-  if (
-    !navigator.servo.getBoolPreference("beaver.ime_virtual_keyboard_enabled")
-  ) {
-    return;
-  }
-
-  // Load the keyboard if needed.
-  let keyboardFrame = document.getElementById("keyboard-frame");
-  if (!keyboardFrame) {
-    keyboardFrame = document.createElement("iframe");
-    keyboardFrame.setAttribute("embed", true);
-    keyboardFrame.setAttribute("hidefocus", true);
-    keyboardFrame.setAttribute("id", "keyboard-frame");
-    keyboardFrame.setAttribute("src", "beaver://keyboard/index.html");
-    document.getElementById("footer").append(keyboardFrame);
-    // Wait for the frame to be loaded.
-    let loaded = new Promise((resolve) => {
-      keyboardFrame.addEventListener("embedloadstatuschange", (event) => {
-        if (event.detail == "complete") {
-          resolve();
-        }
-      });
-    });
-    await loaded;
-  }
-
-  console.log("[VirtualKeyboard] Show event received:", detail);
-  const footer = document.getElementById("footer");
-  footer.classList.add("visible");
-  document.body.classList.add("keyboard-open");
-
-  // Send input context to keyboard iframe
-
-  if (keyboardFrame.contentWindow) {
-    keyboardFrame.contentWindow.postMessage(
-      {
-        type: "show",
-        inputType: detail.inputType,
-        currentValue: detail.currentValue,
-        placeholder: detail.placeholder,
-      },
-      "*",
-    );
-  }
-}
-
-function closeVirtualKeyboard() {
-  if (
-    !navigator.servo.getBoolPreference("beaver.ime_virtual_keyboard_enabled")
-  ) {
-    return;
-  }
-
-  const footer = document.getElementById("footer");
-  footer.classList.remove("visible");
-  document.body.classList.remove("keyboard-open");
-
-  // Notify keyboard iframe
-  const keyboardFrame = document.getElementById("keyboard-frame");
-  if (keyboardFrame.contentWindow) {
-    keyboardFrame.contentWindow.postMessage({ type: "hide" }, "*");
-  }
-}
-
-// Initialize on DOM ready
-document.addEventListener("DOMContentLoaded", () => {
-  layoutManager = createLayoutManager(document.getElementById("root"), () => {
-    return new WebView(NEW_FRAME_DEFAULT_URL, "", {});
-  });
-
-  // Setup mobile action bar if in mobile mode
-  if (isMobileMode) {
-    // Create and show splash screen immediately
-    const splash = new MobileSplashScreen();
-    splash.show();
-
-    // Create homescreen webview
-    const homescreenUrl = navigator.servo.getStringPreference(
-      "beaver.homescreen_url",
-    );
-    const homescreen = new WebView(homescreenUrl, "Home", {});
-    layoutManager.addWebView(homescreen);
-    layoutManager.setHomescreen(homescreen.webviewId);
-
-    // Wait for homescreen to be ready (async, doesn't block other init)
-    splash.waitForHomescreen(homescreen);
-
-    // Create mobile action bar
-    mobileActionBar = document.createElement("mobile-action-bar");
-    document.body.appendChild(mobileActionBar);
-    mobileActionBar.setLayoutManager(layoutManager);
-    layoutManager.setActionBar(mobileActionBar);
-
-    // Handle new tab action from action bar
-    mobileActionBar.addEventListener("action-new-tab", () => {
-      createNewView();
-    });
-
-    // Handle home action from action bar
-    mobileActionBar.addEventListener("action-home", () => {
-      switchToHomescreen();
-    });
-
-    // Create mobile notification sheet
-    mobileNotificationSheet = document.createElement(
-      "mobile-notification-sheet",
-    );
-    document.body.appendChild(mobileNotificationSheet);
-    mobileNotificationSheet.tabCount = layoutManager.getTabCount();
-
-    mobileNotificationSheet.addEventListener("notification-click", (e) => {
-      const notification = e.detail.notification;
-
-      // Handle pairing request notifications specially
-      if (notification.tag === "pairing-requests") {
-        mobileNotificationSheet.open = false;
-        if (pairingHandler.hasPendingRequests) {
-          pairingHandler.showPairingDialog();
-        }
-        return;
-      }
-
-      if (notification.webviewId && layoutManager.webviews) {
-        for (const [id, entry] of layoutManager.webviews) {
-          if (id.toString() === notification.webviewId) {
-            layoutManager.setActiveWebView(id);
-            break;
-          }
-        }
-      }
-      dismissNotification(notification);
-      mobileNotificationSheet.open = false;
-    });
-
-    mobileNotificationSheet.addEventListener("notification-dismiss", (e) => {
-      dismissNotification(e.detail.notification);
-      mobileNotificationSheet.notifications = [...notifications];
-    });
-
-    mobileNotificationSheet.addEventListener("notification-clear-all", () => {
-      clearAllNotifications();
-      mobileNotificationSheet.notifications = [];
-    });
-
-    mobileNotificationSheet.addEventListener("sheet-closed", () => {
-      mobileNotificationSheet.open = false;
-    });
-
-    // Create mobile tab overview
-    mobileOverview = document.createElement("mobile-overview");
-    document.body.appendChild(mobileOverview);
-
-    mobileOverview.addEventListener("tab-select", (e) => {
-      layoutManager.setActiveWebView(e.detail.tabId);
-    });
-
-    mobileOverview.addEventListener("tab-close", (e) => {
-      layoutManager.removeWebView(e.detail.tabId);
-      updateTabOverviewData();
-    });
-
-    mobileOverview.addEventListener("tab-new", () => {
-      createNewView();
-      mobileOverview.open = false;
-    });
-
-    mobileOverview.addEventListener("tab-home", () => {
-      switchToHomescreen();
-      mobileOverview.open = false;
-    });
-
-    mobileOverview.addEventListener("overview-close", () => {
-      mobileOverview.open = false;
-    });
-
-    // Create mobile radial menu
-    mobileRadialMenu = document.createElement("mobile-radial-menu");
-    document.body.appendChild(mobileRadialMenu);
-
-    // Radial menu is now triggered via contextmenu event from webviews,
-    // not via the gesture handler's long-press detection.
-
-    mobileRadialMenu.addEventListener("radial-action", (e) => {
-      handleRadialMenuAction(e.detail);
-    });
-
-    // Handle radial menu dismiss (close without action)
-    mobileRadialMenu.addEventListener("radial-dismiss", () => {
-      // Dismiss pending context menu on active webview
-      const entry = layoutManager.getActiveEntry();
-      if (entry?.webview?.dismissPendingContextMenu) {
-        entry.webview.dismissPendingContextMenu();
-      }
-    });
-
-    // Override layout manager's showOverview to use mobile tab overview
-    layoutManager.showOverview = function () {
-      updateTabOverviewData();
-      mobileOverview.open = true;
-    };
-
-    layoutManager.hideOverview = function () {
-      mobileOverview.open = false;
-    };
-  }
-
-  // Desktop-only header handlers
-  const headerSpan = document.querySelector("header span");
-  if (headerSpan) {
-    headerSpan.onpointerdown = (e) => {
-      e.preventDefault();
-      navigator.embedder.startWindowDrag();
-    };
-  }
-
-  const headerResize = document.querySelector("header .resize");
-  if (headerResize) {
-    headerResize.onpointerdown = (e) => {
-      e.preventDefault();
-      navigator.embedder.startWindowResize();
-    };
-  }
-
-  const headerClose = document.querySelector("header .close");
-  if (headerClose) {
-    headerClose.onpointerdown = (e) => {
-      e.preventDefault();
-      navigator.embedder.closeCurrentOSWindow();
-    };
-  }
-
-  const plusIcon = document.getElementById("plus-icon");
-  if (plusIcon) {
-    plusIcon.onclick = () => {
-      createNewView();
-    };
-  }
-
-  // Setup system menu (desktop only)
-  if (!isMobileMode) {
-    systemMenu = document.createElement("system-menu");
-    document.body.appendChild(systemMenu);
-
-    const menuIcon = document.getElementById("menu-icon");
-    if (menuIcon) {
-      menuIcon.onclick = () => {
-        systemMenu.open = !systemMenu.open;
-      };
-    }
-
-    systemMenu.addEventListener("menu-action", (event) => {
-      switch (event.detail.action) {
-        case "new-tab":
-          createNewView();
-          break;
-        case "new-window":
-          navigator.embedder.openNewOSWindow("beaver://system/index.html");
-          break;
-        case "new-search":
-          navigator.embedder.openNewOSWindow(
-            "beaver://system/search.html",
-            "notitle,ontop",
-          );
-          break;
-        case "overview":
-          layoutManager.toggleOverview();
-          break;
-        case "settings":
-          openView("beaver://settings/index.html", "Settings");
-          break;
-        case "atproto":
-          openView("beaver://atproto/index.html", "ATProto");
-          break;
-        case "reload-ui":
-          window.location.reload();
-          break;
-        case "quit":
-          navigator.embedder.exit();
-          break;
-      }
-    });
-  }
-
-  // Setup notification panel
-  notificationPanel = document.getElementById("notification-panel");
-
-  const notificationsIconContainer = document.getElementById(
-    "notifications-icon-container",
-  );
-  if (notificationsIconContainer) {
-    notificationsIconContainer.onclick = () => {
-      notificationPanel.open = !notificationPanel.open;
-    };
-  }
-
-  // Listen for mobile notification show event (from edge gesture)
-  document.addEventListener("mobile-show-notifications", () => {
-    if (isMobileMode && mobileNotificationSheet) {
-      mobileNotificationSheet.notifications = [...notifications];
-      mobileNotificationSheet.tabCount = layoutManager.getTabCount();
-      mobileNotificationSheet.open = true;
-    } else if (notificationPanel) {
-      notificationPanel.open = true;
-    }
-  });
-
-  if (notificationPanel) {
-    notificationPanel.addEventListener("notification-click", (e) => {
-      const notification = e.detail.notification;
-
-      // Handle pairing request notifications specially
-      if (notification.tag === "pairing-requests") {
-        notificationPanel.open = false;
-        if (pairingHandler.hasPendingRequests) {
-          pairingHandler.showPairingDialog();
-        }
-        return;
-      }
-
-      // Focus the source webview if possible
-      if (notification.webviewId && layoutManager.webviews) {
-        // Try to find the webview by its ID
-        for (const [id, entry] of layoutManager.webviews) {
-          if (id.toString() === notification.webviewId) {
-            layoutManager.setActiveWebView(id);
-            layoutManager.scrollToPanel(entry.panelIndex);
-            break;
-          }
-        }
-      }
-
-      // Dismiss the notification (no actions supported for now)
-      dismissNotification(notification);
-
-      // Close the panel
-      notificationPanel.open = false;
-    });
-
-    notificationPanel.addEventListener("notification-dismiss", (e) => {
-      dismissNotification(e.detail.notification);
-    });
-
-    notificationPanel.addEventListener("notification-clear-all", () => {
-      clearAllNotifications();
-    });
-
-    notificationPanel.addEventListener("panel-closed", () => {
-      notificationPanel.open = false;
-    });
-  }
-
-  // Listen for notifications from webviews
-  document
-    .getElementById("root")
-    .addEventListener("webview-notification", (e) => {
-      console.log("[Notification] Received from webview:", e.detail);
-      addNotification({
-        webviewId: e.detail.webviewId?.toString(),
-        title: e.detail.title,
-        body: e.detail.body,
-        tag: e.detail.tag,
-        iconUrl: e.detail.iconUrl,
-      });
-    });
-
-  // Media session control
-  const mediaControl = document.getElementById("media-control");
-  const mediaIcon = document.getElementById("media-icon");
-  let mediaSessionWebviewId = null;
-
-  // P2P media control: broadcast local media state and receive remote state.
-  const remoteMediaControls = new Map(); // sessionId -> media-control element
-
-  const mediaBroadcaster = new MediaBroadcaster({
-    deviceName: null, // resolved lazily below
-    onRemoteAction: (action) => {
-      // A remote device is requesting an action on our media session.
-      if (mediaSessionWebviewId == null) return;
-      const entry = layoutManager.webviews.get(mediaSessionWebviewId);
-      if (entry) {
-        entry.webview.ensureIframe();
-        entry.webview.iframe.mediaSessionAction(action);
-      }
-    },
-    onRemoteState: (data) => {
-      // A remote device is broadcasting its media state.
-      const ctrl = getOrCreateRemoteControl(data.sessionId, data.deviceName);
-      ctrl.title = data.title || "";
-      ctrl.artist = data.artist || "";
-      ctrl.album = data.album || "";
-      ctrl.playbackState = data.playbackState || "none";
-      ctrl.duration = data.duration || 0;
-      ctrl.position = data.position || 0;
-      ctrl.hasMedia = data.playbackState !== "none";
-      updateMediaIcon();
-    },
-  });
-
-  mediaBroadcaster.resolveDeviceName();
-
-  // When a paired peer connects, send hello after channel sync.
-  navigator.embedder.pairing.addEventListener("peerjoined", () => {
-    setTimeout(() => {
-      mediaBroadcaster.sendHello();
-    }, 5000);
-  });
-
-  function getOrCreateRemoteControl(sessionId, deviceName) {
-    let ctrl = remoteMediaControls.get(sessionId);
-    if (!ctrl) {
-      ctrl = document.createElement("media-control");
-      ctrl.classList.add("inline");
-      ctrl.deviceId = sessionId;
-      ctrl.deviceName = deviceName;
-      ctrl.hasMedia = true;
-      ctrl.addEventListener("media-action", (event) => {
-        mediaBroadcaster.sendAction(event.detail.deviceId, event.detail.action);
-      });
-      remoteMediaControls.set(sessionId, ctrl);
-
-      // Insert into the media panel (desktop) or notification sheet (mobile).
-      const panel = document.getElementById("media-panel");
-      if (panel) {
-        panel.appendChild(ctrl);
-      } else if (mobileNotificationSheet) {
-        // On mobile, insert after the local media control in the sheet's shadow DOM
-        const localCtrl = mobileNotificationSheet.shadowRoot?.querySelector(
-          "#mobile-media-control",
-        );
-        if (localCtrl) {
-          localCtrl.after(ctrl);
-        }
-      }
-      updateMediaIcon();
-    }
-    if (deviceName) ctrl.deviceName = deviceName;
-    return ctrl;
-  }
-
-  if (mediaIcon) {
-    mediaIcon.onclick = () => {
-      const panel = document.getElementById("media-panel");
-      if (panel) {
-        panel.classList.toggle("open");
-      }
-    };
-  }
-
-  function hasAnyActiveMedia() {
-    if (mediaControl?.hasMedia) return true;
-    for (const ctrl of remoteMediaControls.values()) {
-      if (ctrl.hasMedia) return true;
-    }
-    return false;
-  }
-
-  function updateMediaIcon() {
-    if (!mediaIcon) return;
-    if (hasAnyActiveMedia()) {
-      mediaIcon.classList.remove("hidden");
-    } else {
-      mediaIcon.classList.add("hidden");
-    }
-  }
-
-  function updateMediaControl(ctrl, eventType, detail) {
-    if (!ctrl) {
-      return;
-    }
-    if (eventType === "metadata") {
-      ctrl.title = detail.title || "";
-      ctrl.artist = detail.artist || "";
-      ctrl.album = detail.album || "";
-      ctrl.hasMedia = true;
-    } else if (eventType === "playbackstate") {
-      ctrl.playbackState = detail.playbackState || "none";
-      if (detail.playbackState === "none") {
-        ctrl.hasMedia = false;
-        ctrl.open = false;
-      } else {
-        ctrl.hasMedia = true;
-      }
-    } else if (eventType === "positionstate") {
-      ctrl.duration = detail.duration || 0;
-      ctrl.position = detail.position || 0;
-    }
-    updateMediaIcon();
-  }
-
-  document
-    .getElementById("root")
-    .addEventListener("webview-mediasession", (e) => {
-      const { webviewId, eventType } = e.detail;
-      mediaSessionWebviewId = webviewId;
-      updateMediaControl(mediaControl, eventType, e.detail);
-      // Also update mobile notification sheet's media control
-      if (mobileNotificationSheet) {
-        const mobileCtrl = mobileNotificationSheet.shadowRoot?.querySelector(
-          "#mobile-media-control",
-        );
-        updateMediaControl(mobileCtrl, eventType, e.detail);
-      }
-      // Broadcast to remote peers
-      mediaBroadcaster.updateState(e.detail);
-    });
-
-  function handleMediaAction(event) {
-    if (mediaSessionWebviewId == null) {
-      return;
-    }
-    const entry = layoutManager.webviews.get(mediaSessionWebviewId);
-    if (entry) {
-      console.log(
-        `[MediaControl] Action "${event.detail.action}" triggered for webview ${mediaSessionWebviewId}`,
-      );
-      entry.webview.ensureIframe();
-      entry.webview.iframe.mediaSessionAction(event.detail.action);
-    }
-  }
-
-  if (mediaControl) {
-    mediaControl.addEventListener("media-action", handleMediaAction);
-  }
-  if (mobileNotificationSheet) {
-    mobileNotificationSheet.addEventListener("media-action", handleMediaAction);
-  }
-
-  // Listen for virtual keyboard show/hide events from webviews
-  document
-    .getElementById("root")
-    .addEventListener("webview-inputmethod-show", (event) => {
-      openVirtualKeyboard(event.detail);
-    });
-
-  document
-    .getElementById("root")
-    .addEventListener("webview-inputmethod-hide", () => {
-      console.log("[Keyboard] Hide event received");
-      closeVirtualKeyboard();
-    });
-
-  // Listen for radial menu show events from webviews (mobile mode)
-  document
-    .getElementById("root")
-    .addEventListener("webview-show-radial-menu", (e) => {
-      if (isMobileMode && mobileRadialMenu) {
-        console.log("[RadialMenu] Show event received from webview:", e.detail);
-        mobileRadialMenu.canGoBack = e.detail.canGoBack;
-        mobileRadialMenu.canGoForward = e.detail.canGoForward;
-        mobileRadialMenu.isHomescreen =
-          layoutManager.activeWebviewId === layoutManager.homescreenWebviewId;
-        mobileRadialMenu.show(e.detail.x, e.detail.y, e.detail.contextMenu);
-      }
-    });
-
-  // Open a task provider in a new webview (window mode).
-  document.body.addEventListener("open-task-provider", (e) => {
-    const { url, title } = e.detail;
-    console.log(`[WebTasks] Opening provider: ${title} (${url})`);
-    openView(url, title);
-  });
-
-  // Show an inline task provider overlay on the active webview.
-  document.body.addEventListener("show-inline-provider", (e) => {
-    const { url, title } = e.detail;
-    console.log(`[WebTasks] Showing inline provider: ${title} (${url})`);
-    const entry = layoutManager.webviews.get(layoutManager.activeWebviewId);
-    if (entry) {
-      entry.webview.showInlineProvider(url, title);
-    }
-  });
-
-  // Send current page URL to a peer when "Open in <peer>" is selected.
-  document.getElementById("root").addEventListener("p2p-open-in", async (e) => {
-    const { peerId, url } = e.detail;
-    if (!peerId || !url) return;
-
-    // Try all system app URLs since we don't know the remote platform.
-    const targetURLs = [
-      "beaver://system/index.html",
-      "beaver://system/mobile/index.html",
-      "beaver://system/mediacenter/index.html",
-    ];
-    try {
-      await Promise.allSettled(
-        targetURLs.map(async (targetURL) => {
-          const port = await navigator.createPeerStream(peerId, targetURL);
-          port.postMessage({ action: "open-view", url });
-          port.close();
-        }),
-      );
-      toastManager?.add("Sent to peer");
-    } catch {
-      toastManager?.add("Failed to send");
-    }
-  });
-
-  // Receive targeted P2P messages via PeerStream.
-  window.onpeerstream = (e) => {
-    const port = e.port;
-    const peerId = e.peerId;
-    port.onmessage = (msg) => {
-      const { action, url } = msg.data;
-      if (action === "open-view" && url) {
-        showOpenViewDialog(peerId, url);
-      }
-    };
-  };
-
-  async function showOpenViewDialog(peerId, url) {
-    // Look up the peer's display name.
-    let peerName = peerId;
-    try {
-      const peers = await navigator.embedder.pairing.peers();
-      const peer = peers.find((p) => p.id === peerId);
-      if (peer?.displayName) {
-        peerName = peer.displayName;
-      }
-    } catch {
-      // Fall back to raw ID.
-    }
-
-    // Show a confirmation dialog.
-    // TODO: don't inline styles.
-    const dialog = document.createElement("dialog");
-    dialog.id = "p2p-open-dialog";
-    dialog.innerHTML = `
-      <h2>Open page from ${peerName}?</h2>
-      <p style="word-break: break-all; opacity:0.8; font-size:0.9em">${url}</p>
-      <div style="display:flex; gap:0.5em; justify-content:flex-end; margin-top: 1em">
-        <button class="btn-cancel">Decline</button>
-        <button class="btn-accept">Open</button>
-      </div>
-    `;
-    document.body.appendChild(dialog);
-    dialog.addEventListener("close", () => dialog.remove());
-    dialog.querySelector(".btn-cancel").addEventListener("click", () => {
-      dialog.close();
-    });
-    dialog.querySelector(".btn-accept").addEventListener("click", () => {
-      dialog.close();
-      const webView = new WebView(url, "", {});
-      layoutManager.addWebView(webView);
-    });
-    try {
-      dialog.showModal();
-    } catch {
-      dialog.remove();
-    }
-  }
-
-  const params = new URLSearchParams(window.location.search);
-  const openValue = params.get("open");
-  if (openValue) {
-    const webView = new WebView(openValue, "", {});
-    layoutManager.addWebView(webView);
-  } else if (!isMobileMode) {
-    // In mobile mode, homescreen is already created as the initial view
-    createNewView();
-  }
-
-  // BroadcastChannel for receiving URLs from search window
-  const searchChannel = new BroadcastChannel("servo-search");
-  searchChannel.onmessage = (e) => {
-    if (e.data.type === "discover") {
-      // Respond to discovery with our window ID
-      searchChannel.postMessage({ type: "available", windowId: windowId });
-    } else if (
-      e.data.type === "openUrl" &&
-      e.data.targetWindowId === windowId
-    ) {
-      // This message is targeted to us - handle it
-      searchChannel.postMessage({ type: "ack", id: e.data.id });
-      const webView = new WebView(e.data.url, "", {});
-      layoutManager.addWebView(webView);
-    } else if (e.data.type === "listWebViews") {
-      // Respond with list of our web-views
-      const webviews = [];
-      for (const [webviewId, entry] of layoutManager.webviews) {
-        webviews.push({
-          webviewId: webviewId,
-          title: entry.webview.title || "",
-          url: entry.webview.currentUrl || "",
-        });
-      }
-      searchChannel.postMessage({
-        type: "webviewList",
-        windowId: windowId,
-        webviews: webviews,
-      });
-    } else if (
-      e.data.type === "selectWebView" &&
-      e.data.targetWindowId === windowId
-    ) {
-      // Select and focus the specified web-view
-      searchChannel.postMessage({ type: "ack", id: e.data.id });
-      layoutManager.setActiveWebView(e.data.webviewId);
-      const entry = layoutManager.webviews.get(e.data.webviewId);
-      if (entry) {
-        layoutManager.scrollToPanel(entry.panelIndex);
-      }
-    }
-  };
-
-  // BroadcastChannel for cross-device tab search (P2P).
-  // Remote peers send { requestId, text } and we respond with matching local tabs.
-  const remoteSearchChannel = new BroadcastChannel("beaver-remote-search");
-  remoteSearchChannel.onmessage = (event) => {
-    const { requestId, text } = event.data;
-    if (!requestId || !text) {
-      return;
-    }
-
-    const query = text.toLowerCase().trim();
-    const results = [];
-    for (const [, entry] of layoutManager.webviews) {
-      const url = entry.webview.currentUrl || "";
-      const title = (entry.webview.title || "").toLowerCase();
-      if (title.includes(query) || url.toLowerCase().includes(query)) {
-        results.push({
-          title: entry.webview.title || "",
-          url,
-        });
-      }
-    }
-    if (results.length > 0) {
-      remoteSearchChannel.postMessage({
-        responseFor: requestId,
-        results,
-      });
-    }
-  };
-});
diff --git a/ui/system/mediacenter/sources.json b/ui/system/mediacenter/sources.json
index 85ffab8..e3d8bcc 100644
--- a/ui/system/mediacenter/sources.json
+++ b/ui/system/mediacenter/sources.json
@@ -38,7 +38,13 @@
   {
     "category": "videos",
     "title": "PeerTube",
-    "url": "https://joinpeertube.org",
+    "url": "https://peertube.tv/",
+    "icon": "play-circle"
+  },
+  {
+    "category": "videos",
+    "title": "Molotov",
+    "url": "https://app.molotov.tv/",
     "icon": "play-circle"
   },
   {
diff --git a/ui/system/mobile/index.html b/ui/system/mobile/index.html
index 599da1d..29413a4 100644
--- a/ui/system/mobile/index.html
+++ b/ui/system/mobile/index.html
@@ -7,6 +7,7 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
     />
+    <link rel="webtasks" href="../tasks.json" />
     <link rel="stylesheet" href="beaver://theme/index.css" />
     <link rel="stylesheet" href="beaver://shared/fonts/fonts.css" />
     <link
@@ -20,12 +21,10 @@
     <script src="../third_party/mousetrap/mousetrap-global-bind.min.js"></script>
     <script src="../third_party/fend/fend_wasm.js"></script>
     <script type="module" src="beaver://shared/theme.js"></script>
-    <script type="module" src="../notification_panel.js"></script>
     <script type="module" src="../media_control.js"></script>
     <script type="module" src="../toasts.js"></script>
     <script type="module" src="../task_chooser.js"></script>
     <script type="module" src="./index.js"></script>
-    <script type="module" src="../index.js"></script>
   </head>
   <body>
     <div id="mobile-splash" class="mobile-splash">
diff --git a/ui/system/mobile/index.js b/ui/system/mobile/index.js
index 3825279..e7a8eff 100644
--- a/ui/system/mobile/index.js
+++ b/ui/system/mobile/index.js
@@ -5,10 +5,29 @@ import "./notification_sheet.js";
 import "./overview.js";
 import "./radial_menu.js";
 
+import { createNewView, switchToHomescreen, openView, newWebViewBuilder, initApp } from "../app.js";
+import { MobileLayoutManager } from "./layout_manager.js";
+import { initMobile } from "./init.js";
+
 document.addEventListener("DOMContentLoaded", () => {
-  navigator.servo.setBoolPreference(
-    "beaver.ime_virtual_keyboard_enabled",
+  document.body.classList.add("mobile-mode");
+  navigator.servo.setBoolPreference("beaver.ime_virtual_keyboard_enabled", true);
+
+  const root = document.getElementById("root");
+  const layoutManager = new MobileLayoutManager(root, newWebViewBuilder);
+
+  let modeComponents = {};
+  const { pairingHandler, services } = initApp(
+    layoutManager,
     true,
+    () => modeComponents,
   );
-  document.body.classList.add("mobile-mode");
+
+  modeComponents = initMobile(layoutManager, {
+    createNewView: () => createNewView(layoutManager),
+    switchToHomescreen: () => switchToHomescreen(layoutManager),
+    openView: (url, title) => openView(layoutManager, url, title),
+    pairingHandler,
+    services,
+  });
 });
diff --git a/ui/system/mobile/init.js b/ui/system/mobile/init.js
new file mode 100644
index 0000000..eed6b0c
--- /dev/null
+++ b/ui/system/mobile/init.js
@@ -0,0 +1,155 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { WebView } from "../web_view.js";
+import { MobileSplashScreen } from "./splash_screen.js";
+import { notifications } from "../services/index.js";
+
+export function initMobile(layoutManager, { createNewView, switchToHomescreen, openView, pairingHandler, services }) {
+  const splash = new MobileSplashScreen();
+  splash.show();
+
+  const homescreenUrl = navigator.servo.getStringPreference(
+    "beaver.homescreen_url",
+  );
+  const homescreen = new WebView(homescreenUrl, "Home", {});
+  layoutManager.addWebView(homescreen);
+  layoutManager.setHomescreen(homescreen.webviewId);
+  splash.waitForHomescreen(homescreen);
+
+  const actionBar = document.createElement("mobile-action-bar");
+  document.body.appendChild(actionBar);
+  actionBar.setLayoutManager(layoutManager);
+  layoutManager.setActionBar(actionBar);
+
+  actionBar.addEventListener("action-new-tab", () => createNewView());
+  actionBar.addEventListener("action-home", () => switchToHomescreen());
+
+  const notificationSheet = document.createElement("mobile-notification-sheet");
+  document.body.appendChild(notificationSheet);
+  notificationSheet.tabCount = layoutManager.getTabCount();
+  notifications.registerPanel(notificationSheet);
+
+  notificationSheet.addEventListener("notification-click", (e) => {
+    notifications.handleClick(e.detail.notification, {
+      layoutManager,
+      panel: notificationSheet,
+      pairingHandler,
+    });
+  });
+
+  notificationSheet.addEventListener("notification-dismiss", (e) => {
+    notifications.dismiss(e.detail.notification);
+  });
+
+  notificationSheet.addEventListener("notification-clear-all", () => {
+    notifications.clearAll();
+  });
+
+  notificationSheet.addEventListener("sheet-closed", () => {
+    notificationSheet.open = false;
+  });
+
+  notificationSheet.addEventListener("media-action", services.media.handleAction);
+
+  const overview = document.createElement("mobile-overview");
+  document.body.appendChild(overview);
+
+  overview.addEventListener("tab-select", (e) => {
+    layoutManager.setActiveWebView(e.detail.tabId);
+  });
+  overview.addEventListener("tab-close", (e) => {
+    layoutManager.removeWebView(e.detail.tabId);
+    updateTabOverviewData();
+  });
+  overview.addEventListener("tab-new", () => {
+    createNewView();
+    overview.open = false;
+  });
+  overview.addEventListener("tab-home", () => {
+    switchToHomescreen();
+    overview.open = false;
+  });
+  overview.addEventListener("overview-close", () => {
+    overview.open = false;
+  });
+
+  const radialMenu = document.createElement("mobile-radial-menu");
+  document.body.appendChild(radialMenu);
+
+  radialMenu.addEventListener("radial-action", (e) => {
+    handleRadialMenuAction(e.detail, layoutManager, { createNewView, switchToHomescreen, openView });
+  });
+  radialMenu.addEventListener("radial-dismiss", () => {
+    const entry = layoutManager.getActiveEntry();
+    entry?.webview?.dismissPendingContextMenu?.();
+  });
+
+  // Override so overview uses the mobile component
+  layoutManager.showOverview = function () {
+    updateTabOverviewData();
+    overview.open = true;
+  };
+  layoutManager.hideOverview = function () {
+    overview.open = false;
+  };
+
+  // Radial menu trigger from webviews
+  document
+    .getElementById("root")
+    .addEventListener("webview-show-radial-menu", (e) => {
+      radialMenu.canGoBack = e.detail.canGoBack;
+      radialMenu.canGoForward = e.detail.canGoForward;
+      radialMenu.isHomescreen =
+        layoutManager.activeWebviewId === layoutManager.homescreenWebviewId;
+      radialMenu.show(e.detail.x, e.detail.y, e.detail.contextMenu);
+    });
+
+  // Notification show (edge gesture)
+  document.addEventListener("mobile-show-notifications", () => {
+    notificationSheet.notifications = notifications.getAll();
+    notificationSheet.tabCount = layoutManager.getTabCount();
+    notificationSheet.open = true;
+  });
+
+  function updateTabOverviewData() {
+    let tabs;
+    if (layoutManager.getOverviewTabs) {
+      tabs = layoutManager.getOverviewTabs();
+    } else {
+      tabs = [];
+      for (const [id, entry] of layoutManager.webviews) {
+        tabs.push({
+          id,
+          title: entry.webview.title || "Untitled",
+          favicon: entry.webview.favicon || "",
+          screenshotUrl: entry.webview.screenshotUrl || null,
+        });
+      }
+    }
+    overview.tabs = tabs;
+    overview.activeTabId = layoutManager.activeWebviewId;
+    notificationSheet.tabCount = tabs.length;
+  }
+
+  return { actionBar, notificationSheet, overview, radialMenu };
+}
+
+function handleRadialMenuAction(detail, layoutManager, { createNewView, switchToHomescreen, openView }) {
+  switch (detail.action) {
+    case "new-view": createNewView(); break;
+    case "home": switchToHomescreen(); break;
+    case "back": layoutManager.goBack(); break;
+    case "forward": layoutManager.goForward(); break;
+    case "reload": layoutManager.reload(); break;
+    case "close-view":
+      if (layoutManager.activeWebviewId) {
+        layoutManager.removeWebView(layoutManager.activeWebviewId);
+      }
+      break;
+    case "overview": layoutManager.showOverview(); break;
+    case "settings": openView("beaver://settings/index.html", "Settings"); break;
+    case "context-menu":
+      layoutManager.getActiveEntry()?.webview?.showPendingContextMenu?.();
+      break;
+  }
+}
diff --git a/ui/system/search.js b/ui/system/search.js
index b22191b..c80de22 100644
--- a/ui/system/search.js
+++ b/ui/system/search.js
@@ -56,7 +56,7 @@ function navigateTo(url) {
           // Target window didn't ack - open new window as fallback
           pendingNavigation = null;
           navigator.embedder.openNewOSWindow(
-            `beaver://system/index.html?open=${encodeURIComponent(url)}`,
+            `beaver://system/desktop/index.html?open=${encodeURIComponent(url)}`,
           );
           // navigator.embedder.closeCurrentOSWindow();
         }, 100),
@@ -64,7 +64,7 @@ function navigateTo(url) {
     } else {
       // No browser windows found - open new window
       navigator.embedder.openNewOSWindow(
-        `beaver://system/index.html?open=${encodeURIComponent(url)}`,
+        `beaver://system/desktop/index.html?open=${encodeURIComponent(url)}`,
       );
       // navigator.embedder.closeCurrentOSWindow();
     }
diff --git a/ui/system/services/channels.js b/ui/system/services/channels.js
new file mode 100644
index 0000000..3010e83
--- /dev/null
+++ b/ui/system/services/channels.js
@@ -0,0 +1,151 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { WebView } from "../web_view.js";
+
+export function init(layoutManager, windowId) {
+  const root = document.getElementById("root");
+
+  function addView(url, title = "") {
+    layoutManager.addWebView(new WebView(url, title, {}));
+  }
+
+  document.body.addEventListener("open-task-provider", (e) => {
+    addView(e.detail.url, e.detail.title);
+  });
+
+  document.body.addEventListener("show-inline-provider", (e) => {
+    const { url, title } = e.detail;
+    const entry = layoutManager.webviews.get(layoutManager.activeWebviewId);
+    if (entry) {
+      entry.webview.showInlineProvider(url, title);
+    }
+  });
+
+  // P2P "Open in" — send URL to remote peer
+  root.addEventListener("p2p-open-in", async (e) => {
+    const { peerId, url } = e.detail;
+    if (!peerId || !url) return;
+
+    const targetURLs = [
+      "beaver://system/desktop/index.html",
+      "beaver://system/mobile/index.html",
+      "beaver://system/mediacenter/index.html",
+    ];
+    try {
+      await Promise.allSettled(
+        targetURLs.map(async (targetURL) => {
+          const port = await navigator.createPeerStream(peerId, targetURL);
+          port.postMessage({ action: "open-view", url });
+          port.close();
+        }),
+      );
+      toastManager?.add("Sent to peer");
+    } catch {
+      toastManager?.add("Failed to send");
+    }
+  });
+
+  // Receive P2P peer stream messages
+  window.onpeerstream = (e) => {
+    const port = e.port;
+    const peerId = e.peerId;
+    port.onmessage = (msg) => {
+      const { action, url } = msg.data;
+      if (action === "open-view" && url) {
+        showOpenViewDialog(peerId, url, layoutManager);
+      }
+    };
+  };
+
+  // Search window BroadcastChannel
+  const searchChannel = new BroadcastChannel("servo-search");
+  searchChannel.onmessage = (e) => {
+    if (e.data.type === "discover") {
+      searchChannel.postMessage({ type: "available", windowId });
+    } else if (
+      e.data.type === "openUrl" &&
+      e.data.targetWindowId === windowId
+    ) {
+      searchChannel.postMessage({ type: "ack", id: e.data.id });
+      addView(e.data.url);
+    } else if (e.data.type === "listWebViews") {
+      const webviews = [];
+      for (const [webviewId, entry] of layoutManager.webviews) {
+        webviews.push({
+          webviewId,
+          title: entry.webview.title || "",
+          url: entry.webview.currentUrl || "",
+        });
+      }
+      searchChannel.postMessage({ type: "webviewList", windowId, webviews });
+    } else if (
+      e.data.type === "selectWebView" &&
+      e.data.targetWindowId === windowId
+    ) {
+      searchChannel.postMessage({ type: "ack", id: e.data.id });
+      layoutManager.setActiveWebView(e.data.webviewId);
+      const entry = layoutManager.webviews.get(e.data.webviewId);
+      if (entry) {
+        layoutManager.scrollToPanel(entry.panelIndex);
+      }
+    }
+  };
+
+  // Cross-device tab search (P2P)
+  const remoteSearchChannel = new BroadcastChannel("beaver-remote-search");
+  remoteSearchChannel.onmessage = (event) => {
+    const { requestId, text } = event.data;
+    if (!requestId || !text) return;
+
+    const query = text.toLowerCase().trim();
+    const results = [];
+    for (const [, entry] of layoutManager.webviews) {
+      const url = entry.webview.currentUrl || "";
+      const title = (entry.webview.title || "").toLowerCase();
+      if (title.includes(query) || url.toLowerCase().includes(query)) {
+        results.push({ title: entry.webview.title || "", url });
+      }
+    }
+    if (results.length > 0) {
+      remoteSearchChannel.postMessage({ responseFor: requestId, results });
+    }
+  };
+}
+
+async function showOpenViewDialog(peerId, url, layoutManager) {
+  let peerName = peerId;
+  try {
+    const peers = await navigator.embedder.pairing.peers();
+    const peer = peers.find((p) => p.id === peerId);
+    if (peer?.displayName) {
+      peerName = peer.displayName;
+    }
+  } catch {
+    // Fall back to raw ID.
+  }
+
+  const dialog = document.createElement("dialog");
+  dialog.id = "p2p-open-dialog";
+  dialog.innerHTML = `
+    <h2>Open page from ${peerName}?</h2>
+    <p style="word-break: break-all; opacity:0.8; font-size:0.9em">${url}</p>
+    <div style="display:flex; gap:0.5em; justify-content:flex-end; margin-top: 1em">
+      <button class="btn-cancel">Decline</button>
+      <button class="btn-accept">Open</button>
+    </div>
+  `;
+  document.body.appendChild(dialog);
+  dialog.addEventListener("close", () => dialog.remove());
+  dialog.querySelector(".btn-cancel").addEventListener("click", () => {
+    dialog.close();
+  });
+  dialog.querySelector(".btn-accept").addEventListener("click", () => {
+    dialog.close();
+    addView(url);
+  });
+  try {
+    dialog.showModal();
+  } catch {
+    dialog.remove();
+  }
+}
diff --git a/ui/system/services/index.js b/ui/system/services/index.js
new file mode 100644
index 0000000..d72d750
--- /dev/null
+++ b/ui/system/services/index.js
@@ -0,0 +1,63 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import * as notifications from "./notifications.js";
+import { VirtualKeyboard } from "./keyboard.js";
+import * as shortcuts from "./shortcuts.js";
+import * as mediaSession from "./media_session.js";
+import * as channels from "./channels.js";
+
+export { notifications };
+
+export function initAll(
+  layoutManager,
+  {
+    windowId,
+    isMobileMode,
+    createNewView,
+    switchToHomescreen,
+    openView,
+    mobileComponents,
+  },
+) {
+  // Virtual keyboard
+  const keyboard = new VirtualKeyboard(document.getElementById("footer"));
+
+  // Keyboard shortcuts
+  shortcuts.init(layoutManager, {
+    createNewView,
+    switchToHomescreen,
+    openView,
+    mobileComponents,
+  });
+
+  // Media session control
+  const media = mediaSession.init(layoutManager, {
+    getRemoteControlTarget: () => mobileComponents().notificationSheet,
+  });
+
+  // P2P, task providers, search channels
+  channels.init(layoutManager, windowId);
+
+  // Webview event wiring
+  const root = document.getElementById("root");
+
+  root.addEventListener("webview-notification", (e) => {
+    notifications.add({
+      webviewId: e.detail.webviewId?.toString(),
+      title: e.detail.title,
+      body: e.detail.body,
+      tag: e.detail.tag,
+      iconUrl: e.detail.iconUrl,
+    });
+  });
+
+  root.addEventListener("webview-inputmethod-show", (e) => {
+    keyboard.open(e.detail);
+  });
+
+  root.addEventListener("webview-inputmethod-hide", () => {
+    keyboard.close();
+  });
+
+  return { notifications, keyboard, media };
+}
diff --git a/ui/system/services/keyboard.js b/ui/system/services/keyboard.js
new file mode 100644
index 0000000..80c16d4
--- /dev/null
+++ b/ui/system/services/keyboard.js
@@ -0,0 +1,62 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export class VirtualKeyboard {
+  #frame = null;
+  #footer = null;
+
+  constructor(footer) {
+    this.#footer = footer;
+  }
+
+  async open(detail) {
+    if (
+      !navigator.servo.getBoolPreference("beaver.ime_virtual_keyboard_enabled")
+    ) {
+      return;
+    }
+
+    if (!this.#frame) {
+      this.#frame = document.createElement("iframe");
+      this.#frame.setAttribute("embed", true);
+      this.#frame.setAttribute("hidefocus", true);
+      this.#frame.setAttribute("id", "keyboard-frame");
+      this.#frame.setAttribute("src", "beaver://keyboard/index.html");
+      this.#footer.append(this.#frame);
+      await new Promise((resolve) => {
+        this.#frame.addEventListener("embedloadstatuschange", (event) => {
+          if (event.detail == "complete") resolve();
+        });
+      });
+    }
+
+    this.#footer.classList.add("visible");
+    document.body.classList.add("keyboard-open");
+
+    if (this.#frame.contentWindow) {
+      this.#frame.contentWindow.postMessage(
+        {
+          type: "show",
+          inputType: detail.inputType,
+          currentValue: detail.currentValue,
+          placeholder: detail.placeholder,
+        },
+        "*",
+      );
+    }
+  }
+
+  close() {
+    if (
+      !navigator.servo.getBoolPreference("beaver.ime_virtual_keyboard_enabled")
+    ) {
+      return;
+    }
+
+    this.#footer.classList.remove("visible");
+    document.body.classList.remove("keyboard-open");
+
+    if (this.#frame?.contentWindow) {
+      this.#frame.contentWindow.postMessage({ type: "hide" }, "*");
+    }
+  }
+}
diff --git a/ui/system/services/media_session.js b/ui/system/services/media_session.js
new file mode 100644
index 0000000..c7c3b16
--- /dev/null
+++ b/ui/system/services/media_session.js
@@ -0,0 +1,138 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+import { MediaBroadcaster } from "../media_broadcast.js";
+
+let mediaSessionWebviewId = null;
+const remoteMediaControls = new Map();
+let mediaBroadcaster = null;
+let localMediaControl = null;
+let mediaIcon = null;
+
+export function init(layoutManager, { getRemoteControlTarget }) {
+  localMediaControl = document.getElementById("media-control");
+  mediaIcon = document.getElementById("media-icon");
+
+  mediaBroadcaster = new MediaBroadcaster({
+    deviceName: null,
+    onRemoteAction: (action) => {
+      if (mediaSessionWebviewId == null) return;
+      const entry = layoutManager.webviews.get(mediaSessionWebviewId);
+      if (entry) {
+        entry.webview.ensureIframe();
+        entry.webview.iframe.mediaSessionAction(action);
+      }
+    },
+    onRemoteState: (data) => {
+      const ctrl = getOrCreateRemoteControl(
+        data.sessionId,
+        data.deviceName,
+        getRemoteControlTarget,
+      );
+      ctrl.title = data.title || "";
+      ctrl.artist = data.artist || "";
+      ctrl.album = data.album || "";
+      ctrl.playbackState = data.playbackState || "none";
+      ctrl.duration = data.duration || 0;
+      ctrl.position = data.position || 0;
+      ctrl.hasMedia = data.playbackState !== "none";
+      updateMediaIcon();
+    },
+  });
+
+  mediaBroadcaster.resolveDeviceName();
+
+  navigator.embedder.pairing.addEventListener("peerjoined", () => {
+    setTimeout(() => mediaBroadcaster.sendHello(), 5000);
+  });
+
+  if (mediaIcon) {
+    mediaIcon.onclick = () => {
+      const panel = document.getElementById("media-panel");
+      if (panel) panel.classList.toggle("open");
+    };
+  }
+
+  // Listen for media session events from webviews
+  document
+    .getElementById("root")
+    .addEventListener("webview-mediasession", (e) => {
+      const { webviewId, eventType } = e.detail;
+      mediaSessionWebviewId = webviewId;
+      updateControl(localMediaControl, eventType, e.detail);
+      const mobileCtrl = getRemoteControlTarget()?.shadowRoot?.querySelector(
+        "#mobile-media-control",
+      );
+      updateControl(mobileCtrl, eventType, e.detail);
+      mediaBroadcaster.updateState(e.detail);
+    });
+
+  if (localMediaControl) {
+    localMediaControl.addEventListener("media-action", handleAction);
+  }
+
+  function handleAction(event) {
+    if (mediaSessionWebviewId == null) return;
+    const entry = layoutManager.webviews.get(mediaSessionWebviewId);
+    if (entry) {
+      entry.webview.ensureIframe();
+      entry.webview.iframe.mediaSessionAction(event.detail.action);
+    }
+  }
+
+  return { handleAction };
+}
+
+function getOrCreateRemoteControl(sessionId, deviceName, getTarget) {
+  let ctrl = remoteMediaControls.get(sessionId);
+  if (!ctrl) {
+    ctrl = document.createElement("media-control");
+    ctrl.classList.add("inline");
+    ctrl.deviceId = sessionId;
+    ctrl.deviceName = deviceName;
+    ctrl.hasMedia = true;
+    ctrl.addEventListener("media-action", (event) => {
+      mediaBroadcaster.sendAction(event.detail.deviceId, event.detail.action);
+    });
+    remoteMediaControls.set(sessionId, ctrl);
+
+    const panel = document.getElementById("media-panel");
+    if (panel) {
+      panel.appendChild(ctrl);
+    } else {
+      const target = getTarget();
+      const localCtrl = target?.shadowRoot?.querySelector(
+        "#mobile-media-control",
+      );
+      if (localCtrl) localCtrl.after(ctrl);
+    }
+    updateMediaIcon();
+  }
+  if (deviceName) ctrl.deviceName = deviceName;
+  return ctrl;
+}
+
+function updateControl(ctrl, eventType, detail) {
+  if (!ctrl) return;
+  if (eventType === "metadata") {
+    ctrl.title = detail.title || "";
+    ctrl.artist = detail.artist || "";
+    ctrl.album = detail.album || "";
+    ctrl.hasMedia = true;
+  } else if (eventType === "playbackstate") {
+    ctrl.playbackState = detail.playbackState || "none";
+    ctrl.hasMedia = detail.playbackState !== "none";
+    if (!ctrl.hasMedia) ctrl.open = false;
+  } else if (eventType === "positionstate") {
+    ctrl.duration = detail.duration || 0;
+    ctrl.position = detail.position || 0;
+  }
+  updateMediaIcon();
+}
+
+function updateMediaIcon() {
+  if (!mediaIcon) return;
+  const active =
+    localMediaControl?.hasMedia ||
+    [...remoteMediaControls.values()].some((c) => c.hasMedia);
+  mediaIcon.classList.toggle("hidden", !active);
+}
diff --git a/ui/system/services/notifications.js b/ui/system/services/notifications.js
new file mode 100644
index 0000000..a7f8b9c
--- /dev/null
+++ b/ui/system/services/notifications.js
@@ -0,0 +1,112 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+const MAX_NOTIFICATIONS = 50;
+let notifications = [];
+let panels = [];
+
+export function registerPanel(panel) {
+  panels.push(panel);
+}
+
+export function unregisterPanel(panel) {
+  panels = panels.filter((p) => p !== panel);
+}
+
+function updateBadge() {
+  const badge = document.getElementById("notifications-badge");
+  if (!badge) {
+    return;
+  }
+
+  const count = notifications.length;
+  if (count > 0) {
+    badge.textContent =
+      count > MAX_NOTIFICATIONS ? `${MAX_NOTIFICATIONS}+` : count;
+    badge.classList.remove("hidden");
+  } else {
+    badge.classList.add("hidden");
+  }
+}
+
+function updatePanels() {
+  const snapshot = [...notifications];
+  for (const panel of panels) {
+    panel.notifications = snapshot;
+  }
+  updateBadge();
+}
+
+export function add(notification) {
+  if (!notification.timestamp) {
+    notification.timestamp = Date.now();
+  }
+  if (!notification.id) {
+    notification.id = `notif-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+  }
+
+  if (notification.tag) {
+    const existingIndex = notifications.findIndex(
+      (n) => n.tag === notification.tag,
+    );
+    if (existingIndex !== -1) {
+      notifications[existingIndex] = notification;
+    } else {
+      notifications.unshift(notification);
+    }
+  } else {
+    notifications.unshift(notification);
+  }
+
+  if (notifications.length > MAX_NOTIFICATIONS) {
+    notifications = notifications.slice(0, MAX_NOTIFICATIONS);
+  }
+
+  updatePanels();
+
+  if (notification.title) {
+    toastManager?.add(notification.title);
+  }
+}
+
+export function removeByTag(tag) {
+  const len = notifications.length;
+  notifications = notifications.filter((n) => n.tag !== tag);
+  if (notifications.length !== len) updatePanels();
+}
+
+export function dismiss(notification) {
+  const index = notifications.findIndex((n) => n.id === notification.id);
+  if (index !== -1) {
+    notifications.splice(index, 1);
+    updatePanels();
+  }
+}
+
+export function clearAll() {
+  if (notifications.length === 0) return;
+  notifications = [];
+  updatePanels();
+}
+
+export function getAll() {
+  return [...notifications];
+}
+
+export function handleClick(notification, { layoutManager, panel, pairingHandler }) {
+  if (notification.tag === "pairing-requests") {
+    panel.open = false;
+    if (pairingHandler.hasPendingRequests) pairingHandler.showPairingDialog();
+    return;
+  }
+  if (notification.webviewId && layoutManager.webviews) {
+    for (const [id, entry] of layoutManager.webviews) {
+      if (id.toString() === notification.webviewId) {
+        layoutManager.setActiveWebView(id);
+        if (layoutManager.scrollToPanel) layoutManager.scrollToPanel(entry.panelIndex);
+        break;
+      }
+    }
+  }
+  dismiss(notification);
+  panel.open = false;
+}
diff --git a/ui/system/services/shortcuts.js b/ui/system/services/shortcuts.js
new file mode 100644
index 0000000..3dbd5e3
--- /dev/null
+++ b/ui/system/services/shortcuts.js
@@ -0,0 +1,103 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+
+export function init(
+  layoutManager,
+  { createNewView, switchToHomescreen, openView, mobileComponents },
+) {
+  Mousetrap.bindGlobal("mod+t", () => {
+    createNewView();
+    return false;
+  });
+
+  Mousetrap.bindGlobal("mod+n", () => {
+    navigator.embedder.openNewOSWindow("beaver://system/desktop/index.html");
+    return false;
+  });
+
+  Mousetrap.bindGlobal("mod+f", () => {
+    navigator.embedder.openNewOSWindow(
+      "beaver://system/search.html",
+      "notitle,ontop",
+    );
+    return false;
+  });
+
+  Mousetrap.bindGlobal("mod+w", () => {
+    if (layoutManager.activeWebviewId) {
+      layoutManager.removeWebView(layoutManager.activeWebviewId);
+    }
+    return false;
+  });
+
+  Mousetrap.bindGlobal("mod+shift+w", () => {
+    navigator.embedder.closeCurrentOSWindow();
+    return false;
+  });
+
+  Mousetrap.bindGlobal("mod+q", () => {
+    navigator.embedder.exit();
+    return false;
+  });
+
+  Mousetrap.bindGlobal("mod+shift+r", () => {
+    window.location.reload();
+    return false;
+  });
+
+  Mousetrap.bindGlobal(["mod+]", "ctrl+tab"], () => {
+    layoutManager.nextPanel();
+    return false;
+  });
+
+  Mousetrap.bindGlobal(["mod+[", "ctrl+shift+tab"], () => {
+    layoutManager.prevPanel();
+    return false;
+  });
+
+  Mousetrap.bindGlobal("mod+e", () => {
+    layoutManager.toggleOverview();
+    return false;
+  });
+
+  Mousetrap.bindGlobal("escape", () => {
+    const mc = mobileComponents();
+    if (mc.radialMenu?.open) {
+      mc.radialMenu.hide();
+      return false;
+    }
+    if (mc.overview?.open) {
+      mc.overview.open = false;
+      return false;
+    }
+    if (mc.notificationSheet?.open) {
+      mc.notificationSheet.open = false;
+      return false;
+    }
+    if (mc.actionBar?.open) {
+      mc.actionBar.hide();
+      return false;
+    }
+    if (mc.notificationPanel?.open) {
+      mc.notificationPanel.open = false;
+      return false;
+    }
+    if (mc.systemMenu?.open) {
+      mc.systemMenu.open = false;
+      return false;
+    }
+    if (layoutManager.overviewMode) {
+      layoutManager.hideOverview();
+      return false;
+    }
+  });
+
+  Mousetrap.bindGlobal("mod+l", () => {
+    if (layoutManager.activeWebviewId) {
+      const entry = layoutManager.webviews.get(layoutManager.activeWebviewId);
+      if (entry) {
+        entry.webview.openUrlBar();
+      }
+    }
+    return false;
+  });
+}