palmier 0.6.0 → 0.6.2

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

@@ -0,0 +1,415 @@
+import { useState, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import TaskCard from "./TaskCard";
+import TaskForm from "./TaskForm";
+import { setAgentLabels } from "../agentLabels";
+import type { AgentInfo, Task, TaskStatus, RequiredPermission } from "../types";
+import { MIN_HOST_VERSION } from "../constants";
+
+function isOlderThan(current: string, minimum: string): boolean {
+  // Dev builds (e.g. "0.3.2-dev") are never forced to update
+  if (current.includes("-")) return false;
+  const a = current.split(".").map(Number);
+  const b = minimum.split(".").map(Number);
+  for (let i = 0; i < 3; i++) {
+    if ((a[i] ?? 0) < (b[i] ?? 0)) return true;
+    if ((a[i] ?? 0) > (b[i] ?? 0)) return false;
+  }
+  return false;
+}
+
+interface TaskListViewProps {
+  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;
+  onViewRun(taskId: string, runId?: string): void;
+  onUpdateRequired?(required: boolean): void;
+  onVersion?(version: string | null): void;
+}
+
+export default function TaskListView({ connected, hostId, request, subscribeEvents, onViewRun, onUpdateRequired, onVersion }: TaskListViewProps) {
+  const [tasks, setTasks] = useState<Task[]>([]);
+  const [loadingTasks, setLoadingTasks] = useState(false);
+  const [taskError, setTaskError] = useState<string | null>(null);
+  const [taskEvents, setTaskStatuss] = useState<Map<string, TaskStatus>>(new Map());
+  const [pendingConfirms, setPendingConfirms] = useState<Set<string>>(new Set());
+  const [pendingPermissions, setPendingPermissions] = useState<Map<string, RequiredPermission[]>>(new Map());
+  const [pendingInputs, setPendingInputs] = useState<Map<string, string[]>>(new Map());
+  const [inputValues, setInputValues] = useState<Map<string, string[]>>(new Map());
+
+  const [showForm, setShowForm] = useState(false);
+  const [editingTask, setEditingTask] = useState<Task | undefined>(undefined);
+
+  const [agents, setAgents] = useState<AgentInfo[]>([]);
+  const [hostPlatform, setHostPlatform] = useState<string | undefined>();
+
+  const closeForm = useCallback(() => { setShowForm(false); setEditingTask(undefined); }, []);
+
+  // Load tasks
+  const loadTasks = useCallback(async () => {
+    if (!connected) return;
+    setLoadingTasks(true);
+    setTaskError(null);
+    try {
+      const result = await request<{ tasks?: (Task & { status?: TaskStatus })[]; agents?: AgentInfo[]; version?: string | null; host_platform?: string }>("task.list");
+      const taskList = result.tasks ?? [];
+      const initialEvents = new Map<string, TaskStatus>();
+      const initialConfirms = new Set<string>();
+      const initialPerms = new Map<string, RequiredPermission[]>();
+      const initialInputs = new Map<string, string[]>();
+      const initialInputVals = new Map<string, string[]>();
+      for (const t of taskList) {
+        if (t.status) {
+          initialEvents.set(t.id, t.status);
+          if (t.status.pending_confirmation) initialConfirms.add(t.id);
+          if (t.status.pending_permission?.length) initialPerms.set(t.id, t.status.pending_permission);
+          if (t.status.pending_input?.length) {
+            initialInputs.set(t.id, t.status.pending_input);
+            initialInputVals.set(t.id, new Array(t.status.pending_input.length).fill(""));
+          }
+        }
+      }
+      setTaskStatuss(initialEvents);
+      setPendingConfirms(initialConfirms);
+      setPendingPermissions(initialPerms);
+      setPendingInputs(initialInputs);
+      setInputValues(initialInputVals);
+      setTasks(taskList);
+      setAgents(result.agents ?? []);
+      setHostPlatform(result.host_platform);
+      setAgentLabels(result.agents ?? []);
+      const version = result.version ?? null;
+      onVersion?.(version);
+      onUpdateRequired?.(!!version && isOlderThan(version, MIN_HOST_VERSION));
+    } 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]);
+
+  // Subscribe to task events
+  useEffect(() => {
+    if (!connected || !hostId) return;
+    const sc = { decode: (data: Uint8Array) => new TextDecoder().decode(data) };
+    const unsubscribe = subscribeEvents(hostId, async (msg) => {
+      const tokens = msg.subject.split(".");
+      if (tokens.length < 3) return;
+      const taskId = tokens.slice(2).join(".");
+
+      let eventType: string | undefined;
+      try {
+        const parsed = JSON.parse(sc.decode(msg.data)) as { event_type?: string };
+        eventType = parsed.event_type;
+      } catch { return; }
+
+      // Handle confirm-resolved: close pending confirmation dialog
+      if (eventType === "confirm-resolved") {
+        setPendingConfirms((prev) => {
+          if (!prev.has(taskId)) return prev;
+          const next = new Set(prev);
+          next.delete(taskId);
+          return next;
+        });
+        return;
+      }
+
+      // Handle permission-resolved: close pending permission dialog
+      if (eventType === "permission-resolved") {
+        setPendingPermissions((prev) => {
+          if (!prev.has(taskId)) return prev;
+          const next = new Map(prev);
+          next.delete(taskId);
+          return next;
+        });
+        return;
+      }
+
+      // Handle input-resolved: close pending input dialog
+      if (eventType === "input-resolved") {
+        setPendingInputs((prev) => {
+          if (!prev.has(taskId)) return prev;
+          const next = new Map(prev);
+          next.delete(taskId);
+          return next;
+        });
+        setInputValues((prev) => {
+          const next = new Map(prev);
+          next.delete(taskId);
+          return next;
+        });
+        return;
+      }
+
+      try {
+        const status = await request<TaskStatus & { error?: string }>("task.status", { id: taskId }, { timeout: 5000 });
+        if (status.error) return;
+        setTaskStatuss((prev) => { const next = new Map(prev); next.set(taskId, status); return next; });
+        if (status.pending_confirmation) {
+          setPendingConfirms((prev) => {
+            if (prev.has(taskId)) return prev;
+            const next = new Set(prev);
+            next.add(taskId);
+            return next;
+          });
+        }
+        if (status.pending_permission?.length) {
+          setPendingPermissions((prev) => {
+            if (prev.has(taskId)) return prev;
+            const next = new Map(prev);
+            next.set(taskId, status.pending_permission!);
+            return next;
+          });
+        }
+        if (status.pending_input?.length) {
+          setPendingInputs((prev) => {
+            if (prev.has(taskId)) return prev;
+            const next = new Map(prev);
+            next.set(taskId, status.pending_input!);
+            return next;
+          });
+          setInputValues((prev) => {
+            if (prev.has(taskId)) return prev;
+            const next = new Map(prev);
+            next.set(taskId, new Array(status.pending_input!.length).fill(""));
+            return next;
+          });
+        }
+      } catch { /* skip */ }
+    });
+    return unsubscribe;
+  }, [connected, hostId, subscribeEvents, request]);
+
+  async function respondToConfirm(taskId: string, response: "confirmed" | "aborted") {
+    try {
+      await request("task.user_input", { id: taskId, value: [response] });
+    } catch (err) {
+      console.error("[TaskListView] Failed to respond to confirmation:", err);
+    }
+  }
+
+  async function respondToPermission(taskId: string, response: "granted" | "granted_all" | "aborted") {
+    try {
+      await request("task.user_input", { id: taskId, value: [response] });
+    } catch (err) {
+      console.error("[TaskListView] Failed to respond to permission request:", err);
+    }
+  }
+
+  async function respondToInput(taskId: string, values: string[]) {
+    try {
+      await request("task.user_input", { id: taskId, value: values });
+    } catch (err) {
+      console.error("[TaskListView] Failed to respond to input request:", err);
+    }
+  }
+
+  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));
+    setTaskStatuss((prev) => { const next = new Map(prev); next.delete(taskId); return next; });
+    setPendingInputs((prev) => { const next = new Map(prev); next.delete(taskId); return next; });
+    setInputValues((prev) => { const next = new Map(prev); next.delete(taskId); return next; });
+  }
+
+  return (
+    <>
+      {taskError && <div className="form-error">{taskError}{taskError.toLowerCase().includes("failed to fetch") && <>{" "}<a href="#" onClick={(e) => { e.preventDefault(); window.location.reload(); }}>Reload</a></>}</div>}
+
+      <div
+        className="new-task-input-card"
+        onClick={() => { setEditingTask(undefined); setShowForm(true); }}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { setEditingTask(undefined); setShowForm(true); } }}
+      >
+        <span className="new-task-placeholder">Describe your new task...</span>
+      </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={taskEvents.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>
+      )}
+
+      {showForm && (
+        <TaskForm
+          initial={editingTask}
+          agents={agents}
+          hostPlatform={hostPlatform}
+          onSaved={handleTaskSaved}
+          onRun={onViewRun}
+          onCancel={closeForm}
+        />
+      )}
+
+      {createPortal(<>
+      {[...pendingConfirms].map((taskId) => {
+        const task = tasks.find((t) => t.id === taskId);
+        return (
+          <div key={taskId} className="confirm-modal-overlay">
+            <div className="confirm-modal">
+              <h2 className="confirm-modal-title">Task Confirmation</h2>
+              <p className="confirm-modal-message">
+                Run task "<strong>{task?.name || task?.user_prompt || taskId}</strong>"?
+              </p>
+              <div className="confirm-modal-actions">
+                <button className="btn btn-primary" onClick={() => respondToConfirm(taskId, "confirmed")}>
+                  Confirm
+                </button>
+                <button className="btn btn-secondary" onClick={() => respondToConfirm(taskId, "aborted")}>
+                  Abort
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+
+      {[...pendingPermissions.entries()].map(([taskId, permissions]) => {
+        const task = tasks.find((t) => t.id === taskId);
+        return (
+          <div key={taskId} className="confirm-modal-overlay">
+            <div className="confirm-modal permission-modal">
+              <h2 className="confirm-modal-title">Permission Required</h2>
+              <p className="confirm-modal-message">
+                <strong>{task?.name || task?.user_prompt || taskId}</strong>
+              </p>
+              <div className="permission-list">
+                {permissions.map((p, i) => (
+                  <div key={i} className="permission-item">
+                    <span className="permission-name">{p.name}</span>
+                    {p.description && <span className="permission-desc">{p.description}</span>}
+                  </div>
+                ))}
+              </div>
+              <div className="permission-actions">
+                <button className="btn btn-primary" onClick={() => respondToPermission(taskId, "granted")}>
+                  Allow Once
+                </button>
+                <button className="btn btn-secondary" onClick={() => respondToPermission(taskId, "granted_all")}>
+                  Allow Always
+                </button>
+              </div>
+              <button
+                className="permission-abort-link"
+                onClick={() => respondToPermission(taskId, "aborted")}
+              >
+                Deny & Abort Task
+              </button>
+            </div>
+          </div>
+        );
+      })}
+
+      {[...pendingInputs.entries()].map(([taskId, descriptions]) => {
+        const task = tasks.find((t) => t.id === taskId);
+        const values = inputValues.get(taskId) ?? new Array(descriptions.length).fill("");
+        return (
+          <div key={taskId} className="confirm-modal-overlay">
+            <div className="confirm-modal input-modal">
+              <h2 className="confirm-modal-title">Input Required</h2>
+              <p className="confirm-modal-message">
+                <strong>{task?.name || task?.user_prompt || taskId}</strong>
+              </p>
+              <div className="input-list">
+                {descriptions.map((desc, i) => (
+                  <div key={i} className="input-item">
+                    <label className="input-label">{desc}</label>
+                    <input
+                      type="text"
+                      className="input-field"
+                      value={values[i] ?? ""}
+                      onChange={(e) => {
+                        setInputValues((prev) => {
+                          const next = new Map(prev);
+                          const arr = [...(next.get(taskId) ?? [])];
+                          arr[i] = e.target.value;
+                          next.set(taskId, arr);
+                          return next;
+                        });
+                      }}
+                      autoFocus={i === 0}
+                    />
+                  </div>
+                ))}
+              </div>
+              <div className="input-actions">
+                <button
+                  className="btn btn-primary"
+                  disabled={values.some((v) => !v.trim())}
+                  onClick={() => respondToInput(taskId, values)}
+                >
+                  Submit
+                </button>
+              </div>
+              <button
+                className="permission-abort-link"
+                onClick={() => respondToInput(taskId, ["aborted"])}
+              >
+                Cancel & Abort Task
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      </>, document.body)}
+    </>
+  );
+}

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

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