palmier 0.7.6 → 0.7.8

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

@@ -1,89 +1,42 @@
 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;
-}
+import type { AgentInfo, Task, TaskStatus } from "../types";
 
 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;
+  agents: AgentInfo[];
+  hostPlatform?: string;
   onViewRun(taskId: string, runId?: string): void;
-  onUpdateRequired?(required: boolean): void;
-  onVersion?(version: string | null): void;
-  onCapabilityTokens?(tokens: Record<string, string | null>): void;
 }
 
-export default function TaskListView({ connected, hostId, request, subscribeEvents, onViewRun, onUpdateRequired, onVersion, onCapabilityTokens }: TaskListViewProps) {
+export default function TaskListView({ connected, hostId, request, subscribeEvents, agents, hostPlatform, onViewRun }: 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<Map<string, { description: string; agentName?: string }>>(new Map());
-  const [pendingPermissions, setPendingPermissions] = useState<Map<string, RequiredPermission[]>>(new Map());
-  const [pendingInputs, setPendingInputs] = useState<Map<string, { questions: string[]; description?: string; agentName?: string }>>(new Map());
-  const [inputValues, setInputValues] = useState<Map<string, string[]>>(new Map());
+  const [taskStatuses, setTaskStatuses] = useState<Map<string, TaskStatus>>(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; location_client_token?: string | null; capability_tokens?: Record<string, string | null> }>("task.list");
+      const result = await request<{ tasks?: (Task & { status?: TaskStatus })[] }>("task.list");
       const taskList = result.tasks ?? [];
-      const initialEvents = new Map<string, TaskStatus>();
-      const initialConfirms = new Map<string, { description: string; agentName?: string }>();
-      const initialPerms = new Map<string, RequiredPermission[]>();
-      const initialInputs = new Map<string, { questions: string[]; description?: string; agentName?: string }>();
-      const initialInputVals = new Map<string, string[]>();
+      const initialStatuses = new Map<string, TaskStatus>();
       for (const t of taskList) {
-        if (t.status) {
-          initialEvents.set(t.id, t.status);
-          // pending_confirmation no longer comes from task.list (confirmation is sessionId-based now)
-          if (t.status.pending_permission?.length) initialPerms.set(t.id, t.status.pending_permission);
-          if (t.status.pending_input?.length) {
-            initialInputs.set(t.id, { questions: t.status.pending_input });
-            initialInputVals.set(t.id, new Array(t.status.pending_input.length).fill(""));
-          }
-        }
+        if (t.status) initialStatuses.set(t.id, t.status);
       }
-      setTaskStatuss(initialEvents);
-      setPendingConfirms(initialConfirms);
-      setPendingPermissions(initialPerms);
-      setPendingInputs(initialInputs);
-      setInputValues(initialInputVals);
+      setTaskStatuses(initialStatuses);
       setTasks(taskList);
-      setAgents(result.agents ?? []);
-      setHostPlatform(result.host_platform);
-      setAgentLabels(result.agents ?? []);
-      const version = result.version ?? null;
-      onVersion?.(version);
-      onCapabilityTokens?.(result.capability_tokens ?? {});
-      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")) {
@@ -102,10 +55,11 @@ export default function TaskListView({ connected, hostId, request, subscribeEven
     else { setTasks([]); setLoadingTasks(false); }
   }, [connected, hostId, loadTasks]);
 
-  // Subscribe to task events
+  // 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 sc = { decode: (data: Uint8Array) => new TextDecoder().decode(data) };
     const unsubscribe = subscribeEvents(hostId, async (msg) => {
       const tokens = msg.subject.split(".");
       if (tokens.length < 3) return;
@@ -113,127 +67,20 @@ export default function TaskListView({ connected, hostId, request, subscribeEven
 
       let parsed: Record<string, unknown> = {};
       try {
-        parsed = JSON.parse(sc.decode(msg.data)) as Record<string, unknown>;
+        parsed = JSON.parse(new TextDecoder().decode(msg.data)) as Record<string, unknown>;
       } catch { return; }
       const eventType = parsed.event_type as string | undefined;
-      const sessionId = parsed.session_id as string | undefined;
-
-      // Handle input-request: show standalone input dialog (keyed by sessionId)
-      if (eventType === "input-request" && sessionId) {
-        const questions = parsed.input_questions as string[];
-        const agentName = parsed.agent_name as string | undefined;
-        const description = parsed.description as string | undefined;
-        if (questions?.length) {
-          setPendingInputs((prev) => {
-            if (prev.has(sessionId)) return prev;
-            const next = new Map(prev);
-            next.set(sessionId, { questions, description, agentName });
-            return next;
-          });
-          setInputValues((prev) => {
-            if (prev.has(sessionId)) return prev;
-            const next = new Map(prev);
-            next.set(sessionId, new Array(questions.length).fill(""));
-            return next;
-          });
-        }
-        return;
-      }
-
-      // Handle input-resolved: close pending input dialog
-      if (eventType === "input-resolved" && sessionId) {
-        setPendingInputs((prev) => {
-          if (!prev.has(sessionId)) return prev;
-          const next = new Map(prev);
-          next.delete(sessionId);
-          return next;
-        });
-        setInputValues((prev) => {
-          const next = new Map(prev);
-          next.delete(sessionId);
-          return next;
-        });
-        return;
-      }
-
-      // Handle confirm-request: show standalone confirmation dialog (keyed by sessionId)
-      if (eventType === "confirm-request" && sessionId) {
-        const description = parsed.description as string;
-        const agentName = parsed.agent_name as string | undefined;
-        if (description) {
-          setPendingConfirms((prev) => {
-            if (prev.has(sessionId)) return prev;
-            const next = new Map(prev);
-            next.set(sessionId, { description, agentName });
-            return next;
-          });
-        }
-        return;
-      }
-
-      // Handle confirm-resolved: close pending confirmation dialog
-      if (eventType === "confirm-resolved" && sessionId) {
-        setPendingConfirms((prev) => {
-          if (!prev.has(sessionId)) return prev;
-          const next = new Map(prev);
-          next.delete(sessionId);
-          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;
-      }
+      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;
-        setTaskStatuss((prev) => { const next = new Map(prev); next.set(taskId, status); 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;
-          });
-        }
+        setTaskStatuses((prev) => { const next = new Map(prev); next.set(taskId, status); return next; });
       } catch { /* skip */ }
     });
     return unsubscribe;
   }, [connected, hostId, subscribeEvents, request]);
 
-  async function respondToConfirm(sessionId: string, response: "confirmed" | "aborted") {
-    try {
-      await request("task.user_input", { id: sessionId, 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(sessionId: string, values: string[]) {
-    try {
-      await request("task.user_input", { id: sessionId, 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);
@@ -246,9 +93,7 @@ export default function TaskListView({ connected, hostId, request, subscribeEven
 
   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; });
+    setTaskStatuses((prev) => { const next = new Map(prev); next.delete(taskId); return next; });
   }
 
   return (
@@ -289,7 +134,7 @@ export default function TaskListView({ connected, hostId, request, subscribeEven
             <TaskCard
               key={task.id}
               task={task}
-              lastEvent={taskEvents.get(task.id)}
+              lastEvent={taskStatuses.get(task.id)}
               onEdit={async (t) => {
                 try {
                   const latest = await request<Task & { error?: string }>("task.get", { id: t.id });
@@ -312,120 +157,9 @@ export default function TaskListView({ connected, hostId, request, subscribeEven
           agents={agents}
           hostPlatform={hostPlatform}
           onSaved={handleTaskSaved}
-          onRun={onViewRun}
           onCancel={closeForm}
         />
       )}
-
-      {createPortal(<>
-      {[...pendingConfirms.entries()].map(([sessionId, { description, agentName }]) => {
-        const subtitle = agentName || tasks.find((t) => t.id === sessionId)?.name;
-        return (
-          <div key={sessionId} className="confirm-modal-overlay">
-            <div className="confirm-modal">
-              <h2 className="confirm-modal-title">Confirmation Required</h2>
-              {subtitle && <p className="confirm-modal-subtitle">{subtitle}</p>}
-              <p className="confirm-modal-message">{description}</p>
-              <div className="confirm-modal-actions">
-                <button className="btn btn-primary" onClick={() => respondToConfirm(sessionId, "confirmed")}>
-                  Confirm
-                </button>
-                <button className="btn btn-secondary" onClick={() => respondToConfirm(sessionId, "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(([sessionId, { questions, description, agentName }]) => {
-        const values = inputValues.get(sessionId) ?? new Array(questions.length).fill("");
-        const subtitle = agentName || tasks.find((t) => t.id === sessionId)?.name;
-        return (
-          <div key={sessionId} className="confirm-modal-overlay">
-            <div className="confirm-modal input-modal">
-              <h2 className="confirm-modal-title">Input Required</h2>
-              {subtitle && <p className="confirm-modal-subtitle">{subtitle}</p>}
-              {description && <p className="confirm-modal-message">{description}</p>}
-              <div className="input-list">
-                {questions.map((desc: string, i: number) => (
-                  <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(sessionId) ?? [])];
-                          arr[i] = e.target.value;
-                          next.set(sessionId, 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(sessionId, values)}
-                >
-                  Submit
-                </button>
-              </div>
-              <button
-                className="permission-abort-link"
-                onClick={() => respondToInput(sessionId, ["aborted"])}
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        );
-      })}
-      </>, document.body)}
     </>
   );
 }

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

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

@@ -7,7 +7,7 @@ import {
   useCallback,
   type ReactNode,
 } from "react";
-import { connect, StringCodec, type NatsConnection, type Subscription } from "nats.ws";
+import { connect, jwtAuthenticator, StringCodec, type NatsConnection, type Subscription } from "nats.ws";
 import { SERVER_URL } from "../api";
 import { useHostStore } from "./HostStoreContext";
 import type { PairedHost } from "../types";
@@ -90,12 +90,13 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
 
     async function init() {
       try {
-        const res = await fetch(`${SERVER_URL}/api/config`);
+        // Fetch host-scoped NATS credentials (can only access this host's subjects)
+        const res = await fetch(`${SERVER_URL}/api/nats-credentials/${activeHost!.hostId}`);
         if (!res.ok) {
-          console.error("[NATS] Failed to fetch config");
+          console.error("[NATS] Failed to fetch credentials");
           return;
         }
-        const config = await res.json() as { natsWsUrl: string; natsToken: string };
+        const config = await res.json() as { natsWsUrl: string; natsJwt: string; natsNkeySeed: string };
         if (!config.natsWsUrl) {
           console.warn("[NATS] No WebSocket URL configured");
           return;
@@ -105,7 +106,10 @@ export function HostConnectionProvider({ children }: { children: ReactNode }) {
         console.log("[NATS] Connecting to", config.natsWsUrl);
         const conn = await connect({
           servers: config.natsWsUrl,
-          token: config.natsToken,
+          authenticator: jwtAuthenticator(
+            config.natsJwt,
+            new TextEncoder().encode(config.natsNkeySeed),
+          ),
         });
         if (cancelled) { conn.close().catch(() => {}); return; }
         console.log("[NATS] Connected");

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