Add board-wide refresh button to sync UI state with server

[JasonBroderick]

Problem Statement

When the Automaker server restarts or WebSocket events are missed, the UI can display stale state that doesn't match the server's actual state. This includes:

• Features showing incorrect status (e.g., stuck in wrong column)
• Auto mode showing OFF when it's running
• Running agents not reflected in UI
• Worktree changes not visible
• Resume buttons visible for already-active features

Currently, users must hard refresh the browser (Ctrl+Shift+R) to sync the UI, which is disruptive and clears all client-side state.

Proposed Solution

Add a board-wide refresh button to the board header that manually syncs the UI state with the server by refetching all relevant data.

Location: Board header (next to view toggle and board controls)

Functionality:

• Refetch features from server
• Refetch running agents status
• Refetch worktree data
• Refetch auto mode status
• Show spinning animation while refreshing
• Log state mismatches for debugging

Visual Design:

• Circular arrow icon (RefreshCw from lucide-react)
• Small button (w-8 h-8) with secondary background
• Tooltip: "Refresh board state from server"
• Spinner animation during refresh

User Stories

• As a developer, when the server restarts, I want to click a refresh button to sync the UI instead of hard refreshing the browser
• As a developer, when I manually edit feature files, I want to see changes reflected in the UI without losing my session state
• As a developer, when WebSocket events are missed, I want an easy way to recover without disrupting my workflow

Implementation Notes

This is distinct from the existing worktree-specific refresh button in the worktree panel:

• Worktree refresh (existing): Focused scope, only refreshes git/branch data in side panel
• Board refresh (proposed): Comprehensive scope, refreshes all board state

The board refresh would use queryClient.refetchQueries() to force immediate refetch of:

await Promise.all([
  queryClient.refetchQueries({ queryKey: queryKeys.features.all(projectPath) }),
  queryClient.refetchQueries({ queryKey: queryKeys.runningAgents.all() }),
  queryClient.refetchQueries({ queryKey: queryKeys.worktrees.all(projectPath) }),
  queryClient.refetchQueries({ queryKey: queryKeys.autoMode.status(projectPath) }),
]);

Why This Matters

• Improves reliability: Provides recovery mechanism for cache/state issues
• Better UX: No need for disruptive hard refresh
• Developer productivity: Quick fix for common sync issues
• Debugging aid: Helps identify when UI and server are out of sync

Acceptance Criteria

• Refresh button visible in board header on desktop
• Button shows spinner animation during refresh
• All React Query caches for board data are refetched
• Button is disabled during refresh to prevent multiple clicks
• Console logs state mismatches for debugging
• Works in both web and Electron modes

Alternative Considered

Combining with worktree refresh: Decided against this because:

• Different scopes (focused vs comprehensive)
• Different locations (side panel vs main header)
• Different user intents (git status vs full board sync)
• Both serve valid but distinct purposes

Environment

• Automaker v0.14.0rc
• Affects all platforms (Docker, Electron, Web)

[JasonBroderick]

Update: After further investigation, this issue has been superseded by #740, which better describes the root cause.

Why #740 is better:

• Acknowledges existing auto-refresh system (use-query-invalidation.ts)
• Identifies the actual gap (manual edits, missed events)
• Offers multiple solutions instead of prescribing one
• Lets maintainers make architectural decisions

This issue (#737) proposed a specific solution (manual refresh button) without fully understanding the existing architecture. Issue #740 properly analyzes the gap and suggests file watcher, polling, or manual button as options.

Recommending this issue be closed in favor of #740.