palmier 0.6.0 → 0.6.2

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

@@ -0,0 +1,293 @@
+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 { formatTime } from "../formatTime";
+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 [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);
+  const [aborting, setAborting] = useState(false);
+  const [followupText, setFollowupText] = useState("");
+  const [sendingFollowup, setSendingFollowup] = useState(false);
+  const threadRef = useRef<HTMLDivElement>(null);
+
+  async function fetchData() {
+    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: runId });
+
+      if (result.error) {
+        console.error("No result:", result.error);
+        navigate("/runs", { replace: true });
+        return;
+      }
+      setMessages(result.messages ?? []);
+      setRunState(result.running_state);
+      setAgent(result.agent);
+    } catch (err) {
+      console.error("Failed to load result:", err);
+      navigate("/runs", { replace: true });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function openReport(file: string) {
+    try {
+      const result = await request<{ reports: Array<{ file: string; content?: string; data_url?: string }> }>(
+        "task.reports", { id: taskId, run_id: runId, 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
+  useEffect(() => {
+    if (connected) {
+      setLoading(true);
+      fetchData();
+    }
+  }, [connected, taskId, runId]);
+
+  // Live-update when the viewed task's state changes
+  useEffect(() => {
+    if (!connected || !hostId) 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;
+        fetchData();
+      } catch { /* skip */ }
+    });
+    return unsubscribe;
+  }, [connected, hostId, taskId, subscribeEvents, request]);
+
+  // Auto-scroll to bottom when messages change
+  useEffect(() => {
+    if (threadRef.current) {
+      threadRef.current.scrollTop = threadRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  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 === "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>
+
+      {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">
+                  {statusLabel(msg.type)}
+                  {msg.time > 0 && <span className="chat-status-time">{formatTime(msg.time)}</span>}
+                </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: runId });
+                  } 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: runId, message: msg });
+                  setFollowupText("");
+                } catch (err) {
+                  console.error("Follow-up failed:", err);
+                } finally {
+                  setSendingFollowup(false);
+                }
+              }}
+            >
+              <input
+                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/RunsView.tsx

@@ -0,0 +1,254 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { formatTime } from "../formatTime";
+import type { HistoryEntry } from "../types";
+
+interface RunsViewProps {
+  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;
+  filterTaskId?: string | null;
+  onClearFilter?: () => void;
+}
+
+const PAGE_SIZE = 10;
+
+export default function RunsView({ connected, hostId, request, subscribeEvents, filterTaskId, onClearFilter }: RunsViewProps) {
+  const [entries, setEntries] = useState<HistoryEntry[]>([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const navigate = useNavigate();
+
+  const sentinelRef = useRef<HTMLDivElement>(null);
+
+  // Build RPC params with optional task_id filter
+  const rpcParams = useCallback((offset: number) => {
+    const params: Record<string, unknown> = { offset, limit: PAGE_SIZE };
+    if (filterTaskId) params.task_id = filterTaskId;
+    return params;
+  }, [filterTaskId]);
+
+  // Fetch a page of history
+  const loadHistory = useCallback(async (offset: number, append: boolean) => {
+    if (!connected) return;
+    if (append) setLoadingMore(true);
+    else setLoading(true);
+
+    try {
+      const result = await request<{ entries?: HistoryEntry[]; total?: number }>(
+        "taskrun.list", rpcParams(offset),
+      );
+      const newEntries = result.entries ?? [];
+      setTotal(result.total ?? 0);
+      if (append) {
+        setEntries((prev) => {
+          const existing = new Set(prev.map((e) => `${e.task_id}:${e.run_id}`));
+          const deduped = newEntries.filter((e) => !existing.has(`${e.task_id}:${e.run_id}`));
+          return [...prev, ...deduped];
+        });
+      } else {
+        setEntries(newEntries);
+      }
+    } catch (err) {
+      if (!(err instanceof Error && err.message === "Not connected")) {
+        console.error("Failed to load runs:", err);
+      }
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [connected, request, rpcParams]);
+
+  // Initial load + reload when filter changes
+  useEffect(() => {
+    if (connected) {
+      setEntries([]);
+      setTotal(0);
+      loadHistory(0, false);
+    } else {
+      setEntries([]);
+      setTotal(0);
+    }
+  }, [connected, hostId, loadHistory, filterTaskId]);
+
+  // Real-time: update entries on running-state events
+  useEffect(() => {
+    if (!connected || !hostId) return;
+    const unsubscribe = subscribeEvents(hostId, async (msg) => {
+      try {
+        const parsed = JSON.parse(new TextDecoder().decode(msg.data)) as { event_type?: string; running_state?: string };
+        if (
+          parsed.event_type === "running-state" &&
+          parsed.running_state && ["monitoring", "started", "finished", "failed", "aborted"].includes(parsed.running_state)
+        ) {
+          const result = await request<{ entries?: HistoryEntry[]; total?: number }>(
+            "taskrun.list", rpcParams(0),
+          );
+          const freshEntries = result.entries ?? [];
+          setTotal(result.total ?? 0);
+          setEntries((prev) => {
+            const freshMap = new Map(freshEntries.map((e) => [`${e.task_id}:${e.run_id}`, e]));
+            const updated = prev.map((e) => {
+              const key = `${e.task_id}:${e.run_id}`;
+              return freshMap.get(key) ?? e;
+            });
+            const existingKeys = new Set(updated.map((e) => `${e.task_id}:${e.run_id}`));
+            const newOnes = freshEntries.filter((e) => !existingKeys.has(`${e.task_id}:${e.run_id}`));
+            return [...newOnes, ...updated];
+          });
+        }
+      } catch { /* skip */ }
+    });
+    return unsubscribe;
+  }, [connected, hostId, subscribeEvents, request]);
+
+  // Infinite scroll via IntersectionObserver
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+
+    const observer = new IntersectionObserver(
+      (observerEntries) => {
+        if (observerEntries[0].isIntersecting && !loadingMore && entries.length < total) {
+          loadHistory(entries.length, true);
+        }
+      },
+      { threshold: 0.1 },
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [entries.length, total, loadingMore, loadHistory]);
+
+
+  function formatDuration(start?: number, end?: number): string {
+    if (!start || !end) return "";
+    const seconds = Math.round((end - start) / 1000);
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}m ${remainingSeconds}s`;
+  }
+
+  const stateLabel: Record<string, string> = {
+    monitoring: "Monitoring",
+    started: "Running",
+    finished: "Finished",
+    failed: "Failed",
+    aborted: "Aborted",
+  };
+
+  function stateColor(state?: string): string | undefined {
+    if (state === "failed") return "var(--color-error)";
+    if (state === "aborted") return "var(--color-warning, #d97706)";
+    return undefined;
+  }
+
+  // Loading skeleton
+  if (loading && entries.length === 0 && connected) {
+    return (
+      <div className="task-list">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="task-card" style={{ pointerEvents: "none" }}>
+            <div className="task-card-header">
+              <div className="task-card-title-row">
+                <div className="skeleton-line" style={{ width: `${70 + i * 10}%` }} />
+              </div>
+            </div>
+            <div className="task-card-meta">
+              <div className="skeleton-line" style={{ width: "45%" }} />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  // Empty / disconnected states
+  if (!connected || (loading && entries.length === 0)) {
+    return (
+      <div className="runs-view">
+        <div className="empty-state">
+          <p className="empty-state-text">Runs</p>
+          <p className="empty-state-hint">Run history will appear here</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (entries.length === 0) {
+    return (
+      <>
+        {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">
+          <div className="empty-state">
+            <p className="empty-state-text">No runs yet</p>
+            <p className="empty-state-hint">
+              {filterTaskId
+                ? "This task hasn't been executed yet. Run it from the task menu or wait for its next trigger."
+                : "Run history will appear here."}
+            </p>
+          </div>
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      {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="task-list">
+        {entries.map((entry, i) => (
+          <div
+            key={`${entry.task_id}-${entry.run_id}-${i}`}
+            className="runs-card"
+            onClick={() => !entry.error && navigate(`/runs/${entry.task_id}/${encodeURIComponent(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">
+                <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="runs-card-chevron">&#8250;</span>
+          </div>
+        ))}
+
+        {/* Sentinel for infinite scroll */}
+        <div ref={sentinelRef} style={{ height: 1 }} />
+
+        {loadingMore && (
+          <div className="loading-state" style={{ padding: "var(--space-md)" }}>
+            <div className="spinner" />
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { useNavigate, useLocation } from "react-router-dom";
+
+export default function TabBar() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const isRuns = location.pathname.startsWith("/runs");
+
+  return (
+    <>
+      <button
+        className={`tab-btn ${!isRuns ? "tab-btn-active" : ""}`}
+        onClick={() => navigate("/")}
+      >
+        <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" />
+        </svg>
+        Tasks
+      </button>
+      <button
+        className={`tab-btn ${isRuns ? "tab-btn-active" : ""}`}
+        onClick={() => navigate("/runs")}
+      >
+        <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" />
+        </svg>
+        Runs
+      </button>
+    </>
+  );
+}