palmier 0.7.6 → 0.7.8

package/palmier-server/pwa/src/pages/Dashboard.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
 
 import { useHostStore } from "../contexts/HostStoreContext";
@@ -10,6 +11,37 @@ import RunsView from "../components/RunsView";
 import RunDetailView from "../components/RunDetailView";
 import { usePushSubscription } from "../hooks/usePushSubscription";
 import { useMediaQuery } from "../hooks/useMediaQuery";
+import { setAgentLabels } from "../agentLabels";
+import { confirmLeaveDraft } from "../draftGuard";
+import { MIN_HOST_VERSION } from "../constants";
+import type { AgentInfo, RequiredPermission } from "../types";
+
+function isOlderThan(current: string, minimum: string): boolean {
+  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 PendingPrompt {
+  key: string;
+  type: "confirmation" | "permission" | "input";
+  params?: RequiredPermission[] | string[];
+  meta?: {
+    session_id?: string;
+    session_name?: string;
+    description?: string;
+    input_questions?: string[];
+  };
+}
+
+interface ConfirmPrompt { description: string; sessionName?: string }
+interface PermissionPrompt { permissions: RequiredPermission[]; sessionName?: string }
+interface InputPrompt { questions: string[]; description?: string; sessionName?: string }
 
 export default function Dashboard() {
   const { pairedHosts, activeHostId, removePairedHost } = useHostStore();
@@ -19,7 +51,7 @@ export default function Dashboard() {
   const params = useParams<{ taskId?: string; runId?: string }>();
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
-  const isRunsTab = location.pathname.startsWith("/runs");
+  const isTasksTab = location.pathname.startsWith("/tasks");
   const runsFilterTaskId = params.runId ? undefined : params.taskId;
 
   // Resolve "latest" run ID to the actual run ID
@@ -48,16 +80,205 @@ export default function Dashboard() {
   const [updateError, setUpdateError] = useState<string | null>(null);
   const [daemonVersion, setDaemonVersion] = useState<string | null>(null);
   const [capabilityTokens, setCapabilityTokens] = useState<Record<string, string | null>>({});
+  const [agents, setAgents] = useState<AgentInfo[]>([]);
+  const [hostPlatform, setHostPlatform] = useState<string | undefined>();
+
+  // Pending prompt state — owned by Dashboard because these modals must show
+  // regardless of which tab (Sessions/Tasks/RunDetail) is currently rendered.
+  const [pendingConfirms, setPendingConfirms] = useState<Map<string, ConfirmPrompt>>(new Map());
+  const [pendingPermissions, setPendingPermissions] = useState<Map<string, PermissionPrompt>>(new Map());
+  const [pendingInputs, setPendingInputs] = useState<Map<string, InputPrompt>>(new Map());
+  const [inputValues, setInputValues] = useState<Map<string, string[]>>(new Map());
 
-  // Register push subscription for the active host
   usePushSubscription();
 
-  // Reset scroll when switching hosts
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [activeHostId]);
 
+  // host.info bootstrap: agents/version/platform + any prompts that were already
+  // pending when this PWA connected. Runs once per (host, connection).
+  useEffect(() => {
+    if (!connected) return;
+    request<{
+      agents?: AgentInfo[];
+      version?: string | null;
+      host_platform?: string;
+      capability_tokens?: Record<string, string | null>;
+      pending_prompts?: PendingPrompt[];
+    }>("host.info")
+      .then((result) => {
+        setAgents(result.agents ?? []);
+        setHostPlatform(result.host_platform);
+        setCapabilityTokens(result.capability_tokens ?? {});
+        setAgentLabels(result.agents ?? []);
+        const version = result.version ?? null;
+        setDaemonVersion(version);
+        setUpdateRequired(!!version && isOlderThan(version, MIN_HOST_VERSION));
+
+        // Seed modal state from already-pending prompts.
+        const confirms = new Map<string, ConfirmPrompt>();
+        const perms = new Map<string, PermissionPrompt>();
+        const inputs = new Map<string, InputPrompt>();
+        const inputVals = new Map<string, string[]>();
+        for (const p of result.pending_prompts ?? []) {
+          if (p.type === "confirmation") {
+            confirms.set(p.key, {
+              description: p.meta?.description ?? "",
+              sessionName: p.meta?.session_name,
+            });
+          } else if (p.type === "permission") {
+            perms.set(p.key, {
+              permissions: (p.params as RequiredPermission[]) ?? [],
+              sessionName: p.meta?.session_name,
+            });
+          } else if (p.type === "input") {
+            const questions = (p.params as string[]) ?? p.meta?.input_questions ?? [];
+            inputs.set(p.key, {
+              questions,
+              description: p.meta?.description,
+              sessionName: p.meta?.session_name,
+            });
+            inputVals.set(p.key, new Array(questions.length).fill(""));
+          }
+        }
+        setPendingConfirms(confirms);
+        setPendingPermissions(perms);
+        setPendingInputs(inputs);
+        setInputValues(inputVals);
+      })
+      .catch(() => { /* silent — update-required prompt guards the broken case */ });
+  }, [connected, activeHostId, request]);
+
+  // Always-on event subscription for modal lifecycle. Independent of which tab
+  // is active. Task-card status updates happen inside TaskListView while mounted.
+  useEffect(() => {
+    if (!connected || !activeHostId) return;
+    const unsubscribe = subscribeEvents(activeHostId, (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;
+      const sessionId = parsed.session_id as string | undefined;
+
+      if (eventType === "input-request" && sessionId) {
+        const questions = parsed.input_questions as string[] | undefined;
+        const sessionName = parsed.session_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, sessionName });
+            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;
+      }
+
+      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;
+      }
+
+      if (eventType === "confirm-request" && sessionId) {
+        const description = parsed.description as string | undefined;
+        const sessionName = parsed.session_name as string | undefined;
+        if (description) {
+          setPendingConfirms((prev) => {
+            if (prev.has(sessionId)) return prev;
+            const next = new Map(prev);
+            next.set(sessionId, { description, sessionName });
+            return next;
+          });
+        }
+        return;
+      }
+
+      if (eventType === "confirm-resolved" && sessionId) {
+        setPendingConfirms((prev) => {
+          if (!prev.has(sessionId)) return prev;
+          const next = new Map(prev);
+          next.delete(sessionId);
+          return next;
+        });
+        return;
+      }
+
+      if (eventType === "permission-request") {
+        const permissions = parsed.required_permissions as RequiredPermission[] | undefined;
+        const sessionName = parsed.session_name as string | undefined;
+        if (permissions?.length) {
+          setPendingPermissions((prev) => {
+            if (prev.has(taskId)) return prev;
+            const next = new Map(prev);
+            next.set(taskId, { permissions, sessionName });
+            return next;
+          });
+        }
+        return;
+      }
+
+      if (eventType === "permission-resolved") {
+        setPendingPermissions((prev) => {
+          if (!prev.has(taskId)) return prev;
+          const next = new Map(prev);
+          next.delete(taskId);
+          return next;
+        });
+        return;
+      }
+    });
+    return unsubscribe;
+  }, [connected, activeHostId, subscribeEvents]);
+
+  async function respondToConfirm(sessionId: string, response: "confirmed" | "aborted") {
+    try {
+      await request("task.user_input", { id: sessionId, value: [response] });
+    } catch (err) {
+      console.error("[Dashboard] 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("[Dashboard] 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("[Dashboard] Failed to respond to input request:", err);
+    }
+  }
+
   function handleViewRun(taskId: string, runId?: string) {
+    if (!confirmLeaveDraft()) return;
     if (runId) {
       navigate(`/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`);
     } else {
@@ -78,7 +299,6 @@ export default function Dashboard() {
     } catch {
       // Expected: connection drops during daemon restart
     }
-    // Daemon will restart; reload after it has time to come back up.
     setTimeout(() => window.location.reload(), 10000);
   }
 
@@ -116,7 +336,7 @@ export default function Dashboard() {
             <div className="revoked-actions">
               <button
                 className="btn btn-primary"
-                onClick={() => navigate("/pair")}
+                onClick={() => { if (confirmLeaveDraft()) navigate("/pair"); }}
               >
                 Re-pair Device
               </button>
@@ -132,18 +352,17 @@ export default function Dashboard() {
           </div>
         ) : showTaskContent ? (
           <>
-            <div style={{ display: !isRunsTab ? "contents" : "none" }}>
+            {isTasksTab && !isRunDetail && (
               <TaskListView
                 connected={connected}
                 hostId={activeHostId}
                 request={request}
                 subscribeEvents={subscribeEvents}
+                agents={agents}
+                hostPlatform={hostPlatform}
                 onViewRun={handleViewRun}
-                onUpdateRequired={setUpdateRequired}
-                onVersion={setDaemonVersion}
-                onCapabilityTokens={setCapabilityTokens}
               />
-            </div>
+            )}
             {isRunDetail ? (
               <RunDetailView
                 connected={connected}
@@ -153,14 +372,15 @@ export default function Dashboard() {
                 taskId={params.taskId!}
                 runId={decodeURIComponent(effectiveRunId!)}
               />
-            ) : isRunsTab ? (
+            ) : !isTasksTab ? (
               <RunsView
                 connected={connected}
                 hostId={activeHostId}
                 request={request}
                 subscribeEvents={subscribeEvents}
+                agents={agents}
                 filterTaskId={runsFilterTaskId}
-                onClearFilter={() => navigate("/runs")}
+                onClearFilter={() => { if (confirmLeaveDraft()) navigate("/"); }}
               />
             ) : null}
           </>
@@ -221,6 +441,109 @@ export default function Dashboard() {
       )}
 
       </div>
+
+      {createPortal(<>
+        {[...pendingConfirms.entries()].map(([sessionId, { description, sessionName }]) => (
+          <div key={sessionId} className="confirm-modal-overlay">
+            <div className="confirm-modal">
+              <h2 className="confirm-modal-title">Confirmation Required</h2>
+              {sessionName && <p className="confirm-modal-subtitle">{sessionName}</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, sessionName }]) => (
+          <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>{sessionName || 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, sessionName }]) => {
+          const values = inputValues.get(sessionId) ?? new Array(questions.length).fill("");
+          return (
+            <div key={sessionId} className="confirm-modal-overlay">
+              <div className="confirm-modal input-modal">
+                <h2 className="confirm-modal-title">Input Required</h2>
+                {sessionName && <p className="confirm-modal-subtitle">{sessionName}</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)}
     </div>
   );
 }

package/palmier-server/pwa/src/pages/PairHost.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { connect, StringCodec } from "nats.ws";
+import { connect, jwtAuthenticator, StringCodec } from "nats.ws";
 import { Capacitor } from "@capacitor/core";
 import { Preferences } from "@capacitor/preferences";
 import { useHostStore } from "../contexts/HostStoreContext";
@@ -54,12 +54,15 @@ export default function PairHost() {
         // Server mode — pair via NATS
         const configRes = await fetch(`${SERVER_URL}/api/config`);
         if (!configRes.ok) throw new Error("Failed to fetch server config");
-        const config = await configRes.json() as { natsWsUrl: string; natsToken: string };
+        const config = await configRes.json() as { natsWsUrl: string; natsJwt: string; natsNkeySeed: string };
         if (!config.natsWsUrl) throw new Error("Server has no NATS WebSocket URL configured");
 
         const nc = await connect({
           servers: config.natsWsUrl,
-          token: config.natsToken,
+          authenticator: jwtAuthenticator(
+            config.natsJwt,
+            new TextEncoder().encode(config.natsNkeySeed),
+          ),
         });
 
         const sc = StringCodec();

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

@@ -2,6 +2,7 @@ export interface AgentInfo {
   key: string;
   label: string;
   supportsPermissions?: boolean;
+  supportsYolo?: boolean;
 }
 
 
@@ -41,12 +42,6 @@ export interface TaskStatus {
   running_state: TaskRunningState;
   /** UTC time in milliseconds since epoch */
   time_stamp: number;
-  /** Whether this task is awaiting user confirmation */
-  pending_confirmation?: boolean;
-  /** Permissions the task needs granted to continue */
-  pending_permission?: RequiredPermission[];
-  pending_input?: string[];
-  user_input?: string[];
 }
 
 export interface HistoryEntry {

package/palmier-server/server/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "dev": "tsx watch src/index.ts",
     "build": "tsc",
-    "start": "node dist/index.js"
+    "start": "node dist/index.js",
+    "nats-setup": "tsx src/nats-setup.ts"
   },
   "dependencies": {
     "bcrypt": "^5.1.1",
@@ -16,6 +17,7 @@
     "helmet": "^8.0.0",
     "jsonwebtoken": "^9.0.2",
     "nats": "^2.29.1",
+    "nkeys.js": "^1.1.0",
     "pg": "^8.13.1",
     "uuid": "^11.0.5",
     "web-push": "^3.6.7"

package/palmier-server/server/src/index.ts

@@ -13,6 +13,7 @@ import fcmRoutes from "./routes/fcm.js";
 import deviceRoutes from "./routes/device.js";
 import { notifyClients } from "./notify.js";
 import { sendFcmToClients, sendFcmToDevice } from "./fcm.js";
+import { createPairingCredentials, createPwaCredentials } from "./nats-jwt.js";
 
 const PORT = parseInt(process.env.PORT || "3000", 10);
 
@@ -446,6 +447,61 @@ async function main(): Promise<void> {
     }
   })();
 
+  // Subscribe to email requests from hosts
+  (async () => {
+    try {
+      const conn = await getNatsConnection();
+      const sub = conn.subscribe("host.*.fcm.email");
+      console.log("Listening for FCM email requests");
+
+      for await (const msg of sub) {
+        try {
+          const data = JSON.parse(sc.decode(msg.data)) as {
+            hostId: string;
+            requestId: string;
+            fcmToken?: string;
+            [key: string]: string | undefined;
+          };
+
+          const subjectHostId = msg.subject.split(".")[1];
+          if (data.hostId !== subjectHostId) {
+            if (msg.reply) {
+              msg.respond(sc.encode(JSON.stringify({ error: "hostId mismatch" })));
+            }
+            continue;
+          }
+
+          const fcmPayload: Record<string, string> = {
+            type: "send-email",
+            requestId: data.requestId,
+            hostId: data.hostId,
+          };
+          for (const key of ["to", "subject", "body", "cc", "bcc"]) {
+            if (data[key]) fcmPayload[key] = data[key]!;
+          }
+
+          console.log(`[FCM] Sending email request for host ${data.hostId}`);
+          if (data.fcmToken) {
+            await sendFcmToDevice(data.fcmToken, fcmPayload);
+          } else {
+            await sendFcmToClients(data.hostId, fcmPayload);
+          }
+
+          if (msg.reply) {
+            msg.respond(sc.encode(JSON.stringify({ ok: true })));
+          }
+        } catch (err) {
+          console.error("[FCM] Error handling email request:", err);
+          if (msg.reply) {
+            msg.respond(sc.encode(JSON.stringify({ error: String(err) })));
+          }
+        }
+      }
+    } catch (err) {
+      console.error("Failed to subscribe to FCM email requests:", err);
+    }
+  })();
+
   // Subscribe to battery requests from hosts
   (async () => {
     try {
@@ -569,11 +625,36 @@ async function main(): Promise<void> {
   app.use("/api/fcm", fcmRoutes);
   app.use("/api/device", deviceRoutes);
 
-  // Public NATS config endpoint (used by PWA for pairing)
+  // Public NATS config endpoint — returns pairing-only credentials.
+  // These can only publish to pair.* subjects (no RPC, no event subscriptions).
   app.get("/api/config", (_req, res) => {
+    const accountSeed = process.env.NATS_ACCOUNT_SEED;
+    if (!accountSeed) {
+      res.status(500).json({ error: "Server NATS auth not configured" });
+      return;
+    }
+    const creds = createPairingCredentials(accountSeed);
+    res.json({
+      natsWsUrl: process.env.NATS_WS_URL || "",
+      natsJwt: creds.jwt,
+      natsNkeySeed: creds.nkeySeed,
+    });
+  });
+
+  // Host-scoped NATS credentials — returns JWT scoped to a single host's subjects.
+  // Called by the PWA after pairing to get credentials for RPC + event subscriptions.
+  app.get("/api/nats-credentials/:hostId", (req, res) => {
+    const accountSeed = process.env.NATS_ACCOUNT_SEED;
+    if (!accountSeed) {
+      res.status(500).json({ error: "Server NATS auth not configured" });
+      return;
+    }
+    const { hostId } = req.params;
+    const creds = createPwaCredentials(accountSeed, hostId);
     res.json({
       natsWsUrl: process.env.NATS_WS_URL || "",
-      natsToken: process.env.NATS_TOKEN || "",
+      natsJwt: creds.jwt,
+      natsNkeySeed: creds.nkeySeed,
     });
   });