palmier 0.8.3 → 0.8.4

package/palmier-server/pwa/src/App.tsx

@@ -5,6 +5,7 @@ import { HostConnectionProvider } from "./contexts/HostConnectionContext";
 import { Device } from "./native/Device";
 import Dashboard from "./pages/Dashboard";
 import PairHost from "./pages/PairHost";
+import PairSetup from "./pages/PairSetup";
 
 /** Routes FCM notification taps (fired by DevicePlugin) into the client-side router. */
 function DeepLinkRouter() {
@@ -29,6 +30,7 @@ export default function App() {
           <Route path="/runs/:taskId" element={<Dashboard />} />
           <Route path="/runs/:taskId/:runId" element={<Dashboard />} />
           <Route path="/pair" element={<PairHost />} />
+          <Route path="/pair/setup" element={<PairSetup />} />
         </Routes>
       </HostConnectionProvider>
     </HostStoreProvider>

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

@@ -0,0 +1,288 @@
+import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { Capacitor } from "@capacitor/core";
+import { App as CapacitorApp } from "@capacitor/app";
+import { Device, type PermissionType } from "../native/Device";
+
+const isNative = Capacitor.isNativePlatform();
+
+type CapabilityGroup = "Messaging" | "Data" | "Device";
+
+const CAPABILITY_GROUPS: CapabilityGroup[] = ["Device", "Data", "Messaging"];
+
+interface CapabilityDefinition {
+  capability: string;
+  label: string;
+  group: CapabilityGroup;
+  permission?: PermissionType;
+  needsFullScreenIntent?: boolean;
+  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 CapabilityTogglesProps {
+  capabilityTokens?: Record<string, string | null>;
+  activeClientToken?: string | null;
+  request<T = unknown>(method: string, params?: unknown): Promise<T>;
+  onCapabilityTokensChange(tokens: Record<string, string | null>): void;
+}
+
+export default function CapabilityToggles({ capabilityTokens, activeClientToken, request, onCapabilityTokensChange }: CapabilityTogglesProps) {
+  const [togglingCapability, setTogglingCapability] = useState<string | null>(null);
+  const [confirmingSwitchCapability, setConfirmingSwitchCapability] = useState<CapabilityDefinition | null>(null);
+  const [confirmingDisableCapability, setConfirmingDisableCapability] = useState<CapabilityDefinition | null>(null);
+
+  // Null while loading; empty set means the native plugin doesn't advertise the
+  // list (old APK / web) — fall back to the per-call {supported} flag.
+  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()));
+  }, []);
+
+  function isCapabilityEnabled(capability: string): boolean {
+    return !!(activeClientToken && capabilityTokens?.[capability] === activeClientToken);
+  }
+
+  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;
+  }
+
+  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[capability] = enabled ? (activeClientToken ?? null) : null;
+    onCapabilityTokensChange(updated);
+  }
+
+  // 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 || !Device) return;
+    const locationEnabled = isCapabilityEnabled("location");
+    if (!locationEnabled) return;
+
+    function syncPermissionState() {
+      Device!.checkPermission({ type: "location" }).then(({ granted }) => {
+        if (!granted) {
+          request("device.location.disable").then(() => {
+            setCapabilityEnabled("location", false);
+          }).catch(() => {});
+        }
+      });
+    }
+
+    syncPermissionState();
+    const listener = CapacitorApp.addListener("resume", syncPermissionState);
+    return () => { listener.then((h) => h.remove()); };
+  }, [capabilityTokens, activeClientToken]);
+
+  // Mirror the server-derived enabled set into native as a local kill-switch.
+  // Toggle paths write through immediately; this catches host-initiated changes
+  // (e.g. a capability revoked on another device) on the next render.
+  useEffect(() => {
+    if (!isNative || !Device) return;
+    const enabled = CAPABILITIES
+      .map((definition) => definition.capability)
+      .filter((capability) => capabilityTokens?.[capability] === activeClientToken);
+    Device.setEnabledCapabilities({ capabilities: enabled }).catch(() => {});
+  }, [capabilityTokens, activeClientToken]);
+
+  async function toggleCapability(definition: CapabilityDefinition, bypassConfirmation = false) {
+    const enabled = isCapabilityEnabled(definition.capability);
+
+    if (enabled && !bypassConfirmation) {
+      setConfirmingDisableCapability(definition);
+      return;
+    }
+
+    const ownedByOther = !enabled && !!capabilityTokens?.[definition.capability]
+      && capabilityTokens[definition.capability] !== activeClientToken;
+    if (ownedByOther && !bypassConfirmation) {
+      setConfirmingSwitchCapability(definition);
+      return;
+    }
+
+    setTogglingCapability(definition.capability);
+    try {
+      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;
+      }
+
+      if (Device && definition.capability === "send-email") {
+        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: fall through */ }
+      }
+
+      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;
+        }
+        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 before our useEffect syncs.
+      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 ${definition.capability}:`, err);
+    } finally {
+      setTogglingCapability(null);
+    }
+  }
+
+  const visibleGroups = CAPABILITY_GROUPS
+    .map((group) => ({ group, items: CAPABILITIES.filter((d) => d.group === group && isCapabilityVisible(d)) }))
+    .filter((g) => g.items.length > 0);
+
+  if (!isNative || visibleGroups.length === 0) return null;
+
+  const switchModal = 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 d = confirmingSwitchCapability;
+              setConfirmingSwitchCapability(null);
+              toggleCapability(d, true);
+            }}
+          >
+            Switch
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+
+  const disableModal = 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 d = confirmingDisableCapability;
+              setConfirmingDisableCapability(null);
+              toggleCapability(d, true);
+            }}
+          >
+            Disable
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+
+  return (
+    <>
+      {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>
+      ))}
+      {switchModal}
+      {disableModal}
+    </>
+  );
+}

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

@@ -2,60 +2,15 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useNavigate } from "react-router-dom";
 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";
+import CapabilityToggles from "./CapabilityToggles";
 
 /** LAN mode: PWA is served by palmier serve (marker injected into HTML). */
 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>;
@@ -74,177 +29,10 @@ 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 [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 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;
-  }
-
-  /** Update local capability tokens state after a toggle change */
-  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[capability] = enabled ? (activeClientToken ?? null) : null;
-    onCapabilityTokensChange?.(updated);
-  }
-
-  // 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 || !Device || !request) return;
-
-    const locationEnabled = isCapabilityEnabled("location");
-    if (!locationEnabled) return;
-
-    function syncPermissionState() {
-      Device!.checkPermission({ type: "location" }).then(({ granted }) => {
-        if (!granted) {
-          request!("device.location.disable").then(() => {
-            setCapabilityEnabled("location", false);
-          }).catch(() => {});
-        }
-      });
-    }
 
-    syncPermissionState();
-    const listener = CapacitorApp.addListener("resume", syncPermissionState);
-    return () => { listener.then((h) => h.remove()); };
-  }, [capabilityTokens, activeClientToken]);
-
-  // 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;
-    const enabled = isCapabilityEnabled(definition.capability);
-
-    if (enabled && !bypassConfirmation) {
-      setConfirmingDisableCapability(definition);
-      return;
-    }
-
-    const ownedByOther = !enabled && !!capabilityTokens?.[definition.capability]
-      && capabilityTokens[definition.capability] !== activeClientToken;
-    if (ownedByOther && !bypassConfirmation) {
-      setConfirmingSwitchCapability(definition);
-      return;
-    }
-
-    setTogglingCapability(definition.capability);
-    try {
-      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;
-      }
-
-      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.
-        }
-      }
-
-      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;
-        }
-        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 ${definition.capability}:`, err);
-    } finally {
-      setTogglingCapability(null);
-    }
-  }
   const drawerRef = useRef<HTMLDivElement>(null);
   const renameInputRef = useRef<HTMLInputElement>(null);
 
-  // In LAN mode, there's only one host — no picker/pairing needed
-
   const close = useCallback(() => {
     setClosing(true);
   }, []);
@@ -417,41 +205,20 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         </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>
-          </>
-        );
-      })()}
+      {isNative && request && (
+        <>
+          <div className="drawer-divider" />
+          <div className="drawer-section">
+            <h3 className="drawer-section-label">Host capabilities on this device</h3>
+            <CapabilityToggles
+              capabilityTokens={capabilityTokens}
+              activeClientToken={activeClientToken}
+              request={request}
+              onCapabilityTokensChange={(tokens) => onCapabilityTokensChange?.(tokens)}
+            />
+          </div>
+        </>
+      )}
 
       <div className="drawer-footer">
         {daemonVersion && (
@@ -497,66 +264,6 @@ 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 (
@@ -565,8 +272,6 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
           {drawerContent}
         </div>
         {deleteModal}
-      {switchCapabilityModal}
-      {disableCapabilityModal}
       </>
     );
   }
@@ -602,8 +307,6 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
       )}
 
       {deleteModal}
-      {switchCapabilityModal}
-      {disableCapabilityModal}
     </>
   );
 }