palmier 0.7.7 → 0.7.9

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

@@ -0,0 +1,172 @@
+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;
+  onViewRun(taskId: string, runId?: string): void;
+}
+
+export default function TasksView({ connected, hostId, request, subscribeEvents, agents, hostPlatform, 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>
+      ) : (
+        <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}
+          onSaved={handleTaskSaved}
+          onRun={onViewRun}
+          onCancel={closeForm}
+        />
+      )}
+    </>
+  );
+}

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.7.6";
+export const MIN_HOST_VERSION = "0.7.8";

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

@@ -88,17 +88,25 @@ export function HostStoreProvider({ children }: { children: ReactNode }) {
   }, []);
 
   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;
+    setPairedHosts((prev) => prev.filter((h) => h.hostId !== hostId));
+    // Only change the active host when the active one is the one being deleted.
+    setActiveHostIdState((current) => {
+      if (current !== hostId) return current;
+      // The deleted host was active; we'll re-select once pairedHosts settles.
+      return null;
     });
   }, []);
 
+  // When the active host disappears (e.g. it was just unpaired), fall back to
+  // any remaining paired host, otherwise null.
+  useEffect(() => {
+    if (activeHostId !== null && !pairedHosts.find((h) => h.hostId === activeHostId)) {
+      setActiveHostIdState(pairedHosts[0]?.hostId ?? null);
+    } else if (activeHostId === null && pairedHosts.length > 0) {
+      setActiveHostIdState(pairedHosts[0].hostId);
+    }
+  }, [pairedHosts, activeHostId]);
+
   const renamePairedHost = useCallback((hostId: string, name: string) => {
     setPairedHosts((prev) =>
       prev.map((h) => (h.hostId === hostId ? { ...h, name } : h))

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

@@ -0,0 +1,24 @@
+let currentDraftMessage: string | null = null;
+
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+  if (currentDraftMessage) {
+    e.preventDefault();
+    e.returnValue = "";
+  }
+}
+
+export function setDraftMessage(message: string | null) {
+  const wasActive = !!currentDraftMessage;
+  currentDraftMessage = message;
+  const nowActive = !!currentDraftMessage;
+  if (nowActive && !wasActive) {
+    window.addEventListener("beforeunload", handleBeforeUnload);
+  } else if (!nowActive && wasActive) {
+    window.removeEventListener("beforeunload", handleBeforeUnload);
+  }
+}
+
+export function confirmLeaveDraft(): boolean {
+  if (!currentDraftMessage) return true;
+  return window.confirm(currentDraftMessage);
+}

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

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useState } from "react";
+
+interface Options {
+  onRefresh: () => Promise<unknown> | void;
+  /** Pixels the user must pull past before a release triggers a refresh. */
+  threshold?: number;
+  /** Maximum visual pull distance after resistance dampening. */
+  maxPull?: number;
+  enabled?: boolean;
+}
+
+/**
+ * Window-level pull-to-refresh for the tasks/sessions lists. Activates only
+ * when the user starts a touch at `scrollY === 0` and drags downward.
+ * Returns `pullDistance` (dampened pixels to visually translate an indicator)
+ * and `refreshing` (true while the consumer's onRefresh promise is in flight).
+ */
+export function usePullToRefresh({
+  onRefresh,
+  threshold = 70,
+  maxPull = 110,
+  enabled = true,
+}: Options) {
+  const [pullDistance, setPullDistance] = useState(0);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const startY = useRef<number | null>(null);
+  const pulling = useRef(false);
+  const distance = useRef(0);
+  const refreshingRef = useRef(false);
+  const onRefreshRef = useRef(onRefresh);
+  useEffect(() => { onRefreshRef.current = onRefresh; });
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const onTouchStart = (e: TouchEvent) => {
+      if (refreshingRef.current || window.scrollY > 0) {
+        startY.current = null;
+        return;
+      }
+      startY.current = e.touches[0].clientY;
+      pulling.current = false;
+      distance.current = 0;
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (refreshingRef.current || startY.current == null) return;
+      const dy = e.touches[0].clientY - startY.current;
+      if (dy <= 0) {
+        pulling.current = false;
+        distance.current = 0;
+        setPullDistance(0);
+        return;
+      }
+      pulling.current = true;
+      const adjusted = Math.min(maxPull, dy * 0.5);
+      distance.current = adjusted;
+      setPullDistance(adjusted);
+      if (e.cancelable) e.preventDefault();
+    };
+
+    const onTouchEnd = () => {
+      if (!pulling.current) {
+        startY.current = null;
+        setPullDistance(0);
+        return;
+      }
+      const pulled = distance.current;
+      startY.current = null;
+      pulling.current = false;
+      distance.current = 0;
+      if (pulled >= threshold) {
+        refreshingRef.current = true;
+        setRefreshing(true);
+        setPullDistance(threshold);
+        Promise.resolve(onRefreshRef.current())
+          .catch(() => { /* swallow — indicator still closes */ })
+          .finally(() => {
+            refreshingRef.current = false;
+            setRefreshing(false);
+            setPullDistance(0);
+          });
+      } else {
+        setPullDistance(0);
+      }
+    };
+
+    window.addEventListener("touchstart", onTouchStart, { passive: true });
+    window.addEventListener("touchmove", onTouchMove, { passive: false });
+    window.addEventListener("touchend", onTouchEnd, { passive: true });
+    window.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    return () => {
+      window.removeEventListener("touchstart", onTouchStart);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
+      window.removeEventListener("touchcancel", onTouchEnd);
+    };
+  }, [enabled, threshold, maxPull]);
+
+  return { pullDistance, refreshing, threshold };
+}