palmier 0.9.6 → 0.9.8

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

@@ -1,343 +0,0 @@
-import { useState, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import Markdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import remarkBreaks from "remark-breaks";
-import { getAgentLabel } from "../agentLabels";
-import { useFormatTime } from "../formatTime";
-import { useBackClose } from "../hooks/useBackClose";
-import type { ConversationMessage } from "../types";
-
-interface RunDetailViewProps {
-  connected: boolean;
-  hostId: string | null;
-  request<T = unknown>(method: string, params?: unknown, opts?: { timeout?: number }): Promise<T>;
-  subscribeEvents(hostId: string, callback: (msg: { subject: string; data: Uint8Array }) => void): () => void;
-  taskId: string;
-  runId: string;
-}
-
-export default function RunDetailView({ connected, hostId, request, subscribeEvents, taskId, runId }: RunDetailViewProps) {
-  const navigate = useNavigate();
-  const formatTime = useFormatTime();
-  const [loading, setLoading] = useState(true);
-  const [messages, setMessages] = useState<ConversationMessage[]>([]);
-  const [runState, setRunState] = useState<string | undefined>();
-  const [agent, setAgent] = useState<string | undefined>();
-  const isTaskRunning = runState === "started" || runState === "monitoring";
-  const isFollowupRunning = runState === "followup";
-  const isAgentGenerating = runState === "started" || runState === "followup";
-  const [reportDialog, setReportDialog] = useState<{ file: string; content?: string; data_url?: string } | null>(null);
-  useBackClose(reportDialog !== null, () => setReportDialog(null));
-  const [aborting, setAborting] = useState(false);
-  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[];
-        start_time?: number;
-        end_time?: number;
-        running_state?: string;
-        agent?: string;
-        error?: string;
-      }>("task.result", { id: taskId, run_id: resolvedRunId });
-
-      if (result.error) {
-        console.error("No result:", result.error);
-        navigate(hostId ? `/hosts/${encodeURIComponent(hostId)}` : "/", { replace: true });
-        return;
-      }
-      setMessages(result.messages ?? []);
-      setRunState(result.running_state);
-      setAgent(result.agent);
-    } catch (err) {
-      console.error("Failed to load result:", err);
-      navigate(hostId ? `/hosts/${encodeURIComponent(hostId)}` : "/", { replace: true });
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  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: resolvedRunId, report_files: [file] },
-      );
-      const report = result.reports?.[0];
-      if (report?.data_url) {
-        setReportDialog({ file, data_url: report.data_url });
-      } else {
-        setReportDialog({ file, content: report?.content ?? "Report not found." });
-      }
-    } catch {
-      setReportDialog({ file, content: "Failed to load report." });
-    }
-  }
-
-  // Initial load once resolvedRunId becomes a concrete id.
-  useEffect(() => {
-    if (!connected || !resolvedRunId) return;
-    setLoading(true);
-    fetchData();
-  }, [connected, taskId, resolvedRunId]);
-
-  // Live-update when the viewed task's state changes
-  useEffect(() => {
-    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;
-        if (parsed.event_type === "result-updated" && parsed.run_id && parsed.run_id !== resolvedRunId) return;
-        fetchData();
-      } catch { /* skip */ }
-    });
-    return unsubscribe;
-  }, [connected, hostId, taskId, resolvedRunId, subscribeEvents, request]);
-
-  // Auto-scroll to bottom when messages change
-  useEffect(() => {
-    if (threadRef.current) {
-      threadRef.current.scrollTop = threadRef.current.scrollHeight;
-    }
-  }, [messages]);
-
-  // On first load of a run, scroll the window to the bottom so the follow-up
-  // 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;
-    initialFocusForRunId.current = resolvedRunId;
-    requestAnimationFrame(() => {
-      if (threadRef.current) threadRef.current.scrollTop = threadRef.current.scrollHeight;
-      window.scrollTo({ top: document.documentElement.scrollHeight, behavior: "auto" });
-    });
-  }, [loading, isLatestEmpty, resolvedRunId]);
-
-  function typeLabel(type?: string): string | undefined {
-    if (type === "input") return "User Input";
-    if (type === "permission") return "Permission";
-    if (type === "confirmation") return "Confirmation";
-    return undefined;
-  }
-
-  function statusLabel(type?: string): string {
-    if (type === "started") return "Task started";
-    if (type === "finished") return "Task finished";
-    if (type === "failed") return "Task failed";
-    if (type === "error") return "Command failed";
-    if (type === "aborted") return "Task aborted";
-    if (type === "confirmation") return "Task confirmed";
-    if (type === "stopped") return "Follow-up stopped";
-    return type ?? "";
-  }
-
-  return (
-    <div className="run-detail">
-      <button className="run-detail-back" onClick={() => navigate(-1)}>
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M15 18l-6-6 6-6" />
-        </svg>
-        Back
-      </button>
-
-      {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%" }} />
-          <div className="skeleton-line" style={{ width: "100%", height: "8rem", marginTop: "var(--space-sm)" }} />
-        </div>
-      ) : (
-        <>
-          <div className="chat-thread" ref={threadRef}>
-            {messages.map((msg, i) => {
-              const isLastAssistant = isAgentGenerating && msg.role === "assistant" && !messages.slice(i + 1).some((m) => m.role === "assistant" || m.role === "user");
-              if (msg.role === "status" && msg.type === "monitoring") return null;
-              return msg.role === "status" ? (
-                <div key={i} className={`chat-status${msg.type === "error" ? " chat-status--error" : ""}`}>
-                  <div>
-                    {statusLabel(msg.type)}
-                    {msg.time > 0 && <span className="chat-status-time">{formatTime(msg.time)}</span>}
-                  </div>
-                  {msg.content && <pre className="chat-status-detail">{msg.content}</pre>}
-                </div>
-              ) : (
-                <div key={i} className={`chat-message chat-message--${msg.role}`}>
-                  {msg.role === "assistant" && agent && <div className="chat-message-agent">{getAgentLabel(agent)}</div>}
-                  <div className="chat-message-content">
-                    <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{msg.content}</Markdown>
-                    {isLastAssistant && (
-                      <div className="chat-typing-indicator">
-                        <span /><span /><span />
-                      </div>
-                    )}
-                  </div>
-                  {msg.attachments && msg.attachments.length > 0 && (
-                    <div className="chat-message-attachments">
-                      {msg.attachments.map((file) => (
-                        <button key={file} className="chat-attachment-chip" onClick={() => openReport(file)}>
-                          {file}
-                        </button>
-                      ))}
-                    </div>
-                  )}
-                  <div className="chat-message-meta">
-                    {typeLabel(msg.type) && <span className="chat-message-type">{typeLabel(msg.type)}</span>}
-                    {msg.time > 0 && <span>{formatTime(msg.time)}</span>}
-                  </div>
-                </div>
-              );
-            })}
-            {isAgentGenerating && (() => { const nonStatus = messages.filter((m) => m.role !== "status"); return nonStatus.length === 0 || nonStatus[nonStatus.length - 1].role !== "assistant"; })() && (
-              <div className="chat-message chat-message--assistant">
-                {agent && <div className="chat-message-agent">{getAgentLabel(agent)}</div>}
-                <div className="chat-typing-indicator">
-                  <span /><span /><span />
-                </div>
-              </div>
-            )}
-            {runState === "monitoring" && (
-              <div className="chat-monitoring-indicator">
-                <span className="chat-monitoring-dot" />
-                Monitoring command output
-              </div>
-            )}
-          </div>
-          {isTaskRunning ? (
-            <div className="chat-abort-bar">
-              <button
-                className="btn btn-secondary chat-abort-btn"
-                disabled={aborting}
-                onClick={async () => {
-                  if (!confirm("Abort this task?")) return;
-                  setAborting(true);
-                  try {
-                    await request("task.abort", { id: taskId });
-                  } catch (err) {
-                    console.error("Abort failed:", err);
-                  } finally {
-                    setAborting(false);
-                  }
-                }}
-              >
-                {aborting ? "Aborting..." : "Abort Task"}
-              </button>
-            </div>
-          ) : isFollowupRunning ? (
-            <div className="chat-input-bar">
-              <button
-                className="btn btn-secondary chat-stop-btn"
-                disabled={aborting}
-                onClick={async () => {
-                  setAborting(true);
-                  try {
-                    await request("task.stop_followup", { id: taskId, run_id: resolvedRunId });
-                  } catch (err) {
-                    console.error("Stop failed:", err);
-                  } finally {
-                    setAborting(false);
-                  }
-                }}
-              >
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
-              </button>
-            </div>
-          ) : (
-            <form
-              className="chat-input-bar"
-              onSubmit={async (e) => {
-                e.preventDefault();
-                const msg = followupText.trim();
-                if (!msg || sendingFollowup) return;
-                setSendingFollowup(true);
-                try {
-                  await request("task.followup", { id: taskId, run_id: resolvedRunId, message: msg });
-                  setFollowupText("");
-                } catch (err) {
-                  console.error("Follow-up failed:", err);
-                } finally {
-                  setSendingFollowup(false);
-                }
-              }}
-            >
-              <input
-                ref={followupInputRef}
-                className="chat-input"
-                type="text"
-                placeholder="Follow-up message"
-                value={followupText}
-                onChange={(e) => setFollowupText(e.target.value)}
-                disabled={sendingFollowup}
-              />
-              <button
-                className="btn btn-primary chat-send-btn"
-                type="submit"
-                disabled={!followupText.trim() || sendingFollowup}
-              >
-                <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>
-            </form>
-          )}
-        </>
-      )}
-      {reportDialog && (
-        <div className="report-dialog-overlay" onClick={() => setReportDialog(null)}>
-          <div className="report-dialog" onClick={(e) => e.stopPropagation()}>
-            <div className="report-dialog-header">
-              <span className="report-dialog-title">{reportDialog.file}</span>
-              <button className="report-dialog-close" onClick={() => setReportDialog(null)} aria-label="Close">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
-                </svg>
-              </button>
-            </div>
-            <div className="report-dialog-body">
-              {reportDialog.data_url ? (
-                <img src={reportDialog.data_url} alt={reportDialog.file} style={{ maxWidth: "100%", height: "auto" }} />
-              ) : (
-                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]} components={{ a: ({ ...props }) => <a {...props} target="_blank" rel="noopener noreferrer" /> }}>{reportDialog.content ?? ""}</Markdown>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

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

@@ -1,157 +0,0 @@
-import { useEffect, useState } from "react";
-import { useHostConnection } from "../contexts/HostConnectionContext";
-import { useHostStore } from "../contexts/HostStoreContext";
-import { setDraftMessage } from "../draftGuard";
-import type { AgentInfo } from "../types";
-
-interface SessionComposerProps {
-  agents: AgentInfo[];
-  hostPlatform?: string;
-  onStarted(taskId: string, runId?: string): void;
-}
-
-function pickDefaultAgent(agents: AgentInfo[], preferred?: string): string {
-  const keys = agents.map((a) => a.key);
-  if (preferred && keys.includes(preferred)) return preferred;
-  return agents[0]?.key ?? "";
-}
-
-export default function SessionComposer({ agents, hostPlatform, onStarted }: SessionComposerProps) {
-  const { request, activeHost } = useHostConnection();
-  const { setHostLastAgent } = useHostStore();
-  const [prompt, setPrompt] = useState("");
-  const [agent, setAgent] = useState(() => pickDefaultAgent(agents, activeHost.lastAgent));
-  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, activeHost.lastAgent));
-    }
-  }, [agents, agent, activeHost.lastAgent]);
-
-  // 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 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 {
-    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,
-          // 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);
-        return;
-      }
-      setHostLastAgent(activeHost.hostId, 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>
-        {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}
-          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>
-      {agentSupportsYolo && yoloMode && (
-        <p className="command-help-text">
-          The agent will auto-approve all tool calls without asking for permission.
-        </p>
-      )}
-    </div>
-  );
-}