palmier 0.8.11 → 0.9.2

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/HostMenu.tsx

@@ -1,10 +1,12 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 import { Capacitor } from "@capacitor/core";
 import { useHostStore } from "../contexts/HostStoreContext";
+import { useHostConnection } from "../contexts/HostConnectionContext";
 import { useMediaQuery } from "../hooks/useMediaQuery";
 import { confirmLeaveDraft } from "../draftGuard";
+import { Device } from "../native/Device";
 import CapabilityToggles from "./CapabilityToggles";
 
 /** Local mode: PWA is served by palmier serve on loopback. */
@@ -14,22 +16,64 @@ const isNative = Capacitor.isNativePlatform();
 
 interface HostMenuProps {
   daemonVersion?: string | null;
-  capabilityTokens?: Record<string, string | null>;
-  activeClientToken?: string | null;
+  linkedClientToken?: string | null;
   request?<T = unknown>(method: string, params?: unknown): Promise<T>;
-  onCapabilityTokensChange?(tokens: Record<string, string | null>): void;
+  onEnabledCapabilitiesChange?(next: Set<string>): void;
+  onLinkedClientTokenChange?(next: string | null): void;
 }
 
-export default function HostMenu({ daemonVersion, capabilityTokens, activeClientToken, request, onCapabilityTokensChange }: HostMenuProps) {
-  const { pairedHosts, activeHostId, setActiveHostId, removePairedHost, renamePairedHost } = useHostStore();
+export default function HostMenu({ daemonVersion, linkedClientToken, request, onEnabledCapabilitiesChange, onLinkedClientTokenChange }: HostMenuProps) {
+  const { pairedHosts, removePairedHost, renamePairedHost } = useHostStore();
+  const { activeHost } = useHostConnection();
   const navigate = useNavigate();
+  const location = useLocation();
+  const params = useParams<{ hostId?: string }>();
+  const activeHostId = params.hostId ?? null;
+  const activeClientToken = activeHost.clientToken || null;
+  const isLinkedDevice = !!activeClientToken && linkedClientToken === activeClientToken;
   const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [linkingBusy, setLinkingBusy] = useState(false);
+
+  async function makeThisLinkedDevice() {
+    if (!Device || !request || !activeClientToken) return;
+    setLinkingBusy(true);
+    try {
+      const { token: fcmToken } = await Device.getFcmToken();
+      if (!fcmToken) return;
+      await request("device.link", { fcmToken });
+      onLinkedClientTokenChange?.(activeClientToken);
+    } catch (err) {
+      console.error("Failed to make this the linked device:", err);
+    } finally {
+      setLinkingBusy(false);
+    }
+  }
+
+  async function handleDelete(hostId: string) {
+    const wasActive = hostId === activeHostId;
+    // Only revoke against the currently-active host — `request` uses its client
+    // token. Non-active unpair is local-only; the host keeps a dangling token
+    // the user can clear via `palmier clients revoke`.
+    if (wasActive && request) {
+      try { await request("clients.revoke_self"); } catch { /* best effort */ }
+    }
+    removePairedHost(hostId);
+    setConfirmingDeleteId(null);
+    if (wasActive) navigate("/", { replace: true });
+  }
+
+  function switchHost(newHostId: string) {
+    const onTasks = location.pathname.endsWith("/tasks");
+    const tabSuffix = onTasks ? "/tasks" : "";
+    navigate(`/hosts/${encodeURIComponent(newHostId)}${tabSuffix}`);
+  }
 
   const [visible, setVisible] = useState(false);
   const [closing, setClosing] = useState(false);
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null);
+  const [confirmingLink, setConfirmingLink] = useState(false);
 
   const drawerRef = useRef<HTMLDivElement>(null);
   const renameInputRef = useRef<HTMLInputElement>(null);
@@ -117,7 +161,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
                         if (isRenaming) return;
                         if (!isActive) {
                           if (!confirmLeaveDraft()) return;
-                          setActiveHostId(host.hostId);
+                          switchHost(host.hostId);
                           if (!isDesktop) close();
                         }
                       }}
@@ -210,13 +254,29 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         <>
           <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)}
-            />
+            <h3 className="drawer-section-label">Device Capabilities</h3>
+            {isLinkedDevice ? (
+              <CapabilityToggles onChange={onEnabledCapabilitiesChange} />
+            ) : (
+              <>
+                <p className="drawer-section-hint">
+                  This device isn't the linked device for this host, so it can't provide capabilities (SMS, contacts, location, etc.).
+                </p>
+                <button
+                  className="btn btn-secondary btn-full"
+                  onClick={() => {
+                    if (linkedClientToken && linkedClientToken !== activeClientToken) {
+                      setConfirmingLink(true);
+                    } else {
+                      makeThisLinkedDevice();
+                    }
+                  }}
+                  disabled={linkingBusy}
+                >
+                  {linkingBusy ? "Linking…" : "Link this device"}
+                </button>
+              </>
+            )}
           </div>
         </>
       )}
@@ -236,12 +296,16 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
     </>
   );
 
+  const deletingIsLinked = !!confirmingDeleteId && confirmingDeleteId === activeHostId && isLinkedDevice;
   const deleteModal = confirmingDeleteId && createPortal(
     <div className="confirm-modal-overlay" onClick={() => setConfirmingDeleteId(null)}>
       <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
-        <h2 className="confirm-modal-title">Delete host?</h2>
+        <h2 className="confirm-modal-title">Unpair host?</h2>
         <p className="confirm-modal-message">
-          "{pairedHosts.find((h) => h.hostId === confirmingDeleteId)?.name || confirmingDeleteId.slice(0, 8)}" will be unpaired from this device.
+          "{pairedHosts.find((h) => h.hostId === confirmingDeleteId)?.name || confirmingDeleteId.slice(0, 8)}" will be unpaired.
+          {deletingIsLinked && (
+            <> This device is currently linked to the host — unpairing will revoke its access to all device capabilities (SMS, contacts, location, etc.) until another device is linked.</>
+          )}
         </p>
         <div className="confirm-modal-actions">
           <button
@@ -252,12 +316,35 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
           </button>
           <button
             className="btn btn-danger"
-            onClick={() => {
-              removePairedHost(confirmingDeleteId);
-              setConfirmingDeleteId(null);
-            }}
+            onClick={() => handleDelete(confirmingDeleteId)}
+          >
+            Unpair
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
+  const linkModal = confirmingLink && createPortal(
+    <div className="confirm-modal-overlay" onClick={() => setConfirmingLink(false)}>
+      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+        <h2 className="confirm-modal-title">Link this device?</h2>
+        <p className="confirm-modal-message">
+          Only one device can be linked at a time — switching will disable those capabilities on the currently linked device.
+        </p>
+        <div className="confirm-modal-actions">
+          <button
+            className="btn btn-secondary"
+            onClick={() => setConfirmingLink(false)}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={() => { setConfirmingLink(false); makeThisLinkedDevice(); }}
           >
-            Delete
+            Link
           </button>
         </div>
       </div>
@@ -273,6 +360,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
           {drawerContent}
         </div>
         {deleteModal}
+      {linkModal}
       </>
     );
   }
@@ -308,6 +396,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
       )}
 
       {deleteModal}
+      {linkModal}
     </>
   );
 }

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

@@ -69,7 +69,7 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
 
       if (result.error) {
         console.error("No result:", result.error);
-        navigate("/runs", { replace: true });
+        navigate(hostId ? `/hosts/${encodeURIComponent(hostId)}` : "/", { replace: true });
         return;
       }
       setMessages(result.messages ?? []);
@@ -77,7 +77,7 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
       setAgent(result.agent);
     } catch (err) {
       console.error("Failed to load result:", err);
-      navigate("/runs", { replace: true });
+      navigate(hostId ? `/hosts/${encodeURIComponent(hostId)}` : "/", { replace: true });
     } finally {
       setLoading(false);
     }

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

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useHostConnection } from "../contexts/HostConnectionContext";
+import { useHostStore } from "../contexts/HostStoreContext";
 import { setDraftMessage } from "../draftGuard";
 import type { AgentInfo } from "../types";
 
@@ -9,17 +10,17 @@ interface SessionComposerProps {
   onStarted(taskId: string, runId?: string): void;
 }
 
-function pickDefaultAgent(agents: AgentInfo[]): string {
-  const stored = localStorage.getItem("palmier:lastAgent");
+function pickDefaultAgent(agents: AgentInfo[], preferred?: string): string {
   const keys = agents.map((a) => a.key);
-  if (stored && keys.includes(stored)) return stored;
+  if (preferred && keys.includes(preferred)) return preferred;
   return agents[0]?.key ?? "";
 }
 
 export default function SessionComposer({ agents, hostPlatform, onStarted }: SessionComposerProps) {
-  const { request } = useHostConnection();
+  const { request, activeHost } = useHostConnection();
+  const { setHostLastAgent } = useHostStore();
   const [prompt, setPrompt] = useState("");
-  const [agent, setAgent] = useState(() => pickDefaultAgent(agents));
+  const [agent, setAgent] = useState(() => pickDefaultAgent(agents, activeHost.lastAgent));
   const [yoloMode, setYoloMode] = useState(false);
   const [running, setRunning] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -28,9 +29,9 @@ export default function SessionComposer({ agents, hostPlatform, onStarted }: Ses
   useEffect(() => {
     if (!agents.length) return;
     if (!agents.find((a) => a.key === agent)) {
-      setAgent(pickDefaultAgent(agents));
+      setAgent(pickDefaultAgent(agents, activeHost.lastAgent));
     }
-  }, [agents, agent]);
+  }, [agents, agent, activeHost.lastAgent]);
 
   // Draft guard: warns on navigation / reload when the input has content.
   useEffect(() => {
@@ -77,7 +78,7 @@ export default function SessionComposer({ agents, hostPlatform, onStarted }: Ses
         setError(result.error);
         return;
       }
-      localStorage.setItem("palmier:lastAgent", agent);
+      setHostLastAgent(activeHost.hostId, agent);
       setPrompt("");
       setDraftMessage(null);
       if (result.task_id) onStarted(result.task_id, result.run_id);

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

@@ -170,7 +170,8 @@ export default function SessionsView({ connected, hostId, request, subscribeEven
 
   function handleCardClick(taskId: string, runId: string) {
     if (!confirmLeaveDraft()) return;
-    navigate(`/runs/${taskId}/${encodeURIComponent(runId)}`);
+    if (!hostId) return;
+    navigate(`/hosts/${encodeURIComponent(hostId)}/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`);
   }
 
   const composer = !filterTaskId && (
@@ -178,8 +179,9 @@ export default function SessionsView({ connected, hostId, request, subscribeEven
       agents={agents}
       hostPlatform={hostPlatform}
       onStarted={(taskId, runId) => {
-        if (runId) navigate(`/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`);
-        else navigate(`/runs/${encodeURIComponent(taskId)}`);
+        if (!hostId) return;
+        const base = `/hosts/${encodeURIComponent(hostId)}/runs/${encodeURIComponent(taskId)}`;
+        navigate(runId ? `${base}/${encodeURIComponent(runId)}` : base);
       }}
     />
   );