palmier 0.6.0 → 0.6.2

package/palmier-server/pwa/src/App.tsx

@@ -0,0 +1,21 @@
+import { Routes, Route } from "react-router-dom";
+import { HostStoreProvider } from "./contexts/HostStoreContext";
+import { HostConnectionProvider } from "./contexts/HostConnectionContext";
+import Dashboard from "./pages/Dashboard";
+import PairHost from "./pages/PairHost";
+
+export default function App() {
+  return (
+    <HostStoreProvider>
+      <HostConnectionProvider>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/runs" element={<Dashboard />} />
+          <Route path="/runs/:taskId" element={<Dashboard />} />
+          <Route path="/runs/:taskId/:runId" element={<Dashboard />} />
+          <Route path="/pair" element={<PairHost />} />
+        </Routes>
+      </HostConnectionProvider>
+    </HostStoreProvider>
+  );
+}

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

@@ -0,0 +1,11 @@
+import type { AgentInfo } from "./types";
+
+const labels: Record<string, string> = {};
+
+export function setAgentLabels(agents: AgentInfo[]): void {
+  for (const a of agents) labels[a.key] = a.label;
+}
+
+export function getAgentLabel(key: string): string {
+  return labels[key] ?? key;
+}

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

@@ -0,0 +1,61 @@
+async function request<T>(
+  method: string,
+  path: string,
+  body?: unknown,
+  token?: string
+): Promise<T> {
+  console.log(`[API] ${method} ${path}`);
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+  const res = await fetch(path, {
+    method,
+    headers,
+    body: body != null ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) {
+    const text = await res.text();
+    let message: string;
+    try {
+      const json = JSON.parse(text);
+      message = json.error ?? json.message ?? text;
+    } catch {
+      message = text;
+    }
+    console.error(`[API] ${method} ${path} failed:`, res.status, message);
+    throw new Error(message || `Request failed with status ${res.status}`);
+  }
+  console.log(`[API] ${method} ${path} ->`, res.status);
+  return res.json() as Promise<T>;
+}
+
+export function apiPost<T = unknown>(
+  path: string,
+  body: unknown,
+  token?: string
+): Promise<T> {
+  return request<T>("POST", path, body, token);
+}
+
+export function apiGet<T = unknown>(path: string, token?: string): Promise<T> {
+  return request<T>("GET", path, undefined, token);
+}
+
+export function apiPatch<T = unknown>(
+  path: string,
+  body: unknown,
+  token?: string
+): Promise<T> {
+  return request<T>("PATCH", path, body, token);
+}
+
+export function apiDelete<T = unknown>(
+  path: string,
+  body?: unknown,
+  token?: string
+): Promise<T> {
+  return request<T>("DELETE", path, body, token);
+}

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

@@ -0,0 +1,289 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { useNavigate } from "react-router-dom";
+import { useHostStore } from "../contexts/HostStoreContext";
+import { useMediaQuery } from "../hooks/useMediaQuery";
+
+/** LAN mode: PWA is served by palmier serve (marker injected into HTML). */
+const isLanMode = !!(window as any).__PALMIER_SERVE__;
+
+interface HostMenuProps {
+  daemonVersion?: string | null;
+}
+
+export default function HostMenu({ daemonVersion }: HostMenuProps) {
+  const { pairedHosts, activeHostId, setActiveHostId, removePairedHost, renamePairedHost } = useHostStore();
+  const navigate = useNavigate();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+
+  const [visible, setVisible] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState("");
+  const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null);
+  const drawerRef = useRef<HTMLDivElement>(null);
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  // In LAN mode, there's only one host — no picker/pairing needed
+
+  const close = useCallback(() => {
+    setClosing(true);
+  }, []);
+
+  function handleAnimationEnd() {
+    if (closing) {
+      setVisible(false);
+      setClosing(false);
+    }
+  }
+
+  function openDrawer() {
+    setClosing(false);
+    setVisible(true);
+  }
+
+  function startRename(hostId: string, currentName: string) {
+    setRenamingId(hostId);
+    setRenameValue(currentName);
+  }
+
+  function submitRename() {
+    if (renamingId && renameValue.trim()) {
+      renamePairedHost(renamingId, renameValue.trim());
+    }
+    setRenamingId(null);
+    setRenameValue("");
+  }
+
+  function cancelRename() {
+    setRenamingId(null);
+    setRenameValue("");
+  }
+
+  useEffect(() => {
+    if (renamingId && renameInputRef.current) {
+      renameInputRef.current.focus();
+      renameInputRef.current.select();
+    }
+  }, [renamingId]);
+
+  useEffect(() => {
+    if (!visible || closing) return;
+    function handleKey(e: KeyboardEvent) {
+      if (e.key === "Escape") close();
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [visible, closing, close]);
+
+  const drawerContent = (
+    <>
+      <div className="drawer-header">
+        <span className="drawer-title">Palmier</span>
+        {!isDesktop && (
+          <button
+            className="drawer-close-btn"
+            onClick={close}
+            aria-label="Close menu"
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+              <path d="M4 4L12 12M12 4L4 12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+          </button>
+        )}
+      </div>
+
+      {!isLanMode && pairedHosts.length > 0 && (
+        <div className="drawer-section">
+          <h3 className="drawer-section-label">Hosts</h3>
+          <div className="host-picker-inline">
+            <div className="host-picker-list" role="listbox">
+              {pairedHosts.map((host) => {
+                const isActive = host.hostId === activeHostId;
+                const isRenaming = renamingId === host.hostId;
+                const displayName = host.name || host.hostId.slice(0, 8);
+                return (
+                  <div key={host.hostId} className="host-picker-item-wrapper">
+                    <div
+                      className={`host-picker-item ${isActive ? "host-picker-item-active" : ""}`}
+                      onClick={() => {
+                        if (isRenaming) return;
+                        if (!isActive) { setActiveHostId(host.hostId); if (!isDesktop) close(); }
+                      }}
+                      role="option"
+                      aria-selected={isActive}
+                    >
+                      {isRenaming ? (
+                        <input
+                          ref={renameInputRef}
+                          className="form-input host-picker-rename-input"
+                          type="text"
+                          value={renameValue}
+                          onChange={(e) => setRenameValue(e.target.value)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") submitRename();
+                            if (e.key === "Escape") cancelRename();
+                          }}
+                          onBlur={submitRename}
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      ) : (
+                        <span className="host-picker-item-name">
+                          {displayName}
+                        </span>
+                      )}
+                      <div className="host-picker-item-actions">
+                        {isActive && !isRenaming && (
+                          <button
+                            className="host-picker-edit-btn"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              startRename(host.hostId, displayName);
+                            }}
+                            aria-label="Rename host"
+                          >
+                            <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
+                              <path
+                                d="M9.5 1.5L11.5 3.5M1.5 11.5L2 9L9 2L11 4L4 11L1.5 11.5Z"
+                                stroke="currentColor"
+                                strokeWidth="1.2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                            </svg>
+                          </button>
+                        )}
+                        {!isActive && (
+                          <button
+                            className="host-picker-delete-btn"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setConfirmingDeleteId(host.hostId);
+                            }}
+                            aria-label={`Unpair ${displayName}`}
+                          >
+                            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                              <path
+                                d="M4 5.5V11C4 11.2761 4.22386 11.5 4.5 11.5H9.5C9.77614 11.5 10 11.2761 10 11V5.5M3 4H11M5.5 4V3C5.5 2.72386 5.72386 2.5 6 2.5H8C8.27614 2.5 8.5 2.72386 8.5 3V4M6.5 6.5V9.5M7.5 6.5V9.5"
+                                stroke="currentColor"
+                                strokeWidth="1.2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                            </svg>
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {!isLanMode && (<>
+        <div className="drawer-divider" />
+        <div className="drawer-section">
+          <button
+            className="btn btn-primary btn-full"
+            onClick={() => { navigate("/pair"); if (!isDesktop) close(); }}
+          >
+            Pair New Host
+          </button>
+        </div>
+      </>)}
+
+      <div className="drawer-footer">
+        {daemonVersion && (
+          <div className="drawer-version">
+            Palmier v{daemonVersion}
+          </div>
+        )}
+        <div className="drawer-legal">
+          <a href="https://www.palmier.me/terms" target="_blank" rel="noopener noreferrer">Terms</a>
+          <span className="drawer-legal-sep">·</span>
+          <a href="https://www.palmier.me/privacy" target="_blank" rel="noopener noreferrer">Privacy</a>
+        </div>
+      </div>
+    </>
+  );
+
+  const deleteModal = confirmingDeleteId && createPortal(
+    <div className="confirm-modal-overlay" onClick={() => setConfirmingDeleteId(null)}>
+      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+        <h2 className="confirm-modal-title">Delete host?</h2>
+        <p className="confirm-modal-message">
+          "{pairedHosts.find((h) => h.hostId === confirmingDeleteId)?.name || confirmingDeleteId.slice(0, 8)}" will be unpaired from this device.
+        </p>
+        <div className="confirm-modal-actions">
+          <button
+            className="btn btn-secondary"
+            onClick={() => setConfirmingDeleteId(null)}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-danger"
+            onClick={() => {
+              removePairedHost(confirmingDeleteId);
+              setConfirmingDeleteId(null);
+            }}
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
+  // Desktop: persistent inline sidebar
+  if (isDesktop) {
+    return (
+      <>
+        <div className="drawer-panel drawer-panel-desktop" ref={drawerRef}>
+          {drawerContent}
+        </div>
+        {deleteModal}
+      </>
+    );
+  }
+
+  // Mobile: hamburger + slide-out drawer
+  return (
+    <>
+      <button
+        className="hamburger-btn"
+        onClick={openDrawer}
+        aria-label="Open menu"
+      >
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+          <path d="M3 5H17M3 10H17M3 15H17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      </button>
+
+      {visible && createPortal(
+        <div
+          className={`drawer-overlay ${closing ? "drawer-overlay-closing" : ""}`}
+          onClick={close}
+          onAnimationEnd={handleAnimationEnd}
+        >
+          <div
+            className={`drawer-panel ${closing ? "drawer-panel-closing" : ""}`}
+            ref={drawerRef}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {drawerContent}
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {deleteModal}
+    </>
+  );
+}

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

@@ -0,0 +1,41 @@
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import type { RequiredPermission } from "../types";
+
+interface PlanDialogProps {
+  body: string;
+  permissions?: RequiredPermission[];
+}
+
+export default function PlanDialog({ body, permissions }: PlanDialogProps) {
+  return (
+    <div className="plan-dialog">
+      <h2>Task Execution Plan</h2>
+      <div className="plan-dialog-scroll">
+        {body ? (
+          <div className="plan-preview"><Markdown remarkPlugins={[remarkGfm]}>{body}</Markdown></div>
+        ) : (
+          <p className="plan-empty">No execution plan generated for this task. Your task description will be used directly.</p>
+        )}
+        {permissions && permissions.length > 0 && (
+          <div className="permissions-section">
+            <h3>Granted Permissions</h3>
+            <ul className="permissions-list">
+              {permissions.map((p, i) => (
+                <li key={i} className="permission-item">
+                  <span className="permission-tool">{p.name}</span>
+                  <span className="permission-desc">{p.description}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+      <div className="plan-dialog-actions">
+        <button className="btn btn-secondary" onClick={() => history.back()}>
+          Back
+        </button>
+      </div>
+    </div>
+  );
+}