Skip to content

feat: add keyboard navigation to Breadcrumbs widget #2002

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jainiksha wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: add keyboard navigation to Breadcrumbs widget #2002

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
942eaab
feat: add command auto-completion support to TextInput
jainiksha Jun 20, 2026
72f66c1
fix: correct TextInput cursor rendering and horizontal scrolling
jainiksha Jun 20, 2026
a16bfe1
fix: remove stale cursorX reference
jainiksha Jun 20, 2026
e892d3e
feat: add workspace layout persistence support
jainiksha Jul 3, 2026
c14b138
chore: resolve merge conflicts
jainiksha Jul 3, 2026
4c2827a
feat: add keyboard navigation to Breadcrumbs widget
jainiksha Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions packages/widgets/src/display/Breadcrumbs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@ import { Widget } from '../base/Widget.js';
export interface BreadcrumbsOptions {
/** Separator drawn between segments. Default: caps.unicode ? '❯' : '>' */
separator?: string;
/** Color of the last (current) segment. Default: cyan */

/** Color of the active breadcrumb */
activeColor?: Color;

/** Called when a breadcrumb is selected */
onSelect?: (index: number, label: string) => void;
}

/**
Expand All @@ -22,12 +26,15 @@ export class Breadcrumbs extends Widget {
private _segments: string[];
private _separator?: string;
private _activeColor?: Color;
private _selectedIndex = 0;
private _onSelect?: (index: number, label: string) => void;

constructor(segments: string[], style: Partial<Style> = {}, opts: BreadcrumbsOptions = {}) {
super(style);
this._segments = segments;
this._separator = opts.separator;
this._activeColor = opts.activeColor;
this._onSelect = opts.onSelect;
}

/** Update the trail of segments. */
Expand All @@ -42,6 +49,24 @@ export class Breadcrumbs extends Widget {
this.markDirty();
}

handleKey(event: { key: string }): void {
if (event.key === 'left') {
this._selectedIndex = Math.max(0, this._selectedIndex - 1);
this.markDirty();
} else if (event.key === 'right') {
this._selectedIndex = Math.min(
this._segments.length - 1,
this._selectedIndex + 1
);
this.markDirty();
} else if (event.key === 'enter') {
this._onSelect?.(
this._selectedIndex,
this._segments[this._selectedIndex]
);
}
}

protected _renderSelf(screen: Screen): void {
const { x, y, width, height } = this._getContentRect();
if (width <= 0 || height <= 0 || this._segments.length === 0) return;
Expand Down Expand Up @@ -85,7 +110,10 @@ export class Breadcrumbs extends Widget {
if (i > 0 || (showEllipsis && hasTruncated)) {
renderList.push({ type: 'separator', text: sep });
}
const isLast = i === visibleSegments.length - 1;
const originalIndex =
this._segments.length - visibleSegments.length + i;

const isLast = originalIndex === this._selectedIndex;
renderList.push({
type: isLast ? 'active' : 'normal',
text: visibleSegments[i]
Expand Down
9 changes: 8 additions & 1 deletion packages/widgets/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,14 @@ export type { DraggableOptions, DroppableOptions } from './layout/DragAndDrop.js
export { Fill } from './layout/Fill.js';
export type { FillOptions } from './layout/Fill.js';
export { SplitPane } from './layout/SplitPane.js';
export type { SplitPaneOptions, SplitDirection } from './layout/SplitPane.js';
export type { SplitPaneOptions } from './layout/SplitPane.js';
export { Workspace } from './layout/Workspace.js';

export type {
WorkspaceLayout,
WorkspaceOptions,
WorkspaceStorage,
} from './layout/Workspace.js';
Comment on lines +131 to +138

@coderabbitai coderabbitai Bot Jul 3, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check for any remaining usages of SplitDirection that would break after removal from the public index
rg -n 'SplitDirection' --type=ts -C2

# Confirm Workspace.ts actually exports WorkspaceLayout, WorkspaceOptions, WorkspaceStorage as types
fd Workspace.ts packages/widgets/src/layout --exec cat -n {}

# Check widgets tsconfig for compile scope (is `include` limited to non-test files?)
fd tsconfig.json packages/widgets --exec cat -n {}

Repository: Karanjot786/TermUI

Length of output: 156

🏁 Script executed:

#!/bin/bash
set -euo pipefail

printf '\n== index excerpt ==\n'
cat -n packages/widgets/src/index.ts | sed -n '120,150p'

printf '\n== SplitPane symbols ==\n'
rg -n --context 2 'SplitDirection|SplitPaneOptions|export .*SplitPane' packages/widgets/src/layout/SplitPane.ts packages/widgets/src/index.ts

printf '\n== Workspace symbols ==\n'
rg -n --context 2 'WorkspaceLayout|WorkspaceOptions|WorkspaceStorage|export .*Workspace' packages/widgets/src/layout/Workspace.ts packages/widgets/src/index.ts

printf '\n== SplitDirection usages ==\n'
rg -n --context 2 'SplitDirection' packages/widgets/src

Repository: Karanjot786/TermUI

Length of output: 8699

Restore the SplitDirection export from packages/widgets/src/index.ts. WorkspaceLayout, WorkspaceOptions, and WorkspaceStorage are already re-exported correctly.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/widgets/src/index.ts` around lines 131 - 138, The public barrel in
index.ts is missing the SplitDirection export, while the Workspace-related type
exports are already correct. Add SplitDirection back to the existing export list
alongside SplitPaneOptions in the widgets index so consumers can import it from
the package root, and keep the current Workspace re-exports unchanged.

Source: Pipeline failures


// ── Feedback Widgets ──────────────────────────────────
export { ProgressBar } from './feedback/ProgressBar.js';
Expand Down
Loading
Loading