palmier 0.7.7 → 0.7.9

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 {
@@ -578,26 +606,104 @@ body {
   }
 }
 
-/* ===== Task List ===== */
-.new-task-input-card {
+/* ===== Session Composer ===== */
+.session-composer {
   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);
-  cursor: pointer;
+  padding: var(--space-sm);
+  margin-bottom: var(--space-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
 }
 
-.new-task-input-card:hover {
+.session-composer:focus-within {
   border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-input-focus);
 }
 
-.new-task-placeholder {
-  font-size: 0.875rem;
+.session-composer-textarea {
+  width: 100%;
+  border: none;
+  resize: vertical;
+  outline: none;
+  background: transparent;
+  color: var(--color-text);
+  font-family: var(--font-sans);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  padding: var(--space-xs) var(--space-sm);
+  min-height: 3.5em;
+}
+
+.session-composer-textarea::placeholder {
   color: var(--color-muted);
 }
 
+.session-composer-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding-left: var(--space-xs);
+}
+
+.session-composer-yolo {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.8rem;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  user-select: none;
+}
+
+.session-composer-yolo input {
+  margin: 0;
+  cursor: pointer;
+}
+
+.session-composer-controls .chat-send-btn {
+  margin-left: auto;
+}
+
+/* ===== Task List ===== */
+.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;
+}
+
+.fab:hover {
+  background: var(--color-primary-hover);
+  box-shadow: var(--shadow-xl);
+  transform: translateY(-1px);
+}
+
+.fab:active {
+  transform: translateY(0);
+}
+
+.fab:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 3px;
+}
+
 .section-label {
   font-size: 0.6875rem;
   font-weight: 600;
@@ -611,7 +717,6 @@ body {
   display: flex;
   align-items: center;
   gap: var(--space-xs);
-  margin-left: auto;
 }
 
 .agent-picker-section-inline .agent-picker-label {
@@ -1096,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 {
@@ -1152,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;
@@ -1163,7 +1310,7 @@ body {
   min-width: 0;
 }
 
-.triggers-section-body > .form-select {
+.schedule-section > .form-select {
   width: 100%;
 }
 
@@ -1855,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;
@@ -1865,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);
@@ -1879,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;
@@ -1892,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;
@@ -1902,7 +2049,7 @@ body {
   text-overflow: ellipsis;
 }
 
-.runs-card-meta {
+.sessions-card-meta {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-sm);
@@ -1910,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);
@@ -1920,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);
@@ -1936,7 +2083,7 @@ body {
   border-radius: 999px;
 }
 
-.runs-filter-chip button {
+.sessions-filter-chip button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1949,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/App.tsx

@@ -10,6 +10,7 @@ export default function App() {
       <HostConnectionProvider>
         <Routes>
           <Route path="/" element={<Dashboard />} />
+          <Route path="/tasks" element={<Dashboard />} />
           <Route path="/runs" element={<Dashboard />} />
           <Route path="/runs/:taskId" element={<Dashboard />} />
           <Route path="/runs/:taskId/:runId" element={<Dashboard />} />

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

@@ -98,6 +98,7 @@ const FullScreenIntent = Capacitor.isNativePlatform()
   : null;
 import { useHostStore } from "../contexts/HostStoreContext";
 import { useMediaQuery } from "../hooks/useMediaQuery";
+import { confirmLeaveDraft } from "../draftGuard";
 
 /** LAN mode: PWA is served by palmier serve (marker injected into HTML). */
 const isLanMode = !!(window as any).__PALMIER_SERVE__;
@@ -500,7 +501,11 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
                       className={`host-picker-item ${isActive ? "host-picker-item-active" : ""}`}
                       onClick={() => {
                         if (isRenaming) return;
-                        if (!isActive) { setActiveHostId(host.hostId); if (!isDesktop) close(); }
+                        if (!isActive) {
+                          if (!confirmLeaveDraft()) return;
+                          setActiveHostId(host.hostId);
+                          if (!isDesktop) close();
+                        }
                       }}
                       role="option"
                       aria-selected={isActive}
@@ -580,7 +585,7 @@ export default function HostMenu({ daemonVersion, capabilityTokens, activeClient
         <div className="drawer-section">
           <button
             className="btn btn-primary btn-full"
-            onClick={() => { navigate("/pair"); if (!isDesktop) close(); }}
+            onClick={() => { if (!confirmLeaveDraft()) return; navigate("/pair"); if (!isDesktop) close(); }}
           >
             Pair New Host
           </button>

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"