palmier 0.8.0 → 0.8.3

package/palmier-server/pwa/src/components/HostMenu.tsx

@@ -1,101 +1,9 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useNavigate } from "react-router-dom";
-import { Capacitor, registerPlugin } from "@capacitor/core";
-import { App as CapApp } from "@capacitor/app";
-import { Preferences } from "@capacitor/preferences";
-
-interface LocationPermissionResult {
-  fine: boolean;
-  background: boolean;
-}
-
-interface LocationPermissionPlugin {
-  request(): Promise<LocationPermissionResult>;
-  check(): Promise<LocationPermissionResult>;
-}
-
-interface NotificationListenerResult {
-  enabled: boolean;
-}
-
-interface NotificationListenerPlugin {
-  request(): Promise<NotificationListenerResult>;
-  check(): Promise<NotificationListenerResult>;
-}
-
-const LocationPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<LocationPermissionPlugin>("LocationPermission")
-  : null;
-
-interface SmsPermissionResult {
-  granted: boolean;
-}
-
-interface SmsPermissionPlugin {
-  request(): Promise<SmsPermissionResult>;
-  check(): Promise<SmsPermissionResult>;
-}
-
-interface ContactsPermissionResult {
-  granted: boolean;
-}
-
-interface ContactsPermissionPlugin {
-  request(): Promise<ContactsPermissionResult>;
-  check(): Promise<ContactsPermissionResult>;
-}
-
-interface CalendarPermissionResult {
-  granted: boolean;
-}
-
-interface CalendarPermissionPlugin {
-  request(): Promise<CalendarPermissionResult>;
-  check(): Promise<CalendarPermissionResult>;
-}
-
-interface DndAccessResult {
-  enabled: boolean;
-}
-
-interface DndAccessPlugin {
-  request(): Promise<DndAccessResult>;
-  check(): Promise<DndAccessResult>;
-}
-
-interface FullScreenIntentResult {
-  granted: boolean;
-}
-
-interface FullScreenIntentPlugin {
-  request(): Promise<FullScreenIntentResult>;
-  check(): Promise<FullScreenIntentResult>;
-}
-
-const NotificationListener = Capacitor.isNativePlatform()
-  ? registerPlugin<NotificationListenerPlugin>("NotificationListener")
-  : null;
-
-const SmsPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<SmsPermissionPlugin>("SmsPermission")
-  : null;
-
-const ContactsPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<ContactsPermissionPlugin>("ContactsPermission")
-  : null;
-
-const CalendarPermission = Capacitor.isNativePlatform()
-  ? registerPlugin<CalendarPermissionPlugin>("CalendarPermission")
-  : null;
-
-const DndAccess = Capacitor.isNativePlatform()
-  ? registerPlugin<DndAccessPlugin>("DndAccess")
-  : null;
-
-const FullScreenIntent = Capacitor.isNativePlatform()
-  ? registerPlugin<FullScreenIntentPlugin>("FullScreenIntent")
-  : null;
+import { Capacitor } from "@capacitor/core";
+import { App as CapacitorApp } from "@capacitor/app";
+import { Device, type PermissionType } from "../native/Device";
 import { useHostStore } from "../contexts/HostStoreContext";
 import { useMediaQuery } from "../hooks/useMediaQuery";
 import { confirmLeaveDraft } from "../draftGuard";
@@ -104,6 +12,50 @@ import { confirmLeaveDraft } from "../draftGuard";
 const isLanMode = !!(window as any).__PALMIER_SERVE__;
 const isNative = Capacitor.isNativePlatform();
 
+type CapabilityGroup = "Messaging" | "Data" | "Device";
+
+const CAPABILITY_GROUPS: CapabilityGroup[] = ["Device", "Data", "Messaging"];
+
+interface CapabilityDefinition {
+  /** Server-side capability name used in device.capability.{enable,disable} RPCs. */
+  capability: string;
+  /** Label shown in the drawer toggle. */
+  label: string;
+  /** Drawer section this capability is grouped under. */
+  group: CapabilityGroup;
+  /** Runtime or settings permission to request before enabling. */
+  permission?: PermissionType;
+  /** True for capabilities that display a full-screen UI (alarm). */
+  needsFullScreenIntent?: boolean;
+  /** Override RPC methods; location uses device.location.{enable,disable} instead. */
+  enableMethod?: string;
+  disableMethod?: string;
+  enableParams?(fcmToken: string): Record<string, unknown>;
+  disableParams?(): Record<string, unknown>;
+}
+
+const CAPABILITIES: CapabilityDefinition[] = [
+  { capability: "sms-read", label: "Read SMS", group: "Messaging", permission: "smsRead" },
+  { capability: "sms-send", label: "Send SMS", group: "Messaging", permission: "smsSend" },
+  { capability: "send-email", label: "Send Email", group: "Messaging", permission: "postNotifications" },
+  { capability: "notifications", label: "Read Notifications", group: "Data", permission: "notificationListener" },
+  { capability: "contacts", label: "Manage Contacts", group: "Data", permission: "contacts" },
+  { capability: "calendar", label: "Manage Calendar", group: "Data", permission: "calendar" },
+  {
+    capability: "location",
+    label: "Get Location",
+    group: "Device",
+    permission: "location",
+    enableMethod: "device.location.enable",
+    disableMethod: "device.location.disable",
+    enableParams: (fcmToken) => ({ fcmToken }),
+    disableParams: () => ({}),
+  },
+  { capability: "battery", label: "Read Battery Status", group: "Device" },
+  { capability: "dnd", label: "Set Ringer Mode", group: "Device", permission: "dnd" },
+  { capability: "alarm", label: "Trigger Alarms", group: "Device", needsFullScreenIntent: true },
+];
+
 interface HostMenuProps {
   daemonVersion?: string | null;
   capabilityTokens?: Record<string, string | null>;
@@ -122,294 +74,170 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null);
-  const [togglingLocation, setTogglingLocation] = useState(false);
-  const [togglingNotificationListener, setTogglingNotificationListener] = useState(false);
-  const [togglingSms, setTogglingSms] = useState(false);
-  const [togglingContacts, setTogglingContacts] = useState(false);
-  const [togglingCalendar, setTogglingCalendar] = useState(false);
-  const [togglingDnd, setTogglingDnd] = useState(false);
-  const [togglingAlarm, setTogglingAlarm] = useState(false);
-  const [togglingBattery, setTogglingBattery] = useState(false);
-  const [togglingEmail, setTogglingEmail] = useState(false);
+  const [togglingCapability, setTogglingCapability] = useState<string | null>(null);
+  const [confirmingSwitchCapability, setConfirmingSwitchCapability] = useState<CapabilityDefinition | null>(null);
+  const [confirmingDisableCapability, setConfirmingDisableCapability] = useState<CapabilityDefinition | null>(null);
+  /**
+   * Permission types the installed APK understands. Null while loading; an empty
+   * set means the native plugin doesn't expose a discovery method (pre-Device
+   * plugin build) — in that case we don't pre-filter the UI and rely on per-call
+   * {supported: false} from the native side as the fallback.
+   */
+  const [supportedPerms, setSupportedPerms] = useState<Set<PermissionType> | null>(null);
+
+  useEffect(() => {
+    if (!isNative || !Device) {
+      setSupportedPerms(new Set());
+      return;
+    }
+    Device.getSupportedPermissions()
+      .then(({ types }) => setSupportedPerms(new Set(types)))
+      .catch(() => setSupportedPerms(new Set()));   // old APK: fall back to per-call supported flag
+  }, []);
 
   // Capability enabled = this device's client token matches the registered device for that capability
-  function isCapEnabled(cap: string): boolean {
-    return !!(activeClientToken && capabilityTokens?.[cap] === activeClientToken);
+  function isCapabilityEnabled(capability: string): boolean {
+    return !!(activeClientToken && capabilityTokens?.[capability] === activeClientToken);
+  }
+
+  /**
+   * A capability is shown when native either explicitly supports its permission, or
+   * can't advertise support (empty set = old APK or web) — in the latter case the
+   * toggle still works because the per-call `supported` flag guards at tap time.
+   */
+  function isCapabilityVisible(definition: CapabilityDefinition): boolean {
+    if (!supportedPerms) return false;
+    if (supportedPerms.size === 0) return true;
+    if (definition.permission && !supportedPerms.has(definition.permission)) return false;
+    if (definition.needsFullScreenIntent && !supportedPerms.has("fullScreenIntent")) return false;
+    return true;
   }
-  const locationEnabled = isCapEnabled("location");
-  const notificationListenerEnabled = isCapEnabled("notifications");
-  const smsEnabled = isCapEnabled("sms");
-  const contactsEnabled = isCapEnabled("contacts");
-  const calendarEnabled = isCapEnabled("calendar");
-  const dndEnabled = isCapEnabled("dnd");
-  const alarmEnabled = isCapEnabled("alert");
-  const batteryEnabled = isCapEnabled("battery");
-  const emailEnabled = isCapEnabled("email");
 
   /** Update local capability tokens state after a toggle change */
-  function setCapEnabled(cap: string, enabled: boolean) {
+  function setCapabilityEnabled(capability: string, enabled: boolean) {
     const updated: Record<string, string | null> = {};
     for (const [k, v] of Object.entries(capabilityTokens ?? {})) updated[k] = v ?? null;
-    updated[cap] = enabled ? (activeClientToken ?? null) : null;
+    updated[capability] = enabled ? (activeClientToken ?? null) : null;
     onCapabilityTokensChange?.(updated);
   }
 
-  // Sync location toggle with permission state — on mount and when app resumes from background
+  // If the OS location permission is revoked while the app is backgrounded,
+  // disable the capability on the host so agents don't keep pinging for fixes.
   useEffect(() => {
-    if (!isNative || !LocationPermission || !request) return;
+    if (!isNative || !Device || !request) return;
+
+    const locationEnabled = isCapabilityEnabled("location");
+    if (!locationEnabled) return;
 
     function syncPermissionState() {
-      if (!locationEnabled) return;
-      LocationPermission!.check().then(({ fine }) => {
-        if (!fine) {
-          // Permission revoked — disable on host
+      Device!.checkPermission({ type: "location" }).then(({ granted }) => {
+        if (!granted) {
           request!("device.location.disable").then(() => {
-            setCapEnabled("location", false);
+            setCapabilityEnabled("location", false);
           }).catch(() => {});
         }
       });
     }
 
     syncPermissionState();
-
-    const listener = CapApp.addListener("resume", () => {
-      syncPermissionState();
-    });
-
+    const listener = CapacitorApp.addListener("resume", syncPermissionState);
     return () => { listener.then((h) => h.remove()); };
-  }, [locationEnabled, activeClientToken]);
-
-  async function handleNotificationListenerToggle() {
-    if (!NotificationListener || !request) return;
-    setTogglingNotificationListener(true);
-    try {
-      if (notificationListenerEnabled) {
-        await Preferences.set({ key: "notificationListenerEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "notifications" });
-        setCapEnabled("notifications", false);
-      } else {
-        const { enabled: systemEnabled } = await NotificationListener.check();
-        if (!systemEnabled) {
-          const result = await NotificationListener.request();
-          if (!result.enabled) return;
-        }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "notificationListenerEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "notifications", fcmToken });
-        setCapEnabled("notifications", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle notification listener:", err);
-    } finally {
-      setTogglingNotificationListener(false);
-    }
-  }
-
-  async function handleSmsToggle() {
-    if (!SmsPermission || !request) return;
-    setTogglingSms(true);
-    try {
-      if (smsEnabled) {
-        await Preferences.set({ key: "smsListenerEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "sms" });
-        setCapEnabled("sms", false);
-      } else {
-        const { granted } = await SmsPermission.check();
-        if (!granted) {
-          const result = await SmsPermission.request();
-          if (!result.granted) return;
-        }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "smsListenerEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "sms", fcmToken });
-        setCapEnabled("sms", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle SMS access:", err);
-    } finally {
-      setTogglingSms(false);
-    }
-  }
-
-  async function handleContactsToggle() {
-    if (!ContactsPermission || !request) return;
-    setTogglingContacts(true);
-    try {
-      if (contactsEnabled) {
-        await Preferences.set({ key: "contactsAccessEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "contacts" });
-        setCapEnabled("contacts", false);
-      } else {
-        const { granted } = await ContactsPermission.check();
-        if (!granted) {
-          const result = await ContactsPermission.request();
-          if (!result.granted) return;
-        }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "contactsAccessEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "contacts", fcmToken });
-        setCapEnabled("contacts", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle contacts access:", err);
-    } finally {
-      setTogglingContacts(false);
-    }
-  }
-
-  async function handleCalendarToggle() {
-    if (!CalendarPermission || !request) return;
-    setTogglingCalendar(true);
-    try {
-      if (calendarEnabled) {
-        await Preferences.set({ key: "calendarAccessEnabled", value: "false" });
-        await request("device.capability.disable", { capability: "calendar" });
-        setCapEnabled("calendar", false);
-      } else {
-        const { granted } = await CalendarPermission.check();
-        if (!granted) {
-          const result = await CalendarPermission.request();
-          if (!result.granted) return;
-        }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await Preferences.set({ key: "calendarAccessEnabled", value: "true" });
-        await request("device.capability.enable", { capability: "calendar", fcmToken });
-        setCapEnabled("calendar", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle calendar access:", err);
-    } finally {
-      setTogglingCalendar(false);
-    }
-  }
+  }, [capabilityTokens, activeClientToken]);
 
-  async function handleDndToggle() {
-    if (!DndAccess || !request) return;
-    setTogglingDnd(true);
-    try {
-      if (dndEnabled) {
-        await request("device.capability.disable", { capability: "dnd" });
-        setCapEnabled("dnd", false);
-      } else {
-        const { enabled: systemEnabled } = await DndAccess.check();
-        if (!systemEnabled) {
-          const result = await DndAccess.request();
-          if (!result.enabled) return;
-        }
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "dnd", fcmToken });
-        setCapEnabled("dnd", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle DND access:", err);
-    } finally {
-      setTogglingDnd(false);
-    }
-  }
-
-  /** Ensure full-screen intent permission is granted (needed for alert + email). */
-  async function ensureFullScreenIntent(): Promise<boolean> {
-    if (!FullScreenIntent) return true;
-    const { granted } = await FullScreenIntent.check();
-    if (granted) return true;
-    const result = await FullScreenIntent.request();
-    return result.granted;
-  }
-
-  async function handleAlarmToggle() {
+  // Mirror the server-derived enabled set into native as the local kill-switch.
+  // Toggling below writes through immediately; this useEffect catches host-initiated
+  // changes (e.g. a capability revoked on another device) on the next render.
+  useEffect(() => {
+    if (!isNative || !Device) return;
+    const enabledCapabilities = CAPABILITIES
+      .map((definition) => definition.capability)
+      .filter((capability) => capabilityTokens?.[capability] === activeClientToken);
+    Device.setEnabledCapabilities({ capabilities: enabledCapabilities }).catch(() => {});
+  }, [capabilityTokens, activeClientToken]);
+
+  async function toggleCapability(definition: CapabilityDefinition, bypassConfirmation = false) {
     if (!request) return;
-    setTogglingAlarm(true);
-    try {
-      if (alarmEnabled) {
-        await request("device.capability.disable", { capability: "alert" });
-        setCapEnabled("alert", false);
-      } else {
-        if (!await ensureFullScreenIntent()) return;
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "alert", fcmToken });
-        setCapEnabled("alert", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle alert access:", err);
-    } finally {
-      setTogglingAlarm(false);
+    const enabled = isCapabilityEnabled(definition.capability);
+
+    if (enabled && !bypassConfirmation) {
+      setConfirmingDisableCapability(definition);
+      return;
     }
-  }
 
-  async function handleEmailToggle() {
-    if (!request) return;
-    setTogglingEmail(true);
-    try {
-      if (emailEnabled) {
-        await request("device.capability.disable", { capability: "email" });
-        setCapEnabled("email", false);
-      } else {
-        if (!await ensureFullScreenIntent()) return;
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "email", fcmToken });
-        setCapEnabled("email", true);
-      }
-    } catch (err) {
-      console.error("Failed to toggle email access:", err);
-    } finally {
-      setTogglingEmail(false);
+    const ownedByOther = !enabled && !!capabilityTokens?.[definition.capability]
+      && capabilityTokens[definition.capability] !== activeClientToken;
+    if (ownedByOther && !bypassConfirmation) {
+      setConfirmingSwitchCapability(definition);
+      return;
     }
-  }
 
-  async function handleBatteryToggle() {
-    if (!request) return;
-    setTogglingBattery(true);
+    setTogglingCapability(definition.capability);
     try {
-      if (batteryEnabled) {
-        await request("device.capability.disable", { capability: "battery" });
-        setCapEnabled("battery", false);
-      } else {
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) { console.warn("No FCM token available"); return; }
-        await request("device.capability.enable", { capability: "battery", fcmToken });
-        setCapEnabled("battery", true);
+      if (enabled) {
+        const method = definition.disableMethod ?? "device.capability.disable";
+        const params = definition.disableParams?.() ?? { capability: definition.capability };
+        await request(method, params);
+        setCapabilityEnabled(definition.capability, false);
+        return;
       }
-    } catch (err) {
-      console.error("Failed to toggle battery access:", err);
-    } finally {
-      setTogglingBattery(false);
-    }
-  }
 
-  async function handleLocationToggle() {
-    if (!request) return;
-    setTogglingLocation(true);
-    try {
-      if (locationEnabled) {
-        await request("device.location.disable");
-        setCapEnabled("location", false);
-      } else {
-        if (LocationPermission) {
-          const result = await LocationPermission.request();
-          if (!result.fine) {
+      if (Device && definition.capability === "send-email") {
+        // Verify a mailto: handler exists before enabling — silent PackageManager
+        // lookup. If the APK predates this method, allow enabling and let the
+        // user discover the missing-app failure at first use.
+        try {
+          const result = await Device.hasEmailClient();
+          if (result.supported && !result.available) {
+            alert("No email app is installed on this device. Install one (e.g. Gmail) before enabling Sending Email.");
             return;
           }
+        } catch {
+          // Older APK without this method — fall through.
         }
+      }
 
-        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
-        if (!fcmToken) {
-          console.warn("No FCM token available");
+      if (Device && definition.permission) {
+        const check = await Device.checkPermission({ type: definition.permission });
+        if (!check.supported) {
+          console.warn(`Native build does not support permission '${definition.permission}'`);
+          return;
+        }
+        if (!check.granted) {
+          const result = await Device.requestPermission({ type: definition.permission });
+          if (!result.granted) return;
+        }
+      }
+      if (Device && definition.needsFullScreenIntent) {
+        const check = await Device.checkPermission({ type: "fullScreenIntent" });
+        if (!check.supported) {
+          console.warn("Native build does not support fullScreenIntent");
           return;
         }
-        await request("device.location.enable", { fcmToken });
-        setCapEnabled("location", true);
+        if (!check.granted) {
+          const result = await Device.requestPermission({ type: "fullScreenIntent" });
+          if (!result.granted) return;
+        }
       }
+
+      if (!Device) return;
+      const { token: fcmToken } = await Device.getFcmToken();
+      if (!fcmToken) { console.warn("No FCM token available"); return; }
+
+      // Whitelist the capability natively before enabling on the host, so an FCM
+      // from the host can't arrive in the gap where our useEffect hasn't synced yet.
+      const enabledNow = CAPABILITIES
+        .map((c) => c.capability)
+        .filter((name) => name === definition.capability || capabilityTokens?.[name] === activeClientToken);
+      await Device.setEnabledCapabilities({ capabilities: enabledNow });
+
+      const method = definition.enableMethod ?? "device.capability.enable";
+      const params = definition.enableParams?.(fcmToken) ?? { capability: definition.capability, fcmToken };
+      await request(method, params);
+      setCapabilityEnabled(definition.capability, true);
     } catch (err) {
-      console.error("Failed to toggle location:", err);
+      console.error(`Failed to toggle ${definition.capability}:`, err);
     } finally {
-      setTogglingLocation(false);
+      setTogglingCapability(null);
     }
   }
   const drawerRef = useRef<HTMLDivElement>(null);
@@ -471,20 +299,17 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
 
   const drawerContent = (
     <>
-      <div className="drawer-header">
-        <span className="drawer-title">Palmier</span>
-        {!isDesktop && (
-          <button
-            className="drawer-close-btn"
-            onClick={close}
-            aria-label="Close menu"
-          >
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-              <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
-            </svg>
-          </button>
-        )}
-      </div>
+      {!isDesktop && (
+        <button
+          className="drawer-close-btn"
+          onClick={close}
+          aria-label="Close menu"
+        >
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+            <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          </svg>
+        </button>
+      )}
 
       {!isLanMode && pairedHosts.length > 0 && (
         <div className="drawer-section">
@@ -592,121 +417,41 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         </div>
       </>)}
 
-      {isNative && (
-        <>
-          <div className="drawer-divider" />
-          <div className="drawer-section">
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Location Access</span>
-              <button
-                className={`toggle-switch ${locationEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleLocationToggle}
-                disabled={togglingLocation}
-                role="switch"
-                aria-checked={locationEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Notification Access</span>
-              <button
-                className={`toggle-switch ${notificationListenerEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleNotificationListenerToggle}
-                disabled={togglingNotificationListener}
-                role="switch"
-                aria-checked={notificationListenerEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">SMS Access</span>
-              <button
-                className={`toggle-switch ${smsEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleSmsToggle}
-                disabled={togglingSms}
-                role="switch"
-                aria-checked={smsEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Contacts Access</span>
-              <button
-                className={`toggle-switch ${contactsEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleContactsToggle}
-                disabled={togglingContacts}
-                role="switch"
-                aria-checked={contactsEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Calendar Access</span>
-              <button
-                className={`toggle-switch ${calendarEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleCalendarToggle}
-                disabled={togglingCalendar}
-                role="switch"
-                aria-checked={calendarEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Do Not Disturb Control</span>
-              <button
-                className={`toggle-switch ${dndEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleDndToggle}
-                disabled={togglingDnd}
-                role="switch"
-                aria-checked={dndEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Alert Access</span>
-              <button
-                className={`toggle-switch ${alarmEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleAlarmToggle}
-                disabled={togglingAlarm}
-                role="switch"
-                aria-checked={alarmEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Battery Access</span>
-              <button
-                className={`toggle-switch ${batteryEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleBatteryToggle}
-                disabled={togglingBattery}
-                role="switch"
-                aria-checked={batteryEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-            <label className="drawer-toggle">
-              <span className="drawer-toggle-label">Email Access</span>
-              <button
-                className={`toggle-switch ${emailEnabled ? "toggle-switch-on" : ""}`}
-                onClick={handleEmailToggle}
-                disabled={togglingEmail}
-                role="switch"
-                aria-checked={emailEnabled}
-              >
-                <span className="toggle-switch-thumb" />
-              </button>
-            </label>
-          </div>
-        </>
-      )}
+      {isNative && (() => {
+        const visibleGroups = CAPABILITY_GROUPS
+          .map((group) => ({ group, items: CAPABILITIES.filter((definition) => definition.group === group && isCapabilityVisible(definition)) }))
+          .filter((g) => g.items.length > 0);
+        if (visibleGroups.length === 0) return null;
+        return (
+          <>
+            <div className="drawer-divider" />
+            <div className="drawer-section">
+              <h3 className="drawer-section-label">Host capabilities on this device</h3>
+              {visibleGroups.map(({ group, items }, index) => (
+                <div key={group} className={index > 0 ? "drawer-toggle-group drawer-toggle-group-divided" : "drawer-toggle-group"}>
+                  {items.map((definition) => {
+                    const enabled = isCapabilityEnabled(definition.capability);
+                    return (
+                      <label key={definition.capability} className="drawer-toggle">
+                        <span className="drawer-toggle-label">{definition.label}</span>
+                        <button
+                          className={`toggle-switch ${enabled ? "toggle-switch-on" : ""}`}
+                          onClick={() => toggleCapability(definition)}
+                          disabled={togglingCapability === definition.capability}
+                          role="switch"
+                          aria-checked={enabled}
+                        >
+                          <span className="toggle-switch-thumb" />
+                        </button>
+                      </label>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </>
+        );
+      })()}
 
       <div className="drawer-footer">
         {daemonVersion && (
@@ -752,6 +497,66 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
     document.body
   );
 
+  const disableCapabilityModal = confirmingDisableCapability && createPortal(
+    <div className="confirm-modal-overlay" onClick={() => setConfirmingDisableCapability(null)}>
+      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+        <h2 className="confirm-modal-title">Disable {confirmingDisableCapability.label}?</h2>
+        <p className="confirm-modal-message">
+          Agents running on the host will no longer be able to use {confirmingDisableCapability.label} until it is re-enabled on a device.
+        </p>
+        <div className="confirm-modal-actions">
+          <button
+            className="btn btn-secondary"
+            onClick={() => setConfirmingDisableCapability(null)}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-danger"
+            onClick={() => {
+              const definition = confirmingDisableCapability;
+              setConfirmingDisableCapability(null);
+              toggleCapability(definition, true);
+            }}
+          >
+            Disable
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
+  const switchCapabilityModal = confirmingSwitchCapability && createPortal(
+    <div className="confirm-modal-overlay" onClick={() => setConfirmingSwitchCapability(null)}>
+      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+        <h2 className="confirm-modal-title">Switch {confirmingSwitchCapability.label} to this device?</h2>
+        <p className="confirm-modal-message">
+          {confirmingSwitchCapability.label} is currently enabled on another device. Switching will make this device the one the host uses for {confirmingSwitchCapability.label}, and it will be disabled on the other device.
+        </p>
+        <div className="confirm-modal-actions">
+          <button
+            className="btn btn-secondary"
+            onClick={() => setConfirmingSwitchCapability(null)}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={() => {
+              const definition = confirmingSwitchCapability;
+              setConfirmingSwitchCapability(null);
+              toggleCapability(definition, true);
+            }}
+          >
+            Switch
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
   // Desktop: persistent inline sidebar
   if (isDesktop) {
     return (
@@ -760,6 +565,8 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
           {drawerContent}
         </div>
         {deleteModal}
+      {switchCapabilityModal}
+      {disableCapabilityModal}
       </>
     );
   }
@@ -795,6 +602,8 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
       )}
 
       {deleteModal}
+      {switchCapabilityModal}
+      {disableCapabilityModal}
     </>
   );
 }