Bohdan Triapitsyn
8587db89b1
- Cut broad render fanout across the app by replacing shared-store whole-object subscriptions with leaf selectors, memoizing hot chrome boundaries, and isolating disabled global providers from live session/message state. This keeps header controls, composer toolbars, side panels, and other non-hot UI surfaces from repainting on every assistant update or keystroke. - Rework sidebar session ordering so recent, project groups, and worktree groups derive from one ordering source while avoiding streaming-time thrash. The sidebar now uses a stabilized session snapshot, preserves structural identity for unchanged rows, reads live row status/details per session, and applies a one-shot sort bump on idle->busy instead of continuously resorting during activity. - Fix chat/input scroll instability by separating viewport-resize handling from message-growth handling, disabling conflicting native scroll anchoring, and stopping textarea autosize from collapsing on every growth keystroke. This removes the multiline typing jiggle during streaming and reduces unnecessary composer rerenders. - Also gate voice context wiring behind voice-mode enablement and codify the learned render/scroll/order anti-patterns in AGENTS.md so future changes avoid the same classes of regressions.
66 lines
2.8 KiB
TypeScript
66 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { useConfigStore } from '@/stores/useConfigStore';
|
|
import { useSessionUIStore } from '@/sync/session-ui-store';
|
|
import { useContextStore } from '@/stores/contextStore';
|
|
import { formatEffortLabel, getAgentDisplayName, getModelDisplayName } from './mobileControlsUtils';
|
|
|
|
interface StatusChipProps {
|
|
onClick: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export const StatusChip: React.FC<StatusChipProps> = ({ onClick, className }) => {
|
|
const currentModelId = useConfigStore((state) => state.currentModelId);
|
|
const currentVariant = useConfigStore((state) => state.currentVariant);
|
|
const currentAgentName = useConfigStore((state) => state.currentAgentName);
|
|
const getCurrentProvider = useConfigStore((state) => state.getCurrentProvider);
|
|
const getCurrentModelVariants = useConfigStore((state) => state.getCurrentModelVariants);
|
|
const getVisibleAgents = useConfigStore((state) => state.getVisibleAgents);
|
|
const currentSessionId = useSessionUIStore((state) => state.currentSessionId);
|
|
const sessionAgentName = useContextStore((state) =>
|
|
currentSessionId ? state.getSessionAgentSelection(currentSessionId) : null
|
|
);
|
|
|
|
const agents = getVisibleAgents();
|
|
const uiAgentName = currentSessionId ? (sessionAgentName || currentAgentName) : currentAgentName;
|
|
const agentLabel = getAgentDisplayName(agents, uiAgentName);
|
|
const currentProvider = getCurrentProvider();
|
|
const modelLabel = getModelDisplayName(currentProvider, currentModelId);
|
|
const hasEffort = getCurrentModelVariants().length > 0;
|
|
const effortLabel = hasEffort ? formatEffortLabel(currentVariant) : null;
|
|
const fullLabel = [agentLabel, modelLabel, effortLabel].filter(Boolean).join(' · ');
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className={cn(
|
|
'inline-flex min-w-0 items-center justify-center',
|
|
'rounded-md border border-border/50 px-1.5',
|
|
'text-[11px] font-medium text-foreground/80',
|
|
'focus:outline-none hover:bg-[var(--interactive-hover)]',
|
|
className
|
|
)}
|
|
style={{
|
|
height: '28px',
|
|
maxHeight: '28px',
|
|
minHeight: '28px',
|
|
}}
|
|
title={fullLabel}
|
|
>
|
|
<span className="shrink-0">{agentLabel}</span>
|
|
<span className="shrink-0 text-muted-foreground mx-0.5">·</span>
|
|
<span className="min-w-0 truncate">{modelLabel}</span>
|
|
{effortLabel && (
|
|
<>
|
|
<span className="shrink-0 text-muted-foreground mx-0.5">·</span>
|
|
<span className="shrink-0">{effortLabel}</span>
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default StatusChip;
|