Skip to content

[codex] Polish slash commands, PlayBooks labels, and sidebar menu layering #769

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

Merged
jeffscottward merged 5 commits into from
Apr 9, 2026
+21 −21
Merged

[codex] Polish slash commands, PlayBooks labels, and sidebar menu layering #769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4031485
fix: polish slash menu and playbooks ui
jeffscottward Apr 9, 2026
1e5e8d9
test: fix slash autocomplete selectors
jeffscottward Apr 9, 2026
dae7230
fix: align sidebar menu overlay seam
jeffscottward Apr 9, 2026
4d01c32
fix: remove main header z-index
jeffscottward Apr 9, 2026
349bd77
style: tighten slash command picker
jeffscottward Apr 9, 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
12 changes: 6 additions & 6 deletions src/__tests__/renderer/components/InputArea.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -696,7 +696,7 @@ describe('InputArea', () => {

// The second command (/help) should have accent background
// Find the parent div that has the background style (px-4 py-3 class)
Copy link
Copy Markdown

@greptile-apps greptile-apps bot Apr 9, 2026

Choose a reason for hiding this comment

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

P2 Stale inline comment

The comment still references the old px-4 py-3 class name, which was changed to px-3 py-2 in InputArea.tsx. The selector was correctly updated to closest('button'), but the comment describing it was not.

Suggested change
// Find the parent div that has the background style (px-4 py-3 class)
// The second command (/help) should have accent background
// Find the button element directly (px-3 py-2 class)
const helpCmd = screen.getByText('/help').closest('button');

const helpCmd = screen.getByText('/help').closest('.px-4');
const helpCmd = screen.getByText('/help').closest('button');
expect(helpCmd).toHaveStyle({ backgroundColor: mockTheme.colors.accent });
});

Expand All @@ -709,7 +709,7 @@ describe('InputArea', () => {
});
render(<InputArea {...props} />);

const helpCmd = screen.getByText('/help').closest('.px-4');
const helpCmd = screen.getByText('/help').closest('button');
fireEvent.mouseEnter(helpCmd!);

expect(setSelectedSlashCommandIndex).toHaveBeenCalledWith(1);
Expand All @@ -728,7 +728,7 @@ describe('InputArea', () => {
});
render(<InputArea {...props} />);

const clearCmd = screen.getByText('/clear').closest('.px-4');
const clearCmd = screen.getByText('/clear').closest('button');
fireEvent.doubleClick(clearCmd!);

expect(setInputValue).toHaveBeenCalledWith('/clear');
Expand Down Expand Up @@ -812,7 +812,7 @@ describe('InputArea', () => {
});
render(<InputArea {...props} />);

const helpCmd = screen.getByText('/help').closest('.px-4');
const helpCmd = screen.getByText('/help').closest('button');
fireEvent.click(helpCmd!);

// Single click should update selection
Expand Down Expand Up @@ -842,11 +842,11 @@ describe('InputArea', () => {
render(<InputArea {...props} />);

// The second item (/help) should NOT have accent background since index 0 is selected
const helpCmd = screen.getByText('/help').closest('.px-4');
const helpCmd = screen.getByText('/help').closest('button');
// Unselected items don't have the accent color background
expect(helpCmd).not.toHaveStyle({ backgroundColor: mockTheme.colors.accent });
// First item (selected) should have accent background
const clearCmd = screen.getByText('/clear').closest('.px-4');
const clearCmd = screen.getByText('/clear').closest('button');
expect(clearCmd).toHaveStyle({ backgroundColor: mockTheme.colors.accent });
});

Expand Down
6 changes: 3 additions & 3 deletions src/renderer/components/AutoRun.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1761,7 +1761,7 @@ const AutoRunInner = forwardRef<AutoRunHandle, AutoRunProps>(function AutoRunInn
Run
</button>
)}
{/* Playbook Exchange button */}
{/* PlayBooks button */}
{onOpenMarketplace && (
<button
onClick={onOpenMarketplace}
Expand All @@ -1771,10 +1771,10 @@ const AutoRunInner = forwardRef<AutoRunHandle, AutoRunProps>(function AutoRunInn
border: `1px solid ${theme.colors.accent}40`,
backgroundColor: `${theme.colors.accent}15`,
}}
title="Browse Playbook Exchange - discover and share community playbooks"
title="Browse PlayBooks - discover and share community playbooks"
>
<LayoutGrid className="w-3.5 h-3.5" />
<span className="text-xs font-medium">Exchange</span>
<span className="text-xs font-medium">PlayBooks</span>
</button>
)}
{/* Launch Wizard button */}
Expand Down
6 changes: 3 additions & 3 deletions src/renderer/components/AutoRunExpandedModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -401,7 +401,7 @@ export function AutoRunExpandedModal({
Run
</button>
)}
{/* Exchange button */}
{/* PlayBooks button */}
{onOpenMarketplace && (
<button
onClick={onOpenMarketplace}
Expand All @@ -411,10 +411,10 @@ export function AutoRunExpandedModal({
border: `1px solid ${theme.colors.accent}`,
backgroundColor: `${theme.colors.accent}15`,
}}
title="Browse Playbook Exchange - discover and share community playbooks"
title="Browse PlayBooks - discover and share community playbooks"
>
<LayoutGrid className="w-3.5 h-3.5" />
Exchange
PlayBooks
</button>
)}
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/renderer/components/InputArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -501,15 +501,15 @@ export const InputArea = React.memo(function InputArea(props: InputAreaProps) {
style={{ backgroundColor: theme.colors.bgSidebar, borderColor: theme.colors.border }}
>
<div
className="overflow-y-auto max-h-64 scrollbar-thin"
className="overflow-y-auto max-h-96 scrollbar-thin"
style={{ overscrollBehavior: 'contain' }}
>
{filteredSlashCommands.map((cmd, idx) => (
<button
type="button"
key={cmd.command}
ref={(el) => (slashCommandItemRefs.current[idx] = el)}
className={`w-full px-4 py-3 text-left transition-colors ${
className={`w-full px-3 py-1 text-left transition-colors ${
idx === safeSelectedIndex ? 'font-semibold' : ''
}`}
style={{
Expand All @@ -528,8 +528,8 @@ export const InputArea = React.memo(function InputArea(props: InputAreaProps) {
}}
onMouseEnter={() => setSelectedSlashCommandIndex(idx)}
>
<div className="font-mono text-sm">{cmd.command}</div>
<div className="text-xs opacity-70 mt-0.5">{cmd.description}</div>
<div className="font-mono text-sm leading-tight">{cmd.command}</div>
<div className="text-[11px] opacity-70 leading-tight">{cmd.description}</div>
</button>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/components/MainPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -855,7 +855,7 @@ export const MainPanel = React.memo(
{!isMobileLandscape && (
<div
ref={headerRef}
className={`header-container h-16 border-b flex items-center justify-between px-6 shrink-0 relative z-20 ${isCurrentSessionAutoMode ? 'header-auto-mode' : ''}`}
className={`header-container h-16 border-b flex items-center justify-between px-6 shrink-0 relative ${isCurrentSessionAutoMode ? 'header-auto-mode' : ''}`}
style={{
borderColor: theme.colors.border,
backgroundColor: theme.colors.bgSidebar,
Expand Down
8 changes: 4 additions & 4 deletions src/renderer/components/SessionList/SessionList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -718,7 +718,7 @@ function SessionListInner(props: SessionListProps) {
</div>
</div>
{/* Hamburger Menu */}
<div className="relative z-10" ref={menuRef} data-tour="hamburger-menu">
<div className="relative z-30" ref={menuRef} data-tour="hamburger-menu">
<button
onClick={() => setMenuOpen(!menuOpen)}
className="p-2 rounded hover:bg-white/10 transition-colors"
Expand All @@ -730,7 +730,7 @@ function SessionListInner(props: SessionListProps) {
{/* Menu Overlay */}
{menuOpen && (
<div
className="absolute top-full left-0 mt-2 w-72 rounded-lg shadow-2xl z-50 overflow-y-auto scrollbar-thin"
className="absolute top-full left-0 -mt-px w-72 rounded-lg shadow-2xl z-[100] overflow-y-auto scrollbar-thin"
data-tour="hamburger-menu-contents"
style={{
backgroundColor: theme.colors.bgSidebar,
Expand All @@ -750,7 +750,7 @@ function SessionListInner(props: SessionListProps) {
</div>
</>
) : (
<div className="w-full flex flex-col items-center gap-2 relative" ref={menuRef}>
<div className="w-full flex flex-col items-center gap-2 relative z-30" ref={menuRef}>
<button
onClick={() => setMenuOpen(!menuOpen)}
className="p-2 rounded hover:bg-white/10 transition-colors"
Expand All @@ -764,7 +764,7 @@ function SessionListInner(props: SessionListProps) {
{/* Menu Overlay for Collapsed Sidebar */}
{menuOpen && (
<div
className="absolute top-full left-0 mt-2 w-72 rounded-lg shadow-2xl z-50 overflow-y-auto scrollbar-thin"
className="absolute top-full left-0 -mt-px w-72 rounded-lg shadow-2xl z-[100] overflow-y-auto scrollbar-thin"
style={{
backgroundColor: theme.colors.bgSidebar,
border: `1px solid ${theme.colors.border}`,
Expand Down
Loading