Reduce unnecessary re-renders in agent panel and input components

Narrow zustand selectors to only subscribe to fields each component
actually uses. Split nested objects (availableModes, projectPlacement)
into separate selectors with structural equality checks. Remove the
updatedAt processing-spinner hack in agent-input-area — the server
already guarantees agent status is "running" before ACKing the send
request, so isProcessing can clear on submit success directly.
This commit is contained in:
Mohamed Boudra
2026-03-25 13:09:17 +07:00
parent c2c5bc815e
commit 81ee887d03
10 changed files with 150 additions and 185 deletions
@@ -11,11 +11,11 @@ const INLINE_MODEL_THRESHOLD = 8;
type DrillDownView = { provider: string };
function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string | null {
function resolveDefaultModelLabel(models: AgentModelDefinition[] | undefined): string {
if (!models || models.length === 0) {
return null;
return "Select model";
}
return (models.find((model) => model.isDefault) ?? models[0])?.label ?? null;
return (models.find((model) => model.isDefault) ?? models[0])?.label ?? "Select model";
}
interface CombinedModelSelectorProps {
@@ -75,7 +75,7 @@ export function CombinedModelSelector({
const models = allProviderModels.get(selectedProvider);
if (!models) return isLoading ? "Loading..." : "Select model";
const model = models.find((m) => m.id === selectedModel);
return model?.label ?? resolveDefaultModelLabel(models) ?? "Select model";
return model?.label ?? resolveDefaultModelLabel(models);
}, [allProviderModels, selectedProvider, selectedModel, isLoading]);
return (