palmier 0.8.1 → 0.8.4

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

@@ -1793,25 +1793,16 @@ body {
   z-index: 101;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   animation: drawerSlideIn 0.25s ease;
 }
 
-.drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-md);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.drawer-title {
-  font-size: 1.125rem;
-  font-weight: 800;
-  color: var(--color-primary);
-  letter-spacing: -0.04em;
-}
-
 .drawer-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1847,6 +1838,18 @@ body {
   margin-bottom: var(--space-sm);
 }
 
+.drawer-toggle-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.drawer-toggle-group-divided {
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-sm);
+  margin-top: var(--space-xs);
+}
+
 .drawer-toggle {
   display: flex;
   align-items: center;
@@ -1961,17 +1964,42 @@ body {
 
 /* ===== Tab bar ===== */
 
-.tab-bar {
-  display: flex;
-  align-items: center;
-  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
-  border-bottom: 1px solid var(--color-border);
+.app-header {
   position: sticky;
   top: 0;
   z-index: 10;
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  border-bottom: 1px solid var(--color-border);
   backdrop-filter: blur(8px);
 }
 
+.app-title-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+}
+
+.app-title-bar .hamburger-btn {
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.app-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.tab-bar {
+  display: flex;
+  align-items: center;
+}
+
 .tab-btn {
   flex: 1;
   display: flex;
@@ -2606,13 +2634,14 @@ body {
   position: sticky;
   top: 0;
   height: 100dvh;
-  width: 280px;
-  min-width: 280px;
+  width: 320px;
+  min-width: 320px;
   background: var(--color-surface);
   border-right: 1px solid var(--color-border);
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  overscroll-behavior: contain;
   animation: none;
 }
 
@@ -2630,3 +2659,277 @@ body {
     right: max(var(--space-lg), calc((100vw - 1080px) / 2));
   }
 }
+
+/* ===== Swipe-to-delete row ===== */
+
+.swipe-row {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;   /* let vertical scroll through; capture horizontal ourselves */
+}
+
+.swipe-row-action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-error, #dc2626);
+  color: #fff;
+  border: none;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+}
+
+.swipe-row-action:focus-visible {
+  outline: 2px solid var(--color-accent, #2E5CE5);
+  outline-offset: -4px;
+}
+
+.swipe-row-content {
+  position: relative;
+  background: var(--color-surface);
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+/* During an active drag, skip the transition so the row tracks the finger 1:1.
+   On release the class is removed and the snap animates. */
+.swipe-row-content-dragging {
+  transition: none;
+}
+
+.app-filter-help {
+  margin-top: var(--space-xs);
+}
+
+.app-filter-trigger {
+  display: inline-block;
+  padding: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: left;
+}
+
+.app-filter-selected {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 6px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  max-width: 100%;
+}
+
+.app-filter-selected-name {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-filter-selected-pkg {
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-filter-selected-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  margin-left: auto;
+  border: none;
+  background: none;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+.app-filter-selected-clear:hover {
+  background: var(--color-border-subtle);
+  color: var(--color-text);
+}
+
+.app-filter-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1100;
+  backdrop-filter: blur(4px);
+  padding: var(--space-md);
+}
+
+.app-filter-dialog {
+  background: var(--color-surface);
+  width: 100%;
+  max-width: 480px;
+  max-height: 80dvh;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-xl);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.app-filter-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.app-filter-header h2 {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.app-filter-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: var(--color-muted);
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+}
+
+.app-filter-close:hover {
+  background: var(--color-border-subtle);
+  color: var(--color-text);
+}
+
+.app-filter-search {
+  margin: var(--space-md) var(--space-lg) 0;
+  width: calc(100% - 2 * var(--space-lg));
+}
+
+.app-filter-list {
+  flex: 1;
+  overflow-y: auto;
+  list-style: none;
+  margin: 0;
+  padding: var(--space-xs) 0 var(--space-md);
+}
+
+.app-filter-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: 10px var(--space-lg);
+  cursor: pointer;
+  user-select: none;
+}
+
+.app-filter-row:hover {
+  background: var(--color-hover, rgba(0, 0, 0, 0.04));
+}
+
+.app-filter-row-labels {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.app-filter-row-name {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-filter-row-pkg {
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-filter-empty {
+  padding: var(--space-lg);
+  text-align: center;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+}
+
+.app-filter-skeleton {
+  cursor: default;
+}
+
+.app-filter-skeleton-bar {
+  flex: 1;
+  height: 14px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--color-border-subtle) 25%, var(--color-border) 50%, var(--color-border-subtle) 75%);
+  background-size: 200% 100%;
+  animation: appFilterShimmer 1.2s ease-in-out infinite;
+}
+
+@keyframes appFilterShimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.pair-setup {
+  min-height: 100dvh;
+  display: flex;
+  justify-content: center;
+  padding: var(--space-lg);
+  background: var(--color-bg);
+}
+
+.pair-setup-inner {
+  width: 100%;
+  max-width: 480px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.pair-setup-title {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.pair-setup-description {
+  margin: 0;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+}
+
+.pair-setup-loading {
+  padding: var(--space-lg);
+  text-align: center;
+  color: var(--color-muted);
+  font-size: 0.875rem;
+}
+
+.pair-setup-actions {
+  margin-top: var(--space-md);
+}

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}
+    </>
+  );
+}