palmier 0.8.10 → 0.9.2

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

@@ -1,13 +1,12 @@
 import { useEffect } from "react";
-import { Routes, Route, useNavigate } from "react-router-dom";
-import { HostStoreProvider } from "./contexts/HostStoreContext";
+import { Routes, Route, useNavigate, useParams, Navigate } from "react-router-dom";
+import { HostStoreProvider, useHostStore } from "./contexts/HostStoreContext";
 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() {
   const navigate = useNavigate();
   useEffect(() => {
@@ -18,21 +17,43 @@ function DeepLinkRouter() {
   return null;
 }
 
+function RootRedirect() {
+  const { pairedHosts } = useHostStore();
+  if (pairedHosts.length === 0) return <Navigate to="/pair" replace />;
+  return <Navigate to={`/hosts/${encodeURIComponent(pairedHosts[0].hostId)}`} replace />;
+}
+
+function HostScope() {
+  const { hostId } = useParams<{ hostId: string }>();
+  const { pairedHosts } = useHostStore();
+  const host = pairedHosts.find((h) => h.hostId === hostId) ?? null;
+
+  if (!host) return <Navigate to="/" replace />;
+
+  return (
+    <HostConnectionProvider activeHost={host}>
+      <Routes>
+        <Route index element={<Dashboard />} />
+        <Route path="tasks" element={<Dashboard />} />
+        <Route path="runs/:taskId" element={<Dashboard />} />
+        <Route path="runs/:taskId/:runId" element={<Dashboard />} />
+        <Route path="pair/setup" element={<PairSetup />} />
+        <Route path="*" element={<Navigate to="." replace />} />
+      </Routes>
+    </HostConnectionProvider>
+  );
+}
+
 export default function App() {
   return (
     <HostStoreProvider>
-      <HostConnectionProvider>
-        <DeepLinkRouter />
-        <Routes>
-          <Route path="/" element={<Dashboard />} />
-          <Route path="/tasks" element={<Dashboard />} />
-          <Route path="/runs" element={<Dashboard />} />
-          <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>
+      <DeepLinkRouter />
+      <Routes>
+        <Route path="/" element={<RootRedirect />} />
+        <Route path="/pair" element={<PairHost />} />
+        <Route path="/hosts/:hostId/*" element={<HostScope />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
     </HostStoreProvider>
   );
 }

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

@@ -1,8 +1,7 @@
-import { useState, useEffect } from "react";
-import { createPortal } from "react-dom";
+import { useState, useEffect, useCallback } from "react";
 import { Capacitor } from "@capacitor/core";
 import { App as CapacitorApp } from "@capacitor/app";
-import { Device, type PermissionType } from "../native/Device";
+import { Device, type CapabilityStatus } from "../native/Device";
 
 const isNative = Capacitor.isNativePlatform();
 
@@ -14,265 +13,108 @@ 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: "Notifications from Other Apps", 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 },
+  { capability: "sms-read", label: "Read SMS", group: "Messaging" },
+  { capability: "sms-send", label: "Send SMS", group: "Messaging" },
+  { capability: "send-email", label: "Send Email", group: "Messaging" },
+  { capability: "notifications", label: "Notifications from Other Apps", group: "Data" },
+  { capability: "contacts", label: "Manage Contacts", group: "Data" },
+  { capability: "calendar", label: "Manage Calendar", group: "Data" },
+  { capability: "location", label: "Get Location", group: "Device" },
+  { capability: "dnd", label: "Set Ringer Mode", group: "Device" },
+  { capability: "alarm", label: "Trigger Alarms", group: "Device" },
 ];
 
-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);
+export async function loadEnabledCapabilities(): Promise<Set<string>> {
+  if (!isNative || !Device) return new Set();
+  try {
+    const { capabilities } = await Device.getCapabilityStatus();
+    return new Set(capabilities.filter((c) => c.enabled).map((c) => c.name));
+  } catch {
+    return new Set();
   }
+}
 
-  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;
-  }
+interface CapabilityTogglesProps {
+  onChange?(enabled: Set<string>): void;
+}
 
-  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);
-  }
+export default function CapabilityToggles({ onChange }: CapabilityTogglesProps) {
+  const [statuses, setStatuses] = useState<Map<string, CapabilityStatus>>(new Map());
+  const [busyCapability, setBusyCapability] = useState<string | null>(null);
 
-  // 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(() => {
+  const refresh = useCallback(async () => {
     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(() => {});
-        }
-      });
+    try {
+      const { capabilities } = await Device.getCapabilityStatus();
+      const next = new Map<string, CapabilityStatus>();
+      for (const c of capabilities) next.set(c.name, c);
+      setStatuses(next);
+      onChange?.(new Set(capabilities.filter((c) => c.enabled).map((c) => c.name)));
+    } catch (err) {
+      console.error("Failed to read capability status:", err);
     }
+  }, [onChange]);
 
-    syncPermissionState();
-    const listener = CapacitorApp.addListener("resume", syncPermissionState);
-    return () => { listener.then((h) => h.remove()); };
-  }, [capabilityTokens, activeClientToken]);
+  useEffect(() => { refresh(); }, [refresh]);
 
-  // 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;
-    }
+    if (!isNative) return;
+    const listener = CapacitorApp.addListener("resume", refresh);
+    return () => { listener.then((h) => h.remove()); };
+  }, [refresh]);
 
-    setTogglingCapability(definition.capability);
+  async function toggleCapability(definition: CapabilityDefinition) {
+    if (!Device) return;
+    const status = statuses.get(definition.capability);
+    if (!status) return;
+    setBusyCapability(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;
-        }
+      const result = await Device.setCapabilityEnabled({
+        capability: definition.capability,
+        enabled: !status.enabled,
+      });
+      if (!result.enabled && result.reason === "no-email-client") {
+        alert("No email app is installed on this device. Install one (e.g. Gmail) before enabling Send Email.");
       }
-
-      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);
+      await refresh();
     } catch (err) {
       console.error(`Failed to toggle ${definition.capability}:`, err);
     } finally {
-      setTogglingCapability(null);
+      setBusyCapability(null);
     }
   }
 
   const visibleGroups = CAPABILITY_GROUPS
-    .map((group) => ({ group, items: CAPABILITIES.filter((d) => d.group === group && isCapabilityVisible(d)) }))
+    .map((group) => ({
+      group,
+      items: CAPABILITIES.filter((d) => {
+        const s = statuses.get(d.capability);
+        return d.group === group && s?.supported;
+      }),
+    }))
     .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);
+            const status = statuses.get(definition.capability);
+            const on = !!status?.enabled;
             return (
               <label key={definition.capability} className="drawer-toggle">
                 <span className="drawer-toggle-label">{definition.label}</span>
                 <button
-                  className={`toggle-switch ${enabled ? "toggle-switch-on" : ""}`}
+                  className={`toggle-switch ${on ? "toggle-switch-on" : ""}`}
                   onClick={() => toggleCapability(definition)}
-                  disabled={togglingCapability === definition.capability}
+                  disabled={busyCapability === definition.capability}
                   role="switch"
-                  aria-checked={enabled}
+                  aria-checked={on}
                 >
                   <span className="toggle-switch-thumb" />
                 </button>
@@ -281,8 +123,6 @@ export default function CapabilityToggles({ capabilityTokens, activeClientToken,
           })}
         </div>
       ))}
-      {switchModal}
-      {disableModal}
     </>
   );
 }

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

@@ -4,6 +4,48 @@ import { useHostConnection } from "../contexts/HostConnectionContext";
 
 const isNative = Capacitor.isNativePlatform();
 
+const SVG_PROPS = {
+  width: 16,
+  height: 16,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round" as const,
+  strokeLinejoin: "round" as const,
+};
+
+function WifiIcon() {
+  return (
+    <svg {...SVG_PROPS} aria-hidden="true">
+      <path d="M5 12.55a11 11 0 0 1 14.08 0" />
+      <path d="M1.42 9a16 16 0 0 1 21.16 0" />
+      <path d="M8.53 16.11a6 6 0 0 1 6.95 0" />
+      <line x1="12" y1="20" x2="12.01" y2="20" />
+    </svg>
+  );
+}
+
+function GlobeIcon() {
+  return (
+    <svg {...SVG_PROPS} aria-hidden="true">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="2" y1="12" x2="22" y2="12" />
+      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+    </svg>
+  );
+}
+
+function WarningIcon() {
+  return (
+    <svg {...SVG_PROPS} aria-hidden="true">
+      <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
+      <line x1="12" y1="9" x2="12" y2="13" />
+      <line x1="12" y1="17" x2="12.01" y2="17" />
+    </svg>
+  );
+}
+
 export default function ConnectionStatusIcon() {
   const { mode } = useHostConnection();
   const [popoverOpen, setPopoverOpen] = useState(false);
@@ -20,47 +62,47 @@ export default function ConnectionStatusIcon() {
 
   if (mode === "direct") return null;
 
-  let icon: string;
+  let icon: React.ReactNode;
   let label: string;
   let modifier: string;
   switch (mode) {
     case "lan":
-      icon = "\u{1F4F6}";
+      icon = <WifiIcon />;
       label = "Connected via LAN";
       modifier = "lan";
       break;
     case "nats":
-      icon = "\u{1F310}";
+      icon = <GlobeIcon />;
       label = isNative ? "Connected via relay" : "Connected";
       modifier = "relay";
       break;
     case "disconnected":
-      icon = "\u26A0\uFE0F";
+      icon = <WarningIcon />;
       label = "Disconnected";
       modifier = "disconnected";
       break;
     case "connecting":
     default:
-      icon = "\u{1F310}";
-      label = "Connecting…";
+      icon = <GlobeIcon />;
+      label = "Connecting\u2026";
       modifier = "connecting";
       break;
   }
 
   return (
-    <div
-      ref={containerRef}
-      className={`conn-status conn-status--${modifier}`}
-    >
+    <div ref={containerRef} className={`conn-status conn-status--${modifier}`}>
       <button
         type="button"
         className="conn-status-btn"
         aria-label={label}
         onClick={() => setPopoverOpen((v) => !v)}
       >
-        <span aria-hidden="true">{icon}</span>
+        {icon}
       </button>
-      <div className={`conn-status-popover ${popoverOpen ? "conn-status-popover--open" : ""}`} role="tooltip">
+      <div
+        className={`conn-status-popover ${popoverOpen ? "conn-status-popover--open" : ""}`}
+        role="tooltip"
+      >
         {label}
       </div>
     </div>