palmier 0.6.0 → 0.6.2

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

@@ -0,0 +1,313 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  type ReactNode,
+} from "react";
+import { connect, StringCodec, type NatsConnection, type Subscription } from "nats.ws";
+import { useHostStore } from "./HostStoreContext";
+import type { PairedHost } from "../types";
+
+type ConnectionMode = "nats" | "direct" | "disconnected";
+
+interface HostConnectionContextValue {
+  /** Whether we have an active connection to the host. */
+  connected: boolean;
+  /** Current connection mode. */
+  mode: ConnectionMode;
+  /** The raw NATS connection (null in direct-only mode). Used for pub/sub. */
+  nc: NatsConnection | null;
+  /** Transport-agnostic RPC request. */
+  request<T = unknown>(method: string, params?: unknown, opts?: { timeout?: number }): Promise<T>;
+  /** Subscribe to task events. Returns unsubscribe function. */
+  subscribeEvents(hostId: string, callback: (msg: { subject: string; data: Uint8Array }) => void): () => void;
+  /** Current active host. */
+  activeHost: PairedHost | null;
+  /** Whether the current client has been revoked by the host. */
+  unauthorized: boolean;
+}
+
+const HostConnectionContext = createContext<HostConnectionContextValue>({
+  connected: false,
+  mode: "disconnected",
+  nc: null,
+  request() { return Promise.reject(new Error("No host connection")); },
+  subscribeEvents() { return () => {}; },
+  activeHost: null,
+  unauthorized: false,
+});
+
+const SSE_CONNECT_TIMEOUT_MS = 2_000;
+const HEARTBEAT_TIMEOUT_MS = 6_000;
+
+export function HostConnectionProvider({ children }: { children: ReactNode }) {
+  const { getActiveHost } = useHostStore();
+  const activeHost = getActiveHost();
+
+  const [nc, setNc] = useState<NatsConnection | null>(null);
+  const [natsConnected, setNatsConnected] = useState(false);
+  const ncRef = useRef<NatsConnection | null>(null);
+
+  const [sseConnected, setSseConnected] = useState(false);
+  const [unauthorized, setUnauthorized] = useState(false);
+
+  const sc = useRef(StringCodec());
+  const sseEventCallbacksRef = useRef<Set<(msg: { subject: string; data: Uint8Array }) => void>>(new Set());
+  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 mode: ConnectionMode = !activeHost
+    ? "disconnected"
+    : isDirectHost
+      ? (sseConnected ? "direct" : "disconnected")
+      : (natsConnected ? "nats" : "disconnected");
+  const connected = mode !== "disconnected";
+
+  // Reset unauthorized when switching hosts or re-pairing (new client token)
+  useEffect(() => { setUnauthorized(false); }, [activeHost?.hostId, activeHost?.clientToken]);
+
+  // Fetch NATS config from server and connect (only for NATS hosts)
+  useEffect(() => {
+    if (isDirectHost) {
+      if (ncRef.current) {
+        ncRef.current.close().catch(() => {});
+        ncRef.current = null;
+        setNc(null);
+        setNatsConnected(false);
+      }
+      return;
+    }
+
+    if (!activeHost) return;
+
+    let cancelled = false;
+
+    async function init() {
+      try {
+        const res = await fetch("/api/config");
+        if (!res.ok) {
+          console.error("[NATS] Failed to fetch config");
+          return;
+        }
+        const config = await res.json() as { natsWsUrl: string; natsToken: string };
+        if (!config.natsWsUrl) {
+          console.warn("[NATS] No WebSocket URL configured");
+          return;
+        }
+        if (cancelled) return;
+
+        console.log("[NATS] Connecting to", config.natsWsUrl);
+        const conn = await connect({
+          servers: config.natsWsUrl,
+          token: config.natsToken,
+        });
+        if (cancelled) { conn.close().catch(() => {}); return; }
+        console.log("[NATS] Connected");
+        ncRef.current = conn;
+        setNc(conn);
+        setNatsConnected(true);
+
+        conn.closed().then(() => {
+          console.log("[NATS] Connection closed");
+          if (!cancelled) {
+            setNc(null);
+            setNatsConnected(false);
+            ncRef.current = null;
+          }
+        });
+      } catch (err) {
+        console.error("[NATS] Connection failed:", err);
+        if (!cancelled) setNatsConnected(false);
+      }
+    }
+
+    init();
+    return () => {
+      cancelled = true;
+      if (ncRef.current) {
+        ncRef.current.close().catch(() => {});
+        ncRef.current = null;
+        setNc(null);
+        setNatsConnected(false);
+      }
+    };
+  }, [isDirectHost, activeHost]);
+
+  // SSE connection for direct (LAN) hosts only
+  useEffect(() => {
+    if (!activeHost || !isDirectHost) {
+      setSseConnected(false);
+      return;
+    }
+
+    const controller = new AbortController();
+
+    async function connectSSE(): Promise<ReadableStreamDefaultReader<Uint8Array> | null> {
+      const connectAc = new AbortController();
+      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}` },
+          signal: connectAc.signal,
+        });
+        clearTimeout(timer);
+        if (!res.ok) return null;
+        return res.body?.getReader() ?? null;
+      } catch {
+        clearTimeout(timer);
+        return null;
+      }
+    }
+
+    async function readStream(reader: ReadableStreamDefaultReader<Uint8Array>) {
+      setSseConnected(true);
+      console.log("[HOST] SSE connected to", activeHost!.directUrl);
+
+      lastHeartbeat.current = Date.now();
+      function checkHeartbeat() {
+        setTimeout(() => {
+          if (controller.signal.aborted) return;
+          if (Date.now() - lastHeartbeat.current < HEARTBEAT_TIMEOUT_MS) return;
+          console.log("[HOST] Heartbeat timeout — no data for", HEARTBEAT_TIMEOUT_MS / 1000, "s");
+          controller.abort();
+          setSseConnected(false);
+          console.log("[HOST] Direct host unreachable");
+        }, HEARTBEAT_TIMEOUT_MS);
+      }
+      checkHeartbeat();
+
+      const decoder = new TextDecoder();
+      let buffer = "";
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          lastHeartbeat.current = Date.now();
+          checkHeartbeat();
+
+          const lines = buffer.split("\n");
+          buffer = lines.pop() ?? "";
+          for (const line of lines) {
+            if (line.startsWith("data: ")) {
+              const jsonStr = line.slice(6);
+              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}`;
+                  for (const cb of sseEventCallbacksRef.current) cb({ subject, data: sc.current.encode(jsonStr) });
+                }
+              } catch { /* skip malformed — includes heartbeat pings */ }
+            }
+          }
+        }
+      } catch {
+        // Stream ended or aborted
+      }
+    }
+
+    (async () => {
+      const reader = await connectSSE();
+      if (reader) await readStream(reader);
+    })();
+
+    return () => { controller.abort(); setSseConnected(false); };
+  }, [activeHost, isDirectHost]);
+
+  // Transport-agnostic RPC
+  const request = useCallback(async <T = unknown>(
+    method: string,
+    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);
+      }
+    }
+
+    // Direct host (paired with address) — always use HTTP
+    if (isDirectHost) {
+      console.log(`[HOST/HTTP] → ${method}`, params ?? "");
+      const res = await fetch(`${activeHost.directUrl}/rpc/${method}`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${activeHost.clientToken}`,
+        },
+        body: params != null ? JSON.stringify(params) : undefined,
+        signal: opts?.timeout ? AbortSignal.timeout(opts.timeout) : undefined,
+      });
+      if (res.status === 401) {
+        setUnauthorized(true);
+        throw new Error("Unauthorized");
+      }
+      const data = await res.json() as T;
+      checkUnauthorized(data);
+      console.log(`[HOST/HTTP] ← ${method}`, data);
+      return data;
+    }
+
+    // NATS mode
+    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 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 });
+    const decoded = JSON.parse(sc.current.decode(msg.data)) as T;
+    checkUnauthorized(decoded);
+    console.log(`[HOST/NATS] ← ${method}`, decoded);
+    return decoded;
+  }, [activeHost, isDirectHost]);
+
+  // Subscribe to task events
+  const subscribeEvents = useCallback((hostId: string, callback: (msg: { subject: string; data: Uint8Array }) => void): () => void => {
+    // Direct mode — register callback for SSE to forward events
+    if (isDirectHost) {
+      sseEventCallbacksRef.current.add(callback);
+      return () => { sseEventCallbacksRef.current.delete(callback); };
+    }
+
+    // NATS subscription
+    if (ncRef.current) {
+      const sub: Subscription = ncRef.current.subscribe(`host-event.${hostId}.>`);
+      let cancelled = false;
+
+      (async () => {
+        try {
+          for await (const msg of sub) {
+            if (cancelled) break;
+            callback({ subject: msg.subject, data: msg.data });
+          }
+        } catch {
+          // Subscription ended
+        }
+      })();
+
+      return () => { cancelled = true; sub.unsubscribe(); };
+    }
+
+    return () => {};
+  }, [activeHost, isDirectHost]);
+
+  return (
+    <HostConnectionContext.Provider
+      value={{ connected, mode, nc, request, subscribeEvents, activeHost, unauthorized }}
+    >
+      {children}
+    </HostConnectionContext.Provider>
+  );
+}
+
+export function useHostConnection() {
+  return useContext(HostConnectionContext);
+}

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

@@ -0,0 +1,135 @@
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  type ReactNode,
+} from "react";
+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;
+  setActiveHostId(hostId: string): void;
+  getActiveHost(): PairedHost | null;
+}
+
+const HostStoreContext = createContext<HostStoreContextValue | null>(null);
+
+const STORAGE_KEY = "palmier_paired_hosts";
+const ACTIVE_KEY = "palmier_active_host";
+
+function loadHosts(): PairedHost[] {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      return JSON.parse(raw) as PairedHost[];
+    }
+  } catch { /* ignore */ }
+  return [];
+}
+
+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);
+}
+
+/** Local mode: served by palmier serve on localhost — auto-connect without pairing. */
+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 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);
+    }
+  }, []);
+
+  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) => {
+      const filtered = prev.filter((h) => h.hostId !== hostId);
+      if (filtered.length > 0) {
+        setActiveHostIdState(filtered[0].hostId);
+      } else {
+        setActiveHostIdState(null);
+      }
+      return filtered;
+    });
+  }, []);
+
+  const renamePairedHost = useCallback((hostId: string, name: string) => {
+    setPairedHosts((prev) =>
+      prev.map((h) => (h.hostId === hostId ? { ...h, name } : h))
+    );
+  }, []);
+
+  const setActiveHostId = useCallback((hostId: string) => {
+    setActiveHostIdState(hostId);
+  }, []);
+
+  const getActiveHost = useCallback((): PairedHost | null => {
+    return pairedHosts.find((h) => h.hostId === activeHostId) ?? null;
+  }, [pairedHosts, activeHostId]);
+
+  return (
+    <HostStoreContext.Provider value={{
+      pairedHosts,
+      activeHostId,
+      addPairedHost,
+      removePairedHost,
+      renamePairedHost,
+      setActiveHostId,
+      getActiveHost,
+    }}>
+      {children}
+    </HostStoreContext.Provider>
+  );
+}
+
+export function useHostStore(): HostStoreContextValue {
+  const ctx = useContext(HostStoreContext);
+  if (!ctx) throw new Error("useHostStore must be used within HostStoreProvider");
+  return ctx;
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Format a timestamp for display. Shows time only if today, otherwise includes the date.
+ */
+export function formatTime(ms: number): string {
+  const d = new Date(ms);
+  const now = new Date();
+  const time = d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
+  if (d.toDateString() === now.toDateString()) return time;
+  return `${d.toLocaleDateString(undefined, { month: "short", day: "numeric" })} ${time}`;
+}

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

@@ -0,0 +1,75 @@
+import { useEffect, useRef, useCallback } from "react";
+
+interface StackEntry {
+  close: () => void;
+  pushed: React.RefObject<boolean>;
+}
+
+/**
+ * Global stack so only the top-most modal handles a back gesture.
+ * Each entry is a close callback + its pushed ref; popstate pops the top one.
+ */
+const stack: StackEntry[] = [];
+
+function globalPopHandler() {
+  const top = stack.pop();
+  if (top) {
+    // Mark pushed=false BEFORE calling close so the effect
+    // knows the back navigation was already handled by the browser.
+    top.pushed.current = false;
+    top.close();
+  }
+}
+
+// Single global listener, added once
+let listening = false;
+function ensureListener() {
+  if (listening) return;
+  listening = true;
+  window.addEventListener("popstate", globalPopHandler);
+}
+
+/**
+ * Pushes a history entry when `open` becomes true.
+ * When the user swipes back / presses back, calls `onClose` instead of navigating away.
+ * When `open` becomes false programmatically, pops the history entry.
+ * Supports nesting: only the innermost (most recent) modal responds to back.
+ */
+export function useBackClose(open: boolean, onClose: () => void) {
+  const pushed = useRef(false);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  const stableClose = useCallback(() => onCloseRef.current(), []);
+  const entry = useRef<StackEntry>({ close: stableClose, pushed });
+  entry.current.close = stableClose;
+
+  useEffect(() => {
+    if (open && !pushed.current) {
+      ensureListener();
+      history.pushState({ modal: true }, "");
+      stack.push(entry.current);
+      pushed.current = true;
+    } else if (!open && pushed.current) {
+      // Closed programmatically — browser hasn't gone back yet, so we must.
+      pushed.current = false;
+      const idx = stack.indexOf(entry.current);
+      if (idx !== -1) stack.splice(idx, 1);
+      history.back();
+    }
+    // If !open && !pushed.current, the popstate handler already went back — nothing to do.
+  }, [open, stableClose]);
+
+  // Cleanup on unmount if still pushed
+  useEffect(() => {
+    const e = entry.current;
+    return () => {
+      if (pushed.current) {
+        pushed.current = false;
+        const idx = stack.indexOf(e);
+        if (idx !== -1) stack.splice(idx, 1);
+        history.back();
+      }
+    };
+  }, []);
+}

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

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(
+    () => window.matchMedia(query).matches
+  );
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mql.addEventListener("change", handler);
+    setMatches(mql.matches);
+    return () => mql.removeEventListener("change", handler);
+  }, [query]);
+
+  return matches;
+}

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

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from "react";
+import { useHostStore } from "../contexts/HostStoreContext";
+import { apiPost, apiGet } from "../api";
+
+export function usePushSubscription() {
+  const { getActiveHost } = useHostStore();
+  const activeHost = getActiveHost();
+  const subscribedRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    // Skip push subscription for direct-only (LAN) hosts — no cloud server to relay through
+    if (!activeHost || activeHost.directUrl || subscribedRef.current === activeHost.hostId) return;
+
+    async function subscribe() {
+      try {
+        if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+          console.warn("[Push] Push notifications not supported");
+          return;
+        }
+
+        const registration = await navigator.serviceWorker.ready;
+
+        // Send hostId to SW so it can include it in push responses
+        registration.active?.postMessage({
+          type: "set-host-id",
+          hostId: activeHost!.hostId,
+        });
+
+        let subscription = await registration.pushManager.getSubscription();
+
+        if (!subscription) {
+          // Get VAPID public key from server
+          const { publicKey } = await apiGet<{ publicKey: string }>(
+            "/api/push/vapid-key"
+          );
+
+          if (!publicKey) {
+            console.warn("[Push] No VAPID public key configured on server");
+            return;
+          }
+
+          // Request permission
+          const permission = await Notification.requestPermission();
+          if (permission !== "granted") {
+            console.log("[Push] Permission denied");
+            return;
+          }
+
+          // Subscribe
+          subscription = await registration.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: publicKey,
+          });
+        }
+
+        // Always ensure subscription is saved to server
+        const sub = subscription.toJSON();
+        await apiPost("/api/push/subscribe", {
+          hostId: activeHost!.hostId,
+          endpoint: sub.endpoint,
+          keys: {
+            p256dh: sub.keys!.p256dh,
+            auth: sub.keys!.auth,
+          },
+        });
+
+        subscribedRef.current = activeHost!.hostId;
+      } catch (err) {
+        console.error("[Push] Subscription failed:", err);
+      }
+    }
+
+    subscribe();
+  }, [activeHost]);
+}

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

@@ -0,0 +1,14 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+import "@fontsource-variable/plus-jakarta-sans";
+import App from "./App";
+import "./App.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);