palmier 0.8.1 → 0.8.4

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

@@ -2,52 +2,15 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useNavigate } from "react-router-dom";
 import { Capacitor } from "@capacitor/core";
-import { App as CapacitorApp } from "@capacitor/app";
-import { Device, type PermissionType } from "../native/Device";
 import { useHostStore } from "../contexts/HostStoreContext";
 import { useMediaQuery } from "../hooks/useMediaQuery";
 import { confirmLeaveDraft } from "../draftGuard";
+import CapabilityToggles from "./CapabilityToggles";
 
 /** LAN mode: PWA is served by palmier serve (marker injected into HTML). */
 const isLanMode = !!(window as any).__PALMIER_SERVE__;
 const isNative = Capacitor.isNativePlatform();
 
-interface CapabilityDefinition {
-  /** Server-side capability name used in device.capability.{enable,disable} RPCs. */
-  capability: string;
-  /** Label shown in the drawer toggle. */
-  label: string;
-  /** Runtime or settings permission to request before enabling. */
-  permission?: PermissionType;
-  /** True for capabilities that display full-screen alerts (alert, send-email). */
-  needsFullScreenIntent?: boolean;
-  /** Override RPC methods; location uses device.location.{enable,disable} instead. */
-  enableMethod?: string;
-  disableMethod?: string;
-  enableParams?(fcmToken: string): Record<string, unknown>;
-  disableParams?(): Record<string, unknown>;
-}
-
-const CAPABILITIES: CapabilityDefinition[] = [
-  {
-    capability: "location",
-    label: "Location Access",
-    permission: "location",
-    enableMethod: "device.location.enable",
-    disableMethod: "device.location.disable",
-    enableParams: (fcmToken) => ({ fcmToken }),
-    disableParams: () => ({}),
-  },
-  { capability: "notifications", label: "Notification Access", permission: "notificationListener" },
-  { capability: "sms", label: "SMS Access", permission: "sms" },
-  { capability: "contacts", label: "Contacts Access", permission: "contacts" },
-  { capability: "calendar", label: "Calendar Access", permission: "calendar" },
-  { capability: "dnd", label: "Do Not Disturb Control", permission: "dnd" },
-  { capability: "alert", label: "Alert Access", needsFullScreenIntent: true },
-  { capability: "battery", label: "Battery Access" },
-  { capability: "send-email", label: "Email Drafting", needsFullScreenIntent: true },
-];
-
 interface HostMenuProps {
   daemonVersion?: string | null;
   capabilityTokens?: Record<string, string | null>;
@@ -66,147 +29,10 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
   const [renamingId, setRenamingId] = useState<string | null>(null);
   const [renameValue, setRenameValue] = useState("");
   const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null);
-  const [togglingCapability, setTogglingCapability] = useState<string | null>(null);
-  /**
-   * Permission types the installed APK understands. Null while loading; an empty
-   * set means the native plugin doesn't expose a discovery method (pre-Device
-   * plugin build) — in that case we don't pre-filter the UI and rely on per-call
-   * {supported: false} from the native side as the fallback.
-   */
-  const [supportedPerms, setSupportedPerms] = useState<Set<PermissionType> | null>(null);
-
-  useEffect(() => {
-    if (!isNative || !Device) {
-      setSupportedPerms(new Set());
-      return;
-    }
-    Device.getSupportedPermissions()
-      .then(({ types }) => setSupportedPerms(new Set(types)))
-      .catch(() => setSupportedPerms(new Set()));   // old APK: fall back to per-call supported flag
-  }, []);
-
-  // Capability enabled = this device's client token matches the registered device for that capability
-  function isCapabilityEnabled(capability: string): boolean {
-    return !!(activeClientToken && capabilityTokens?.[capability] === activeClientToken);
-  }
-
-  /**
-   * A capability is shown when native either explicitly supports its permission, or
-   * can't advertise support (empty set = old APK or web) — in the latter case the
-   * toggle still works because the per-call `supported` flag guards at tap time.
-   */
-  function isCapabilityVisible(definition: CapabilityDefinition): boolean {
-    if (!supportedPerms) return false;
-    if (supportedPerms.size === 0) return true;
-    if (definition.permission && !supportedPerms.has(definition.permission)) return false;
-    if (definition.needsFullScreenIntent && !supportedPerms.has("fullScreenIntent")) return false;
-    return true;
-  }
-
-  /** Update local capability tokens state after a toggle change */
-  function setCapabilityEnabled(capability: string, enabled: boolean) {
-    const updated: Record<string, string | null> = {};
-    for (const [k, v] of Object.entries(capabilityTokens ?? {})) updated[k] = v ?? null;
-    updated[capability] = enabled ? (activeClientToken ?? null) : null;
-    onCapabilityTokensChange?.(updated);
-  }
-
-  // If the OS location permission is revoked while the app is backgrounded,
-  // disable the capability on the host so agents don't keep pinging for fixes.
-  useEffect(() => {
-    if (!isNative || !Device || !request) return;
-
-    const locationEnabled = isCapabilityEnabled("location");
-    if (!locationEnabled) return;
-
-    function syncPermissionState() {
-      Device!.checkPermission({ type: "location" }).then(({ granted }) => {
-        if (!granted) {
-          request!("device.location.disable").then(() => {
-            setCapabilityEnabled("location", false);
-          }).catch(() => {});
-        }
-      });
-    }
 
-    syncPermissionState();
-    const listener = CapacitorApp.addListener("resume", syncPermissionState);
-    return () => { listener.then((h) => h.remove()); };
-  }, [capabilityTokens, activeClientToken]);
-
-  // Mirror the server-derived enabled set into native as the local kill-switch.
-  // Toggling below writes through immediately; this useEffect catches host-initiated
-  // changes (e.g. a capability revoked on another device) on the next render.
-  useEffect(() => {
-    if (!isNative || !Device) return;
-    const enabledCapabilities = CAPABILITIES
-      .map((definition) => definition.capability)
-      .filter((capability) => capabilityTokens?.[capability] === activeClientToken);
-    Device.setEnabledCapabilities({ capabilities: enabledCapabilities }).catch(() => {});
-  }, [capabilityTokens, activeClientToken]);
-
-  async function toggleCapability(definition: CapabilityDefinition) {
-    if (!request) return;
-    const enabled = isCapabilityEnabled(definition.capability);
-    setTogglingCapability(definition.capability);
-    try {
-      if (enabled) {
-        const method = definition.disableMethod ?? "device.capability.disable";
-        const params = definition.disableParams?.() ?? { capability: definition.capability };
-        await request(method, params);
-        setCapabilityEnabled(definition.capability, false);
-        return;
-      }
-
-      if (Device && definition.permission) {
-        const check = await Device.checkPermission({ type: definition.permission });
-        if (!check.supported) {
-          console.warn(`Native build does not support permission '${definition.permission}'`);
-          return;
-        }
-        if (!check.granted) {
-          const result = await Device.requestPermission({ type: definition.permission });
-          if (!result.granted) return;
-        }
-      }
-      if (Device && definition.needsFullScreenIntent) {
-        const check = await Device.checkPermission({ type: "fullScreenIntent" });
-        if (!check.supported) {
-          console.warn("Native build does not support fullScreenIntent");
-          return;
-        }
-        if (!check.granted) {
-          const result = await Device.requestPermission({ type: "fullScreenIntent" });
-          if (!result.granted) return;
-        }
-      }
-
-      if (!Device) return;
-      const { token: fcmToken } = await Device.getFcmToken();
-      if (!fcmToken) { console.warn("No FCM token available"); return; }
-
-      // Whitelist the capability natively before enabling on the host, so an FCM
-      // from the host can't arrive in the gap where our useEffect hasn't synced yet.
-      const enabledNow = CAPABILITIES
-        .map((c) => c.capability)
-        .filter((name) => name === definition.capability || capabilityTokens?.[name] === activeClientToken);
-      await Device.setEnabledCapabilities({ capabilities: enabledNow });
-
-      const method = definition.enableMethod ?? "device.capability.enable";
-      const params = definition.enableParams?.(fcmToken) ?? { capability: definition.capability, fcmToken };
-      await request(method, params);
-      setCapabilityEnabled(definition.capability, true);
-    } catch (err) {
-      console.error(`Failed to toggle ${definition.capability}:`, err);
-    } finally {
-      setTogglingCapability(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);
   }, []);
@@ -261,20 +87,17 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
 
   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>
+      {!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>
+      )}
 
       {!isLanMode && pairedHosts.length > 0 && (
         <div className="drawer-section">
@@ -382,27 +205,17 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         </div>
       </>)}
 
-      {isNative && (
+      {isNative && request && (
         <>
           <div className="drawer-divider" />
           <div className="drawer-section">
-            {CAPABILITIES.filter(isCapabilityVisible).map((definition) => {
-              const enabled = isCapabilityEnabled(definition.capability);
-              return (
-                <label key={definition.capability} className="drawer-toggle">
-                  <span className="drawer-toggle-label">{definition.label}</span>
-                  <button
-                    className={`toggle-switch ${enabled ? "toggle-switch-on" : ""}`}
-                    onClick={() => toggleCapability(definition)}
-                    disabled={togglingCapability === definition.capability}
-                    role="switch"
-                    aria-checked={enabled}
-                  >
-                    <span className="toggle-switch-thumb" />
-                  </button>
-                </label>
-              );
-            })}
+            <h3 className="drawer-section-label">Host capabilities on this device</h3>
+            <CapabilityToggles
+              capabilityTokens={capabilityTokens}
+              activeClientToken={activeClientToken}
+              request={request}
+              onCapabilityTokensChange={(tokens) => onCapabilityTokensChange?.(tokens)}
+            />
           </div>
         </>
       )}

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/SessionComposer.tsx

@@ -5,6 +5,7 @@ import type { AgentInfo } from "../types";
 
 interface SessionComposerProps {
   agents: AgentInfo[];
+  hostPlatform?: string;
   onStarted(taskId: string, runId?: string): void;
 }
 
@@ -15,7 +16,7 @@ function pickDefaultAgent(agents: AgentInfo[]): string {
   return agents[0]?.key ?? "";
 }
 
-export default function SessionComposer({ agents, onStarted }: SessionComposerProps) {
+export default function SessionComposer({ agents, hostPlatform, onStarted }: SessionComposerProps) {
   const { request } = useHostConnection();
   const [prompt, setPrompt] = useState("");
   const [agent, setAgent] = useState(() => pickDefaultAgent(agents));
@@ -62,7 +63,15 @@ export default function SessionComposer({ agents, onStarted }: SessionComposerPr
     try {
       const result = await request<{ task_id?: string; run_id?: string; error?: string }>(
         "task.run_oneoff",
-        { user_prompt: prompt, agent, yolo_mode: yoloMode },
+        {
+          user_prompt: prompt,
+          agent,
+          yolo_mode: yoloMode,
+          // Direct runs on Windows need a visible session so interactive tools
+          // (browsers, GUI apps) can attach; background task-scheduler runs
+          // would otherwise land in session 0 with no display.
+          ...(hostPlatform === "win32" ? { foreground_mode: true } : {}),
+        },
       );
       if (result.error) {
         setError(result.error);

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";
 
@@ -13,19 +14,37 @@ interface SessionsViewProps {
   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[];
+  hostPlatform?: string;
   filterTaskId?: string | null;
   onClearFilter?: () => void;
 }
 
 const PAGE_SIZE = 10;
 
-export default function SessionsView({ connected, hostId, request, subscribeEvents, agents, filterTaskId, onClearFilter }: SessionsViewProps) {
+export default function SessionsView({ connected, hostId, request, subscribeEvents, agents, hostPlatform, filterTaskId, onClearFilter }: SessionsViewProps) {
   const [entries, setEntries] = useState<HistoryEntry[]>([]);
   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
@@ -157,6 +176,7 @@ export default function SessionsView({ connected, hostId, request, subscribeEven
   const composer = !filterTaskId && (
     <SessionComposer
       agents={agents}
+      hostPlatform={hostPlatform}
       onStarted={(taskId, runId) => {
         if (runId) navigate(`/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`);
         else navigate(`/runs/${encodeURIComponent(taskId)}`);
@@ -247,38 +267,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">
-                {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>
-                )}
+        {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

@@ -133,7 +133,7 @@ export default function TaskCard({ task, lastEvent, onEdit, onDelete, onViewRun
     values: string[] | undefined,
   ): string {
     if (!scheduleType) return "";
-    if (scheduleType === "on_new_notification") return "On new push notification";
+    if (scheduleType === "on_new_notification") return "On new 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]);