Voor remote client agent

2026-03-25 18:21:54 +01:00
parent 9537a29de3
commit fc4ec39646
14 changed files with 1892 additions and 14 deletions
@@ -259,13 +259,23 @@ class UiSmokeGoldenTest(unittest.TestCase):
                self._extract_js_function(app_js, "formatTaskLine"),
                self._extract_js_function(app_js, "isActiveTask"),
                self._extract_js_function(app_js, "activeTasksFromItems"),
+                self._extract_js_function(app_js, "isTerminalOperationTask"),
+                self._extract_js_function(app_js, "statusBadgeLabel"),
+                self._extract_js_function(app_js, "terminalOperationChipLabel"),
+                self._extract_js_function(app_js, "visibleOperationSortKey"),
+                self._extract_js_function(app_js, "sortVisibleOperations"),
                self._extract_js_function(app_js, "taskIsCancellable"),
                self._extract_js_function(app_js, "cancelTaskRequest"),
                self._extract_js_function(app_js, "formatTaskOperationLabel"),
+                self._extract_js_function(app_js, "statusBadgeLabel"),
                self._extract_js_function(app_js, "hasMeaningfulItemProgress"),
                self._extract_js_function(app_js, "canShowChipItemProgress"),
                self._extract_js_function(app_js, "compactTaskCurrentItem"),
                self._extract_js_function(app_js, "activeTaskChipLabel"),
+                self._extract_js_function(app_js, "isTerminalOperationTask"),
+                self._extract_js_function(app_js, "terminalOperationChipLabel"),
+                self._extract_js_function(app_js, "visibleOperationSortKey"),
+                self._extract_js_function(app_js, "sortVisibleOperations"),
                self._extract_js_function(app_js, "taskProgressText"),
                self._extract_js_function(app_js, "taskProgressSubtext"),
                self._extract_js_function(app_js, "headerTaskRenderKey"),
@@ -360,16 +370,23 @@ class UiSmokeGoldenTest(unittest.TestCase):
            }}

            async function refreshTasksSnapshot() {{}}
+            async function loadBrowsePane() {{}}
            function setError() {{}}

            let headerTaskState = {{
              activeItems: [],
+              visibleItems: [],
+              recentItems: [],
              popoverOpen: false,
              pollTimer: null,
              lastRenderKey: "",
+              knownStatuses: {{}},
+              recentExpiryMs: 4000,
+              paneRefreshPromise: null,
            }};
            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"]);

            {functions}

@@ -412,8 +429,10 @@ class UiSmokeGoldenTest(unittest.TestCase):
            const deleteRow = elements["header-task-popover-list"].children[3];
            const deleteProgress = deleteRow.children[3];
            const deleteCurrent = deleteRow.children[4];
+            const deleteBadge = deleteRow.children[0].children[1];
            assert(deleteProgress.textContent === "2/5", "Delete operations should show done/total progress when available");
            assert(deleteCurrent.textContent === "folder/delete-me.txt", "Delete operations should show compact current item");
+            assert(deleteBadge.textContent === "Running", "Delete operations should expose a readable status badge");
            const cancellingRow = elements["header-task-popover-list"].children[4];
            const cancellingProgress = cancellingRow.children[3];
            const cancellingCurrent = cancellingRow.children[4];
@@ -485,10 +504,15 @@ class UiSmokeGoldenTest(unittest.TestCase):
                self._extract_js_function(app_js, "taskIsCancellable"),
                self._extract_js_function(app_js, "cancelTaskRequest"),
                self._extract_js_function(app_js, "formatTaskOperationLabel"),
+                self._extract_js_function(app_js, "statusBadgeLabel"),
                self._extract_js_function(app_js, "hasMeaningfulItemProgress"),
                self._extract_js_function(app_js, "canShowChipItemProgress"),
                self._extract_js_function(app_js, "compactTaskCurrentItem"),
                self._extract_js_function(app_js, "activeTaskChipLabel"),
+                self._extract_js_function(app_js, "isTerminalOperationTask"),
+                self._extract_js_function(app_js, "terminalOperationChipLabel"),
+                self._extract_js_function(app_js, "visibleOperationSortKey"),
+                self._extract_js_function(app_js, "sortVisibleOperations"),
                self._extract_js_function(app_js, "taskProgressText"),
                self._extract_js_function(app_js, "taskProgressSubtext"),
                self._extract_js_function(app_js, "headerTaskRenderKey"),
@@ -499,6 +523,7 @@ class UiSmokeGoldenTest(unittest.TestCase):
                self._extract_js_function(app_js, "renderHeaderTaskPopover"),
                self._extract_js_function(app_js, "renderHeaderTaskChip"),
                self._extract_js_function(app_js, "updateHeaderTaskState"),
+                self._extract_js_function(app_js, "refreshOperationPanes"),
                self._extract_js_function(app_js, "applyTaskSnapshot"),
            ]
        )
@@ -583,17 +608,25 @@ class UiSmokeGoldenTest(unittest.TestCase):
            }}

            async function refreshTasksSnapshot() {{}}
+            const paneRefreshCalls = [];
+            async function loadBrowsePane(pane) {{ paneRefreshCalls.push(pane); }}
            function setError() {{}}

            let state = {{ lastTaskCount: 0 }};
            let headerTaskState = {{
              activeItems: [],
+              visibleItems: [],
+              recentItems: [],
              popoverOpen: false,
              pollTimer: null,
              lastRenderKey: "",
+              knownStatuses: {{}},
+              recentExpiryMs: 4000,
+              paneRefreshPromise: null,
            }};
            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"]);

            {functions}

@@ -603,12 +636,16 @@ class UiSmokeGoldenTest(unittest.TestCase):
            assert(!elements["header-task-chip-container"].classList.contains("hidden"), "Running task should make chip visible");
            assert(elements["header-task-chip-label"].textContent === "Copy running", "Single active task should show compact task status");
            assert(headerTaskState.activeItems.length === 1, "Snapshot should store active task state");
+            assert(paneRefreshCalls.length === 0, "Running progress should not refresh panes");

            applyTaskSnapshot([
              {{ id: "copy-1", operation: "copy", status: "completed", source: "/src", destination: "/dst" }},
            ]);
-            assert(elements["header-task-chip-container"].classList.contains("hidden"), "Chip should hide when latest task snapshot has no active tasks");
+            assert(!elements["header-task-chip-container"].classList.contains("hidden"), "Terminal operations should remain briefly visible");
            assert(headerTaskState.activeItems.length === 0, "Active task state should be reset when tasks are completed");
+            assert(headerTaskState.recentItems.length === 1, "Completed operations should stay briefly visible as recent");
+            assert(elements["header-task-chip-label"].textContent === "1 recent operation", "Chip should surface a brief recent-operation state");
+            assert(paneRefreshCalls.length === 2, "Terminal operation should refresh both visible panes once");
            assert(state.lastTaskCount === 1, "Total task snapshot should still reflect fetched tasks list length");
            """
        )
@@ -961,6 +998,8 @@ class UiSmokeGoldenTest(unittest.TestCase):
        self.assertIn(".header-task-chip {", base_css)
        self.assertIn(".header-task-popover {", base_css)
        self.assertIn(".header-task-popover-list {", base_css)
+        self.assertIn(".header-task-item-heading {", base_css)
+        self.assertIn(".header-task-status-badge {", base_css)
        self.assertIn("width: min(1180px, calc(100vw - 32px));", base_css)
        self.assertIn(".settings-activity-grid {", base_css)
        self.assertIn("grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);", base_css)
@@ -1006,6 +1045,10 @@ class UiSmokeGoldenTest(unittest.TestCase):
        self.assertIn('function headerTaskElements()', app_js)
        self.assertIn('function isActiveTask(task)', app_js)
        self.assertIn('function activeTasksFromItems(items)', app_js)
+        self.assertIn('function isTerminalOperationTask(task)', app_js)
+        self.assertIn('function statusBadgeLabel(task)', app_js)
+        self.assertIn('function terminalOperationChipLabel(items)', app_js)
+        self.assertIn('function sortVisibleOperations(items)', app_js)
        self.assertIn('function taskIsCancellable(task)', app_js)
        self.assertIn('async function cancelTaskRequest(taskId)', app_js)
        self.assertIn('function formatTaskOperationLabel(task)', app_js)
@@ -1021,15 +1064,18 @@ class UiSmokeGoldenTest(unittest.TestCase):
        self.assertIn('function renderHeaderTaskPopover(items)', app_js)
        self.assertIn('function renderHeaderTaskChip(items)', app_js)
        self.assertIn('function updateHeaderTaskState(taskItems)', app_js)
+        self.assertIn('function refreshOperationPanes()', app_js)
        self.assertIn('function applyTaskSnapshot(taskItems)', app_js)
        self.assertIn('return `${count} active operation${count === 1 ? "" : "s"}`;', app_js)
+        self.assertIn('return `${count} recent operation${count === 1 ? "" : "s"}`;', app_js)
        self.assertIn('return task.operation === "copy" || task.operation === "duplicate" || task.operation === "delete";', app_js)
        self.assertIn('return `${action} ${task.done_items}/${task.total_items}`;', app_js)
        self.assertIn('return `${action} running`;', app_js)
        self.assertIn('return "Stopping after current item...";', app_js)
        self.assertIn('ACTIVE_OPERATION_OPERATIONS.has(task.operation)', app_js)
-        self.assertIn('headerTaskState.activeItems = activeTasksFromItems(taskItems);', app_js)
-        self.assertIn('const open = Boolean(nextOpen) && headerTaskState.activeItems.length > 0;', app_js)
+        self.assertIn('headerTaskState.activeItems = activeTasksFromItems(items);', app_js)
+        self.assertIn('headerTaskState.visibleItems = sortVisibleOperations([...headerTaskState.activeItems, ...headerTaskState.recentItems]);', app_js)
+        self.assertIn('const open = Boolean(nextOpen) && headerTaskState.visibleItems.length > 0;', app_js)
        self.assertIn('const headerTasks = headerTaskElements();', app_js)
        self.assertIn('headerTasks.chipButton.onclick = (event) => {', app_js)
        self.assertIn('headerTasks.logsButton.onclick = () => {', 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;
 }

@@ -143,11 +143,56 @@ body {
  padding: 10px 12px;
 }

+.header-task-item-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
 .header-task-item-title {
  font-size: 12px;
  font-weight: 700;
 }

+.header-task-status-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 999px;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 700;
+  white-space: nowrap;
+  border: 1px solid var(--color-border);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+}
+
+.header-task-status-badge.status-queued {
+  background: color-mix(in srgb, var(--color-surface-elevated) 72%, var(--color-accent) 28%);
+}
+
+.header-task-status-badge.status-running {
+  background: color-mix(in srgb, var(--color-surface-elevated) 60%, var(--color-accent) 40%);
+}
+
+.header-task-status-badge.status-cancelling {
+  background: color-mix(in srgb, var(--color-surface-elevated) 70%, var(--color-warning, #c08a00) 30%);
+}
+
+.header-task-status-badge.status-completed {
+  background: color-mix(in srgb, var(--color-surface-elevated) 72%, var(--color-success, #2f855a) 28%);
+}
+
+.header-task-status-badge.status-cancelled {
+  background: color-mix(in srgb, var(--color-surface-elevated) 78%, var(--color-text-muted) 22%);
+}
+
+.header-task-status-badge.status-failed {
+  background: color-mix(in srgb, var(--color-surface-elevated) 68%, var(--color-danger) 32%);
+  color: var(--color-danger-text, var(--color-text-primary));
+}
+
 .header-task-item-path,
 .header-task-item-meta,
 .header-task-item-empty {