palmier 0.7.7 → 0.7.9

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

@@ -0,0 +1,147 @@
+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 selectedAgent = agents.find((a) => a.key === agent);
+  const agentSupportsYolo = !!selectedAgent?.supportsYolo;
+
+  // Force-disable yolo when the selected agent doesn't support it.
+  useEffect(() => {
+    if (!agentSupportsYolo && yoloMode) setYoloMode(false);
+  }, [agentSupportsYolo, yoloMode]);
+
+  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>
+        {agentSupportsYolo && (
+          <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>
+      {agentSupportsYolo && 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/{RunsView.tsx → SessionsView.tsx}

@@ -1,20 +1,25 @@
 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 PullToRefreshIndicator from "./PullToRefreshIndicator";
+import { usePullToRefresh } from "../hooks/usePullToRefresh";
+import type { AgentInfo, HistoryEntry } from "../types";
 
-interface RunsViewProps {
+interface SessionsViewProps {
   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 SessionsView({ connected, hostId, request, subscribeEvents, agents, filterTaskId, onClearFilter }: SessionsViewProps) {
   const [entries, setEntries] = useState<HistoryEntry[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -73,6 +78,11 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
     }
   }, [connected, hostId, loadHistory, filterTaskId]);
 
+  const ptr = usePullToRefresh({
+    onRefresh: () => loadHistory(0, false),
+    enabled: connected,
+  });
+
   // Real-time: update entries on running-state events
   useEffect(() => {
     if (!connected || !hostId) return;
@@ -139,6 +149,32 @@ 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)}`);
+      }}
+    />
+  );
+  const refreshIndicator = (
+    <PullToRefreshIndicator pullDistance={ptr.pullDistance} refreshing={ptr.refreshing} threshold={ptr.threshold} />
+  );
+  const filterChip = filterTaskId && onClearFilter && (
+    <div style={{ marginBottom: "var(--space-sm)" }}>
+      <span className="sessions-filter-chip">
+        Filtered by task
+        <button onClick={onClearFilter} aria-label="Clear filter">&times;</button>
+      </span>
+    </div>
+  );
+
   function stateColor(state?: string): string | undefined {
     if (state === "failed") return "var(--color-error)";
     if (state === "aborted") return "var(--color-warning, #d97706)";
@@ -148,53 +184,56 @@ 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}%` }} />
+      <>
+        {refreshIndicator}
+        {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>
+      <>
+        {refreshIndicator}
+        {composer}
+        <div className="sessions-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 (
       <>
-        {filterTaskId && onClearFilter && (
-          <div style={{ marginBottom: "var(--space-sm)" }}>
-            <span className="runs-filter-chip">
-              Filtered by task
-              <button onClick={onClearFilter} aria-label="Clear filter">&times;</button>
-            </span>
-          </div>
-        )}
-        <div className="runs-view">
+        {refreshIndicator}
+        {composer}
+        {filterChip}
+        <div className="sessions-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,24 +243,19 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
 
   return (
     <>
-      {filterTaskId && onClearFilter && (
-        <div style={{ marginBottom: "var(--space-sm)" }}>
-          <span className="runs-filter-chip">
-            Filtered by task
-            <button onClick={onClearFilter} aria-label="Clear filter">&times;</button>
-          </span>
-        </div>
-      )}
+      {refreshIndicator}
+      {composer}
+      {filterChip}
       <div className="task-list">
         {entries.map((entry, i) => (
           <div
             key={`${entry.task_id}-${entry.run_id}-${i}`}
-            className="runs-card"
-            onClick={() => !entry.error && navigate(`/runs/${entry.task_id}/${encodeURIComponent(entry.run_id)}`)}
+            className="sessions-card"
+            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>
-              <div className="runs-card-meta">
+            <div className="sessions-card-body">
+              <h3 className="sessions-card-name">{entry.task_name || entry.task_id}</h3>
+              <div className="sessions-card-meta">
                 <span style={{ color: stateColor(entry.running_state) }}>
                   {stateLabel[entry.running_state ?? ""] ?? entry.running_state}
                 </span>
@@ -236,7 +270,7 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
                 )}
               </div>
             </div>
-            <span className="runs-card-chevron">&#8250;</span>
+            <span className="sessions-card-chevron">&#8250;</span>
           </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/TaskCard.tsx

@@ -23,8 +23,9 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
   const menuRef = useRef<HTMLDivElement>(null);
 
   const isRunning = lastEvent?.running_state === "started";
+  const scheduleActive = !!task.schedule_enabled && !!task.schedule_type && (task.schedule_values?.length ?? 0) > 0;
   const stateColor =
-    !task.triggers_enabled || task.triggers.length === 0
+    !scheduleActive
       ? "var(--color-text-secondary)"
       : isRunning
         ? "var(--color-success)"
@@ -99,34 +100,14 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
   };
 
 
-  function formatTriggersGrouped(triggers: { type: string; value: string }[]): string {
-    if (triggers.length === 0) return "";
-    if (triggers.length === 1) return formatSingleTrigger(triggers[0]);
-
-    // Detect the shared schedule type
-    const classified = triggers.map(classifyTrigger);
-    const types = new Set(classified.map((c) => c.kind));
-
-    // If all the same type, group them
-    if (types.size === 1) {
-      const kind = classified[0].kind;
-      if (kind === "hourly") return "Every hour";
-      const details = classified.map((c) => c.detail);
-      return `${kind.charAt(0).toUpperCase() + kind.slice(1)}: ${details.join(", ")}`;
-    }
-
-    // Mixed types — fall back to listing each
-    return triggers.map(formatSingleTrigger).join(", ");
-  }
-
-  function classifyTrigger(t: { type: string; value: string }): { kind: string; detail: string } {
-    if (t.type === "once") {
-      const d = new Date(t.value);
-      const label = isNaN(d.getTime()) ? t.value : `${d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })} at ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`;
-      return { kind: "once", detail: label };
+  function classifyValue(scheduleType: "crons" | "specific_times", value: string): { kind: string; detail: string } {
+    if (scheduleType === "specific_times") {
+      const d = new Date(value);
+      const label = isNaN(d.getTime()) ? value : `${d.toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" })} at ${d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })}`;
+      return { kind: "specific_times", detail: label };
     }
-    const parts = t.value.split(" ");
-    if (parts.length !== 5) return { kind: "unknown", detail: t.value };
+    const parts = value.split(" ");
+    if (parts.length !== 5) return { kind: "unknown", detail: value };
     const [min, hour, dom, , dow] = parts;
     const DAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
     if (hour === "*") return { kind: "hourly", detail: "" };
@@ -138,14 +119,31 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
     return { kind: "daily", detail: time };
   }
 
-  function formatSingleTrigger(t: { type: string; value: string }): string {
-    const c = classifyTrigger(t);
+  function formatSingleValue(scheduleType: "crons" | "specific_times", value: string): string {
+    const c = classifyValue(scheduleType, value);
     if (c.kind === "hourly") return "Every hour";
-    if (c.kind === "once") return `Once on ${c.detail}`;
+    if (c.kind === "specific_times") return `Once on ${c.detail}`;
     return `${c.kind.charAt(0).toUpperCase() + c.kind.slice(1)}: ${c.detail}`;
   }
 
-  const triggersText = formatTriggersGrouped(task.triggers);
+  function formatScheduleGrouped(scheduleType: "crons" | "specific_times" | undefined, values: string[] | undefined): string {
+    if (!scheduleType || !values || values.length === 0) return "";
+    if (values.length === 1) return formatSingleValue(scheduleType, values[0]);
+
+    const classified = values.map((v) => classifyValue(scheduleType, v));
+    const kinds = new Set(classified.map((c) => c.kind));
+
+    if (kinds.size === 1) {
+      const kind = classified[0].kind;
+      if (kind === "hourly") return "Every hour";
+      const details = classified.map((c) => c.detail);
+      return `${kind.charAt(0).toUpperCase() + kind.slice(1)}: ${details.join(", ")}`;
+    }
+
+    return values.map((v) => formatSingleValue(scheduleType, v)).join(", ");
+  }
+
+  const scheduleText = formatScheduleGrouped(task.schedule_type, task.schedule_values);
 
   const actionItems = (
     <>
@@ -174,7 +172,7 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
 
   return (
     <>
-      <div className="task-card" onClick={() => isRunning ? onViewRun(task.id, "latest") : onViewRun(task.id)}>
+      <div className="task-card" onClick={() => onViewRun(task.id, "latest")}>
         <div className="task-card-header">
           <div className="task-card-title-row">
             {isRunning ? (
@@ -216,9 +214,9 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
               {" "}{formatTime(lastEvent.time_stamp)}
             </span>
           )}
-          {task.triggers.length > 0 && (
+          {task.schedule_type && (task.schedule_values?.length ?? 0) > 0 && (
             <span className="task-card-triggers">
-              {task.triggers_enabled ? triggersText : "Triggers disabled"}
+              {task.schedule_enabled ? scheduleText : "Schedule disabled"}
             </span>
           )}
         </div>