feat: cap subagent list height in work status panel

Limits the expanded subagents list to eight rows
Adds independent scrolling so other sections stay visible
Documents the new subagents panel behavior
This commit is contained in:
Bohdan Triapitsyn
2026-08-12 02:10:27 +03:00
parent 5917325d49
commit 069d9ad5c9
2 changed files with 29 additions and 23 deletions
@@ -215,6 +215,10 @@ The Subagents section opens itself when subagents appear where there were none,
on that edge only: re-expanding on every count change would fight a user who on that edge only: re-expanding on every count change would fight a user who
just collapsed it. just collapsed it.
Its expanded list is capped at eight rows and scrolls independently, so a
session with many subagents does not crowd every section below it out of the
panel.
## Tasks ## Tasks
Icons and strike-through match the composer's todo dropdown, so one list does Icons and strike-through match the composer's todo dropdown, so one list does
@@ -82,29 +82,31 @@ export const WorkStatusSubagentsSection: React.FC<Props> = ({ sessionId, directo
defaultExpanded defaultExpanded
summary={busyChildren > 0 ? `${busyChildren}/${children.length}` : children.length} summary={busyChildren > 0 ? `${busyChildren}/${children.length}` : children.length}
> >
{children.map((child) => { <div className="max-h-56 overflow-y-auto">
const blocked = (permissions[child.id]?.length ?? 0) > 0; {children.map((child) => {
const asked = (questions[child.id]?.length ?? 0) > 0; const blocked = (permissions[child.id]?.length ?? 0) > 0;
const busy = statuses[child.id]?.type === 'busy'; const asked = (questions[child.id]?.length ?? 0) > 0;
const label = child.title?.trim() || t('chat.workStatus.subagent.untitled'); const busy = statuses[child.id]?.type === 'busy';
return ( const label = child.title?.trim() || t('chat.workStatus.subagent.untitled');
<WorkStatusRow return (
key={child.id} <WorkStatusRow
onClick={directory ? () => openChildSession(child.id, label) : undefined} key={child.id}
ariaLabel={t('chat.workStatus.action.openSubagent', { name: label })} onClick={directory ? () => openChildSession(child.id, label) : undefined}
label={label} ariaLabel={t('chat.workStatus.action.openSubagent', { name: label })}
value={blocked ? ( label={label}
<WorkStatusValue tone="warning">{t('chat.workStatus.subagent.needsPermission')}</WorkStatusValue> value={blocked ? (
) : asked ? ( <WorkStatusValue tone="warning">{t('chat.workStatus.subagent.needsPermission')}</WorkStatusValue>
<WorkStatusValue tone="warning">{t('chat.workStatus.subagent.askedQuestion')}</WorkStatusValue> ) : asked ? (
) : busy ? ( <WorkStatusValue tone="warning">{t('chat.workStatus.subagent.askedQuestion')}</WorkStatusValue>
<WorkStatusValue tone="info">{t('chat.workStatus.subagent.working')}</WorkStatusValue> ) : busy ? (
) : ( <WorkStatusValue tone="info">{t('chat.workStatus.subagent.working')}</WorkStatusValue>
<WorkStatusValue tone="muted">{t('chat.workStatus.subagent.done')}</WorkStatusValue> ) : (
)} <WorkStatusValue tone="muted">{t('chat.workStatus.subagent.done')}</WorkStatusValue>
/> )}
); />
})} );
})}
</div>
</WorkStatusCollapsibleSection> </WorkStatusCollapsibleSection>
); );
}; };