Symptom

EditTaskList appended new tasks to the bottom of a potentially long list, placing them off-screen. Completed and pending tasks were interleaved in a single scrollable list with no structural separation.

Root cause

displayOrder.add(newTask.id) inserted at the tail. No tab/filter split existed — all tasks rendered in one Column regardless of completion status.

Fix

• Changed displayOrder.add(newTask.id) → displayOrder.add(0, newTask.id) so new tasks (and recurring duplicates) land at the top.
• Added var selectedTab state and a PrimaryTabRow with “Tasks” / “Done” tabs.
• Derived incompleteOrder / completeOrder by filtering displayOrder on completion status; render only the active tab’s list.
• onMoveUp / onMoveDown now swap within the tab-relative index by looking up each task’s position in the global displayOrder, so reordering is scoped to the active tab.

Prevention

When adding a list-management feature, consider up-front whether new items should land at top or bottom — task-management convention is newest-first. Tab/filter separation for done vs. pending items is a standard UX pattern that should be spec’d alongside list management features.