feat: feedback verbetering 02

webui/html/app.js

@@ -3895,8 +3895,78 @@ async function cancelTaskRequest(taskId) {
   return apiRequest("POST", `/api/tasks/${encodeURIComponent(taskId)}/cancel`);
 }
 
-function activeTaskChipLabel(count) {
-  return `${count} active task${count === 1 ? "" : "s"}`;
+function formatTaskOperationLabel(task) {
+  const operation = String(task?.operation || "");
+  if (!operation) {
+    return "Task";
+  }
+  return operation.charAt(0).toUpperCase() + operation.slice(1);
+}
+
+function hasMeaningfulItemProgress(task) {
+  return typeof task?.done_items === "number" && typeof task?.total_items === "number" && task.total_items > 0;
+}
+
+function canShowChipItemProgress(task) {
+  if (!hasMeaningfulItemProgress(task)) {
+    return false;
+  }
+  return task.operation === "copy" || task.operation === "duplicate";
+}
+
+function compactTaskCurrentItem(task) {
+  if (!task?.current_item) {
+    return "";
+  }
+  const value = String(task.current_item).replace(/\\/g, "/");
+  if (value.length <= 44) {
+    return value;
+  }
+  const parts = value.split("/").filter(Boolean);
+  if (parts.length >= 2) {
+    const shortened = `.../${parts.slice(-2).join("/")}`;
+    if (shortened.length <= 44) {
+      return shortened;
+    }
+  }
+  return `...${value.slice(-41)}`;
+}
+
+function activeTaskChipLabel(items) {
+  const count = Array.isArray(items) ? items.length : 0;
+  if (count !== 1) {
+    return `${count} active task${count === 1 ? "" : "s"}`;
+  }
+  const task = items[0];
+  const action = formatTaskOperationLabel(task);
+  if (task.status === "cancelling") {
+    return `${action} cancelling`;
+  }
+  if (canShowChipItemProgress(task)) {
+    return `${action} ${task.done_items}/${task.total_items}`;
+  }
+  if (task.status === "queued") {
+    return `${action} queued`;
+  }
+  return `${action} running`;
+}
+
+function taskProgressText(task) {
+  if (!hasMeaningfulItemProgress(task)) {
+    return "";
+  }
+  return `${task.done_items}/${task.total_items}`;
+}
+
+function taskProgressSubtext(task) {
+  if (task?.status === "cancelling") {
+    return "Stopping after current item...";
+  }
+  const progress = taskProgressText(task);
+  if (progress) {
+    return `${progress} items processed`;
+  }
+  return "";
 }
 
 function headerTaskRenderKey(items) {
@@ -3984,6 +4054,28 @@ function renderHeaderTaskPopover(items) {
     meta.className = "header-task-item-meta";
     meta.textContent = line.meta;
     row.append(title, path, meta);
+    const progressText = taskProgressText(task);
+    if (progressText) {
+      const progress = document.createElement("div");
+      progress.className = "header-task-item-progress";
+      progress.textContent = progressText;
+      row.append(progress);
+    }
+    const currentItem = compactTaskCurrentItem(task);
+    if (currentItem) {
+      const current = document.createElement("div");
+      current.className = "header-task-item-current";
+      current.textContent = currentItem;
+      current.title = String(task.current_item);
+      row.append(current);
+    }
+    const subtext = taskProgressSubtext(task);
+    if (subtext) {
+      const note = document.createElement("div");
+      note.className = "header-task-item-subtext";
+      note.textContent = subtext;
+      row.append(note);
+    }
     if (taskIsCancellable(task) || task.status === "cancelling") {
       const actions = document.createElement("div");
       actions.className = "header-task-item-actions";
@@ -4020,7 +4112,7 @@ function renderHeaderTaskChip(items) {
   }
   const hasActiveTasks = Array.isArray(items) && items.length > 0;
   elements.container.classList.toggle("hidden", !hasActiveTasks);
-  elements.chipLabel.textContent = activeTaskChipLabel(items.length);
+  elements.chipLabel.textContent = activeTaskChipLabel(items);
   if (!hasActiveTasks) {
     headerTaskState.lastRenderKey = "";
     setHeaderTaskPopoverOpen(false);

webui/html/base.css

@@ -157,6 +157,27 @@ body {
   word-break: break-word;
 }
 
+.header-task-item-progress {
+  margin-top: 5px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+}
+
+.header-task-item-current,
+.header-task-item-subtext {
+  margin-top: 4px;
+  font-size: 12px;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-task-item-current {
+  color: var(--color-text-primary);
+}
+
 .header-task-item-actions {
   margin-top: 8px;
   display: flex;