Optimize AgentDashboardPanel: lazy state init and sync editForm on prop change

[mrveiss]

Summary

The AgentDashboardPanel component has a few optimization opportunities, including a bug where editForm state doesn't sync when the site prop changes.

File: frontend/src/pages/AgentDashboardPanel.tsx

Issues

1. Bug: editForm doesn't sync when site prop updates

If the site prop changes while not in editing mode, editForm retains stale values from the initial render. This could cause the user to save outdated config if they click Edit after the site data updates.

Current:

const [editForm, setEditForm] = useState({
  autonomy_level: site.autonomy_level ?? 'readonly',
  cache_policy: site.cache_policy ?? 'minimal',
  conflict_resolution: site.conflict_resolution ?? 'central_wins',
})

Fix:

useEffect(() => {
  if (!editing) {
    setEditForm({
      autonomy_level: site.autonomy_level ?? 'readonly',
      cache_policy: site.cache_policy ?? 'minimal',
      conflict_resolution: site.conflict_resolution ?? 'central_wins',
    })
  }
}, [site, editing])

2. Optimization: Lazy state initialization

Avoid creating object on every initial render:

const [editForm, setEditForm] = useState(() => ({
  autonomy_level: site.autonomy_level ?? 'readonly',
  // ...
}))

3. Optional: memo wrapper

If parent re-renders frequently, wrap component with memo:

export const AgentDashboardPanel = memo(function AgentDashboardPanel({ site, health }) {
  // ...
})

Priority

• Core PXE Infrastructure #1 is a bug - should be fixed
• Controller API with Node Management #2 is minor - good practice
• Web UI for Monitoring #3 is conditional - only if perf issues observed