palmier 0.8.10 → 0.9.2

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

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;
 }