Update RequestQueueProgress to remain visible when errors occur and add corresponding tests

src/components/global/RequestQueueProgress.vue

@@ -24,7 +24,10 @@ let pingTimer = null;
 
 const hasOutstandingRequests = computed(() => requestQueueState.pending + requestQueueState.active > 0);
 const processedRequests = computed(() => requestQueueState.batchCompleted + requestQueueState.batchFailed);
-const shouldRenderForBatch = computed(() => requestQueueState.batchTotal >= REQUEST_QUEUE_CONFIG.progress.minBatchSizeToShow);
+const hasStoredErrors = computed(() => (requestQueueState.errorRequests || []).length > 0);
+const shouldRenderForBatch = computed(() =>
+  hasStoredErrors.value || requestQueueState.batchTotal >= REQUEST_QUEUE_CONFIG.progress.minBatchSizeToShow
+);
 const activeRequests = computed(() => requestQueueState.activeRequests || []);
 const recentRequests = computed(() => requestQueueState.recentRequests || []);
 const errorRequests = computed(() => requestQueueState.errorRequests || []);
@@ -128,14 +131,14 @@ const toggleExpanded = () => {
   isExpanded.value = !isExpanded.value;
 };
 
-watch([hasOutstandingRequests, shouldRenderForBatch], ([hasOutstanding, shouldRender]) => {
+watch([hasOutstandingRequests, shouldRenderForBatch, hasStoredErrors], ([hasOutstanding, shouldRender, hasErrors]) => {
   if (!shouldRender) {
     clearHideTimer();
     isVisible.value = false;
     return;
   }
 
-  if (hasOutstanding) {
+  if (hasOutstanding || hasErrors) {
     clearHideTimer();
     isVisible.value = true;
     return;

tests/unit/request-queue-progress.spec.js

@@ -169,4 +169,39 @@ describe("RequestQueueProgress", () => {
     expect(details.text()).toContain("Request");
     expect(details.text()).toContain("Response");
   });
+
+  it("stays visible after errors occur", async () => {
+    __configureRequestQueueForTests({ errorHistoryLimit: 2 });
+    const wrapper = mount(RequestQueueProgress);
+
+    const failed = enqueueRequest(
+      async () => {
+        throw {
+          message: "Failure should keep panel visible",
+          response: { status: 500, data: { detail: "boom" } }
+        };
+      },
+      {
+        method: "DELETE",
+        url: "/error-visible",
+        requestData: { data: { id: 123 } }
+      }
+    ).catch((error) => error);
+
+    await failed;
+    await flushManyMicrotasks();
+
+    expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(true);
+
+    vi.advanceTimersByTime(30_000);
+    await flushManyMicrotasks();
+
+    expect(wrapper.find("[data-testid='request-queue-progress']").exists()).toBe(true);
+    await wrapper.get("[data-testid='request-queue-progress-toggle']").trigger("click");
+    await flushManyMicrotasks();
+
+    const details = wrapper.get("[data-testid='request-queue-progress-details']");
+    expect(details.text()).toContain("Errors");
+    expect(details.text()).toContain("/error-visible");
+  });
 });