palmier 0.9.6 → 0.9.7

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

@@ -1,326 +0,0 @@
-import { useState, useEffect, useCallback, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import { useFormatTime } from "../formatTime";
-import { confirmLeaveDraft } from "../draftGuard";
-import SessionComposer from "./SessionComposer";
-import PullToRefreshIndicator from "./PullToRefreshIndicator";
-import SwipeToDeleteRow from "./SwipeToDeleteRow";
-import { usePullToRefresh } from "../hooks/usePullToRefresh";
-import type { AgentInfo, HistoryEntry } from "../types";
-
-interface SessionsViewProps {
-  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;
-  agents: AgentInfo[];
-  hostPlatform?: string;
-  filterTaskId?: string | null;
-  onClearFilter?: () => void;
-}
-
-const PAGE_SIZE = 10;
-
-export default function SessionsView({ connected, hostId, request, subscribeEvents, agents, hostPlatform, filterTaskId, onClearFilter }: SessionsViewProps) {
-  const formatTime = useFormatTime();
-  const [entries, setEntries] = useState<HistoryEntry[]>([]);
-  const [total, setTotal] = useState(0);
-  const [loading, setLoading] = useState(false);
-  const [loadingMore, setLoadingMore] = useState(false);
-  /** Key of the row currently showing its delete action, or null. iOS pattern — at most one at a time. */
-  const [revealedKey, setRevealedKey] = useState<string | null>(null);
-  const navigate = useNavigate();
-
-  async function deleteEntry(entry: HistoryEntry) {
-    const key = `${entry.task_id}:${entry.run_id}`;
-    // Optimistic: drop from the list immediately, restore if the RPC fails.
-    setEntries((prev) => prev.filter((e) => `${e.task_id}:${e.run_id}` !== key));
-    setTotal((t) => Math.max(0, t - 1));
-    setRevealedKey(null);
-    try {
-      await request("taskrun.delete", { task_id: entry.task_id, run_id: entry.run_id });
-    } catch (err) {
-      console.error("Failed to delete run:", err);
-      setEntries((prev) => [entry, ...prev]);
-      setTotal((t) => t + 1);
-    }
-  }
-
-  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]);
-
-  const ptr = usePullToRefresh({
-    onRefresh: () => loadHistory(0, false),
-    enabled: connected,
-  });
-
-  // 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 handleCardClick(taskId: string, runId: string) {
-    if (!confirmLeaveDraft()) return;
-    if (!hostId) return;
-    navigate(`/hosts/${encodeURIComponent(hostId)}/runs/${encodeURIComponent(taskId)}/${encodeURIComponent(runId)}`);
-  }
-
-  const composer = !filterTaskId && (
-    <SessionComposer
-      agents={agents}
-      hostPlatform={hostPlatform}
-      onStarted={(taskId, runId) => {
-        if (!hostId) return;
-        const base = `/hosts/${encodeURIComponent(hostId)}/runs/${encodeURIComponent(taskId)}`;
-        navigate(runId ? `${base}/${encodeURIComponent(runId)}` : base);
-      }}
-    />
-  );
-  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)";
-    if (state === "aborted") return "var(--color-warning, #d97706)";
-    return undefined;
-  }
-
-  // Loading skeleton
-  if (loading && entries.length === 0 && connected) {
-    return (
-      <>
-        {refreshIndicator}
-        {composer}
-        <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 (
-      <>
-        {refreshIndicator}
-        {composer}
-        <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>
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  if (entries.length === 0) {
-    return (
-      <>
-        {refreshIndicator}
-        {composer}
-        {filterChip}
-        <div className="sessions-view">
-          <div className="empty-state">
-            <p className="empty-state-text">No sessions 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."
-                : "Your sessions will appear here."}
-            </p>
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <>
-      {refreshIndicator}
-      {composer}
-      {filterChip}
-      <div className="task-list">
-        {entries.map((entry, i) => {
-          const key = `${entry.task_id}:${entry.run_id}`;
-          return (
-            <SwipeToDeleteRow
-              key={`${key}-${i}`}
-              id={key}
-              revealedId={revealedKey}
-              setRevealedId={setRevealedKey}
-              onDelete={() => deleteEntry(entry)}
-              confirmMessage="Delete this session? Its run history will be removed from the host."
-              onClick={() => !entry.error && handleCardClick(entry.task_id, entry.run_id)}
-            >
-              <div className="sessions-card">
-                <div className="sessions-card-body">
-                  <h3 className="sessions-card-name">{entry.task_name || entry.task_id}</h3>
-                  <div className="sessions-card-meta">
-                    {entry.running_state === "started" ? (
-                      <span className="status-spinner" aria-label="Running">
-                        <span />
-                      </span>
-                    ) : (
-                      <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="sessions-card-chevron">&#8250;</span>
-              </div>
-            </SwipeToDeleteRow>
-          );
-        })}
-
-        {/* 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/SwipeToDeleteRow.tsx

@@ -1,170 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode, type PointerEvent } from "react";
-
-interface SwipeToDeleteRowProps {
-  /** Unique id used to coordinate "at most one row revealed" with the parent. */
-  id: string;
-  /** The id of the currently-revealed row (or null). Set to this row's id to reveal it. */
-  revealedId: string | null;
-  setRevealedId(id: string | null): void;
-  onDelete(): void;
-  onClick?(): void;
-  children: ReactNode;
-  /** Label for the action button (default "Delete"). */
-  actionLabel?: string;
-  /** Message shown in the native confirm() dialog (default "Delete this item? This can't be undone."). */
-  confirmMessage?: string;
-}
-
-const REVEAL_WIDTH = 72;              // px width of the action button
-const OPEN_THRESHOLD = REVEAL_WIDTH / 2;
-const AXIS_LOCK_THRESHOLD = 6;        // px of horizontal travel before we claim the gesture
-
-/**
- * Wraps a row with swipe-left to reveal a destructive action button.
- * Tap the button to confirm, tap elsewhere to dismiss the reveal.
- *
- * Uses pointer events so the same code works for touch and mouse. A short
- * axis-lock period at the start of a drag decides whether the user is
- * scrolling vertically (let it through) or swiping horizontally (capture).
- */
-export default function SwipeToDeleteRow({
-  id,
-  revealedId,
-  setRevealedId,
-  onDelete,
-  onClick,
-  children,
-  actionLabel = "Delete",
-  confirmMessage = "Delete this item? This can't be undone.",
-}: SwipeToDeleteRowProps) {
-  const revealed = revealedId === id;
-  const [dragOffset, setDragOffset] = useState(0);
-  const [dragging, setDragging] = useState(false);
-
-  const startX = useRef(0);
-  const startY = useRef(0);
-  const axis = useRef<"x" | "y" | null>(null);
-  const baseOffset = useRef(0);       // translateX when the gesture started
-  const movedEnough = useRef(false);  // whether we should suppress the click that follows
-  const rowRef = useRef<HTMLDivElement>(null);
-
-  // Reset local drag offset whenever parent closes this row.
-  useEffect(() => {
-    if (!revealed) setDragOffset(0);
-  }, [revealed]);
-
-  // Close when the user taps elsewhere in the document.
-  useEffect(() => {
-    if (!revealed) return;
-    function onDocPointerDown(e: Event) {
-      if (rowRef.current?.contains(e.target as Node)) return;
-      setRevealedId(null);
-    }
-    document.addEventListener("pointerdown", onDocPointerDown);
-    return () => document.removeEventListener("pointerdown", onDocPointerDown);
-  }, [revealed, setRevealedId]);
-
-  function handlePointerDown(e: PointerEvent<HTMLDivElement>) {
-    // Ignore non-primary buttons (right-click etc.) so we don't steal them.
-    if (e.button !== undefined && e.button !== 0) return;
-    startX.current = e.clientX;
-    startY.current = e.clientY;
-    axis.current = null;
-    baseOffset.current = revealed ? -REVEAL_WIDTH : 0;
-    movedEnough.current = false;
-  }
-
-  function handlePointerMove(e: PointerEvent<HTMLDivElement>) {
-    if (e.pointerType === "mouse" && e.buttons === 0) return;   // not dragging
-    const dx = e.clientX - startX.current;
-    const dy = e.clientY - startY.current;
-
-    if (axis.current === null) {
-      if (Math.abs(dx) < AXIS_LOCK_THRESHOLD && Math.abs(dy) < AXIS_LOCK_THRESHOLD) return;
-      axis.current = Math.abs(dx) > Math.abs(dy) ? "x" : "y";
-      if (axis.current === "x") {
-        try { (e.currentTarget as Element).setPointerCapture(e.pointerId); } catch { /* unsupported */ }
-      }
-    }
-    if (axis.current !== "x") return;
-
-    movedEnough.current = true;
-    if (!dragging) setDragging(true);
-    // Clamp: can swipe left to reveal fully, a bit of rubber-band on the right.
-    let next = baseOffset.current + dx;
-    if (next > 0) next = next / 4;
-    if (next < -REVEAL_WIDTH) next = -REVEAL_WIDTH + (next + REVEAL_WIDTH) / 4;
-    setDragOffset(next);
-  }
-
-  function handlePointerUp() {
-    if (axis.current !== "x") {
-      setDragging(false);
-      return;
-    }
-    axis.current = null;
-    setDragging(false);
-
-    const finalOffset = dragOffset;
-    const openNow = finalOffset <= -OPEN_THRESHOLD;
-    if (openNow) {
-      setDragOffset(-REVEAL_WIDTH);
-      setRevealedId(id);
-    } else {
-      setDragOffset(0);
-      if (revealed) setRevealedId(null);
-    }
-  }
-
-  function handleClickCapture(e: React.MouseEvent) {
-    // If the gesture translated the row, treat it as a swipe — not a click.
-    // Also absorb the click that re-hides a revealed row.
-    if (movedEnough.current) {
-      movedEnough.current = false;
-      e.stopPropagation();
-      e.preventDefault();
-      return;
-    }
-    if (revealed) {
-      e.stopPropagation();
-      e.preventDefault();
-      setRevealedId(null);
-    }
-  }
-
-  const currentOffset = dragOffset !== 0 ? dragOffset : (revealed ? -REVEAL_WIDTH : 0);
-
-  return (
-    <div ref={rowRef} className="swipe-row">
-      <button
-        type="button"
-        className="swipe-row-action"
-        style={{ width: REVEAL_WIDTH }}
-        onClick={(e) => { e.stopPropagation(); if (window.confirm(confirmMessage)) onDelete(); }}
-        tabIndex={revealed ? 0 : -1}
-        aria-hidden={!revealed}
-        aria-label={actionLabel}
-      >
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-          <polyline points="3 6 5 6 21 6" />
-          <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
-          <path d="M10 11v6M14 11v6" />
-          <path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />
-        </svg>
-        <span className="swipe-row-action-label">{actionLabel}</span>
-      </button>
-      <div
-        className={`swipe-row-content ${dragging ? "swipe-row-content-dragging" : ""}`}
-        style={{ transform: `translateX(${currentOffset}px)` }}
-        onPointerDown={handlePointerDown}
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
-        onPointerCancel={handlePointerUp}
-        onClickCapture={handleClickCapture}
-        onClick={onClick}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}

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

@@ -1,40 +0,0 @@
-import { useNavigate, useLocation, useParams } from "react-router-dom";
-import { confirmLeaveDraft } from "../draftGuard";
-
-export default function TabBar() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { hostId } = useParams<{ hostId: string }>();
-  const isTasks = location.pathname.endsWith("/tasks");
-  const isSessions = !isTasks;
-
-  function go(suffix: string) {
-    if (!confirmLeaveDraft()) return;
-    if (!hostId) return;
-    navigate(`/hosts/${encodeURIComponent(hostId)}${suffix}`);
-  }
-
-  return (
-    <>
-      <button
-        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">
-          <path d="M2 8H4.5L6 4L8 12L10 6L11.5 8H14" />
-        </svg>
-        Sessions
-      </button>
-      <button
-        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">
-          <rect x="2" y="2" width="12" height="12" rx="2" />
-          <path d="M5.5 8L7 9.5L10.5 6" />
-        </svg>
-        Tasks
-      </button>
-    </>
-  );
-}