palmier 0.8.11 → 0.9.2

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

@@ -1,22 +1,24 @@
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import { confirmLeaveDraft } from "../draftGuard";
 
 export default function TabBar() {
   const navigate = useNavigate();
   const location = useLocation();
-  const isTasks = location.pathname.startsWith("/tasks");
+  const { hostId } = useParams<{ hostId: string }>();
+  const isTasks = location.pathname.endsWith("/tasks");
   const isSessions = !isTasks;
 
-  function go(path: string) {
+  function go(suffix: string) {
     if (!confirmLeaveDraft()) return;
-    navigate(path);
+    if (!hostId) return;
+    navigate(`/hosts/${encodeURIComponent(hostId)}${suffix}`);
   }
 
   return (
     <>
       <button
         className={`tab-btn ${isSessions ? "tab-btn-active" : ""}`}
-        onClick={() => go("/")}
+        onClick={() => go("")}
       >
         <svg className="tab-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
           <path d="M2 8H4.5L6 4L8 12L10 6L11.5 8H14" />

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

@@ -1,6 +1,7 @@
 import { useEffect, useState, useCallback, useRef } from "react";
 import { Capacitor } from "@capacitor/core";
 import { useHostConnection } from "../contexts/HostConnectionContext";
+import { useHostStore } from "../contexts/HostStoreContext";
 import PlanDialog from "./PlanDialog";
 import { useBackClose } from "../hooks/useBackClose";
 import { Device } from "../native/Device";
@@ -103,10 +104,11 @@ interface TaskFormProps {
 }
 
 export default function TaskForm({ initial, agents, hostPlatform, isNotificationListener, onSaved, onRun, onCancel }: TaskFormProps) {
-  const { request } = useHostConnection();
+  const { request, activeHost } = useHostConnection();
+  const { setHostLastAgent } = useHostStore();
 
   const defaultAgent = () => {
-    const lastAgent = localStorage.getItem("palmier:lastAgent");
+    const lastAgent = activeHost.lastAgent;
     const agentKeys = agents.map((a) => a.key);
     if (lastAgent && agentKeys.includes(lastAgent)) return lastAgent;
     return agents[0]?.key ?? "";
@@ -326,7 +328,7 @@ export default function TaskForm({ initial, agents, hostPlatform, isNotification
         setError(result.error);
         return;
       }
-      if (!isEdit) localStorage.setItem("palmier:lastAgent", agent);
+      if (!isEdit) setHostLastAgent(activeHost.hostId, agent);
 
       // Command-triggered on create: save the task, then start it and navigate
       // to the run. Event-triggered tasks are started by the daemon in response

package/palmier-server/pwa/src/constants.ts

@@ -1,2 +1,2 @@
 /** Bump when a breaking host change is made. */
-export const MIN_HOST_VERSION = "0.8.9";
+export const MIN_HOST_VERSION = "0.8.11";

package/palmier-server/pwa/src/contexts/HostConnectionContext.tsx

@@ -12,7 +12,6 @@ import { Capacitor } from "@capacitor/core";
 import { App as CapacitorApp } from "@capacitor/app";
 import { Network } from "@capacitor/network";
 import { SERVER_URL } from "../api";
-import { useHostStore } from "./HostStoreContext";
 import type { PairedHost } from "../types";
 
 type ConnectionMode = "nats" | "lan" | "direct" | "connecting" | "disconnected";
@@ -31,29 +30,19 @@ interface HostConnectionContextValue {
   /** Subscribe to task events. Returns unsubscribe function. */
   subscribeEvents(hostId: string, callback: (msg: { subject: string; data: Uint8Array }) => void): () => void;
   /** Current active host. */
-  activeHost: PairedHost | null;
+  activeHost: PairedHost;
   /** Whether the current client has been revoked by the host. */
   unauthorized: boolean;
 }
 
-const HostConnectionContext = createContext<HostConnectionContextValue>({
-  connected: false,
-  mode: "connecting",
-  nc: null,
-  request() { return Promise.reject(new Error("No host connection")); },
-  subscribeEvents() { return () => {}; },
-  activeHost: null,
-  unauthorized: false,
-});
+const HostConnectionContext = createContext<HostConnectionContextValue | null>(null);
 
 const SSE_CONNECT_TIMEOUT_MS = 2_000;
 const HEARTBEAT_TIMEOUT_MS = 6_000;
 const LAN_PROBE_TIMEOUT_MS = 1_500;
 const LAN_KEEPALIVE_MS = 60_000;
 
-export function HostConnectionProvider({ children }: { children: ReactNode }) {
-  const { getActiveHost } = useHostStore();
-  const activeHost = getActiveHost();
+export function HostConnectionProvider({ children, activeHost }: { children: ReactNode; activeHost: PairedHost }) {
 
   const [nc, setNc] = useState<NatsConnection | null>(null);
   const [natsConnected, setNatsConnected] = useState(false);
@@ -69,31 +58,29 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
   const lastHeartbeat = useRef(0);
 
   // Host is a "direct-only" host if it has a directUrl (paired with address)
-  const isDirectHost = activeHost != null && !!activeHost.directUrl;
+  const isDirectHost = !!activeHost.directUrl;
   // Auto-LAN is opportunistic on native server-paired hosts that have a known LAN URL.
-  const useLanRpc = isNative && !isDirectHost && !!activeHost?.lanUrl && lanReachable;
+  const useLanRpc = isNative && !isDirectHost && !!activeHost.lanUrl && lanReachable;
 
   const mode: ConnectionMode = unauthorized || hostNotFound
     ? "disconnected"
-    : !activeHost
-      ? "connecting"
-      : isDirectHost
-        ? (sseConnected ? "direct" : "connecting")
-        : !natsConnected
-          ? "connecting"
-          : (useLanRpc ? "lan" : "nats");
+    : isDirectHost
+      ? (sseConnected ? "direct" : "connecting")
+      : !natsConnected
+        ? "connecting"
+        : (useLanRpc ? "lan" : "nats");
   const connected = mode !== "connecting" && mode !== "disconnected";
 
   // Reset terminal states when switching hosts or re-pairing (new client token).
   useEffect(() => {
     setUnauthorized(false);
     setHostNotFound(false);
-  }, [activeHost?.hostId, activeHost?.clientToken]);
+  }, [activeHost.hostId, activeHost.clientToken]);
 
   // Probe the host's LAN URL on native server-paired hosts. RPC routes via direct
   // HTTP when the probe succeeds; events stay on NATS regardless.
   useEffect(() => {
-    if (!isNative || isDirectHost || !activeHost?.lanUrl) {
+    if (!isNative || isDirectHost || !activeHost.lanUrl) {
       setLanReachable(false);
       return;
     }
@@ -141,7 +128,7 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
       appHandle.then((h) => h.remove());
       netHandle.then((h) => h.remove());
     };
-  }, [activeHost?.hostId, activeHost?.lanUrl, isDirectHost]);
+  }, [activeHost.hostId, activeHost.lanUrl, isDirectHost]);
 
   // Fetch NATS config from server and connect (only for NATS hosts)
   useEffect(() => {
@@ -155,8 +142,6 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    if (!activeHost) return;
-
     let cancelled = false;
     let retryDelayMs = 1_000;
     const MAX_RETRY_MS = 30_000;
@@ -164,7 +149,7 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
     async function connectLoop() {
       while (!cancelled) {
         try {
-          const res = await fetch(`${SERVER_URL}/api/nats-credentials/${activeHost!.hostId}`);
+          const res = await fetch(`${SERVER_URL}/api/nats-credentials/${activeHost.hostId}`);
           if (cancelled) return;
           if (res.status === 401 || res.status === 403 || res.status === 404) {
             console.error("[NATS] Host not found or rejected by relay:", res.status);
@@ -226,9 +211,24 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
     };
   }, [isDirectHost, activeHost]);
 
+  // Mobile WebViews suspend WebSockets when the app backgrounds; nats.ws often
+  // doesn't notice the dead socket on resume, leaving RPCs to hang/throw "Not
+  // connected." Force-close on resume so the connectLoop reconnects with a
+  // fresh socket.
+  useEffect(() => {
+    if (isDirectHost) return;
+    const handle = CapacitorApp.addListener("appStateChange", (state: { isActive: boolean }) => {
+      if (state.isActive && ncRef.current) {
+        console.log("[NATS] App resumed; cycling NATS conn to recover from possible dead socket");
+        ncRef.current.close().catch(() => {});
+      }
+    });
+    return () => { handle.then((h) => h.remove()); };
+  }, [isDirectHost]);
+
   // SSE connection for direct (LAN) hosts only
   useEffect(() => {
-    if (!activeHost || !isDirectHost) {
+    if (!isDirectHost) {
       setSseConnected(false);
       return;
     }
@@ -240,8 +240,8 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
       const timer = setTimeout(() => connectAc.abort(), SSE_CONNECT_TIMEOUT_MS);
       controller.signal.addEventListener("abort", () => connectAc.abort());
       try {
-        const res = await fetch(`${activeHost!.directUrl}/events`, {
-          headers: { Authorization: `Bearer ${activeHost!.clientToken}` },
+        const res = await fetch(`${activeHost.directUrl}/events`, {
+          headers: { Authorization: `Bearer ${activeHost.clientToken}` },
           signal: connectAc.signal,
         });
         clearTimeout(timer);
@@ -255,7 +255,7 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
 
     async function readStream(reader: ReadableStreamDefaultReader<Uint8Array>) {
       setSseConnected(true);
-      console.log("[HOST] SSE connected to", activeHost!.directUrl);
+      console.log("[HOST] SSE connected to", activeHost.directUrl);
 
       lastHeartbeat.current = Date.now();
       function checkHeartbeat() {
@@ -288,7 +288,7 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
               try {
                 const event = JSON.parse(jsonStr) as { task_id?: string; event_type?: string };
                 if (event.task_id && event.event_type) {
-                  const subject = `host-event.${activeHost!.hostId}.${event.task_id}`;
+                  const subject = `host-event.${activeHost.hostId}.${event.task_id}`;
                   for (const cb of sseEventCallbacksRef.current) cb({ subject, data: sc.current.encode(jsonStr) });
                 }
               } catch { /* skip malformed — includes heartbeat pings */ }
@@ -314,8 +314,6 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
     params?: unknown,
     opts?: { timeout?: number },
   ): Promise<T> => {
-    if (!activeHost) throw new Error("No active host");
-
     function checkUnauthorized(data: unknown): void {
       if (data && typeof data === "object" && (data as Record<string, unknown>).error === "Unauthorized") {
         setUnauthorized(true);
@@ -328,7 +326,7 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
-          Authorization: `Bearer ${activeHost!.clientToken}`,
+          Authorization: `Bearer ${activeHost.clientToken}`,
         },
         body: params != null ? JSON.stringify(params) : undefined,
         signal: opts?.timeout ? AbortSignal.timeout(opts.timeout) : undefined,
@@ -345,8 +343,8 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
 
     async function callNats(): Promise<T> {
       if (!ncRef.current) throw new Error("Not connected");
-      const subject = `host.${activeHost!.hostId}.rpc.${method}`;
-      const payload = { ...(params as Record<string, unknown> ?? {}), clientToken: activeHost!.clientToken };
+      const subject = `host.${activeHost.hostId}.rpc.${method}`;
+      const payload = { ...(params as Record<string, unknown> ?? {}), clientToken: activeHost.clientToken };
       const body = sc.current.encode(JSON.stringify(payload));
       console.log(`[HOST/NATS] → ${method}`, params ?? "");
       const msg = await ncRef.current.request(subject, body, { timeout: opts?.timeout ?? 10000 });
@@ -412,6 +410,8 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
   );
 }
 
-export function useHostConnection() {
-  return useContext(HostConnectionContext);
+export function useHostConnection(): HostConnectionContextValue {
+  const ctx = useContext(HostConnectionContext);
+  if (!ctx) throw new Error("useHostConnection must be used within HostConnectionProvider");
+  return ctx;
 }

package/palmier-server/pwa/src/contexts/HostStoreContext.tsx

@@ -10,19 +10,16 @@ import type { PairedHost } from "../types";
 
 interface HostStoreContextValue {
   pairedHosts: PairedHost[];
-  activeHostId: string | null;
   addPairedHost(host: PairedHost): void;
   removePairedHost(hostId: string): void;
   renamePairedHost(hostId: string, name: string): void;
   setHostLanUrl(hostId: string, lanUrl: string | undefined): void;
-  setActiveHostId(hostId: string): void;
-  getActiveHost(): PairedHost | null;
+  setHostLastAgent(hostId: string, agent: string): void;
 }
 
 const HostStoreContext = createContext<HostStoreContextValue | null>(null);
 
 const STORAGE_KEY = "palmier_paired_hosts";
-const ACTIVE_KEY = "palmier_active_host";
 
 function loadHosts(): PairedHost[] {
   try {
@@ -38,76 +35,36 @@ function saveHosts(hosts: PairedHost[]) {
   localStorage.setItem(STORAGE_KEY, JSON.stringify(hosts));
 }
 
-function loadActiveId(): string | null {
-  return localStorage.getItem(ACTIVE_KEY);
-}
-
-function saveActiveId(id: string | null) {
-  if (id) localStorage.setItem(ACTIVE_KEY, id);
-  else localStorage.removeItem(ACTIVE_KEY);
-}
+export const LOCAL_HOST_ID = "local";
 
-/** Local mode: served by palmier serve on localhost — auto-connect without pairing. */
+/** Local mode: served by palmier serve on localhost — auto-inject a local host entry. */
 const isLocalMode = !!(window as any).__PALMIER_SERVE__
   && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
 
 export function HostStoreProvider({ children }: { children: ReactNode }) {
-  const [pairedHosts, setPairedHosts] = useState<PairedHost[]>(loadHosts);
-  const [activeHostId, setActiveHostIdState] = useState<string | null>(() => {
-    const saved = loadActiveId();
+  const [pairedHosts, setPairedHosts] = useState<PairedHost[]>(() => {
     const hosts = loadHosts();
-    if (saved && hosts.some((h) => h.hostId === saved)) return saved;
-    return hosts.length > 0 ? hosts[0].hostId : null;
-  });
-
-  // Auto-connect in local mode: inject a local host entry without pairing
-  useEffect(() => {
-    if (!isLocalMode) return;
-    const localHostId = "local";
-    const existing = loadHosts().find((h) => h.hostId === localHostId);
-    if (!existing) {
-      const localHost: PairedHost = { hostId: localHostId, clientToken: "", directUrl: window.location.origin };
-      setPairedHosts((prev) => [...prev.filter((h) => h.hostId !== localHostId), localHost]);
-      setActiveHostIdState(localHostId);
+    if (isLocalMode && !hosts.some((h) => h.hostId === LOCAL_HOST_ID)) {
+      hosts.push({ hostId: LOCAL_HOST_ID, clientToken: "", directUrl: window.location.origin });
     }
-  }, []);
+    return hosts;
+  });
 
   useEffect(() => {
     saveHosts(pairedHosts);
   }, [pairedHosts]);
 
-  useEffect(() => {
-    saveActiveId(activeHostId);
-  }, [activeHostId]);
-
   const addPairedHost = useCallback((host: PairedHost) => {
     setPairedHosts((prev) => {
       const filtered = prev.filter((h) => h.hostId !== host.hostId);
       return [...filtered, host];
     });
-    setActiveHostIdState(host.hostId);
   }, []);
 
   const removePairedHost = useCallback((hostId: string) => {
     setPairedHosts((prev) => prev.filter((h) => h.hostId !== hostId));
-    // Only change the active host when the active one is the one being deleted.
-    setActiveHostIdState((current) => {
-      if (current !== hostId) return current;
-      // The deleted host was active; we'll re-select once pairedHosts settles.
-      return null;
-    });
   }, []);
 
-  // When the active host disappears (e.g. it was just unpaired), fall back to
-  // any remaining paired host, otherwise null.
-  useEffect(() => {
-    if (activeHostId !== null && !pairedHosts.find((h) => h.hostId === activeHostId)) {
-      setActiveHostIdState(pairedHosts[0]?.hostId ?? null);
-    } else if (activeHostId === null && pairedHosts.length > 0) {
-      setActiveHostIdState(pairedHosts[0].hostId);
-    }
-  }, [pairedHosts, activeHostId]);
-
   const renamePairedHost = useCallback((hostId: string, name: string) => {
     setPairedHosts((prev) =>
       prev.map((h) => (h.hostId === hostId ? { ...h, name } : h))
@@ -124,24 +81,24 @@ export function HostStoreProvider({ children }: { children: ReactNode }) {
     );
   }, []);
 
-  const setActiveHostId = useCallback((hostId: string) => {
-    setActiveHostIdState(hostId);
+  const setHostLastAgent = useCallback((hostId: string, agent: string) => {
+    setPairedHosts((prev) =>
+      prev.map((h) => {
+        if (h.hostId !== hostId) return h;
+        if (h.lastAgent === agent) return h;
+        return { ...h, lastAgent: agent };
+      })
+    );
   }, []);
 
-  const getActiveHost = useCallback((): PairedHost | null => {
-    return pairedHosts.find((h) => h.hostId === activeHostId) ?? null;
-  }, [pairedHosts, activeHostId]);
-
   return (
     <HostStoreContext.Provider value={{
       pairedHosts,
-      activeHostId,
       addPairedHost,
       removePairedHost,
       renamePairedHost,
       setHostLanUrl,
-      setActiveHostId,
-      getActiveHost,
+      setHostLastAgent,
     }}>
       {children}
     </HostStoreContext.Provider>

package/palmier-server/pwa/src/hooks/usePushSubscription.ts

@@ -1,18 +1,17 @@
 import { useEffect, useRef } from "react";
 import { Capacitor } from "@capacitor/core";
-import { useHostStore } from "../contexts/HostStoreContext";
+import { useHostConnection } from "../contexts/HostConnectionContext";
 import { apiPost, apiGet } from "../api";
 
 export function usePushSubscription() {
-  const { getActiveHost } = useHostStore();
-  const activeHost = getActiveHost();
+  const { activeHost } = useHostConnection();
   const subscribedRef = useRef<string | null>(null);
 
   useEffect(() => {
     // Native app uses FCM for notifications, not Web Push
     if (Capacitor.isNativePlatform()) return;
     // Skip push subscription for direct-only (LAN) hosts — no cloud server to relay through
-    if (!activeHost || activeHost.directUrl || subscribedRef.current === activeHost.hostId) return;
+    if (activeHost.directUrl || subscribedRef.current === activeHost.hostId) return;
 
     async function subscribe() {
       try {
@@ -26,7 +25,7 @@ export function usePushSubscription() {
         // Send hostId to SW so it can include it in push responses
         registration.active?.postMessage({
           type: "set-host-id",
-          hostId: activeHost!.hostId,
+          hostId: activeHost.hostId,
         });
 
         let subscription = await registration.pushManager.getSubscription();
@@ -59,7 +58,7 @@ export function usePushSubscription() {
         // Always ensure subscription is saved to server
         const sub = subscription.toJSON();
         await apiPost("/api/push/subscribe", {
-          hostId: activeHost!.hostId,
+          hostId: activeHost.hostId,
           endpoint: sub.endpoint,
           keys: {
             p256dh: sub.keys!.p256dh,
@@ -67,7 +66,7 @@ export function usePushSubscription() {
           },
         });
 
-        subscribedRef.current = activeHost!.hostId;
+        subscribedRef.current = activeHost.hostId;
       } catch (err) {
         console.error("[Push] Subscription failed:", err);
       }

package/palmier-server/pwa/src/native/Device.ts

@@ -1,26 +1,5 @@
 import { Capacitor, registerPlugin, type PluginListenerHandle } from "@capacitor/core";
 
-export type PermissionType =
-  | "location"
-  | "smsRead"
-  | "smsSend"
-  | "contacts"
-  | "calendar"
-  | "notificationListener"
-  | "dnd"
-  | "fullScreenIntent"
-  | "postNotifications";
-
-export interface PermissionResult {
-  granted: boolean;
-  /**
-   * False when the native build doesn't recognize this permission type — the PWA
-   * is served remotely and may ship ahead of the installed APK. Callers should
-   * treat unsupported types as "cannot enable" rather than as a hard error.
-   */
-  supported: boolean;
-}
-
 export interface DeepLinkEvent {
   path: string;
 }
@@ -30,28 +9,34 @@ export interface InstalledApp {
   appName: string;
 }
 
+export interface CapabilityStatus {
+  name: string;
+  enabled: boolean;
+  supported: boolean;
+}
+
+export type SetCapabilityReason = "denied" | "no-email-client" | "unsupported";
+
+export interface SetCapabilityResult {
+  enabled: boolean;
+  reason?: SetCapabilityReason;
+}
+
 interface DevicePlugin {
   getFcmToken(): Promise<{ token: string }>;
-  /** Returns the set of PermissionType strings this native build understands. */
-  getSupportedPermissions(): Promise<{ types: PermissionType[] }>;
-  checkPermission(opts: { type: PermissionType }): Promise<PermissionResult>;
-  requestPermission(opts: { type: PermissionType }): Promise<PermissionResult>;
+  /** Returns one entry per capability the APK knows about. The PWA renders only these. */
+  getCapabilityStatus(): Promise<{ capabilities: CapabilityStatus[] }>;
   /**
-   * Authoritative list of capabilities the user has enabled on this device.
-   * Native receivers + handlers consult this as a local kill-switch. Unknown
-   * capability names are stored but ignored — safe for PWAs that ship new caps
-   * ahead of the installed APK.
+   * Atomically gates a single capability. When `enabled: true`, the plugin drives
+   * any required permission dialog or system-Settings round-trip and writes the
+   * native kill-switch only on grant. When `enabled: false`, the kill-switch is
+   * removed (no OS dialog). The returned `enabled` reflects the actual stored
+   * state; `reason` distinguishes denial from preconditions like
+   * "no email app installed".
    */
-  setEnabledCapabilities(opts: { capabilities: string[] }): Promise<void>;
-  /** Returns user-visible (launcher) apps on the device, with 96x96 PNG icons. */
+  setCapabilityEnabled(opts: { capability: string; enabled: boolean }): Promise<SetCapabilityResult>;
+  /** Returns user-visible (launcher) apps on the device. */
   getInstalledApps(): Promise<{ apps: InstalledApp[] }>;
-  /**
-   * Returns whether the device has at least one app that can handle a mailto:
-   * intent. Used to gate the Sending Email capability — silent PackageManager
-   * lookup, no side effects. `supported: false` on older APKs that don't expose
-   * this method; treat as "cannot enable" rather than as a hard error.
-   */
-  hasEmailClient(): Promise<{ available: boolean; supported: boolean }>;
   addListener(
     event: "deepLink",
     handler: (ev: DeepLinkEvent) => void