palmier 0.7.6 → 0.7.8

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

@@ -64,6 +64,15 @@ interface DndAccessPlugin {
   check(): Promise<DndAccessResult>;
 }
 
+interface FullScreenIntentResult {
+  granted: boolean;
+}
+
+interface FullScreenIntentPlugin {
+  request(): Promise<FullScreenIntentResult>;
+  check(): Promise<FullScreenIntentResult>;
+}
+
 const NotificationListener = Capacitor.isNativePlatform()
   ? registerPlugin<NotificationListenerPlugin>("NotificationListener")
   : null;
@@ -83,8 +92,13 @@ const CalendarPermission = Capacitor.isNativePlatform()
 const DndAccess = Capacitor.isNativePlatform()
   ? registerPlugin<DndAccessPlugin>("DndAccess")
   : null;
+
+const FullScreenIntent = Capacitor.isNativePlatform()
+  ? registerPlugin<FullScreenIntentPlugin>("FullScreenIntent")
+  : null;
 import { useHostStore } from "../contexts/HostStoreContext";
 import { useMediaQuery } from "../hooks/useMediaQuery";
+import { confirmLeaveDraft } from "../draftGuard";
 
 /** LAN mode: PWA is served by palmier serve (marker injected into HTML). */
 const isLanMode = !!(window as any).__PALMIER_SERVE__;
@@ -116,6 +130,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
   const [togglingDnd, setTogglingDnd] = useState(false);
   const [togglingAlarm, setTogglingAlarm] = useState(false);
   const [togglingBattery, setTogglingBattery] = useState(false);
+  const [togglingEmail, setTogglingEmail] = useState(false);
 
   // Capability enabled = this device's client token matches the registered device for that capability
   function isCapEnabled(cap: string): boolean {
@@ -129,6 +144,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
   const dndEnabled = isCapEnabled("dnd");
   const alarmEnabled = isCapEnabled("alert");
   const batteryEnabled = isCapEnabled("battery");
+  const emailEnabled = isCapEnabled("email");
 
   /** Update local capability tokens state after a toggle change */
   function setCapEnabled(cap: string, enabled: boolean) {
@@ -296,6 +312,15 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
     }
   }
 
+  /** Ensure full-screen intent permission is granted (needed for alert + email). */
+  async function ensureFullScreenIntent(): Promise<boolean> {
+    if (!FullScreenIntent) return true;
+    const { granted } = await FullScreenIntent.check();
+    if (granted) return true;
+    const result = await FullScreenIntent.request();
+    return result.granted;
+  }
+
   async function handleAlarmToggle() {
     if (!request) return;
     setTogglingAlarm(true);
@@ -304,6 +329,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         await request("device.capability.disable", { capability: "alert" });
         setCapEnabled("alert", false);
       } else {
+        if (!await ensureFullScreenIntent()) return;
         const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
         if (!fcmToken) { console.warn("No FCM token available"); return; }
         await request("device.capability.enable", { capability: "alert", fcmToken });
@@ -316,6 +342,27 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
     }
   }
 
+  async function handleEmailToggle() {
+    if (!request) return;
+    setTogglingEmail(true);
+    try {
+      if (emailEnabled) {
+        await request("device.capability.disable", { capability: "email" });
+        setCapEnabled("email", false);
+      } else {
+        if (!await ensureFullScreenIntent()) return;
+        const { value: fcmToken } = await Preferences.get({ key: "fcmToken" });
+        if (!fcmToken) { console.warn("No FCM token available"); return; }
+        await request("device.capability.enable", { capability: "email", fcmToken });
+        setCapEnabled("email", true);
+      }
+    } catch (err) {
+      console.error("Failed to toggle email access:", err);
+    } finally {
+      setTogglingEmail(false);
+    }
+  }
+
   async function handleBatteryToggle() {
     if (!request) return;
     setTogglingBattery(true);
@@ -454,7 +501,11 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
                       className={`host-picker-item ${isActive ? "host-picker-item-active" : ""}`}
                       onClick={() => {
                         if (isRenaming) return;
-                        if (!isActive) { setActiveHostId(host.hostId); if (!isDesktop) close(); }
+                        if (!isActive) {
+                          if (!confirmLeaveDraft()) return;
+                          setActiveHostId(host.hostId);
+                          if (!isDesktop) close();
+                        }
                       }}
                       role="option"
                       aria-selected={isActive}
@@ -534,7 +585,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         <div className="drawer-section">
           <button
             className="btn btn-primary btn-full"
-            onClick={() => { navigate("/pair"); if (!isDesktop) close(); }}
+            onClick={() => { if (!confirmLeaveDraft()) return; navigate("/pair"); if (!isDesktop) close(); }}
           >
             Pair New Host
           </button>
@@ -641,6 +692,18 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
                 <span className="toggle-switch-thumb" />
               </button>
             </label>
+            <label className="drawer-toggle">
+              <span className="drawer-toggle-label">Email Access</span>
+              <button
+                className={`toggle-switch ${emailEnabled ? "toggle-switch-on" : ""}`}
+                onClick={handleEmailToggle}
+                disabled={togglingEmail}
+                role="switch"
+                aria-checked={emailEnabled}
+              >
+                <span className="toggle-switch-thumb" />
+              </button>
+            </label>
           </div>
         </>
       )}

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

@@ -1,20 +1,23 @@
 import { useState, useEffect, useCallback, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { formatTime } from "../formatTime";
-import type { HistoryEntry } from "../types";
+import { confirmLeaveDraft } from "../draftGuard";
+import SessionComposer from "./SessionComposer";
+import type { AgentInfo, HistoryEntry } from "../types";
 
 interface RunsViewProps {
   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[];
   filterTaskId?: string | null;
   onClearFilter?: () => void;
 }
 
 const PAGE_SIZE = 10;
 
-export default function RunsView({ connected, hostId, request, subscribeEvents, filterTaskId, onClearFilter }: RunsViewProps) {
+export default function RunsView({ connected, hostId, request, subscribeEvents, agents, filterTaskId, onClearFilter }: RunsViewProps) {
   const [entries, setEntries] = useState<HistoryEntry[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -139,6 +142,21 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
     aborted: "Aborted",
   };
 
+  function handleCardClick(taskId: string, runId: string) {
+    if (!confirmLeaveDraft()) return;
+    navigate(`/runs/${taskId}/${encodeURIComponent(runId)}`);
+  }
+
+  const composer = !filterTaskId && (
+    <SessionComposer
+      agents={agents}
+      onStarted={(taskId, runId) => {
+        if (runId) navigate(`/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`);
+        else navigate(`/runs/${encodeURIComponent(taskId)}`);
+      }}
+    />
+  );
+
   function stateColor(state?: string): string | undefined {
     if (state === "failed") return "var(--color-error)";
     if (state === "aborted") return "var(--color-warning, #d97706)";
@@ -148,38 +166,45 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
   // Loading skeleton
   if (loading && entries.length === 0 && connected) {
     return (
-      <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: `${70 + i * 10}%` }} />
+      <>
+        {composer}
+        <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: `${70 + i * 10}%` }} />
+                </div>
+              </div>
+              <div className="task-card-meta">
+                <div className="skeleton-line" style={{ width: "45%" }} />
               </div>
             </div>
-            <div className="task-card-meta">
-              <div className="skeleton-line" style={{ width: "45%" }} />
-            </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      </>
     );
   }
 
   // Empty / disconnected states
   if (!connected || (loading && entries.length === 0)) {
     return (
-      <div className="runs-view">
-        <div className="empty-state">
-          <p className="empty-state-text">Runs</p>
-          <p className="empty-state-hint">Run history will appear here</p>
+      <>
+        {composer}
+        <div className="runs-view">
+          <div className="empty-state">
+            <p className="empty-state-text">Sessions</p>
+            <p className="empty-state-hint">Your sessions will appear here</p>
+          </div>
         </div>
-      </div>
+      </>
     );
   }
 
   if (entries.length === 0) {
     return (
       <>
+        {composer}
         {filterTaskId && onClearFilter && (
           <div style={{ marginBottom: "var(--space-sm)" }}>
             <span className="runs-filter-chip">
@@ -190,11 +215,11 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
         )}
         <div className="runs-view">
           <div className="empty-state">
-            <p className="empty-state-text">No runs yet</p>
+            <p className="empty-state-text">No sessions yet</p>
             <p className="empty-state-hint">
               {filterTaskId
                 ? "This task hasn't been executed yet. Run it from the task menu or wait for its next trigger."
-                : "Run history will appear here."}
+                : "Your sessions will appear here."}
             </p>
           </div>
         </div>
@@ -204,6 +229,7 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
 
   return (
     <>
+      {composer}
       {filterTaskId && onClearFilter && (
         <div style={{ marginBottom: "var(--space-sm)" }}>
           <span className="runs-filter-chip">
@@ -217,7 +243,7 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
           <div
             key={`${entry.task_id}-${entry.run_id}-${i}`}
             className="runs-card"
-            onClick={() => !entry.error && navigate(`/runs/${entry.task_id}/${encodeURIComponent(entry.run_id)}`)}
+            onClick={() => !entry.error && handleCardClick(entry.task_id, entry.run_id)}
           >
             <div className="runs-card-body">
               <h3 className="runs-card-name">{entry.task_name || entry.task_id}</h3>

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

@@ -0,0 +1,137 @@
+import { useEffect, useState } from "react";
+import { useHostConnection } from "../contexts/HostConnectionContext";
+import { setDraftMessage } from "../draftGuard";
+import type { AgentInfo } from "../types";
+
+interface SessionComposerProps {
+  agents: AgentInfo[];
+  onStarted(taskId: string, runId?: string): void;
+}
+
+function pickDefaultAgent(agents: AgentInfo[]): string {
+  const stored = localStorage.getItem("palmier:lastAgent");
+  const keys = agents.map((a) => a.key);
+  if (stored && keys.includes(stored)) return stored;
+  return agents[0]?.key ?? "";
+}
+
+export default function SessionComposer({ agents, onStarted }: SessionComposerProps) {
+  const { request } = useHostConnection();
+  const [prompt, setPrompt] = useState("");
+  const [agent, setAgent] = useState(() => pickDefaultAgent(agents));
+  const [yoloMode, setYoloMode] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Keep agent selection valid as the agent list arrives/changes.
+  useEffect(() => {
+    if (!agents.length) return;
+    if (!agents.find((a) => a.key === agent)) {
+      setAgent(pickDefaultAgent(agents));
+    }
+  }, [agents, agent]);
+
+  // Draft guard: warns on navigation / reload when the input has content.
+  useEffect(() => {
+    const hasDraft = prompt.trim().length > 0;
+    setDraftMessage(hasDraft ? "Your session draft will be lost. Continue?" : null);
+    return () => setDraftMessage(null);
+  }, [prompt]);
+
+  const canRun = !!prompt.trim() && !!agent && !running;
+
+  function confirmYolo(): boolean {
+    if (!yoloMode) return true;
+    return confirm(
+      "Yolo mode is enabled. The agent will auto-approve all tool calls \u2014 it can read, write, delete files, run arbitrary commands, and access the network without asking for permission.\n\nAre you sure you want to continue?"
+    );
+  }
+
+  async function handleRun() {
+    if (!canRun || !confirmYolo()) return;
+    setRunning(true);
+    setError(null);
+    try {
+      const result = await request<{ task_id?: string; run_id?: string; error?: string }>(
+        "task.run_oneoff",
+        { user_prompt: prompt, agent, yolo_mode: yoloMode },
+      );
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+      localStorage.setItem("palmier:lastAgent", agent);
+      setPrompt("");
+      setDraftMessage(null);
+      if (result.task_id) onStarted(result.task_id, result.run_id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleRun();
+    }
+  }
+
+  return (
+    <div className="session-composer">
+      {error && <div className="form-error">{error}</div>}
+      <textarea
+        className="session-composer-textarea"
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="What can I do for you?"
+        rows={3}
+        disabled={running}
+      />
+      <div className="session-composer-controls">
+        <div className="agent-picker-section-inline">
+          <span className="agent-picker-label">Run with</span>
+          <select
+            className="form-select form-select-sm"
+            value={agent}
+            onChange={(e) => setAgent(e.target.value)}
+            disabled={running || !agents.length}
+          >
+            {agents.map((a) => (
+              <option key={a.key} value={a.key}>{a.label}</option>
+            ))}
+          </select>
+        </div>
+        <label className="session-composer-yolo">
+          <input
+            type="checkbox"
+            checked={yoloMode}
+            onChange={(e) => setYoloMode(e.target.checked)}
+            disabled={running}
+          />
+          Yolo
+        </label>
+        <button
+          className="btn btn-primary chat-send-btn"
+          onClick={handleRun}
+          disabled={!canRun}
+          aria-label="Run session"
+          title="Run session"
+        >
+          {running ? (
+            <span className="btn-spinner" />
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg>
+          )}
+        </button>
+      </div>
+      {yoloMode && (
+        <p className="command-help-text">
+          The agent will auto-approve all tool calls without asking for permission.
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -1,30 +1,37 @@
 import { useNavigate, useLocation } from "react-router-dom";
+import { confirmLeaveDraft } from "../draftGuard";
 
 export default function TabBar() {
   const navigate = useNavigate();
   const location = useLocation();
-  const isRuns = location.pathname.startsWith("/runs");
+  const isTasks = location.pathname.startsWith("/tasks");
+  const isSessions = !isTasks;
+
+  function go(path: string) {
+    if (!confirmLeaveDraft()) return;
+    navigate(path);
+  }
 
   return (
     <>
       <button
-        className={`tab-btn ${!isRuns ? "tab-btn-active" : ""}`}
-        onClick={() => navigate("/")}
+        className={`tab-btn ${isSessions ? "tab-btn-active" : ""}`}
+        onClick={() => go("/")}
       >
         <svg className="tab-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="2" y="2" width="12" height="12" rx="2" />
-          <path d="M5.5 8L7 9.5L10.5 6" />
+          <path d="M2 8H4.5L6 4L8 12L10 6L11.5 8H14" />
         </svg>
-        Tasks
+        Sessions
       </button>
       <button
-        className={`tab-btn ${isRuns ? "tab-btn-active" : ""}`}
-        onClick={() => navigate("/runs")}
+        className={`tab-btn ${isTasks ? "tab-btn-active" : ""}`}
+        onClick={() => go("/tasks")}
       >
         <svg className="tab-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M2 8H4.5L6 4L8 12L10 6L11.5 8H14" />
+          <rect x="2" y="2" width="12" height="12" rx="2" />
+          <path d="M5.5 8L7 9.5L10.5 6" />
         </svg>
-        Runs
+        Tasks
       </button>
     </>
   );

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

@@ -64,11 +64,10 @@ interface TaskFormProps {
   agents: AgentInfo[];
   hostPlatform?: string;
   onSaved(task: Task): void;
-  onRun(taskId: string, runId?: string): void;
   onCancel(): void;
 }
 
-export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun, onCancel }: TaskFormProps) {
+export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCancel }: TaskFormProps) {
   const { request } = useHostConnection();
 
   // Default agent: last used from localStorage, or first available
@@ -107,8 +106,7 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
   );
   const [yoloMode, setYoloMode] = useState(initial?.yolo_mode ?? false);
   const [foregroundMode, setForegroundMode] = useState(initial?.foreground_mode ?? false);
-  const [savingAction, setSavingAction] = useState<"save" | "run" | null>(null);
-  const saving = savingAction !== null;
+  const [saving, setSaving] = useState(false);
 
   // Command-triggered mode
   const [commandEnabled, setCommandEnabled] = useState(!!initial?.command);
@@ -170,7 +168,7 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
   }
 
   async function handleSave() {
-    setSavingAction("save");
+    setSaving(true);
     setError(null);
     try {
       const method = isEdit ? "task.update" : "task.create";
@@ -202,34 +200,7 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
       setError(err instanceof Error ? err.message : String(err));
       return null;
     } finally {
-      setSavingAction(null);
-    }
-  }
-
-  async function handleRunOneoff() {
-    setSavingAction("run");
-    setError(null);
-    try {
-      const payload: Record<string, unknown> = {
-        user_prompt: userPrompt,
-        agent,
-        requires_confirmation: requiresConfirmation,
-        yolo_mode: yoloMode,
-        foreground_mode: foregroundMode,
-        command: commandEnabled ? command : "",
-      };
-      const result = await request<{ ok?: boolean; task_id?: string; run_id?: string; error?: string }>("task.run_oneoff", payload);
-      if (result.error) {
-        setError(result.error);
-        return;
-      }
-      localStorage.setItem("palmier:lastAgent", agent);
-      onRun(result.task_id!, result.run_id);
-      onCancel();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSavingAction(null);
+      setSaving(false);
     }
   }
 
@@ -505,59 +476,33 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
         <div className="form-actions">
           {(() => {
             const hasSchedule = triggerRows.length > 0;
-            const canRun = !!userPrompt.trim() && (!commandEnabled || !!command.trim());
+            const label = hasSchedule ? "Schedule" : "Save";
             if (!isEdit) {
-              if (hasSchedule) {
-                // New task with schedule: "Schedule" only
-                return (
-                  <button
-                    className="btn btn-primary"
-                    onClick={() => confirmYolo() && handleSave()}
-                    disabled={!canSave || saving}
-                  >
-                    {savingAction === "save" && <span className="btn-spinner" />}
-                    Schedule
-                  </button>
-                );
-              }
-              // New task, no schedule: "Run" (primary) + "Save"
-              return (<>
+              return (
                 <button
                   className="btn btn-primary"
-                  onClick={() => confirmYolo() && handleRunOneoff()}
-                  disabled={!canRun || saving}
-                >
-                  {savingAction === "run" && <span className="btn-spinner" />}
-                  Run
-                </button>
-                <button
-                  className="btn btn-secondary"
                   onClick={() => confirmYolo() && handleSave()}
                   disabled={!canSave || saving}
                 >
-                  Save
+                  {saving && <span className="btn-spinner" />}
+                  {label}
                 </button>
-              </>);
+              );
             }
             if (isDirty) {
-              // Edit, changed: Save only
               return (
                 <button
                   className="btn btn-primary"
                   onClick={() => confirmYolo() && handleSave()}
                   disabled={!canSave || saving}
                 >
-                  {savingAction === "save" && <span className="btn-spinner" />}
+                  {saving && <span className="btn-spinner" />}
                   Save
                 </button>
               );
             }
-            // Edit, unchanged: disabled Save
             return (
-              <button
-                className="btn btn-primary"
-                disabled
-              >
+              <button className="btn btn-primary" disabled>
                 Save
               </button>
             );