palmier 0.7.7 → 0.7.8

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

@@ -0,0 +1,137 @@
+import { useEffect, useState } from "react";
+import { useHostConnection } from "../contexts/HostConnectionContext";
+import { setDraftMessage } from "../draftGuard";
+import type { AgentInfo } from "../types";
+
+interface SessionComposerProps {
+  agents: AgentInfo[];
+  onStarted(taskId: string, runId?: string): void;
+}
+
+function pickDefaultAgent(agents: AgentInfo[]): string {
+  const stored = localStorage.getItem("palmier:lastAgent");
+  const keys = agents.map((a) => a.key);
+  if (stored && keys.includes(stored)) return stored;
+  return agents[0]?.key ?? "";
+}
+
+export default function SessionComposer({ agents, onStarted }: SessionComposerProps) {
+  const { request } = useHostConnection();
+  const [prompt, setPrompt] = useState("");
+  const [agent, setAgent] = useState(() => pickDefaultAgent(agents));
+  const [yoloMode, setYoloMode] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Keep agent selection valid as the agent list arrives/changes.
+  useEffect(() => {
+    if (!agents.length) return;
+    if (!agents.find((a) => a.key === agent)) {
+      setAgent(pickDefaultAgent(agents));
+    }
+  }, [agents, agent]);
+
+  // Draft guard: warns on navigation / reload when the input has content.
+  useEffect(() => {
+    const hasDraft = prompt.trim().length > 0;
+    setDraftMessage(hasDraft ? "Your session draft will be lost. Continue?" : null);
+    return () => setDraftMessage(null);
+  }, [prompt]);
+
+  const canRun = !!prompt.trim() && !!agent && !running;
+
+  function confirmYolo(): boolean {
+    if (!yoloMode) return true;
+    return confirm(
+      "Yolo mode is enabled. The agent will auto-approve all tool calls \u2014 it can read, write, delete files, run arbitrary commands, and access the network without asking for permission.\n\nAre you sure you want to continue?"
+    );
+  }
+
+  async function handleRun() {
+    if (!canRun || !confirmYolo()) return;
+    setRunning(true);
+    setError(null);
+    try {
+      const result = await request<{ task_id?: string; run_id?: string; error?: string }>(
+        "task.run_oneoff",
+        { user_prompt: prompt, agent, yolo_mode: yoloMode },
+      );
+      if (result.error) {
+        setError(result.error);
+        return;
+      }
+      localStorage.setItem("palmier:lastAgent", agent);
+      setPrompt("");
+      setDraftMessage(null);
+      if (result.task_id) onStarted(result.task_id, result.run_id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setRunning(false);
+    }
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      handleRun();
+    }
+  }
+
+  return (
+    <div className="session-composer">
+      {error && <div className="form-error">{error}</div>}
+      <textarea
+        className="session-composer-textarea"
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="What can I do for you?"
+        rows={3}
+        disabled={running}
+      />
+      <div className="session-composer-controls">
+        <div className="agent-picker-section-inline">
+          <span className="agent-picker-label">Run with</span>
+          <select
+            className="form-select form-select-sm"
+            value={agent}
+            onChange={(e) => setAgent(e.target.value)}
+            disabled={running || !agents.length}
+          >
+            {agents.map((a) => (
+              <option key={a.key} value={a.key}>{a.label}</option>
+            ))}
+          </select>
+        </div>
+        <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}
+          disabled={!canRun}
+          aria-label="Run session"
+          title="Run session"
+        >
+          {running ? (
+            <span className="btn-spinner" />
+          ) : (
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="22" y1="2" x2="11" y2="13" /><polygon points="22 2 15 22 11 13 2 9 22 2" /></svg>
+          )}
+        </button>
+      </div>
+      {yoloMode && (
+        <p className="command-help-text">
+          The agent will auto-approve all tool calls without asking for permission.
+        </p>
+      )}
+    </div>
+  );
+}

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

@@ -1,30 +1,37 @@
 import { useNavigate, useLocation } from "react-router-dom";
+import { confirmLeaveDraft } from "../draftGuard";
 
 export default function TabBar() {
   const navigate = useNavigate();
   const location = useLocation();
-  const isRuns = location.pathname.startsWith("/runs");
+  const isTasks = location.pathname.startsWith("/tasks");
+  const isSessions = !isTasks;
+
+  function go(path: string) {
+    if (!confirmLeaveDraft()) return;
+    navigate(path);
+  }
 
   return (
     <>
       <button
-        className={`tab-btn ${!isRuns ? "tab-btn-active" : ""}`}
-        onClick={() => navigate("/")}
+        className={`tab-btn ${isSessions ? "tab-btn-active" : ""}`}
+        onClick={() => go("/")}
       >
         <svg className="tab-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <rect x="2" y="2" width="12" height="12" rx="2" />
-          <path d="M5.5 8L7 9.5L10.5 6" />
+          <path d="M2 8H4.5L6 4L8 12L10 6L11.5 8H14" />
         </svg>
-        Tasks
+        Sessions
       </button>
       <button
-        className={`tab-btn ${isRuns ? "tab-btn-active" : ""}`}
-        onClick={() => navigate("/runs")}
+        className={`tab-btn ${isTasks ? "tab-btn-active" : ""}`}
+        onClick={() => go("/tasks")}
       >
         <svg className="tab-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M2 8H4.5L6 4L8 12L10 6L11.5 8H14" />
+          <rect x="2" y="2" width="12" height="12" rx="2" />
+          <path d="M5.5 8L7 9.5L10.5 6" />
         </svg>
-        Runs
+        Tasks
       </button>
     </>
   );

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

@@ -64,11 +64,10 @@ interface TaskFormProps {
   agents: AgentInfo[];
   hostPlatform?: string;
   onSaved(task: Task): void;
-  onRun(taskId: string, runId?: string): void;
   onCancel(): void;
 }
 
-export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun, onCancel }: TaskFormProps) {
+export default function TaskForm({ initial, agents, hostPlatform, onSaved, onCancel }: TaskFormProps) {
   const { request } = useHostConnection();
 
   // Default agent: last used from localStorage, or first available
@@ -107,8 +106,7 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
   );
   const [yoloMode, setYoloMode] = useState(initial?.yolo_mode ?? false);
   const [foregroundMode, setForegroundMode] = useState(initial?.foreground_mode ?? false);
-  const [savingAction, setSavingAction] = useState<"save" | "run" | null>(null);
-  const saving = savingAction !== null;
+  const [saving, setSaving] = useState(false);
 
   // Command-triggered mode
   const [commandEnabled, setCommandEnabled] = useState(!!initial?.command);
@@ -170,7 +168,7 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
   }
 
   async function handleSave() {
-    setSavingAction("save");
+    setSaving(true);
     setError(null);
     try {
       const method = isEdit ? "task.update" : "task.create";
@@ -202,34 +200,7 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
       setError(err instanceof Error ? err.message : String(err));
       return null;
     } finally {
-      setSavingAction(null);
-    }
-  }
-
-  async function handleRunOneoff() {
-    setSavingAction("run");
-    setError(null);
-    try {
-      const payload: Record<string, unknown> = {
-        user_prompt: userPrompt,
-        agent,
-        requires_confirmation: requiresConfirmation,
-        yolo_mode: yoloMode,
-        foreground_mode: foregroundMode,
-        command: commandEnabled ? command : "",
-      };
-      const result = await request<{ ok?: boolean; task_id?: string; run_id?: string; error?: string }>("task.run_oneoff", payload);
-      if (result.error) {
-        setError(result.error);
-        return;
-      }
-      localStorage.setItem("palmier:lastAgent", agent);
-      onRun(result.task_id!, result.run_id);
-      onCancel();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSavingAction(null);
+      setSaving(false);
     }
   }
 
@@ -505,59 +476,33 @@ export default function TaskForm({ initial, agents, hostPlatform, onSaved, onRun
         <div className="form-actions">
           {(() => {
             const hasSchedule = triggerRows.length > 0;
-            const canRun = !!userPrompt.trim() && (!commandEnabled || !!command.trim());
+            const label = hasSchedule ? "Schedule" : "Save";
             if (!isEdit) {
-              if (hasSchedule) {
-                // New task with schedule: "Schedule" only
-                return (
-                  <button
-                    className="btn btn-primary"
-                    onClick={() => confirmYolo() && handleSave()}
-                    disabled={!canSave || saving}
-                  >
-                    {savingAction === "save" && <span className="btn-spinner" />}
-                    Schedule
-                  </button>
-                );
-              }
-              // New task, no schedule: "Run" (primary) + "Save"
-              return (<>
+              return (
                 <button
                   className="btn btn-primary"
-                  onClick={() => confirmYolo() && handleRunOneoff()}
-                  disabled={!canRun || saving}
-                >
-                  {savingAction === "run" && <span className="btn-spinner" />}
-                  Run
-                </button>
-                <button
-                  className="btn btn-secondary"
                   onClick={() => confirmYolo() && handleSave()}
                   disabled={!canSave || saving}
                 >
-                  Save
+                  {saving && <span className="btn-spinner" />}
+                  {label}
                 </button>
-              </>);
+              );
             }
             if (isDirty) {
-              // Edit, changed: Save only
               return (
                 <button
                   className="btn btn-primary"
                   onClick={() => confirmYolo() && handleSave()}
                   disabled={!canSave || saving}
                 >
-                  {savingAction === "save" && <span className="btn-spinner" />}
+                  {saving && <span className="btn-spinner" />}
                   Save
                 </button>
               );
             }
-            // Edit, unchanged: disabled Save
             return (
-              <button
-                className="btn btn-primary"
-                disabled
-              >
+              <button className="btn btn-primary" disabled>
                 Save
               </button>
             );