feat(FN-3596): unify board/list task ordering, split TaskDetailModal test m

The merge introduces a major TaskDetailModal test refactor (splitting a 6.7K-line monolith into five focused suites), significant merger improvements including autostash race-rescue, deduplication, and advisory logging for destructive operations, a new TUI narrow-mode log-split feature for the dashb

Fusion-Task-Id: FN-3596
This commit is contained in:
Fusion
2026-05-06 18:31:40 -07:00
committed by gsxdsm
parent 921c588fdd
commit 705e5cc1d3
9 changed files with 248 additions and 133 deletions

View File

@@ -1,5 +1,6 @@
import type { Task, TaskDetail, Column as ColumnType, TaskCreateInput, TaskPriority } from "@fusion/core";
import type { Task, TaskDetail, Column as ColumnType, TaskCreateInput } from "@fusion/core";
import { COLUMNS, DEFAULT_COLUMN, isColumn } from "@fusion/core";
import { sortTasksForDisplayColumn } from "./taskSorting";
import { Column } from "./Column";
import type { ToastType } from "../hooks/useToast";
import { useState, useMemo, useEffect, useCallback, useRef } from "react";
@@ -53,92 +54,6 @@ interface BoardProps {
lastFetchTimeMs?: number;
}
const PRIORITY_RANK: Record<TaskPriority, number> = {
low: 0,
normal: 1,
high: 2,
urgent: 3,
};
function getTaskPriorityRank(priority: Task["priority"] | null | undefined): number {
if (!priority || !(priority in PRIORITY_RANK)) {
return PRIORITY_RANK.normal;
}
return PRIORITY_RANK[priority];
}
function compareTaskPriority(a: Task["priority"] | null | undefined, b: Task["priority"] | null | undefined): number {
return getTaskPriorityRank(b) - getTaskPriorityRank(a);
}
function compareTaskIdNumeric(a: string, b: string): number {
const aNum = Number.parseInt(a.slice(a.lastIndexOf("-") + 1), 10);
const bNum = Number.parseInt(b.slice(b.lastIndexOf("-") + 1), 10);
if (Number.isFinite(aNum) && Number.isFinite(bNum) && aNum !== bNum) {
return aNum - bNum;
}
return a.localeCompare(b);
}
function sortTasksByPriorityThenAgeAndId(tasks: Task[]): Task[] {
return [...tasks].sort((a, b) => {
const priorityCmp = compareTaskPriority(a.priority, b.priority);
if (priorityCmp !== 0) {
return priorityCmp;
}
if (a.createdAt !== b.createdAt) {
return a.createdAt.localeCompare(b.createdAt);
}
return compareTaskIdNumeric(a.id, b.id);
});
}
function getDoneSortTimestamp(task: Task): number {
const timestamp = task.columnMovedAt ?? task.updatedAt ?? task.createdAt;
const parsed = Date.parse(timestamp);
return Number.isFinite(parsed) ? parsed : 0;
}
function sortTasksForColumn(tasks: Task[], column: ColumnType): Task[] {
if (column === "todo") {
// Match scheduler pickup order: priority DESC, createdAt ASC, id ASC.
return sortTasksByPriorityThenAgeAndId(tasks);
}
return [...tasks].sort((a, b) => {
if (column === "done") {
const timestampCmp = getDoneSortTimestamp(b) - getDoneSortTimestamp(a);
if (timestampCmp !== 0) {
return timestampCmp;
}
// Deterministic tie-breaker when completion timestamps match.
return compareTaskIdNumeric(a.id, b.id);
}
// In the in-review column, merging tasks stay pinned above non-merging tasks.
if (column === "in-review") {
const aIsMerging = a.status === "merging" || a.status === "merging-pr" || a.status === "merging-fix";
const bIsMerging = b.status === "merging" || b.status === "merging-pr" || b.status === "merging-fix";
if (aIsMerging !== bIsMerging) {
return aIsMerging ? -1 : 1;
}
}
// Primary sort for non-done/non-todo columns: priority descending.
const priorityCmp = compareTaskPriority(a.priority, b.priority);
if (priorityCmp !== 0) {
return priorityCmp;
}
// Secondary sort: numeric task ID ascending (lower number first).
return compareTaskIdNumeric(a.id, b.id);
});
}
function areTaskArraysEqual(previous: Task[], next: Task[]): boolean {
if (previous.length !== next.length) return false;
@@ -207,7 +122,7 @@ export function Board({ tasks, projectId, maxConcurrent, onMoveTask, onPauseTask
const stableGrouped = {} as Record<ColumnType, Task[]>;
for (const column of COLUMNS) {
const sortedTasks = sortTasksForColumn(nextGrouped[column], column);
const sortedTasks = sortTasksForDisplayColumn(nextGrouped[column], column);
stableGrouped[column] = areTaskArraysEqual(previousGrouped[column], sortedTasks)
? previousGrouped[column]
: sortedTasks;

View File

@@ -3,6 +3,7 @@ import { useState, useCallback, useMemo, Fragment, useEffect, useRef } from "rea
import { ArrowUpDown, ArrowUp, ArrowDown, Link, Columns3, EyeOff, Eye, ChevronRight, Zap } from "lucide-react";
import type { Task, TaskDetail, Column, TaskCreateInput, MergeResult } from "@fusion/core";
import { COLUMN_LABELS, COLUMNS, DEFAULT_COLUMN, getErrorMessage, isColumn } from "@fusion/core";
import { sortTasksForDisplayColumn } from "./taskSorting";
import { batchUpdateTaskModels, fetchNodes, fetchTaskDetail } from "../api";
import { TaskDetailContent } from "./TaskDetailModal";
import type { ModelInfo, NodeInfo } from "../api";
@@ -27,7 +28,7 @@ const COLUMN_COLOR_MAP: Record<Column, string> = {
const ACTIVE_STATUSES = new Set(["planning", "researching", "executing", "finalizing", "merging", "merging-fix"]);
type SortField = "id" | "title" | "status" | "column";
type SortField = "title" | "status" | "column";
function getTaskStatusLabel(status: string): string {
if (status === "merging-fix") return "Merging fixes…";
@@ -250,8 +251,8 @@ export function ListView({
lastFetchTimeMs,
prAuthAvailable,
}: ListViewProps) {
const [sortField, setSortField] = useState<SortField>("id");
const [sortDirection, setSortDirection] = useState<SortDirection>("desc");
const [sortField, setSortField] = useState<SortField | null>(null);
const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
const [draggingTaskId, setDraggingTaskId] = useState<string | null>(null);
const [dragOverColumn, setDragOverColumn] = useState<Column | null>(null);
const [selectedColumn, setSelectedColumn] = useState<Column | null>(null);
@@ -454,10 +455,11 @@ export function ListView({
const handleSort = useCallback((field: SortField) => {
if (sortField === field) {
setSortDirection((prev) => (prev === "asc" ? "desc" : "asc"));
} else {
setSortField(field);
setSortDirection("asc");
return;
}
setSortField(field);
setSortDirection("asc");
}, [sortField]);
const handleColumnFilter = useCallback((column: Column) => {
@@ -502,38 +504,43 @@ export function ListView({
? filtered.filter((t) => t.column === selectedColumn)
: filtered;
const sorted = [...columnFiltered].sort((a, b) => {
let comparison = 0;
switch (sortField) {
case "id":
comparison = a.id.localeCompare(b.id);
break;
case "title":
comparison = (a.title || a.description).localeCompare(b.title || b.description);
break;
case "status":
comparison = (a.status || "").localeCompare(b.status || "");
break;
case "column":
comparison = a.column.localeCompare(b.column);
break;
}
return sortDirection === "asc" ? comparison : -comparison;
});
// Group by column while preserving sort order within each group
const groups: Record<Column, Task[]> = {
triage: [],
todo: [],
"in-progress": [],
"in-review": [],
done: [],
archived: []
archived: [],
};
sorted.forEach((task) => {
columnFiltered.forEach((task) => {
const column = isColumn(task.column) ? task.column : DEFAULT_COLUMN;
groups[column].push(task);
});
for (const column of COLUMNS) {
if (!sortField) {
groups[column] = sortTasksForDisplayColumn(groups[column], column);
continue;
}
groups[column] = [...groups[column]].sort((a, b) => {
let comparison = 0;
switch (sortField) {
case "title":
comparison = (a.title || a.description).localeCompare(b.title || b.description);
break;
case "status":
comparison = (a.status || "").localeCompare(b.status || "");
break;
case "column":
comparison = a.column.localeCompare(b.column);
break;
}
return sortDirection === "asc" ? comparison : -comparison;
});
}
return groups;
}, [tasks, searchQuery, sortField, sortDirection, hideDoneTasks, selectedColumn]);
@@ -933,7 +940,7 @@ export function ListView({
);
const getSortIcon = (field: SortField) => {
if (sortField !== field) return <ArrowUpDown size={14} className="sort-icon" />;
if (!sortField || sortField !== field) return <ArrowUpDown size={14} className="sort-icon" />;
return sortDirection === "asc" ? (
<ArrowUp size={14} className="sort-icon active" />
) : (

View File

@@ -311,7 +311,7 @@ describe("Board", () => {
expect(columnRenderCounts.done).toBeGreaterThanOrEqual(initialDoneRenders);
});
describe("sortTasksForColumn priority ordering", () => {
describe("column default ordering priority semantics", () => {
it("orders done tasks by most recent completion regardless of priority", () => {
const tasks: Task[] = [
createTask({
@@ -491,7 +491,7 @@ describe("Board", () => {
});
});
describe("sortTasksForColumn merging pinning", () => {
describe("column default ordering merging pinning", () => {
it("pins merging tasks to top of in-review even when newer non-merging tasks exist", () => {
const tasks: Task[] = [
createTask({

View File

@@ -90,6 +90,24 @@ const showAllColumnsByDefault = () => {
);
};
const getSectionTaskIds = (sectionName: string): string[] => {
const allRows = screen.getAllByRole("row");
const sectionStart = allRows.findIndex(
(row) => row.className.includes("list-section-header") && row.textContent?.includes(sectionName),
);
if (sectionStart < 0) return [];
const ids: string[] = [];
for (let index = sectionStart + 1; index < allRows.length; index += 1) {
const row = allRows[index];
if (row.className.includes("list-section-header")) break;
const id = row.getAttribute("data-id");
if (id) ids.push(id);
}
return ids;
};
function ensureMatchMedia() {
if (!window.matchMedia) {
Object.defineProperty(window, "matchMedia", {
@@ -1186,6 +1204,40 @@ describe("ListView", () => {
expect(screen.queryByText("FN-002")).toBeNull();
});
it("defaults todo section to board-consistent priority then oldest ordering", () => {
const tasks = [
createMockTask({ id: "FN-100", column: "todo", priority: "low", createdAt: "2024-01-01T08:00:00.000Z" }),
createMockTask({ id: "FN-101", column: "todo", priority: "urgent", createdAt: "2024-01-01T10:00:00.000Z" }),
createMockTask({ id: "FN-102", column: "todo", priority: "high", createdAt: "2024-01-01T07:00:00.000Z" }),
];
renderListView({ tasks });
expect(getSectionTaskIds("Todo")).toEqual(["FN-101", "FN-102", "FN-100"]);
});
it("defaults done section to board-consistent completion recency", () => {
const tasks = [
createMockTask({ id: "FN-200", column: "done", priority: "urgent", columnMovedAt: "2024-01-01T08:00:00.000Z" }),
createMockTask({ id: "FN-201", column: "done", priority: "low", columnMovedAt: "2024-01-01T10:00:00.000Z" }),
];
renderListView({ tasks });
expect(getSectionTaskIds("Done")).toEqual(["FN-201", "FN-200"]);
});
it("defaults in-review section to board-consistent merge-active pinning", () => {
const tasks = [
createMockTask({ id: "FN-300", column: "in-review", status: "review-ready", priority: "urgent" }),
createMockTask({ id: "FN-301", column: "in-review", status: "merging-fix", priority: "normal" }),
];
renderListView({ tasks });
expect(getSectionTaskIds("In Review")).toEqual(["FN-301", "FN-300"]);
});
it("maintains sort order within each section", () => {
const tasks = [
createMockTask({ id: "FN-003", title: "Charlie", column: "triage" }),
@@ -1195,20 +1247,10 @@ describe("ListView", () => {
renderListView({ tasks });
// Sort by title
const titleHeader = screen.getByRole("columnheader", { name: /title/i });
fireEvent.click(titleHeader);
// Get only data rows within the triage section
const allRows = screen.getAllByRole("row");
const triageSectionStart = allRows.findIndex(r => r.className.includes("list-section-header") && r.textContent?.includes("Planning"));
// The next 3 rows after the section header should be the sorted tasks
const dataRows = allRows.slice(triageSectionStart + 1, triageSectionStart + 4).filter(r => r.getAttribute("data-id"));
expect(dataRows[0].textContent).toContain("FN-001"); // Alpha
expect(dataRows[1].textContent).toContain("FN-002"); // Bravo
expect(dataRows[2].textContent).toContain("FN-003"); // Charlie
expect(getSectionTaskIds("Planning")).toEqual(["FN-001", "FN-002", "FN-003"]);
});
});

View File

@@ -0,0 +1,62 @@
import type { Task, Column } from "@fusion/core";
function getTaskPriorityRank(priority: Task["priority"] | null | undefined): number {
if (priority === "urgent") return 3;
if (priority === "high") return 2;
if (priority === "low") return 0;
return 1;
}
function compareTaskPriority(a: Task["priority"] | null | undefined, b: Task["priority"] | null | undefined): number {
return getTaskPriorityRank(b) - getTaskPriorityRank(a);
}
function compareTaskIdNumeric(a: string, b: string): number {
const aNum = Number.parseInt(a.slice(a.lastIndexOf("-") + 1), 10);
const bNum = Number.parseInt(b.slice(b.lastIndexOf("-") + 1), 10);
if (Number.isFinite(aNum) && Number.isFinite(bNum) && aNum !== bNum) {
return aNum - bNum;
}
return a.localeCompare(b);
}
function getDoneSortTimestamp(task: Task): number {
const timestamp = task.columnMovedAt ?? task.updatedAt ?? task.createdAt;
const parsed = Date.parse(timestamp);
return Number.isFinite(parsed) ? parsed : 0;
}
function isMergeActiveStatus(status: string | null | undefined): boolean {
return status === "merging" || status === "merging-pr" || status === "merging-fix";
}
export function sortTasksForDisplayColumn(tasks: readonly Task[], column: Column): Task[] {
if (column === "todo") {
return [...tasks].sort((a, b) => {
const priorityCmp = compareTaskPriority(a.priority, b.priority);
if (priorityCmp !== 0) return priorityCmp;
if (a.createdAt !== b.createdAt) return a.createdAt.localeCompare(b.createdAt);
return compareTaskIdNumeric(a.id, b.id);
});
}
return [...tasks].sort((a, b) => {
if (column === "done") {
const timestampCmp = getDoneSortTimestamp(b) - getDoneSortTimestamp(a);
if (timestampCmp !== 0) return timestampCmp;
return compareTaskIdNumeric(a.id, b.id);
}
if (column === "in-review") {
const aIsMerging = isMergeActiveStatus(a.status);
const bIsMerging = isMergeActiveStatus(b.status);
if (aIsMerging !== bIsMerging) return aIsMerging ? -1 : 1;
}
const priorityCmp = compareTaskPriority(a.priority, b.priority);
if (priorityCmp !== 0) return priorityCmp;
return compareTaskIdNumeric(a.id, b.id);
});
}