Add a bindable shortcut to collapse or expand a thread's children in the sidebar

[ryanbbrown]

The workflow

I use parent and child threads as a work tree. When a root thread has several children, I often collapse its subtree to reduce sidebar noise, then expand it when I need to switch to a child.

With a keyboard-driven workflow, I can open visible threads and move to the previous or next thread with configurable shortcuts. I cannot collapse or expand the selected parent thread's children without moving focus to the sidebar disclosure button.

What happens today

The only control is the chevron beside a parent thread. It is a native button, so I can click it or Tab to it and press Enter or Space.

There is no app command for this action in APP_COMMAND_IDS, no row in Settings → Keyboard, and no quick-palette action. The collapse state and toggle already exist:

• Disclosure button:

  bb/apps/app/src/components/sidebar/SidebarChildToggleChevron.tsx

  Lines 17 to 52 in dba32a4

  	export function SidebarChildToggleChevron({
  	isCollapsed,
  	expandLabel,
  	collapseLabel,
  	onToggle,
  	revealOnHover = false,
  	}: SidebarChildToggleChevronProps) {
  	return (
  	<button
  	type="button"
  	aria-expanded={!isCollapsed}
  	aria-label={isCollapsed ? expandLabel : collapseLabel}
  	data-sidebar-hover-actions-mobile={
  	revealOnHover ? SIDEBAR_HOVER_ACTIONS_MOBILE_ALWAYS_VALUE : undefined
  	}
  	onClick={(event) => {
  	event.preventDefault();
  	event.stopPropagation();
  	onToggle();
  	}}
  	className={cn(
  	revealOnHover ? SIDEBAR_HOVER_ACTIONS_CLASS : "pointer-events-auto",
  	"relative z-10 inline-flex size-5 shrink-0 cursor-pointer items-center justify-center rounded-md text-subtle-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2",
  	LIST_HOVER_TRANSITION,
  	)}
  	>
  	<Icon
  	name="ChevronRight"
  	className={cn(
  	"size-3 transition-transform duration-150",
  	!isCollapsed && "rotate-90",
  	)}
  	aria-hidden="true"
  	/>
  	</button>
  	);

• Parent-thread wiring:

  bb/apps/app/src/components/sidebar/ThreadRow.tsx

  Lines 754 to 761 in dba32a4

  	{parentOptions && hasChildren ? (
  	<SidebarChildToggleChevron
  	isCollapsed={isParentCollapsed}
  	expandLabel={`Expand ${labelTitle} threads`}
  	collapseLabel={`Collapse ${labelTitle} threads`}
  	onToggle={() => parentOptions.onToggleCollapsed(thread.id)}
  	revealOnHover={!isParentCollapsed}
  	/>

• Command registry:

  bb/packages/domain/src/app-keybindings.ts

  Lines 38 to 79 in dba32a4

  	export const APP_COMMAND_IDS = [
  	"palette.open",
  	"thread.new",
  	"thread.search",
  	"thread.rename",
  	"thread.archive",
  	"thread.previous",
  	"thread.next",
  	...THREAD_JUMP_APP_COMMAND_IDS,
  	"pane.focus.previous",
  	"pane.focus.next",
  	...PANE_FOCUS_APP_COMMAND_IDS,
  	"pane.maximize.toggle",
  	"pane.close",
  	"window.new",
  	"app.back",
  	"settings.open",
  	"settings.openServers",
  	"sidebar.toggle",
  	"panel.newTab",
  	"panel.reopenClosedTab",
  	"panel.close",
  	"panel.toggle",
  	"file.quickOpen",
  	"diff.toggle",
  	"terminal.open",
  	"composer.focus",
  	"modelPicker.toggle",
  	"modelPicker.cycleModel",
  	"modelPicker.cycleModelBackward",
  	"modelPicker.cycleProvider",
  	"modelPicker.cycleProviderBackward",
  	"modelPicker.cycleReasoning",
  	"modelPicker.cycleReasoningBackward",
  	"browser.focusLocation",
  	"browser.reload",
  	"browser.find",
  	"workspace.openPreferred",
  	"logs.openServerDaemon",
  	"notifications.open",
  	...QUESTION_SELECT_APP_COMMAND_IDS,
  	] as const;

Checked on bb desktop 0.42.1 from source at dba32a469fd820ff6106715db0aaf6ed297d79a5, macOS 15.7.7.

What you would expect

Add a bindable app command such as Toggle child threads for the selected parent thread.

• It appears in Settings → Keyboard and the quick palette.
• It can be unassigned by default; users can choose a shortcut.
• It collapses the selected thread's children when expanded and expands them when collapsed.
• It is unavailable, or safely does nothing, when the selected thread has no children.
• It uses the existing persisted sidebar collapse state.

Context and alternatives

The current workaround is to use the pointer, or Tab through the sidebar until the disclosure button has focus. That works, but it interrupts keyboard thread navigation.

I searched open and closed issues and found no request for this command. #3195 concerns the size of the same disclosure control on mobile, not keyboard access.

Checks

• I searched open and closed issues for the same request.
• If an agent wrote this, the body ends with > AGENT GENERATED.

AGENT GENERATED

[bb-slop-cop]

🚨 SLOP COP 🚨 · new-issue-autopilot

Classification applied:

• Type: Feature
• Priority: Low
• Effort: Low
• Labels: ui

No bug report or pull request was created because the verified Type is not Bug.

[ryanbbrown]

Additional workflow context: I use configured Command+Shift+Up / Command+Shift+Down bindings for Previous thread / Next thread to move through the sidebar. When a parent is expanded, those commands visit every visible child before reaching the next root thread. I want to toggle the current parent's children from the keyboard, then use the same next/previous commands to skip that subtree and move directly between parent threads.

I confirmed there is no existing non-numbered way to do this. thread.previous and thread.next call activateAdjacentThread, which walks every target returned by getSidebarThreadNavigationTargets in visible DOM order, with no parent/root-only filter:

• bb/apps/app/src/components/sidebar/AppSidebar.tsx

  Lines 149 to 179 in dba32a4

  	const activateAdjacentThread = useCallback(
  	(offset: -1 | 1): boolean => {
  	const targets = getSidebarThreadNavigationTargets(sidebarRef.current);
  	if (targets.length === 0) return false;
  	const activeIndex = targets.findIndex(
  	(target) => target.threadId === activeThreadId,
  	);
  	const nextIndex =
  	activeIndex === -1
  	? offset === 1
  	? 0
  	: targets.length - 1
  	: (activeIndex + offset + targets.length) % targets.length;
  	const target = targets[nextIndex];
  	if (!target) return false;
  	if (target.element) {
  	target.element.click();
  	return true;
  	}
  	if (!target.projectId) return false;
  	closeOnMobile();
  	void navigate(
  	getThreadRoutePath({
  	projectId: target.projectId,
  	threadId: target.threadId,
  	}),
  	);
  	return true;
  	},
  	[activeThreadId, closeOnMobile, navigate],
  	);

• bb/apps/app/src/components/sidebar/sidebarThreadShortcuts.ts

  Lines 42 to 107 in dba32a4

  	function collectSidebarThreadTargets(
  	root: HTMLElement | null,
  	limit: number,
  	includeWindowedPlaceholders: boolean,
  	): SidebarThreadShortcutTarget[] {
  	if (!root) {
  	return [];
  	}
  	const selector = includeWindowedPlaceholders
  	? `${SIDEBAR_THREAD_SHORTCUT_TARGET_SELECTOR}, [${SIDEBAR_WINDOWED_NAV_ATTRIBUTE}]`
  	: SIDEBAR_THREAD_SHORTCUT_TARGET_SELECTOR;
  	const elements = root.querySelectorAll<HTMLElement>(selector);
  	const targets: SidebarThreadShortcutTarget[] = [];
  	for (const element of elements) {
  	if (element instanceof HTMLAnchorElement) {
  	const threadId = element.dataset.sidebarThreadId;
  	if (!threadId) {
  	continue;
  	}
  	targets.push({
  	element,
  	key: String(targets.length + 1),
  	threadId,
  	projectId: null,
  	});
  	} else {
  	const encoded = element.getAttribute(SIDEBAR_WINDOWED_NAV_ATTRIBUTE);
  	if (!encoded) {
  	continue;
  	}
  	for (const pair of encoded.split(" ")) {
  	const separator = pair.indexOf(":");
  	if (separator <= 0 || separator === pair.length - 1) {
  	continue;
  	}
  	targets.push({
  	element: null,
  	key: String(targets.length + 1),
  	threadId: pair.slice(0, separator),
  	projectId: pair.slice(separator + 1),
  	});
  	if (targets.length === limit) {
  	break;
  	}
  	}
  	}
  	if (targets.length === limit) {
  	break;
  	}
  	}
  	return targets;
  	}
  	export function getSidebarThreadShortcutTargets(
  	root: HTMLElement | null,
  	): SidebarThreadShortcutTarget[] {
  	return collectSidebarThreadTargets(root, MAX_SIDEBAR_THREAD_SHORTCUTS, false);
  	}
  	export function getSidebarThreadNavigationTargets(
  	root: HTMLElement | null,
  	): SidebarThreadShortcutTarget[] {
  	return collectSidebarThreadTargets(root, Number.POSITIVE_INFINITY, true);

The only way to make next/previous skip the children is to collapse them with the chevron button first. The numbered Command+1…9 thread jumps are positional accelerators, not parent-only navigation, so they do not cover this workflow.

AGENT GENERATED