Voor remote client agent

webui/html/app.js

@@ -116,13 +116,19 @@ let settingsState = {
 };
 let headerTaskState = {
   activeItems: [],
+  visibleItems: [],
+  recentItems: [],
   popoverOpen: false,
   pollTimer: null,
   lastRenderKey: "",
+  knownStatuses: {},
+  recentExpiryMs: 4000,
+  paneRefreshPromise: null,
 };
 // The header chip/popover reflects user-visible file operations, not every task-backed file action.
 const ACTIVE_OPERATION_OPERATIONS = new Set(["copy", "move", "duplicate", "delete"]);
 const ACTIVE_TASK_STATUSES = new Set(["queued", "running", "cancelling"]);
+const TERMINAL_OPERATION_STATUSES = new Set(["completed", "cancelled", "failed"]);
 const VALID_THEME_FAMILIES = [
   "default",
   "macos-soft",
@@ -3879,6 +3885,75 @@ function activeTasksFromItems(items) {
   return Array.isArray(items) ? items.filter((task) => isActiveTask(task)) : [];
 }
 
+function isTerminalOperationTask(task) {
+  return Boolean(task) && ACTIVE_OPERATION_OPERATIONS.has(task.operation) && TERMINAL_OPERATION_STATUSES.has(task.status);
+}
+
+function statusBadgeLabel(task) {
+  switch (task?.status) {
+    case "queued":
+      return "Queued";
+    case "running":
+      return "Running";
+    case "cancelling":
+      return "Cancelling";
+    case "completed":
+      return "Completed";
+    case "cancelled":
+      return "Cancelled";
+    case "failed":
+      return "Failed";
+    default:
+      return formatTaskStatusLabel(task);
+  }
+}
+
+function terminalOperationChipLabel(items) {
+  const count = Array.isArray(items) ? items.length : 0;
+  if (count <= 0) {
+    return "";
+  }
+  return `${count} recent operation${count === 1 ? "" : "s"}`;
+}
+
+function visibleOperationSortKey(task) {
+  const statusOrder = {
+    running: 0,
+    cancelling: 1,
+    queued: 2,
+    completed: 3,
+    cancelled: 4,
+    failed: 5,
+  };
+  return statusOrder[task?.status] ?? 9;
+}
+
+function sortVisibleOperations(items) {
+  return [...items].sort((left, right) => {
+    const statusDelta = visibleOperationSortKey(left) - visibleOperationSortKey(right);
+    if (statusDelta !== 0) {
+      return statusDelta;
+    }
+    const leftTime = left.finished_at || left.created_at || "";
+    const rightTime = right.finished_at || right.created_at || "";
+    return rightTime.localeCompare(leftTime);
+  });
+}
+
+async function refreshOperationPanes() {
+  if (headerTaskState.paneRefreshPromise) {
+    return headerTaskState.paneRefreshPromise;
+  }
+  headerTaskState.paneRefreshPromise = Promise.all([loadBrowsePane("left"), loadBrowsePane("right")])
+    .catch((err) => {
+      setError("actions-error", `Refresh panes: ${err.message}`);
+    })
+    .finally(() => {
+      headerTaskState.paneRefreshPromise = null;
+    });
+  return headerTaskState.paneRefreshPromise;
+}
+
 function taskIsCancellable(task) {
   return Boolean(task) && ACTIVE_OPERATION_OPERATIONS.has(task.operation) && ["queued", "running"].includes(task.status);
 }
@@ -3979,7 +4054,7 @@ function headerTaskRenderKey(items) {
 }
 
 function shouldPollHeaderTasks() {
-  return headerTaskState.popoverOpen || headerTaskState.activeItems.length > 0;
+  return headerTaskState.popoverOpen || headerTaskState.activeItems.length > 0 || headerTaskState.recentItems.length > 0;
 }
 
 function stopHeaderTaskPolling() {
@@ -4002,7 +4077,7 @@ function scheduleHeaderTaskPolling() {
 
 function setHeaderTaskPopoverOpen(nextOpen) {
   const elements = headerTaskElements();
-  const open = Boolean(nextOpen) && headerTaskState.activeItems.length > 0;
+  const open = Boolean(nextOpen) && headerTaskState.visibleItems.length > 0;
   headerTaskState.popoverOpen = open;
   if (elements.chipButton) {
     elements.chipButton.setAttribute("aria-expanded", open ? "true" : "false");
@@ -4035,17 +4110,23 @@ function renderHeaderTaskPopover(items) {
   for (const task of items) {
     const line = formatTaskLine(task);
     const row = document.createElement("div");
-    row.className = "header-task-item";
+    row.className = `header-task-item status-${task.status}`;
+    const heading = document.createElement("div");
+    heading.className = "header-task-item-heading";
     const title = document.createElement("div");
     title.className = "header-task-item-title";
-    title.textContent = line.title;
+    title.textContent = formatTaskOperationLabel(task);
+    const badge = document.createElement("span");
+    badge.className = `header-task-status-badge status-${task.status}`;
+    badge.textContent = statusBadgeLabel(task);
+    heading.append(title, badge);
     const path = document.createElement("div");
     path.className = "header-task-item-path";
     path.textContent = line.path;
     const meta = document.createElement("div");
     meta.className = "header-task-item-meta";
     meta.textContent = line.meta;
-    row.append(title, path, meta);
+    row.append(heading, path, meta);
     const progressText = taskProgressText(task);
     if (progressText) {
       const progress = document.createElement("div");
@@ -4102,27 +4183,71 @@ function renderHeaderTaskChip(items) {
   if (!elements.container || !elements.chipLabel) {
     return;
   }
-  const hasActiveTasks = Array.isArray(items) && items.length > 0;
-  elements.container.classList.toggle("hidden", !hasActiveTasks);
-  elements.chipLabel.textContent = activeTaskChipLabel(items);
-  if (!hasActiveTasks) {
+  const activeItems = Array.isArray(items) ? items : [];
+  const recentItems = Array.isArray(headerTaskState.recentItems) ? headerTaskState.recentItems : [];
+  const visibleItems = activeItems.length > 0 ? activeItems : recentItems;
+  const hasVisibleItems = visibleItems.length > 0;
+  elements.container.classList.toggle("hidden", !hasVisibleItems);
+  elements.chipLabel.textContent = activeItems.length > 0 ? activeTaskChipLabel(activeItems) : terminalOperationChipLabel(recentItems);
+  if (!hasVisibleItems) {
     headerTaskState.lastRenderKey = "";
     setHeaderTaskPopoverOpen(false);
     return;
   }
-  renderHeaderTaskPopover(items);
+  renderHeaderTaskPopover(visibleItems);
 }
 
 function updateHeaderTaskState(taskItems) {
-  headerTaskState.activeItems = activeTasksFromItems(taskItems);
+  const items = Array.isArray(taskItems) ? taskItems : [];
+  headerTaskState.activeItems = activeTasksFromItems(items);
+  headerTaskState.visibleItems = sortVisibleOperations([...headerTaskState.activeItems, ...headerTaskState.recentItems]);
   renderHeaderTaskChip(headerTaskState.activeItems);
   scheduleHeaderTaskPolling();
 }
 
 function applyTaskSnapshot(taskItems) {
   const items = Array.isArray(taskItems) ? taskItems : [];
+  const now = Date.now();
+  const activeById = new Set();
+  const nextKnownStatuses = {};
+  const nextRecentItems = [];
+  let shouldRefreshPanes = false;
+
+  for (const task of items) {
+    if (!task?.id) {
+      continue;
+    }
+    nextKnownStatuses[task.id] = task.status || "";
+    const previousStatus = headerTaskState.knownStatuses[task.id] || "";
+    if (isActiveTask(task)) {
+      activeById.add(task.id);
+    }
+    if (isTerminalOperationTask(task)) {
+      if (previousStatus && !TERMINAL_OPERATION_STATUSES.has(previousStatus)) {
+        shouldRefreshPanes = true;
+        nextRecentItems.push({ ...task, _recent_until: now + headerTaskState.recentExpiryMs });
+      }
+    }
+  }
+
+  for (const recentTask of headerTaskState.recentItems) {
+    if (!recentTask?.id || activeById.has(recentTask.id)) {
+      continue;
+    }
+    if ((recentTask._recent_until || 0) > now) {
+      nextRecentItems.push(recentTask);
+    }
+  }
+
+  headerTaskState.recentItems = sortVisibleOperations(
+    nextRecentItems.filter((task, index, collection) => collection.findIndex((entry) => entry.id === task.id) === index)
+  );
+  headerTaskState.knownStatuses = nextKnownStatuses;
   state.lastTaskCount = items.length;
   updateHeaderTaskState(items);
+  if (shouldRefreshPanes) {
+    void refreshOperationPanes();
+  }
   return items;
 }