palmier 0.6.0 → 0.6.1

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

@@ -0,0 +1,223 @@
+import { useState, useEffect } from "react";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
+
+import { useHostStore } from "../contexts/HostStoreContext";
+import { useHostConnection } from "../contexts/HostConnectionContext";
+import TaskListView from "../components/TaskListView";
+import TabBar from "../components/TabBar";
+import HostMenu from "../components/HostMenu";
+import RunsView from "../components/RunsView";
+import RunDetailView from "../components/RunDetailView";
+import { usePushSubscription } from "../hooks/usePushSubscription";
+import { useMediaQuery } from "../hooks/useMediaQuery";
+
+export default function Dashboard() {
+  const { pairedHosts, activeHostId, removePairedHost } = useHostStore();
+  const { connected, request, subscribeEvents, unauthorized } = useHostConnection();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const params = useParams<{ taskId?: string; runId?: string }>();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  const isRunsTab = location.pathname.startsWith("/runs");
+  const runsFilterTaskId = params.runId ? undefined : params.taskId;
+
+  // Resolve "latest" run ID to the actual run ID
+  const [resolvedRunId, setResolvedRunId] = useState<string | null>(null);
+  const rawRunId = params.runId;
+  const isLatest = rawRunId === "latest";
+
+  useEffect(() => {
+    if (!isLatest || !params.taskId || !connected) {
+      setResolvedRunId(null);
+      return;
+    }
+    request<{ entries?: Array<{ run_id: string }> }>("taskrun.list", { task_id: params.taskId, limit: 1 })
+      .then((result) => {
+        const latest = result.entries?.[0]?.run_id;
+        setResolvedRunId(latest ?? null);
+      })
+      .catch(() => setResolvedRunId(null));
+  }, [isLatest, params.taskId, connected]);
+
+  const effectiveRunId = isLatest ? resolvedRunId : rawRunId;
+  const isRunDetail = !!(params.taskId && effectiveRunId && effectiveRunId !== "latest");
+
+  const [updateRequired, setUpdateRequired] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const [updateError, setUpdateError] = useState<string | null>(null);
+  const [daemonVersion, setDaemonVersion] = useState<string | null>(null);
+
+  // Register push subscription for the active host
+  usePushSubscription();
+
+  // Reset scroll when switching hosts
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [activeHostId]);
+
+  function handleViewRun(taskId: string, runId?: string) {
+    if (runId) {
+      navigate(`/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`);
+    } else {
+      navigate(`/runs/${encodeURIComponent(taskId)}`);
+    }
+  }
+
+  async function handleUpdate() {
+    setUpdating(true);
+    setUpdateError(null);
+    try {
+      const result = await request<{ ok?: boolean; error?: string }>("host.update");
+      if (result.error) {
+        setUpdateError(result.error);
+        setUpdating(false);
+        return;
+      }
+    } catch {
+      // Expected: connection drops during daemon restart
+    }
+    // Daemon will restart; reload after it has time to come back up.
+    setTimeout(() => window.location.reload(), 10000);
+  }
+
+  const hasHosts = pairedHosts.length > 0;
+  const showTaskContent = hasHosts && connected && activeHostId && !unauthorized;
+
+  return (
+    <div className="dashboard">
+      {isDesktop && <HostMenu daemonVersion={daemonVersion} />}
+
+      <div className="dashboard-content">
+        <div className="tab-bar">
+          {!isDesktop && <HostMenu daemonVersion={daemonVersion} />}
+          <TabBar />
+        </div>
+
+        <main className="dashboard-main">
+        {unauthorized ? (
+          <div className="revoked-state">
+            <div className="revoked-icon">
+              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                <line x1="12" y1="15" x2="12" y2="18" />
+              </svg>
+            </div>
+            <h2 className="revoked-title">Client Revoked</h2>
+            <p className="revoked-description">
+              This client was revoked by the host. To reconnect, generate a new pairing code on the host machine.
+            </p>
+            <div className="revoked-command">
+              <code>palmier pair</code>
+            </div>
+            <div className="revoked-actions">
+              <button
+                className="btn btn-primary"
+                onClick={() => navigate("/pair")}
+              >
+                Re-pair Device
+              </button>
+              <button
+                className="btn btn-secondary"
+                onClick={() => {
+                  if (activeHostId) removePairedHost(activeHostId);
+                }}
+              >
+                Remove Host
+              </button>
+            </div>
+          </div>
+        ) : showTaskContent ? (
+          <>
+            <div style={{ display: !isRunsTab ? "contents" : "none" }}>
+              <TaskListView
+                connected={connected}
+                hostId={activeHostId}
+                request={request}
+                subscribeEvents={subscribeEvents}
+                onViewRun={handleViewRun}
+                onUpdateRequired={setUpdateRequired}
+                onVersion={setDaemonVersion}
+              />
+            </div>
+            {isRunDetail ? (
+              <RunDetailView
+                connected={connected}
+                hostId={activeHostId}
+                request={request}
+                subscribeEvents={subscribeEvents}
+                taskId={params.taskId!}
+                runId={decodeURIComponent(effectiveRunId!)}
+              />
+            ) : isRunsTab ? (
+              <RunsView
+                connected={connected}
+                hostId={activeHostId}
+                request={request}
+                subscribeEvents={subscribeEvents}
+                filterTaskId={runsFilterTaskId}
+                onClearFilter={() => navigate("/runs")}
+              />
+            ) : null}
+          </>
+        ) : (
+          <div className="empty-state">
+            <p>{hasHosts ? "Connecting to host..." : "No hosts paired yet."}</p>
+            {!hasHosts && (
+              <button
+                className="btn btn-primary"
+                onClick={() => navigate("/pair")}
+              >
+                Pair Host
+              </button>
+            )}
+          </div>
+        )}
+        </main>
+
+        {updateRequired && !updating && !updateError && (
+        <div className="confirm-modal-overlay">
+          <div className="confirm-modal">
+            <h2 className="confirm-modal-title">Update Required</h2>
+            <p className="confirm-modal-message">
+              Your Palmier host{daemonVersion ? ` (v${daemonVersion})` : ""} is too old for this version of the app. Please update to continue.
+            </p>
+            <div className="confirm-modal-actions">
+              <button className="btn btn-primary" onClick={handleUpdate}>
+                Update Now
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      {updating && (
+        <div className="confirm-modal-overlay">
+          <div className="confirm-modal">
+            <h2 className="confirm-modal-title">Updating...</h2>
+            <p className="confirm-modal-message">
+              Installing update and restarting daemon. Please wait...
+            </p>
+          </div>
+        </div>
+      )}
+      {updateError && (
+        <div className="confirm-modal-overlay">
+          <div className="confirm-modal">
+            <h2 className="confirm-modal-title">Update Failed</h2>
+            <p className="confirm-modal-message" style={{ whiteSpace: "pre-line" }}>
+              {updateError}
+            </p>
+            <div className="confirm-modal-actions">
+              <button className="btn btn-secondary" onClick={() => { setUpdateError(null); }}>
+                Retry
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,178 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { connect, StringCodec } from "nats.ws";
+import { useHostStore } from "../contexts/HostStoreContext";
+import type { PairedHost } from "../types";
+
+interface PairResponse {
+  hostId: string;
+  clientToken: string;
+  directUrl?: string;
+}
+
+/** LAN mode: PWA is served by palmier serve (marker injected into HTML). */
+const isLanMode = !!(window as any).__PALMIER_SERVE__;
+
+export default function PairHost() {
+  const [code, setCode] = useState("");
+  const [pairing, setPairing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { addPairedHost } = useHostStore();
+  const navigate = useNavigate();
+
+  async function handlePair() {
+    const trimmedCode = code.trim().toUpperCase();
+    if (!trimmedCode) {
+      setError("Enter a pairing code.");
+      return;
+    }
+
+    setPairing(true);
+    setError(null);
+
+    try {
+      let response: PairResponse;
+
+      if (isLanMode) {
+        // LAN mode — same-origin fetch to the host serving this page
+        const res = await fetch("/pair", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ code: trimmedCode, label: navigator.userAgent }),
+        });
+
+        if (!res.ok) {
+          const body = await res.json().catch(() => ({ error: "Connection failed" })) as { error?: string };
+          throw new Error(body.error || `HTTP ${res.status}`);
+        }
+
+        response = await res.json() as PairResponse;
+      } else {
+        // Server mode — pair via NATS
+        const configRes = await fetch("/api/config");
+        if (!configRes.ok) throw new Error("Failed to fetch server config");
+        const config = await configRes.json() as { natsWsUrl: string; natsToken: string };
+        if (!config.natsWsUrl) throw new Error("Server has no NATS WebSocket URL configured");
+
+        const nc = await connect({
+          servers: config.natsWsUrl,
+          token: config.natsToken,
+        });
+
+        const sc = StringCodec();
+        const subject = `pair.${trimmedCode}`;
+        const msg = await nc.request(
+          subject,
+          sc.encode(JSON.stringify({ label: navigator.userAgent })),
+          { timeout: 10000 },
+        );
+
+        response = JSON.parse(sc.decode(msg.data)) as PairResponse;
+        await nc.close();
+      }
+
+      const host: PairedHost = {
+        hostId: response.hostId,
+        clientToken: response.clientToken,
+        directUrl: isLanMode ? window.location.origin : undefined,
+      };
+
+      addPairedHost(host);
+      navigate("/");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      if (message.includes("timeout") || message.includes("TIMEOUT") || message.includes("503") || message.toLowerCase().includes("no responders")) {
+        setError("Code not found or expired. Check the code and try again.");
+      } else {
+        setError(message);
+      }
+    } finally {
+      setPairing(false);
+    }
+  }
+
+  return (
+    <div className="pair-page">
+      <div className="pair-card">
+        <div className="pair-header">
+          <h1 className="pair-title">{isLanMode ? "Pair" : "Pair with Host"}</h1>
+          <p className="pair-subtitle">
+            {isLanMode
+              ? "Enter the pairing code shown in your terminal."
+              : "Connect this device to a Palmier host"}
+          </p>
+        </div>
+
+        {!isLanMode && (
+          <div className="pair-instructions">
+            <div className="pair-instruction-block">
+              <h3 className="pair-instruction-heading">Setting up a new host?</h3>
+              <ol className="pair-steps">
+                <li>Install at least one agent CLI (e.g., <a href="https://www.palmier.me/agents" target="_blank" rel="noopener noreferrer">Claude Code, Gemini CLI, Codex CLI</a>)</li>
+                <li>Install Palmier on your host machine:
+                  <code className="pair-command">npm install -g palmier</code>
+                </li>
+                <li>Run the setup wizard:
+                  <code className="pair-command">palmier init</code>
+                </li>
+                <li>A pairing code will display automatically</li>
+              </ol>
+            </div>
+            <div className="pair-instruction-divider" />
+            <div className="pair-instruction-block">
+              <h3 className="pair-instruction-heading">Pairing an existing host?</h3>
+              <ol className="pair-steps">
+                <li>
+                  Run <code>palmier pair</code> on the host machine
+                </li>
+                <li>Enter the 6-character code below</li>
+              </ol>
+            </div>
+          </div>
+        )}
+
+        <div className="pair-form">
+          <label className="form-label" htmlFor="pair-code">
+            Pairing code
+            <input
+              id="pair-code"
+              type="text"
+              maxLength={6}
+              value={code}
+              onChange={(e) => setCode(e.target.value.toUpperCase())}
+              placeholder="A7K9M2"
+              className="form-input form-input-mono pair-code-input"
+              autoFocus
+              autoComplete="off"
+              disabled={pairing}
+            />
+          </label>
+
+          {error && <p className="pair-error">{error}</p>}
+
+          <button
+            className="btn btn-primary btn-full"
+            onClick={handlePair}
+            disabled={pairing || !code.trim()}
+          >
+            {pairing && <span className="btn-spinner" />}
+            {pairing ? "Pairing..." : "Pair"}
+          </button>
+          <button
+            className="btn btn-secondary btn-full"
+            onClick={() => navigate("/")}
+            disabled={pairing}
+          >
+            Cancel
+          </button>
+
+          <p className="pair-consent">
+            By pairing, you agree to our{" "}
+            <a href="https://www.palmier.me/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> and{" "}
+            <a href="https://www.palmier.me/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a>.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/palmier-server/pwa/src/service-worker.ts

@@ -0,0 +1,139 @@
+/// <reference lib="webworker" />
+import { precacheAndRoute } from "workbox-precaching";
+
+declare const self: ServiceWorkerGlobalScope;
+
+// Precache assets injected by vite-plugin-pwa
+precacheAndRoute(self.__WB_MANIFEST);
+
+const API_URL = "/api/push/respond";
+
+// hostId stored for potential future use (e.g., scoped push responses)
+self.addEventListener("message", (_event) => {
+  // Handle messages from the main app (e.g., set-host-id)
+});
+
+self.addEventListener("push", (event) => {
+  if (!event.data) return;
+
+  let payload: {
+    title?: string;
+    body?: string;
+    data?: Record<string, unknown>;
+    type?: string;
+  };
+  try {
+    payload = event.data.json();
+  } catch {
+    payload = { title: "Palmier", body: event.data.text() };
+  }
+
+  const type = payload.type ?? (payload.data as Record<string, unknown>)?.type;
+
+  // Silent dismiss: close matching notification without showing a new one
+  if (type === "confirm-dismiss" || type === "permission-dismiss" || type === "input-dismiss") {
+    const data = payload.data ?? payload;
+    const taskId = (data as Record<string, unknown>).task_id;
+    const dataHostId = (data as Record<string, unknown>).host_id;
+    event.waitUntil(
+      self.registration.getNotifications().then((notifications) => {
+        for (const n of notifications) {
+          if (n.data?.task_id === taskId && n.data?.host_id === dataHostId) {
+            n.close();
+          }
+        }
+      })
+    );
+    return;
+  }
+
+  const title = payload.title ?? "Palmier";
+  let body = payload.body ?? "";
+  if (!body && type === "confirm") {
+    body = "A task requires confirmation to run.";
+  }
+  if (!body && type === "permission") {
+    body = "A task needs additional permissions to continue.";
+  }
+  if (!body && type === "input") {
+    body = "A task needs your input to continue.";
+  }
+
+  const options: NotificationOptions & { vibrate?: number[]; actions?: Array<{ action: string; title: string }> } = {
+    body,
+    icon: "/pwa-192x192.png",
+    badge: "/pwa-192x192.png",
+    data: payload.data ?? payload,
+    vibrate: [100, 50, 100],
+  };
+
+  // Add action buttons for confirmation notifications
+  if (type === "confirm") {
+    options.actions = [
+      { action: "confirm", title: "Confirm" },
+      { action: "abort", title: "Abort" },
+    ];
+  }
+
+  event.waitUntil(self.registration.showNotification(title, options));
+});
+
+self.addEventListener("notificationclick", (event) => {
+  const notification = event.notification;
+  notification.close();
+
+  const data = notification.data ?? {};
+  const action = event.action;
+
+  if (action && data.type === "confirm" && data.task_id && data.host_id) {
+    const response = action === "confirm" ? "confirmed" : "aborted";
+
+    event.waitUntil(
+      fetch(API_URL, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: data.type,
+          task_id: data.task_id,
+          host_id: data.host_id,
+          response,
+        }),
+      }).catch((err) => {
+        console.error("Failed to send push response:", err);
+      })
+    );
+  } else {
+    // User tapped the notification body — open the PWA.
+    // For task-complete/fail notifications, deep-link to the result view.
+    const taskId = data.task_id;
+    const runId = data.run_id;
+    const targetUrl = taskId && runId && (data.type === "complete" || data.type === "fail")
+      ? `/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`
+      : taskId && (data.type === "complete" || data.type === "fail")
+        ? `/runs/${encodeURIComponent(taskId)}`
+        : "/";
+
+    event.waitUntil(
+      self.clients
+        .matchAll({ type: "window", includeUncontrolled: true })
+        .then((clients) => {
+          for (const client of clients) {
+            if (client.url.includes(self.location.origin) && "focus" in client) {
+              (client as WindowClient).navigate(targetUrl);
+              return client.focus();
+            }
+          }
+          return self.clients.openWindow(targetUrl);
+        })
+    );
+  }
+});
+
+// Activate immediately
+self.addEventListener("install", () => {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(self.clients.claim());
+});

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

@@ -0,0 +1,79 @@
+export interface AgentInfo {
+  key: string;
+  label: string;
+  supportsPermissions?: boolean;
+}
+
+
+export interface Task {
+  id: string;
+  name: string;
+  user_prompt: string;
+  agent?: string;
+  triggers: Trigger[];
+  triggers_enabled: boolean;
+  requires_confirmation: boolean;
+  yolo_mode?: boolean;
+  foreground_mode?: boolean;
+  permissions?: RequiredPermission[];
+  command?: string;
+  body?: string;
+}
+
+export interface Trigger {
+  type: "cron" | "once";
+  value: string;
+}
+
+export interface RequiredPermission {
+  name: string;
+  description: string;
+}
+
+export interface ConfirmNotification {
+  type: "confirm";
+  task_id: string;
+  host_id: string;
+}
+
+export type TaskRunningState = "started" | "finished" | "aborted" | "failed";
+
+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 {
+  task_id: string;
+  run_id: string;
+  // Enriched by taskrun.list RPC from TASKRUN.md:
+  task_name?: string;
+  running_state?: string;
+  start_time?: number;
+  end_time?: number;
+  error?: string;
+}
+
+export interface ConversationMessage {
+  role: "assistant" | "user" | "status";
+  time: number;
+  content: string;
+  type?: "input" | "permission" | "confirmation" | "monitoring" | "started" | "finished" | "failed" | "aborted" | "stopped";
+  attachments?: string[];
+}
+
+/** A host paired via pairing code (stored in localStorage). */
+export interface PairedHost {
+  hostId: string;
+  clientToken: string;
+  name?: string;
+  /** If set, all communication uses HTTP to this URL instead of NATS. */
+  directUrl?: string;
+}

package/palmier-server/pwa/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+declare module "@fontsource-variable/plus-jakarta-sans";
+
+interface ImportMetaEnv {
+  readonly VITE_API_URL: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

package/palmier-server/pwa/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/palmier-server/pwa/tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}