palmier 0.9.6 → 0.9.8

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

@@ -1,179 +0,0 @@
-import { useState, useEffect, useCallback } from "react";
-import TaskCard from "./TaskCard";
-import TaskForm from "./TaskForm";
-import PullToRefreshIndicator from "./PullToRefreshIndicator";
-import { usePullToRefresh } from "../hooks/usePullToRefresh";
-import type { AgentInfo, Task, TaskStatus } from "../types";
-
-interface TasksViewProps {
-  connected: boolean;
-  hostId: string | null;
-  request<T = unknown>(method: string, params?: unknown, opts?: { timeout?: number }): Promise<T>;
-  subscribeEvents(hostId: string, callback: (msg: { subject: string; data: Uint8Array }) => void): () => void;
-  agents: AgentInfo[];
-  hostPlatform?: string;
-  isNotificationListener: boolean;
-  onViewRun(taskId: string, runId?: string): void;
-}
-
-export default function TasksView({ connected, hostId, request, subscribeEvents, agents, hostPlatform, isNotificationListener, onViewRun }: TasksViewProps) {
-  const [tasks, setTasks] = useState<Task[]>([]);
-  const [loadingTasks, setLoadingTasks] = useState(false);
-  const [taskError, setTaskError] = useState<string | null>(null);
-  const [taskStatuses, setTaskStatuses] = useState<Map<string, TaskStatus>>(new Map());
-
-  const [showForm, setShowForm] = useState(false);
-  const [editingTask, setEditingTask] = useState<Task | undefined>(undefined);
-
-  const closeForm = useCallback(() => { setShowForm(false); setEditingTask(undefined); }, []);
-
-  const loadTasks = useCallback(async () => {
-    if (!connected) return;
-    setLoadingTasks(true);
-    setTaskError(null);
-    try {
-      const result = await request<{ tasks?: (Task & { status?: TaskStatus })[] }>("task.list");
-      const taskList = result.tasks ?? [];
-      const initialStatuses = new Map<string, TaskStatus>();
-      for (const t of taskList) {
-        if (t.status) initialStatuses.set(t.id, t.status);
-      }
-      setTaskStatuses(initialStatuses);
-      setTasks(taskList);
-    } catch (err) {
-      const errMsg = err instanceof Error ? err.message : String(err);
-      if (errMsg === "Not connected" || errMsg.includes("503") || errMsg.toLowerCase().includes("no responders")) {
-        setTaskError(null);
-      } else {
-        setTaskError(errMsg);
-      }
-      setTasks([]);
-    } finally {
-      setLoadingTasks(false);
-    }
-  }, [connected, hostId, request]);
-
-  useEffect(() => {
-    if (connected) loadTasks();
-    else { setTasks([]); setLoadingTasks(false); }
-  }, [connected, hostId, loadTasks]);
-
-  const ptr = usePullToRefresh({ onRefresh: loadTasks, enabled: connected });
-
-  // While mounted, keep task-card state fresh by refetching task.status on
-  // running-state / permission-resolved events. Dashboard owns the modal
-  // subscription; this one only drives the card indicators.
-  useEffect(() => {
-    if (!connected || !hostId) return;
-    const unsubscribe = subscribeEvents(hostId, async (msg) => {
-      const tokens = msg.subject.split(".");
-      if (tokens.length < 3) return;
-      const taskId = tokens.slice(2).join(".");
-
-      let parsed: Record<string, unknown> = {};
-      try {
-        parsed = JSON.parse(new TextDecoder().decode(msg.data)) as Record<string, unknown>;
-      } catch { return; }
-      const eventType = parsed.event_type as string | undefined;
-      if (eventType !== "running-state" && eventType !== "permission-resolved") return;
-
-      try {
-        const status = await request<TaskStatus & { error?: string }>("task.status", { id: taskId }, { timeout: 5000 });
-        if (status.error) return;
-        setTaskStatuses((prev) => { const next = new Map(prev); next.set(taskId, status); return next; });
-      } catch { /* skip */ }
-    });
-    return unsubscribe;
-  }, [connected, hostId, subscribeEvents, request]);
-
-  function handleTaskSaved(task: Task) {
-    setTasks((prev) => {
-      const idx = prev.findIndex((t) => t.id === task.id);
-      if (idx >= 0) { const next = [...prev]; next[idx] = task; return next; }
-      return [task, ...prev];
-    });
-    setShowForm(false);
-    setEditingTask(undefined);
-  }
-
-  function handleTaskDeleted(taskId: string) {
-    setTasks((prev) => prev.filter((t) => t.id !== taskId));
-    setTaskStatuses((prev) => { const next = new Map(prev); next.delete(taskId); return next; });
-  }
-
-  return (
-    <>
-      <PullToRefreshIndicator pullDistance={ptr.pullDistance} refreshing={ptr.refreshing} threshold={ptr.threshold} />
-      {taskError && <div className="form-error">{taskError}{taskError.toLowerCase().includes("failed to fetch") && <>{" "}<a href="#" onClick={(e) => { e.preventDefault(); window.location.reload(); }}>Reload</a></>}</div>}
-
-      {loadingTasks && !tasks.length ? (
-        <div className="task-list">
-          {[0, 1, 2].map((i) => (
-            <div key={i} className="task-card" style={{ pointerEvents: "none" }}>
-              <div className="task-card-header">
-                <div className="task-card-title-row">
-                  <div className="skeleton-line" style={{ width: 10, height: 10, borderRadius: "50%" }} />
-                  <div className="skeleton-line" style={{ width: `${60 + i * 12}%` }} />
-                </div>
-              </div>
-              <div className="task-card-meta">
-                <div className="skeleton-line" style={{ width: "30%" }} />
-                <div className="skeleton-line" style={{ width: "25%" }} />
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : tasks.length === 0 ? (
-        <div className="empty-state">
-          <p className="empty-state-text">No tasks yet</p>
-          <p className="empty-state-hint">Tap the + button to create your first task.</p>
-        </div>
-      ) : (
-        <div className="task-list">
-          {tasks.map((task) => (
-            <TaskCard
-              key={task.id}
-              task={task}
-              lastEvent={taskStatuses.get(task.id)}
-              onEdit={async (t) => {
-                try {
-                  const latest = await request<Task & { error?: string }>("task.get", { id: t.id });
-                  setEditingTask(latest.error ? t : latest);
-                } catch {
-                  setEditingTask(t);
-                }
-                setShowForm(true);
-              }}
-              onDelete={handleTaskDeleted}
-              onViewRun={onViewRun}
-            />
-          ))}
-        </div>
-      )}
-
-      <button
-        className="fab"
-        onClick={() => { setEditingTask(undefined); setShowForm(true); }}
-        aria-label="New task"
-        title="New task"
-      >
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-          <line x1="12" y1="5" x2="12" y2="19" />
-          <line x1="5" y1="12" x2="19" y2="12" />
-        </svg>
-      </button>
-
-      {showForm && (
-        <TaskForm
-          initial={editingTask}
-          agents={agents}
-          hostPlatform={hostPlatform}
-          isNotificationListener={isNotificationListener}
-          onSaved={handleTaskSaved}
-          onRun={onViewRun}
-          onCancel={closeForm}
-        />
-      )}
-    </>
-  );
-}

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

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

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

@@ -1,432 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  type ReactNode,
-} from "react";
-import { connect, jwtAuthenticator, StringCodec, type NatsConnection, type Subscription } from "nats.ws";
-import { Capacitor } from "@capacitor/core";
-import { App as CapacitorApp } from "@capacitor/app";
-import { Network } from "@capacitor/network";
-import { SERVER_URL } from "../api";
-import type { PairedHost } from "../types";
-
-type ConnectionMode = "nats" | "lan" | "direct" | "connecting" | "disconnected";
-
-const isNative = Capacitor.isNativePlatform();
-
-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;
-  /** Whether the current client has been revoked by the host. */
-  unauthorized: boolean;
-}
-
-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, activeHost }: { children: ReactNode; activeHost: PairedHost }) {
-
-  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 [hostNotFound, setHostNotFound] = useState(false);
-  const [lanReachable, setLanReachable] = 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.directUrl;
-  // Auto-LAN is opportunistic on native server-paired hosts that have a known LAN URL.
-  const useLanRpc = isNative && !isDirectHost && !!activeHost.lanUrl && lanReachable;
-
-  const mode: ConnectionMode = unauthorized || hostNotFound
-    ? "disconnected"
-    : 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]);
-
-  // 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) {
-      setLanReachable(false);
-      return;
-    }
-
-    let cancelled = false;
-    const lanUrl = activeHost.lanUrl;
-    const expectedHostId = activeHost.hostId;
-
-    async function probe() {
-      console.log("[HOST/LAN] probing", lanUrl);
-      try {
-        const res = await fetch(`${lanUrl}/health`, {
-          signal: AbortSignal.timeout(LAN_PROBE_TIMEOUT_MS),
-        });
-        if (cancelled) return;
-        if (!res.ok) {
-          console.log("[HOST/LAN] probe got non-ok:", res.status);
-          setLanReachable(false);
-          return;
-        }
-        const data = await res.json() as { hostId?: string };
-        const reachable = data.hostId === expectedHostId;
-        if (!reachable) console.log("[HOST/LAN] hostId mismatch — got:", data.hostId, "expected:", expectedHostId);
-        else console.log("[HOST/LAN] reachable");
-        setLanReachable(reachable);
-      } catch (err) {
-        if (!cancelled) {
-          console.log("[HOST/LAN] probe failed:", err instanceof Error ? err.message : err);
-          setLanReachable(false);
-        }
-      }
-    }
-
-    probe();
-    const intervalId = window.setInterval(probe, LAN_KEEPALIVE_MS);
-
-    const appHandle = CapacitorApp.addListener("appStateChange", (state: { isActive: boolean }) => {
-      if (state.isActive) probe();
-    });
-    const netHandle = Network.addListener("networkStatusChange", () => probe());
-
-    return () => {
-      cancelled = true;
-      clearInterval(intervalId);
-      appHandle.then((h) => h.remove());
-      netHandle.then((h) => h.remove());
-    };
-  }, [activeHost.hostId, activeHost.lanUrl, isDirectHost]);
-
-  // 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;
-    }
-
-    let cancelled = false;
-    let retryDelayMs = 1_000;
-    const MAX_RETRY_MS = 30_000;
-
-    async function connectLoop() {
-      while (!cancelled) {
-        try {
-          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);
-            setHostNotFound(true);
-            return;
-          }
-          if (!res.ok) throw new Error(`credentials fetch ${res.status}`);
-
-          const config = await res.json() as { natsWsUrl: string; natsJwt: string; natsNkeySeed: string };
-          if (!config.natsWsUrl) {
-            console.error("[NATS] Relay returned empty natsWsUrl — treating as terminal");
-            setHostNotFound(true);
-            return;
-          }
-          if (cancelled) return;
-
-          console.log("[NATS] Connecting to", config.natsWsUrl);
-          const conn = await connect({
-            servers: config.natsWsUrl,
-            authenticator: jwtAuthenticator(
-              config.natsJwt,
-              new TextEncoder().encode(config.natsNkeySeed),
-            ),
-            // Default is 2 min — too slow to notice a silently-dead WebSocket
-            // when the user has the page foregrounded but the network drops.
-            // The resume-probe useEffect below catches dead conns within 2s
-            // when the user returns to the app, so this background heartbeat
-            // can stay conservative (maxPingOut: 2 → ~60s) and avoid false
-            // positives from transient network jitter.
-            pingInterval: 30_000,
-            maxPingOut: 2,
-          });
-          if (cancelled) { conn.close().catch(() => {}); return; }
-          console.log("[NATS] Connected");
-          ncRef.current = conn;
-          setNc(conn);
-          setNatsConnected(true);
-          retryDelayMs = 1_000;
-
-          await conn.closed();
-          if (cancelled) return;
-
-          console.log("[NATS] Connection closed, will reconnect");
-          ncRef.current = null;
-          setNc(null);
-          setNatsConnected(false);
-        } catch (err) {
-          if (cancelled) return;
-          console.warn(`[NATS] Connect failed, retrying in ${retryDelayMs}ms:`, err);
-          setNatsConnected(false);
-          await new Promise((r) => setTimeout(r, retryDelayMs));
-          retryDelayMs = Math.min(retryDelayMs * 2, MAX_RETRY_MS);
-        }
-      }
-    }
-
-    connectLoop();
-
-    return () => {
-      cancelled = true;
-      if (ncRef.current) {
-        ncRef.current.close().catch(() => {});
-        ncRef.current = null;
-        setNc(null);
-        setNatsConnected(false);
-      }
-    };
-  }, [isDirectHost, activeHost]);
-
-  // WebSockets can die silently — mobile WebViews suspend them on background,
-  // laptops on sleep, networks on switch. On any resume (visibility change on
-  // web, foreground on native), probe the connection with a short-timeout
-  // flush (PING/PONG round-trip); close only if it doesn't respond. nats.ws's
-  // own pingInterval catches it eventually, but probing on resume gets us
-  // back faster when the user immediately fires an RPC.
-  useEffect(() => {
-    if (isDirectHost) return;
-    const handle = CapacitorApp.addListener("appStateChange", (state: { isActive: boolean }) => {
-      if (!state.isActive || !ncRef.current) return;
-      const conn = ncRef.current;
-      Promise.race([
-        conn.flush(),
-        new Promise<void>((_, reject) => setTimeout(() => reject(new Error("ping timeout")), 2_000)),
-      ]).catch(() => {
-        console.log("[NATS] Resume probe failed — cycling conn");
-        conn.close().catch(() => {});
-      });
-    });
-    return () => { handle.then((h) => h.remove()); };
-  }, [isDirectHost]);
-
-  // SSE connection for direct (LAN) hosts only
-  useEffect(() => {
-    if (!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> => {
-    function checkUnauthorized(data: unknown): void {
-      if (data && typeof data === "object" && (data as Record<string, unknown>).error === "Unauthorized") {
-        setUnauthorized(true);
-      }
-    }
-
-    async function callHttp(baseUrl: string, label: string): Promise<T> {
-      console.log(`[HOST/${label}] → ${method}`, params ?? "");
-      const res = await fetch(`${baseUrl}/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/${label}] ← ${method}`, data);
-      return data;
-    }
-
-    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 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;
-    }
-
-    // Direct (loopback) host — always HTTP, no fallback.
-    if (isDirectHost) return callHttp(activeHost.directUrl!, "HTTP");
-
-    // Auto-LAN: try HTTP first; on failure mark unreachable and retry over NATS.
-    if (useLanRpc && activeHost.lanUrl) {
-      try {
-        return await callHttp(activeHost.lanUrl, "LAN");
-      } catch (err) {
-        if (err instanceof Error && err.message === "Unauthorized") throw err;
-        console.log("[HOST/LAN] failed, falling back to NATS:", err);
-        setLanReachable(false);
-      }
-    }
-
-    return callNats();
-  }, [activeHost, isDirectHost, useLanRpc]);
-
-  // 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(): HostConnectionContextValue {
-  const ctx = useContext(HostConnectionContext);
-  if (!ctx) throw new Error("useHostConnection must be used within HostConnectionProvider");
-  return ctx;
-}