fix: handling of render in background optimized for UI

src/main/ipc/blogHandlers.ts

@@ -125,20 +125,8 @@ export function registerBlogHandlers(safeHandle: SafeHandle): void {
       };
     };
 
-    const coreResult = await taskManager.runTask({
-      id: `site-render-core-${taskTimestamp}`,
-      name: 'Render Site Core',
-      groupId: taskGroupId,
-      groupName: taskGroupName,
-      execute: async (onProgress) => {
-        return blogGenerationEngine.generate({
-          ...baseOptions,
-          sections: ['core'],
-        }, (progress, message) => onProgress(progress, message || ''));
-      },
-    });
-
-    const [singleResult, categoryResult, tagResult, dateResult] = await Promise.all([
+    const [coreResult, singleResult, categoryResult, tagResult, dateResult] = await Promise.all([
+      runSectionTask('core', 'Render Site Core', 'site-render-core'),
       runSectionTask('single', 'Render Single Posts', 'site-render-single'),
       runSectionTask('category', 'Render Category Archives', 'site-render-category'),
       runSectionTask('tag', 'Render Tag Archives', 'site-render-tag'),

src/renderer/components/Panel/Panel.css

@@ -115,6 +115,12 @@
   font-weight: 600;
 }
 
+.task-group-meta {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+}
+
 .task-item {
   display: flex;
   align-items: center;

src/renderer/components/Panel/Panel.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useAppStore } from '../../store';
 import type { TaskProgress } from '../../../main/shared/electronApi';
+import { buildTaskEntries, summarizeTaskGroup } from '../../utils/taskGrouping';
 import { openEntityTab } from '../../navigation/tabPolicy';
 import { useI18n } from '../../i18n';
 import './Panel.css';
@@ -36,72 +37,6 @@ function toRelativePath(absolutePath: string, projectPath: string): string {
   return normalizedAbsolute;
 }
 
-interface GroupedTaskEntry {
-  kind: 'group';
-  groupId: string;
-  groupName: string;
-  tasks: TaskProgress[];
-}
-
-interface SingleTaskEntry {
-  kind: 'single';
-  task: TaskProgress;
-}
-
-type TaskEntry = GroupedTaskEntry | SingleTaskEntry;
-
-function buildTaskEntries(tasks: TaskProgress[]): TaskEntry[] {
-  const groupMap = new Map<string, { groupName: string; tasks: TaskProgress[]; firstIndex: number }>();
-  const singles: Array<{ task: TaskProgress; index: number }> = [];
-
-  tasks.forEach((task, index) => {
-    if (!task.groupId) {
-      singles.push({ task, index });
-      return;
-    }
-
-    const existing = groupMap.get(task.groupId);
-    if (existing) {
-      existing.tasks.push(task);
-      return;
-    }
-
-    groupMap.set(task.groupId, {
-      groupName: task.groupName || task.groupId,
-      tasks: [task],
-      firstIndex: index,
-    });
-  });
-
-  const entries: Array<{ entry: TaskEntry; index: number }> = [];
-
-  for (const single of singles) {
-    entries.push({
-      index: single.index,
-      entry: {
-        kind: 'single',
-        task: single.task,
-      },
-    });
-  }
-
-  for (const [groupId, group] of groupMap.entries()) {
-    entries.push({
-      index: group.firstIndex,
-      entry: {
-        kind: 'group',
-        groupId,
-        groupName: group.groupName,
-        tasks: group.tasks,
-      },
-    });
-  }
-
-  return entries
-    .sort((a, b) => a.index - b.index)
-    .map((entry) => entry.entry);
-}
-
 export const Panel: React.FC = () => {
   const { t, language } = useI18n();
   const {
@@ -415,6 +350,16 @@ export const Panel: React.FC = () => {
                   return renderTaskRow(entry.task);
                 }
 
+                const summary = summarizeTaskGroup(entry.tasks);
+                const breakdownParts: string[] = [];
+                if (summary.running > 0) {
+                  breakdownParts.push(`${summary.running} ${t('common.running')}`);
+                }
+                if (summary.pending > 0) {
+                  breakdownParts.push(`${summary.pending} ${t('common.pending')}`);
+                }
+                const breakdownSuffix = breakdownParts.length > 0 ? ` · ${breakdownParts.join(' · ')}` : '';
+                const groupMetaText = `${summary.progressPercent}%${breakdownSuffix}`;
                 const expanded = !collapsedTaskGroups.has(entry.groupId);
                 return (
                   <div key={entry.groupId} className="task-group-row">
@@ -423,10 +368,11 @@ export const Panel: React.FC = () => {
                       className="task-group-toggle"
                       onClick={() => toggleTaskGroup(entry.groupId)}
                       aria-expanded={expanded}
-                      aria-label={`${entry.groupName} (${entry.tasks.length})`}
+                      aria-label={`${entry.groupName} (${entry.tasks.length}, ${groupMetaText})`}
                     >
                       <span className="task-group-chevron">{expanded ? '▾' : '▸'}</span>
                       <span className="task-group-title">{entry.groupName} ({entry.tasks.length})</span>
+                      <span className="task-group-meta">{groupMetaText}</span>
                     </button>
                     {expanded && entry.tasks.map((task) => renderTaskRow(task, true))}
                   </div>

src/renderer/components/TaskPopup/TaskPopup.css

@@ -139,6 +139,12 @@
   font-weight: 600;
 }
 
+.task-group-meta {
+  margin-left: auto;
+  font-size: 11px;
+  color: var(--vscode-descriptionForeground);
+}
+
 .task-group-child {
   padding-left: 28px;
 }

src/renderer/components/TaskPopup/TaskPopup.tsx

@@ -1,75 +1,10 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useAppStore } from '../../store';
 import type { TaskProgress } from '../../../main/shared/electronApi';
+import { buildTaskEntries, summarizeTaskGroup, type TaskEntry } from '../../utils/taskGrouping';
 import { useI18n } from '../../i18n';
 import './TaskPopup.css';
 
-interface GroupedTaskEntry {
-  kind: 'group';
-  groupId: string;
-  groupName: string;
-  tasks: TaskProgress[];
-}
-
-interface SingleTaskEntry {
-  kind: 'single';
-  task: TaskProgress;
-}
-
-type TaskEntry = GroupedTaskEntry | SingleTaskEntry;
-
-function buildTaskEntries(tasks: TaskProgress[]): TaskEntry[] {
-  const groupMap = new Map<string, { groupName: string; tasks: TaskProgress[]; firstIndex: number }>();
-  const singles: Array<{ task: TaskProgress; index: number }> = [];
-
-  tasks.forEach((task, index) => {
-    if (!task.groupId) {
-      singles.push({ task, index });
-      return;
-    }
-
-    const existing = groupMap.get(task.groupId);
-    if (existing) {
-      existing.tasks.push(task);
-      return;
-    }
-
-    groupMap.set(task.groupId, {
-      groupName: task.groupName || task.groupId,
-      tasks: [task],
-      firstIndex: index,
-    });
-  });
-
-  const groupedEntries: Array<{ entry: TaskEntry; index: number }> = [];
-
-  for (const single of singles) {
-    groupedEntries.push({
-      index: single.index,
-      entry: {
-        kind: 'single',
-        task: single.task,
-      },
-    });
-  }
-
-  for (const [groupId, group] of groupMap.entries()) {
-    groupedEntries.push({
-      index: group.firstIndex,
-      entry: {
-        kind: 'group',
-        groupId,
-        groupName: group.groupName,
-        tasks: group.tasks,
-      },
-    });
-  }
-
-  return groupedEntries
-    .sort((a, b) => a.index - b.index)
-    .map((item) => item.entry);
-}
-
 export const TaskPopup: React.FC = () => {
   const { t } = useI18n();
   const { tasks } = useAppStore();
@@ -192,6 +127,16 @@ export const TaskPopup: React.FC = () => {
       return renderTaskItem(entry.task);
     }
 
+    const summary = summarizeTaskGroup(entry.tasks);
+    const breakdownParts: string[] = [];
+    if (summary.running > 0) {
+      breakdownParts.push(`${summary.running} ${t('common.running')}`);
+    }
+    if (summary.pending > 0) {
+      breakdownParts.push(`${summary.pending} ${t('common.pending')}`);
+    }
+    const breakdownSuffix = breakdownParts.length > 0 ? ` · ${breakdownParts.join(' · ')}` : '';
+    const groupMetaText = `${summary.progressPercent}%${breakdownSuffix}`;
     const isExpanded = !collapsedGroups.has(entry.groupId);
     return (
       <div key={entry.groupId} className="task-group">
@@ -199,10 +144,11 @@ export const TaskPopup: React.FC = () => {
           className="task-group-toggle"
           onClick={() => toggleGroup(entry.groupId)}
           aria-expanded={isExpanded}
-          aria-label={`${entry.groupName} (${entry.tasks.length})`}
+          aria-label={`${entry.groupName} (${entry.tasks.length}, ${groupMetaText})`}
         >
           <span className="task-group-chevron">{isExpanded ? '▾' : '▸'}</span>
           <span className="task-group-title">{entry.groupName} ({entry.tasks.length})</span>
+          <span className="task-group-meta">{groupMetaText}</span>
         </button>
         {isExpanded && entry.tasks.map((task) => renderTaskItem(task, 'task-group-child'))}
       </div>

src/renderer/utils/taskGrouping.ts

@@ -0,0 +1,138 @@
+import type { TaskProgress } from '../../main/shared/electronApi';
+
+export interface GroupedTaskEntry {
+  kind: 'group';
+  groupId: string;
+  groupName: string;
+  tasks: TaskProgress[];
+}
+
+export interface SingleTaskEntry {
+  kind: 'single';
+  task: TaskProgress;
+}
+
+export type TaskEntry = GroupedTaskEntry | SingleTaskEntry;
+
+export interface TaskGroupSummary {
+  total: number;
+  running: number;
+  pending: number;
+  completed: number;
+  failed: number;
+  cancelled: number;
+  progressPercent: number;
+}
+
+function clampProgress(value: number): number {
+  if (Number.isNaN(value)) {
+    return 0;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 100) {
+    return 100;
+  }
+  return value;
+}
+
+function getProgressContribution(task: TaskProgress): number {
+  switch (task.status) {
+    case 'completed':
+    case 'failed':
+    case 'cancelled':
+      return 100;
+    case 'pending':
+      return 0;
+    case 'running':
+    default:
+      return clampProgress(task.progress);
+  }
+}
+
+export function summarizeTaskGroup(tasks: TaskProgress[]): TaskGroupSummary {
+  const summary: TaskGroupSummary = {
+    total: tasks.length,
+    running: 0,
+    pending: 0,
+    completed: 0,
+    failed: 0,
+    cancelled: 0,
+    progressPercent: 0,
+  };
+
+  if (tasks.length === 0) {
+    return summary;
+  }
+
+  let progressTotal = 0;
+  for (const task of tasks) {
+    if (task.status === 'running') {
+      summary.running += 1;
+    } else if (task.status === 'pending') {
+      summary.pending += 1;
+    } else if (task.status === 'completed') {
+      summary.completed += 1;
+    } else if (task.status === 'failed') {
+      summary.failed += 1;
+    } else if (task.status === 'cancelled') {
+      summary.cancelled += 1;
+    }
+
+    progressTotal += getProgressContribution(task);
+  }
+
+  summary.progressPercent = Math.round(progressTotal / tasks.length);
+  return summary;
+}
+
+export function buildTaskEntries(tasks: TaskProgress[]): TaskEntry[] {
+  const groupMap = new Map<string, { groupName: string; tasks: TaskProgress[]; firstIndex: number }>();
+  const singles: Array<{ task: TaskProgress; index: number }> = [];
+
+  tasks.forEach((task, index) => {
+    if (!task.groupId) {
+      singles.push({ task, index });
+      return;
+    }
+
+    const existing = groupMap.get(task.groupId);
+    if (existing) {
+      existing.tasks.push(task);
+      return;
+    }
+
+    groupMap.set(task.groupId, {
+      groupName: task.groupName || task.groupId,
+      tasks: [task],
+      firstIndex: index,
+    });
+  });
+
+  const entries: Array<{ entry: TaskEntry; index: number }> = [];
+
+  for (const single of singles) {
+    entries.push({
+      index: single.index,
+      entry: {
+        kind: 'single',
+        task: single.task,
+      },
+    });
+  }
+
+  for (const [groupId, group] of groupMap.entries()) {
+    entries.push({
+      index: group.firstIndex,
+      entry: {
+        kind: 'group',
+        groupId,
+        groupName: group.groupName,
+        tasks: group.tasks,
+      },
+    });
+  }
+
+  return entries.sort((a, b) => a.index - b.index).map((entry) => entry.entry);
+}