palmier 0.8.0 → 0.8.3

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

@@ -131,7 +131,8 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
   }, [messages]);
 
   // On first load of a run, scroll the window to the bottom so the follow-up
-  // input is visible, and focus the input if it's rendered (agent not running).
+  // input is visible. Deliberately not focusing the input — on mobile that
+  // would pop the soft keyboard as soon as the run opens.
   useEffect(() => {
     if (loading || isLatestEmpty || !resolvedRunId) return;
     if (initialFocusForRunId.current === resolvedRunId) return;
@@ -139,9 +140,8 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
     requestAnimationFrame(() => {
       if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight;
       window.scrollTo({ top: document.documentElement.scrollHeight, behavior: "auto" });
-      if (!isAgentGenerating) followupInputRef.current?.focus();
     });
-  }, [loading, isLatestEmpty, resolvedRunId, isAgentGenerating]);
+  }, [loading, isLatestEmpty, resolvedRunId]);
 
   function typeLabel(type?: string): string | undefined {
     if (type === "input") return "User Input";

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

@@ -4,6 +4,7 @@ import { formatTime } from "../formatTime";
 import { confirmLeaveDraft } from "../draftGuard";
 import SessionComposer from "./SessionComposer";
 import PullToRefreshIndicator from "./PullToRefreshIndicator";
+import SwipeToDeleteRow from "./SwipeToDeleteRow";
 import { usePullToRefresh } from "../hooks/usePullToRefresh";
 import type { AgentInfo, HistoryEntry } from "../types";
 
@@ -24,8 +25,25 @@ export default function SessionsView({ connected, hostId, request, subscribeEven
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
   const [loadingMore, setLoadingMore] = useState(false);
+  /** Key of the row currently showing its delete action, or null. iOS pattern — at most one at a time. */
+  const [revealedKey, setRevealedKey] = useState<string | null>(null);
   const navigate = useNavigate();
 
+  async function deleteEntry(entry: HistoryEntry) {
+    const key = `${entry.task_id}:${entry.run_id}`;
+    // Optimistic: drop from the list immediately, restore if the RPC fails.
+    setEntries((prev) => prev.filter((e) => `${e.task_id}:${e.run_id}` !== key));
+    setTotal((t) => Math.max(0, t - 1));
+    setRevealedKey(null);
+    try {
+      await request("taskrun.delete", { task_id: entry.task_id, run_id: entry.run_id });
+    } catch (err) {
+      console.error("Failed to delete run:", err);
+      setEntries((prev) => [entry, ...prev]);
+      setTotal((t) => t + 1);
+    }
+  }
+
   const sentinelRef = useRef<HTMLDivElement>(null);
 
   // Build RPC params with optional task_id filter
@@ -247,32 +265,46 @@ export default function SessionsView({ connected, hostId, request, subscribeEven
       {composer}
       {filterChip}
       <div className="task-list">
-        {entries.map((entry, i) => (
-          <div
-            key={`${entry.task_id}-${entry.run_id}-${i}`}
-            className="sessions-card"
-            onClick={() => !entry.error && handleCardClick(entry.task_id, entry.run_id)}
-          >
-            <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>
-                {entry.end_time && <span>{formatTime(entry.end_time)}</span>}
-                {entry.start_time && entry.end_time && (
-                  <span style={{ color: "var(--color-muted)" }}>
-                    {formatDuration(entry.start_time, entry.end_time)}
-                  </span>
-                )}
-                {entry.error && (
-                  <span style={{ color: "var(--color-muted)" }}>{entry.error}</span>
-                )}
+        {entries.map((entry, i) => {
+          const key = `${entry.task_id}:${entry.run_id}`;
+          return (
+            <SwipeToDeleteRow
+              key={`${key}-${i}`}
+              id={key}
+              revealedId={revealedKey}
+              setRevealedId={setRevealedKey}
+              onDelete={() => deleteEntry(entry)}
+              onClick={() => !entry.error && handleCardClick(entry.task_id, entry.run_id)}
+            >
+              <div className="sessions-card">
+                <div className="sessions-card-body">
+                  <h3 className="sessions-card-name">{entry.task_name || entry.task_id}</h3>
+                  <div className="sessions-card-meta">
+                    {entry.running_state === "started" ? (
+                      <span className="status-spinner" aria-label="Running">
+                        <span />
+                      </span>
+                    ) : (
+                      <span style={{ color: stateColor(entry.running_state) }}>
+                        {stateLabel[entry.running_state ?? ""] ?? entry.running_state}
+                      </span>
+                    )}
+                    {entry.end_time && <span>{formatTime(entry.end_time)}</span>}
+                    {entry.start_time && entry.end_time && (
+                      <span style={{ color: "var(--color-muted)" }}>
+                        {formatDuration(entry.start_time, entry.end_time)}
+                      </span>
+                    )}
+                    {entry.error && (
+                      <span style={{ color: "var(--color-muted)" }}>{entry.error}</span>
+                    )}
+                  </div>
+                </div>
+                <span className="sessions-card-chevron">&#8250;</span>
               </div>
-            </div>
-            <span className="sessions-card-chevron">&#8250;</span>
-          </div>
-        ))}
+            </SwipeToDeleteRow>
+          );
+        })}
 
         {/* Sentinel for infinite scroll */}
         <div ref={sentinelRef} style={{ height: 1 }} />

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

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState, type ReactNode, type PointerEvent } from "react";
+
+interface SwipeToDeleteRowProps {
+  /** Unique id used to coordinate "at most one row revealed" with the parent. */
+  id: string;
+  /** The id of the currently-revealed row (or null). Set to this row's id to reveal it. */
+  revealedId: string | null;
+  setRevealedId(id: string | null): void;
+  onDelete(): void;
+  onClick?(): void;
+  children: ReactNode;
+  /** Label for the action button (default "Delete"). */
+  actionLabel?: string;
+}
+
+const REVEAL_WIDTH = 88;              // px width of the action button
+const OPEN_THRESHOLD = REVEAL_WIDTH / 2;
+const AXIS_LOCK_THRESHOLD = 6;        // px of horizontal travel before we claim the gesture
+
+/**
+ * Wraps a row with swipe-left to reveal a destructive action button.
+ * Tap the button to confirm, tap elsewhere to dismiss the reveal.
+ *
+ * Uses pointer events so the same code works for touch and mouse. A short
+ * axis-lock period at the start of a drag decides whether the user is
+ * scrolling vertically (let it through) or swiping horizontally (capture).
+ */
+export default function SwipeToDeleteRow({
+  id,
+  revealedId,
+  setRevealedId,
+  onDelete,
+  onClick,
+  children,
+  actionLabel = "Delete",
+}: SwipeToDeleteRowProps) {
+  const revealed = revealedId === id;
+  const [dragOffset, setDragOffset] = useState(0);
+  const [dragging, setDragging] = useState(false);
+
+  const startX = useRef(0);
+  const startY = useRef(0);
+  const axis = useRef<"x" | "y" | null>(null);
+  const baseOffset = useRef(0);       // translateX when the gesture started
+  const movedEnough = useRef(false);  // whether we should suppress the click that follows
+  const rowRef = useRef<HTMLDivElement>(null);
+
+  // Reset local drag offset whenever parent closes this row.
+  useEffect(() => {
+    if (!revealed) setDragOffset(0);
+  }, [revealed]);
+
+  // Close when the user taps elsewhere in the document.
+  useEffect(() => {
+    if (!revealed) return;
+    function onDocPointerDown(e: Event) {
+      if (rowRef.current?.contains(e.target as Node)) return;
+      setRevealedId(null);
+    }
+    document.addEventListener("pointerdown", onDocPointerDown);
+    return () => document.removeEventListener("pointerdown", onDocPointerDown);
+  }, [revealed, setRevealedId]);
+
+  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
+    // Ignore non-primary buttons (right-click etc.) so we don't steal them.
+    if (e.button !== undefined && e.button !== 0) return;
+    startX.current = e.clientX;
+    startY.current = e.clientY;
+    axis.current = null;
+    baseOffset.current = revealed ? -REVEAL_WIDTH : 0;
+    movedEnough.current = false;
+  }
+
+  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
+    if (e.pointerType === "mouse" && e.buttons === 0) return;   // not dragging
+    const dx = e.clientX - startX.current;
+    const dy = e.clientY - startY.current;
+
+    if (axis.current === null) {
+      if (Math.abs(dx) < AXIS_LOCK_THRESHOLD && Math.abs(dy) < AXIS_LOCK_THRESHOLD) return;
+      axis.current = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
+      if (axis.current === "x") {
+        try { (e.currentTarget as Element).setPointerCapture(e.pointerId); } catch { /* unsupported */ }
+      }
+    }
+    if (axis.current !== "x") return;
+
+    movedEnough.current = true;
+    if (!dragging) setDragging(true);
+    // Clamp: can swipe left to reveal fully, a bit of rubber-band on the right.
+    let next = baseOffset.current + dx;
+    if (next > 0) next = next / 4;
+    if (next < -REVEAL_WIDTH) next = -REVEAL_WIDTH + (next + REVEAL_WIDTH) / 4;
+    setDragOffset(next);
+  }
+
+  function handlePointerUp() {
+    if (axis.current !== "x") {
+      setDragging(false);
+      return;
+    }
+    axis.current = null;
+    setDragging(false);
+
+    const finalOffset = dragOffset;
+    const openNow = finalOffset <= -OPEN_THRESHOLD;
+    if (openNow) {
+      setDragOffset(-REVEAL_WIDTH);
+      setRevealedId(id);
+    } else {
+      setDragOffset(0);
+      if (revealed) setRevealedId(null);
+    }
+  }
+
+  function handleClickCapture(e: React.MouseEvent) {
+    // If the gesture translated the row, treat it as a swipe — not a click.
+    // Also absorb the click that re-hides a revealed row.
+    if (movedEnough.current) {
+      movedEnough.current = false;
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+    if (revealed) {
+      e.stopPropagation();
+      e.preventDefault();
+      setRevealedId(null);
+    }
+  }
+
+  const currentOffset = dragOffset !== 0 ? dragOffset : (revealed ? -REVEAL_WIDTH : 0);
+
+  return (
+    <div ref={rowRef} className="swipe-row">
+      <button
+        type="button"
+        className="swipe-row-action"
+        style={{ width: REVEAL_WIDTH }}
+        onClick={(e) => { e.stopPropagation(); onDelete(); }}
+        tabIndex={revealed ? 0 : -1}
+        aria-hidden={!revealed}
+      >
+        {actionLabel}
+      </button>
+      <div
+        className={`swipe-row-content ${dragging ? "swipe-row-content-dragging" : ""}`}
+        style={{ transform: `translateX(${currentOffset}px)` }}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerUp}
+        onClickCapture={handleClickCapture}
+        onClick={onClick}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -23,7 +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 hasScheduleValues = (task.schedule_values?.length ?? 0) > 0;
+  const isEventSchedule = task.schedule_type === "on_new_notification" || task.schedule_type === "on_new_sms";
+  const scheduleActive = !!task.schedule_enabled && !!task.schedule_type && (hasScheduleValues || isEventSchedule);
   const stateColor =
     !scheduleActive
       ? "var(--color-text-secondary)"
@@ -126,8 +128,14 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
     return `${c.kind.charAt(0).toUpperCase() + c.kind.slice(1)}: ${c.detail}`;
   }
 
-  function formatScheduleGrouped(scheduleType: "crons" | "specific_times" | undefined, values: string[] | undefined): string {
-    if (!scheduleType || !values || values.length === 0) return "";
+  function formatScheduleGrouped(
+    scheduleType: "crons" | "specific_times" | "on_new_notification" | "on_new_sms" | undefined,
+    values: string[] | undefined,
+  ): string {
+    if (!scheduleType) return "";
+    if (scheduleType === "on_new_notification") return "On new push notification";
+    if (scheduleType === "on_new_sms") return "On new SMS";
+    if (!values || values.length === 0) return "";
     if (values.length === 1) return formatSingleValue(scheduleType, values[0]);
 
     const classified = values.map((v) => classifyValue(scheduleType, v));
@@ -214,7 +222,7 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
               {" "}{formatTime(lastEvent.time_stamp)}
             </span>
           )}
-          {task.schedule_type && (task.schedule_values?.length ?? 0) > 0 && (
+          {task.schedule_type && (hasScheduleValues || isEventSchedule) && (
             <span className="task-card-triggers">
               {task.schedule_enabled ? scheduleText : "Schedule disabled"}
             </span>