Fix the issues with the todo items' positions that appear at high latencies

[fulopkovacs]

Added a basic (and very much imperfect) "last-write-wins" mini sync engine that makes sure that the todo items' positions won't unexpectedly change when the network latency is high.

Opencode conversation

Summary by CodeRabbit

• New Features

  • Added manual retry button for todo item synchronization with visual indicators showing pending syncs
  • Integrated codemogger and memelord tools for enhanced functionality

• Improvements

  • Enhanced todo item synchronization with improved offline handling and reliability
  • Refined drag-and-drop behavior for moving items between boards with smoother interactions

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

Walkthrough

This pull request introduces a client-side, per-item synchronization engine for todo items with retry logic and status tracking, alongside configuration updates for multiple MCP server definitions. Core functionality shifts from immediate server mutations to a local-first queue-based sync approach with exponential backoff retry handling.

Changes

Cohort / File(s)	Summary
MCP Server Configurations .codex/config.toml, .mcp.json, config/mcporter.json, opencode.json	Adds MCP server definitions for codemogger and memelord across multiple configuration formats with command arguments and environment variables.
Git Configuration .gitignore	Adds ignore patterns for .memelord/ and .codemogger directories.
Todo Items Sync State Collection src/collections/todoItemsSync.ts	Creates a new local-only React-DB collection to track per-item synchronization state (unsynced, in-flight, failed item IDs).
Core Sync Engine src/collections/todoItems.ts	Introduces per-item client-side sync queue with in-memory state tracking (desired payloads, retry attempts, signatures), payload builders, retry logic with exponential backoff, and synchronization of TanStack Query cache; refactors server sync flow from immediate mutations to local-first queue with flushItemSync handling.
Retry UI Control src/components/Header.tsx	Adds RetryTodoItemsSyncButton component that displays sync state (failed/in-flight item counts), shows retry action with tooltip, and triggers retryUnsyncedTodoItemsSync.
Drag-and-Drop Ordering src/components/TodoBoards.tsx	Introduces sortByBoardAndPosition comparator and refactors drag-end logic to compute orderedTodoItems locally rather than relying on memoized list; updates position/boardId calculations for cross-column and within-column drags.

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant UI as UI (TodoBoards)
    participant Local as Sync Queue<br/>(todoItems)
    participant Cache as TanStack<br/>Query Cache
    participant Server
    participant Retry as Retry Engine

    User->>UI: Edit/Drag todo item
    UI->>Local: queueLatestSync(item)
    Local->>Local: buildPayload, compare signature
    alt Signature changed
        Local->>Local: Mark as unsynced
    end
    Local->>Cache: syncTodoItemsQueryCache(item)
    Cache-->>UI: Update reflected immediately
    
    Local->>Local: flushItemSync triggered
    Local->>Server: updateTodoItem(item, payload)
    
    alt Server success
        Server-->>Local: Success response
        Local->>Local: Update lastSyncedSignatureById
        Local->>Local: Clear retry state
        Local->>Cache: Cache stays consistent
    else Server failure
        Server-->>Local: Error
        Local->>Local: Mark as failed/unsynced
        Local->>Retry: Schedule retry with backoff
        Retry->>Retry: exponential backoff (1s→2s→4s...)
    end

    User->>UI: Click retry button (optional)
    UI->>Local: retryUnsyncedTodoItemsSync()
    Local->>Retry: Flush all pending items
    Retry->>Server: Attempt failed item syncs
    Server-->>Local: Success/continue retry loop
    Local->>Cache: Update cache on success
    Local->>UI: UI indicators updated
    UI-->>User: Sync state reflected

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~70 minutes

Possibly related PRs

• Use on demand sync strategy for the todo items #38 — Directly modifies src/collections/todoItems.ts and sync-related collection/UI code with overlapping synchronization and state management refactors.
• Add a temporary solution for handling conflicts between the remote state and client-side cache when moving todo items #37 — Modifies the same todo item sync/update flow in todoItems.ts and TodoBoards.tsx drag logic, replacing batch behavior with local-first per-item strategies.
• Update the guide's content #41 — Modifies src/collections/todoItems.ts error-handling and retry paths that overlap with the new per-item sync engine and retry export.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix the issues with the todo items' positions that appear at high latencies' accurately describes the primary objective of this PR, which is to address position sync issues under high network latency through a local-first sync engine.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix-displaced-todo-items

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

[github-actions]

🚀 Preview Deployment

Status: ✅ Ready!

Preview URL: Open Preview

Commit: 2eac251f6230217db52a5f4c4c86d648b90d6dd9

Built and deployed successfully