palmier 0.8.1 → 0.8.3

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

@@ -1793,25 +1793,16 @@ body {
   z-index: 101;
   display: flex;
   flex-direction: column;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   animation: drawerSlideIn 0.25s ease;
 }
 
-.drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-md);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.drawer-title {
-  font-size: 1.125rem;
-  font-weight: 800;
-  color: var(--color-primary);
-  letter-spacing: -0.04em;
-}
-
 .drawer-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1847,6 +1838,18 @@ body {
   margin-bottom: var(--space-sm);
 }
 
+.drawer-toggle-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.drawer-toggle-group-divided {
+  border-top: 1px solid var(--color-border);
+  padding-top: var(--space-sm);
+  margin-top: var(--space-xs);
+}
+
 .drawer-toggle {
   display: flex;
   align-items: center;
@@ -1961,17 +1964,42 @@ body {
 
 /* ===== Tab bar ===== */
 
-.tab-bar {
-  display: flex;
-  align-items: center;
-  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
-  border-bottom: 1px solid var(--color-border);
+.app-header {
   position: sticky;
   top: 0;
   z-index: 10;
+  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
+  border-bottom: 1px solid var(--color-border);
   backdrop-filter: blur(8px);
 }
 
+.app-title-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+}
+
+.app-title-bar .hamburger-btn {
+  position: absolute;
+  left: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.app-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.tab-bar {
+  display: flex;
+  align-items: center;
+}
+
 .tab-btn {
   flex: 1;
   display: flex;
@@ -2613,6 +2641,7 @@ body {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  overscroll-behavior: contain;
   animation: none;
 }
 
@@ -2630,3 +2659,119 @@ body {
     right: max(var(--space-lg), calc((100vw - 1080px) / 2));
   }
 }
+
+/* ===== Swipe-to-delete row ===== */
+
+.swipe-row {
+  position: relative;
+  overflow: hidden;
+  touch-action: pan-y;   /* let vertical scroll through; capture horizontal ourselves */
+}
+
+.swipe-row-action {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-error, #dc2626);
+  color: #fff;
+  border: none;
+  font-size: 0.9375rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+}
+
+.swipe-row-action:focus-visible {
+  outline: 2px solid var(--color-accent, #2E5CE5);
+  outline-offset: -4px;
+}
+
+.swipe-row-content {
+  position: relative;
+  background: var(--color-surface);
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+  will-change: transform;
+}
+
+/* During an active drag, skip the transition so the row tracks the finger 1:1.
+   On release the class is removed and the snap animates. */
+.swipe-row-content-dragging {
+  transition: none;
+}
+
+.app-filter-help {
+  margin-top: var(--space-xs);
+}
+
+.app-combobox {
+  position: relative;
+}
+
+.app-combobox-list {
+  position: absolute;
+  top: calc(100% + 2px);
+  left: 0;
+  right: 0;
+  max-height: 280px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  list-style: none;
+  margin: 0;
+  padding: var(--space-xs) 0;
+  z-index: 20;
+}
+
+.app-combobox-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: 8px var(--space-md);
+  cursor: pointer;
+  user-select: none;
+}
+
+.app-combobox-row:hover {
+  background: var(--color-hover, rgba(0, 0, 0, 0.04));
+}
+
+.app-combobox-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  flex-shrink: 0;
+}
+
+.app-combobox-icon-placeholder {
+  background: var(--color-border);
+}
+
+.app-combobox-labels {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.app-combobox-name {
+  font-size: 0.9375rem;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-combobox-pkg {
+  font-size: 0.75rem;
+  color: var(--color-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

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

@@ -12,14 +12,20 @@ import { confirmLeaveDraft } from "../draftGuard";
 const isLanMode = !!(window as any).__PALMIER_SERVE__;
 const isNative = Capacitor.isNativePlatform();
 
+type CapabilityGroup = "Messaging" | "Data" | "Device";
+
+const CAPABILITY_GROUPS: CapabilityGroup[] = ["Device", "Data", "Messaging"];
+
 interface CapabilityDefinition {
   /** Server-side capability name used in device.capability.{enable,disable} RPCs. */
   capability: string;
   /** Label shown in the drawer toggle. */
   label: string;
+  /** Drawer section this capability is grouped under. */
+  group: CapabilityGroup;
   /** Runtime or settings permission to request before enabling. */
   permission?: PermissionType;
-  /** True for capabilities that display full-screen alerts (alert, send-email). */
+  /** True for capabilities that display a full-screen UI (alarm). */
   needsFullScreenIntent?: boolean;
   /** Override RPC methods; location uses device.location.{enable,disable} instead. */
   enableMethod?: string;
@@ -29,23 +35,25 @@ interface CapabilityDefinition {
 }
 
 const CAPABILITIES: CapabilityDefinition[] = [
+  { capability: "sms-read", label: "Read SMS", group: "Messaging", permission: "smsRead" },
+  { capability: "sms-send", label: "Send SMS", group: "Messaging", permission: "smsSend" },
+  { capability: "send-email", label: "Send Email", group: "Messaging", permission: "postNotifications" },
+  { capability: "notifications", label: "Read Notifications", group: "Data", permission: "notificationListener" },
+  { capability: "contacts", label: "Manage Contacts", group: "Data", permission: "contacts" },
+  { capability: "calendar", label: "Manage Calendar", group: "Data", permission: "calendar" },
   {
     capability: "location",
-    label: "Location Access",
+    label: "Get Location",
+    group: "Device",
     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 },
+  { capability: "battery", label: "Read Battery Status", group: "Device" },
+  { capability: "dnd", label: "Set Ringer Mode", group: "Device", permission: "dnd" },
+  { capability: "alarm", label: "Trigger Alarms", group: "Device", needsFullScreenIntent: true },
 ];
 
 interface HostMenuProps {
@@ -67,6 +75,8 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
   const [renameValue, setRenameValue] = useState("");
   const [confirmingDeleteId, setConfirmingDeleteId] = useState<string | null>(null);
   const [togglingCapability, setTogglingCapability] = useState<string | null>(null);
+  const [confirmingSwitchCapability, setConfirmingSwitchCapability] = useState<CapabilityDefinition | null>(null);
+  const [confirmingDisableCapability, setConfirmingDisableCapability] = useState<CapabilityDefinition | 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
@@ -145,9 +155,22 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
     Device.setEnabledCapabilities({ capabilities: enabledCapabilities }).catch(() => {});
   }, [capabilityTokens, activeClientToken]);
 
-  async function toggleCapability(definition: CapabilityDefinition) {
+  async function toggleCapability(definition: CapabilityDefinition, bypassConfirmation = false) {
     if (!request) return;
     const enabled = isCapabilityEnabled(definition.capability);
+
+    if (enabled && !bypassConfirmation) {
+      setConfirmingDisableCapability(definition);
+      return;
+    }
+
+    const ownedByOther = !enabled && !!capabilityTokens?.[definition.capability]
+      && capabilityTokens[definition.capability] !== activeClientToken;
+    if (ownedByOther && !bypassConfirmation) {
+      setConfirmingSwitchCapability(definition);
+      return;
+    }
+
     setTogglingCapability(definition.capability);
     try {
       if (enabled) {
@@ -158,6 +181,21 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         return;
       }
 
+      if (Device && definition.capability === "send-email") {
+        // Verify a mailto: handler exists before enabling — silent PackageManager
+        // lookup. If the APK predates this method, allow enabling and let the
+        // user discover the missing-app failure at first use.
+        try {
+          const result = await Device.hasEmailClient();
+          if (result.supported && !result.available) {
+            alert("No email app is installed on this device. Install one (e.g. Gmail) before enabling Sending Email.");
+            return;
+          }
+        } catch {
+          // Older APK without this method — fall through.
+        }
+      }
+
       if (Device && definition.permission) {
         const check = await Device.checkPermission({ type: definition.permission });
         if (!check.supported) {
@@ -261,20 +299,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,30 +417,41 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         </div>
       </>)}
 
-      {isNative && (
-        <>
-          <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>
-              );
-            })}
-          </div>
-        </>
-      )}
+      {isNative && (() => {
+        const visibleGroups = CAPABILITY_GROUPS
+          .map((group) => ({ group, items: CAPABILITIES.filter((definition) => definition.group === group && isCapabilityVisible(definition)) }))
+          .filter((g) => g.items.length > 0);
+        if (visibleGroups.length === 0) return null;
+        return (
+          <>
+            <div className="drawer-divider" />
+            <div className="drawer-section">
+              <h3 className="drawer-section-label">Host capabilities on this device</h3>
+              {visibleGroups.map(({ group, items }, index) => (
+                <div key={group} className={index > 0 ? "drawer-toggle-group drawer-toggle-group-divided" : "drawer-toggle-group"}>
+                  {items.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>
+                    );
+                  })}
+                </div>
+              ))}
+            </div>
+          </>
+        );
+      })()}
 
       <div className="drawer-footer">
         {daemonVersion && (
@@ -451,6 +497,66 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
     document.body
   );
 
+  const disableCapabilityModal = confirmingDisableCapability && createPortal(
+    <div className="confirm-modal-overlay" onClick={() => setConfirmingDisableCapability(null)}>
+      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+        <h2 className="confirm-modal-title">Disable {confirmingDisableCapability.label}?</h2>
+        <p className="confirm-modal-message">
+          Agents running on the host will no longer be able to use {confirmingDisableCapability.label} until it is re-enabled on a device.
+        </p>
+        <div className="confirm-modal-actions">
+          <button
+            className="btn btn-secondary"
+            onClick={() => setConfirmingDisableCapability(null)}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-danger"
+            onClick={() => {
+              const definition = confirmingDisableCapability;
+              setConfirmingDisableCapability(null);
+              toggleCapability(definition, true);
+            }}
+          >
+            Disable
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
+  const switchCapabilityModal = confirmingSwitchCapability && createPortal(
+    <div className="confirm-modal-overlay" onClick={() => setConfirmingSwitchCapability(null)}>
+      <div className="confirm-modal" onClick={(e) => e.stopPropagation()}>
+        <h2 className="confirm-modal-title">Switch {confirmingSwitchCapability.label} to this device?</h2>
+        <p className="confirm-modal-message">
+          {confirmingSwitchCapability.label} is currently enabled on another device. Switching will make this device the one the host uses for {confirmingSwitchCapability.label}, and it will be disabled on the other device.
+        </p>
+        <div className="confirm-modal-actions">
+          <button
+            className="btn btn-secondary"
+            onClick={() => setConfirmingSwitchCapability(null)}
+          >
+            Cancel
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={() => {
+              const definition = confirmingSwitchCapability;
+              setConfirmingSwitchCapability(null);
+              toggleCapability(definition, true);
+            }}
+          >
+            Switch
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+
   // Desktop: persistent inline sidebar
   if (isDesktop) {
     return (
@@ -459,6 +565,8 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
           {drawerContent}
         </div>
         {deleteModal}
+      {switchCapabilityModal}
+      {disableCapabilityModal}
       </>
     );
   }
@@ -494,6 +602,8 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
       )}
 
       {deleteModal}
+      {switchCapabilityModal}
+      {disableCapabilityModal}
     </>
   );
 }

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,38 +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">
-                {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 }} />