palmier 0.7.8 → 0.8.0

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

@@ -67,6 +67,34 @@ body {
   min-height: 100dvh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior-y: contain;
+}
+
+.pull-to-refresh {
+  position: fixed;
+  top: -48px;
+  left: 0;
+  right: 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 40;
+  transition: opacity 0.15s;
+}
+
+.pull-to-refresh-badge {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  box-shadow: var(--shadow-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
 }
 
 #root {
@@ -621,10 +649,6 @@ body {
   padding-left: var(--space-xs);
 }
 
-.session-composer-controls .agent-picker-section-inline {
-  margin-left: 0;
-}
-
 .session-composer-yolo {
   display: inline-flex;
   align-items: center;
@@ -645,23 +669,39 @@ body {
 }
 
 /* ===== Task List ===== */
-.new-task-input-card {
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-sm);
-  padding: var(--space-md);
-  margin-bottom: var(--space-sm);
+.fab {
+  position: fixed;
+  right: var(--space-lg);
+  bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  border: none;
+  background: var(--color-primary);
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
+  box-shadow: var(--shadow-lg);
+  transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
+  z-index: 50;
+  -webkit-tap-highlight-color: transparent;
 }
 
-.new-task-input-card:hover {
-  border-color: var(--color-primary);
+.fab:hover {
+  background: var(--color-primary-hover);
+  box-shadow: var(--shadow-xl);
+  transform: translateY(-1px);
 }
 
-.new-task-placeholder {
-  font-size: 0.875rem;
-  color: var(--color-muted);
+.fab:active {
+  transform: translateY(0);
+}
+
+.fab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
 }
 
 .section-label {
@@ -677,7 +717,6 @@ body {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
-  margin-left: auto;
 }
 
 .agent-picker-section-inline .agent-picker-label {
@@ -1162,15 +1201,57 @@ body {
   font-weight: 600;
 }
 
-.triggers-section-body {
+.granted-permissions-row {
+  flex-basis: 100%;
+}
+
+.granted-permissions-row .btn-link {
+  padding: 0;
+}
+
+.schedule-section {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: var(--space-sm);
 }
 
-.triggers-section-body.disabled {
-  opacity: 0.4;
-  pointer-events: none;
+.schedule-section-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-muted);
+  margin: 0;
+}
+
+.schedule-reactive {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.yolo-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.yolo-inline input {
+  margin: 0;
+  cursor: pointer;
+}
+
+.yolo-warning {
+  flex-basis: 100%;
+  margin: 0;
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+  line-height: 1.4;
 }
 
 .trigger-row-card {
@@ -1218,7 +1299,7 @@ body {
   width: auto;
 }
 
-.triggers-section-body > .form-select,
+.schedule-section > .form-select,
 .trigger-row-card .form-select,
 .trigger-row-card .form-input {
   margin-bottom: 0;
@@ -1229,7 +1310,7 @@ body {
   min-width: 0;
 }
 
-.triggers-section-body > .form-select {
+.schedule-section > .form-select {
   width: 100%;
 }
 
@@ -1921,9 +2002,9 @@ body {
   border-bottom-color: var(--color-primary);
 }
 
-/* ===== Runs view ===== */
+/* ===== Sessions view ===== */
 
-.runs-view {
+.sessions-view {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -1931,7 +2012,7 @@ body {
   justify-content: center;
 }
 
-.runs-card {
+.sessions-card {
   background: var(--color-surface);
   border-radius: var(--radius-md);
   border: 1px solid var(--color-border);
@@ -1945,12 +2026,12 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 
-.runs-card:hover {
+.sessions-card:hover {
   box-shadow: var(--shadow-md);
   border-color: #CBD5E1;
 }
 
-.runs-card-body {
+.sessions-card-body {
   flex: 1;
   min-width: 0;
   display: flex;
@@ -1958,7 +2039,7 @@ body {
   gap: var(--space-xs);
 }
 
-.runs-card-name {
+.sessions-card-name {
   font-size: 0.9375rem;
   font-weight: 600;
   letter-spacing: -0.01em;
@@ -1968,7 +2049,7 @@ body {
   text-overflow: ellipsis;
 }
 
-.runs-card-meta {
+.sessions-card-meta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-sm);
@@ -1976,7 +2057,7 @@ body {
   color: var(--color-text-secondary);
 }
 
-.runs-card-chevron {
+.sessions-card-chevron {
   flex-shrink: 0;
   align-self: center;
   color: var(--color-text-secondary);
@@ -1986,11 +2067,11 @@ body {
   transition: opacity var(--transition-base);
 }
 
-.runs-card:hover .runs-card-chevron {
+.sessions-card:hover .sessions-card-chevron {
   opacity: 0.8;
 }
 
-.runs-filter-chip {
+.sessions-filter-chip {
   display: inline-flex;
   align-items: center;
   gap: var(--space-xs);
@@ -2002,7 +2083,7 @@ body {
   border-radius: 999px;
 }
 
-.runs-filter-chip button {
+.sessions-filter-chip button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2015,7 +2096,7 @@ body {
   line-height: 1;
 }
 
-.runs-filter-chip button:hover {
+.sessions-filter-chip button:hover {
   color: var(--color-text);
 }
 

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

@@ -0,0 +1,46 @@
+interface Props {
+  pullDistance: number;
+  refreshing: boolean;
+  threshold: number;
+}
+
+/**
+ * Fixed-position indicator parked just above the viewport that slides down as
+ * the user pulls. Opacity ramps up quickly so the badge peeks in immediately;
+ * the arrow flips upward once the pull has crossed the release threshold.
+ */
+export default function PullToRefreshIndicator({ pullDistance, refreshing, threshold }: Props) {
+  const visible = pullDistance > 0 || refreshing;
+  const ready = pullDistance >= threshold;
+  return (
+    <div
+      className="pull-to-refresh"
+      style={{
+        transform: `translateY(${pullDistance}px)`,
+        opacity: visible ? Math.min(1, pullDistance / 30) : 0,
+      }}
+      aria-hidden={!visible}
+    >
+      <div className="pull-to-refresh-badge">
+        {refreshing ? (
+          <div className="spinner" />
+        ) : (
+          <svg
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.25"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ transform: ready ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.15s" }}
+          >
+            <line x1="12" y1="5" x2="12" y2="19" />
+            <polyline points="19 12 12 19 5 12" />
+          </svg>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -30,8 +30,33 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
   const [followupText, setFollowupText] = useState("");
   const [sendingFollowup, setSendingFollowup] = useState(false);
   const threadRef = useRef<HTMLDivElement>(null);
+  const followupInputRef = useRef<HTMLInputElement>(null);
+  // Tracks which runId we've already scrolled-and-focused for, so new messages
+  // during the session don't steal focus back to the input.
+  const initialFocusForRunId = useRef<string | null>(null);
+
+  // Resolve the "latest" sentinel to an actual run_id. `undefined` = still
+  // resolving, `null` = task has no runs yet (empty state), otherwise the id
+  // to load.
+  const [resolvedRunId, setResolvedRunId] = useState<string | null | undefined>(
+    runId === "latest" ? undefined : runId,
+  );
+  const isLatestEmpty = runId === "latest" && resolvedRunId === null;
+
+  useEffect(() => {
+    if (runId !== "latest") {
+      setResolvedRunId(runId);
+      return;
+    }
+    if (!connected) return;
+    setResolvedRunId(undefined);
+    request<{ entries?: Array<{ run_id: string }> }>("taskrun.list", { task_id: taskId, limit: 1 })
+      .then((result) => setResolvedRunId(result.entries?.[0]?.run_id ?? null))
+      .catch(() => setResolvedRunId(null));
+  }, [runId, taskId, connected, request]);
 
   async function fetchData() {
+    if (!resolvedRunId) return;
     try {
       const result = await request<{
         messages?: ConversationMessage[];
@@ -40,7 +65,7 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
         running_state?: string;
         agent?: string;
         error?: string;
-      }>("task.result", { id: taskId, run_id: runId });
+      }>("task.result", { id: taskId, run_id: resolvedRunId });
 
       if (result.error) {
         console.error("No result:", result.error);
@@ -59,9 +84,10 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
   }
 
   async function openReport(file: string) {
+    if (!resolvedRunId) return;
     try {
       const result = await request<{ reports: Array<{ file: string; content?: string; data_url?: string }> }>(
-        "task.reports", { id: taskId, run_id: runId, report_files: [file] },
+        "task.reports", { id: taskId, run_id: resolvedRunId, report_files: [file] },
       );
       const report = result.reports?.[0];
       if (report?.data_url) {
@@ -74,30 +100,28 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
     }
   }
 
-  // Initial load
+  // Initial load once resolvedRunId becomes a concrete id.
   useEffect(() => {
-    if (connected) {
-      setLoading(true);
-      fetchData();
-    }
-  }, [connected, taskId, runId]);
+    if (!connected || !resolvedRunId) return;
+    setLoading(true);
+    fetchData();
+  }, [connected, taskId, resolvedRunId]);
 
   // Live-update when the viewed task's state changes
   useEffect(() => {
-    if (!connected || !hostId) return;
+    if (!connected || !hostId || !resolvedRunId) return;
     const unsubscribe = subscribeEvents(hostId, async (msg) => {
       try {
         const parsed = JSON.parse(new TextDecoder().decode(msg.data)) as { event_type?: string; run_id?: string };
         if (parsed.event_type !== "running-state" && parsed.event_type !== "result-updated") return;
         const eventTaskId = msg.subject.split(".").pop();
         if (eventTaskId !== taskId) return;
-        // result-updated events are scoped to a specific result file
-        if (parsed.event_type === "result-updated" && parsed.run_id && parsed.run_id !== runId) return;
+        if (parsed.event_type === "result-updated" && parsed.run_id && parsed.run_id !== resolvedRunId) return;
         fetchData();
       } catch { /* skip */ }
     });
     return unsubscribe;
-  }, [connected, hostId, taskId, subscribeEvents, request]);
+  }, [connected, hostId, taskId, resolvedRunId, subscribeEvents, request]);
 
   // Auto-scroll to bottom when messages change
   useEffect(() => {
@@ -106,6 +130,19 @@ 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).
+  useEffect(() => {
+    if (loading || isLatestEmpty || !resolvedRunId) return;
+    if (initialFocusForRunId.current === resolvedRunId) return;
+    initialFocusForRunId.current = resolvedRunId;
+    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]);
+
   function typeLabel(type?: string): string | undefined {
     if (type === "input") return "User Input";
     if (type === "permission") return "Permission";
@@ -133,7 +170,12 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
         Back
       </button>
 
-      {loading ? (
+      {isLatestEmpty ? (
+        <div className="empty-state">
+          <p className="empty-state-text">No runs yet</p>
+          <p className="empty-state-hint">This task hasn't been executed yet. Run it from the task menu or wait for its next trigger.</p>
+        </div>
+      ) : loading ? (
         <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-sm)", padding: "var(--space-sm) 0" }}>
           <div className="skeleton-line" style={{ width: "40%" }} />
           <div className="skeleton-line" style={{ width: "55%" }} />
@@ -223,7 +265,7 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
                 onClick={async () => {
                   setAborting(true);
                   try {
-                    await request("task.stop_followup", { id: taskId, run_id: runId });
+                    await request("task.stop_followup", { id: taskId, run_id: resolvedRunId });
                   } catch (err) {
                     console.error("Stop failed:", err);
                   } finally {
@@ -243,7 +285,7 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
                 if (!msg || sendingFollowup) return;
                 setSendingFollowup(true);
                 try {
-                  await request("task.followup", { id: taskId, run_id: runId, message: msg });
+                  await request("task.followup", { id: taskId, run_id: resolvedRunId, message: msg });
                   setFollowupText("");
                 } catch (err) {
                   console.error("Follow-up failed:", err);
@@ -253,6 +295,7 @@ export default function RunDetailView({ connected, hostId, request, subscribeEve
               }}
             >
               <input
+                ref={followupInputRef}
                 className="chat-input"
                 type="text"
                 placeholder="Follow-up message"

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

@@ -38,6 +38,14 @@ export default function SessionComposer({ agents, onStarted }: SessionComposerPr
     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 {
@@ -104,15 +112,17 @@ export default function SessionComposer({ agents, onStarted }: SessionComposerPr
             ))}
           </select>
         </div>
-        <label className="session-composer-yolo">
-          <input
-            type="checkbox"
-            checked={yoloMode}
-            onChange={(e) => setYoloMode(e.target.checked)}
-            disabled={running}
-          />
-          Yolo
-        </label>
+        {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}
@@ -127,7 +137,7 @@ export default function SessionComposer({ agents, onStarted }: SessionComposerPr
           )}
         </button>
       </div>
-      {yoloMode && (
+      {agentSupportsYolo && yoloMode && (
         <p className="command-help-text">
           The agent will auto-approve all tool calls without asking for permission.
         </p>

package/palmier-server/pwa/src/components/{RunsView.tsx → SessionsView.tsx}

@@ -3,9 +3,11 @@ import { useNavigate } from "react-router-dom";
 import { formatTime } from "../formatTime";
 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>;
@@ -17,7 +19,7 @@ interface RunsViewProps {
 
 const PAGE_SIZE = 10;
 
-export default function RunsView({ connected, hostId, request, subscribeEvents, agents, 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);
@@ -76,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;
@@ -156,6 +163,17 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
       }}
     />
   );
+  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)";
@@ -167,6 +185,7 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
   if (loading && entries.length === 0 && connected) {
     return (
       <>
+        {refreshIndicator}
         {composer}
         <div className="task-list">
           {[0, 1, 2].map((i) => (
@@ -190,8 +209,9 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
   if (!connected || (loading && entries.length === 0)) {
     return (
       <>
+        {refreshIndicator}
         {composer}
-        <div className="runs-view">
+        <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>
@@ -204,16 +224,10 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
   if (entries.length === 0) {
     return (
       <>
+        {refreshIndicator}
         {composer}
-        {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">
+        {filterChip}
+        <div className="sessions-view">
           <div className="empty-state">
             <p className="empty-state-text">No sessions yet</p>
             <p className="empty-state-hint">
@@ -229,25 +243,19 @@ export default function RunsView({ connected, hostId, request, subscribeEvents,
 
   return (
     <>
+      {refreshIndicator}
       {composer}
-      {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>
-      )}
+      {filterChip}
       <div className="task-list">
         {entries.map((entry, i) => (
           <div
             key={`${entry.task_id}-${entry.run_id}-${i}`}
-            className="runs-card"
+            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>
@@ -262,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>
         ))}