diff --git a/src/browser/components/ChatMetaSidebar.tsx b/src/browser/components/ChatMetaSidebar.tsx index 46e604ac8d..462880e2ec 100644 --- a/src/browser/components/ChatMetaSidebar.tsx +++ b/src/browser/components/ChatMetaSidebar.tsx @@ -61,7 +61,7 @@ const ChatMetaSidebarComponent: React.FC = ({ workspaceId, return (
= ({
drag(drop(node))} className={cn( - "py-2 px-3 flex items-center border-l-transparent transition-all duration-150 bg-separator", + "py-2 px-3 flex items-center border-l-transparent transition-all duration-150 bg-sidebar", isDragging ? "cursor-grabbing opacity-40 [&_*]:!cursor-grabbing" : "cursor-grab", isOver && "bg-accent/[0.08]", selected && "bg-hover border-l-accent", - "hover:bg-hover hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100" + "hover:[&_button]:opacity-100 hover:[&_[data-drag-handle]]:opacity-100" )} {...rest} > @@ -465,19 +465,19 @@ const ProjectSidebarInner: React.FC = ({
{!collapsed && ( <>
-

Agents

+

Projects

@@ -513,42 +513,47 @@ const ProjectSidebarInner: React.FC = ({ projectPath={projectPath} onReorder={handleReorder} selected={false} - onClick={() => toggleProject(projectPath)} + onClick={() => handleAddWorkspace(projectPath)} onKeyDown={(e: React.KeyboardEvent) => { + // Ignore key events from child buttons + if (e.target instanceof HTMLElement && e.target !== e.currentTarget) { + return; + } if (e.key === "Enter" || e.key === " ") { e.preventDefault(); - toggleProject(projectPath); + handleAddWorkspace(projectPath); } }} role="button" tabIndex={0} aria-expanded={isExpanded} aria-controls={workspaceListId} - aria-label={`${isExpanded ? "Collapse" : "Expand"} project ${projectName}`} + aria-label={`Create workspace in ${projectName}`} data-project-path={projectPath} > - { + event.stopPropagation(); + toggleProject(projectPath); + }} + aria-label={`${isExpanded ? "Collapse" : "Expand"} project ${projectName}`} data-project-path={projectPath} - aria-hidden="true" - className="text-muted mr-2 shrink-0 text-xs transition-transform duration-200" - style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }} + className="text-secondary hover:bg-hover hover:border-border-light mr-2 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 transition-all duration-200" > - - + +
-
+
{(() => { const abbrevPath = PlatformPaths.abbreviate(projectPath); - const { dirPath, basename } = - PlatformPaths.splitAbbreviated(abbrevPath); + const { basename } = PlatformPaths.splitAbbreviated(abbrevPath); return ( - <> - {dirPath} - - {basename} - - + {basename} ); })()}
@@ -582,7 +587,7 @@ const ProjectSidebarInner: React.FC = ({ title="Remove project" aria-label={`Remove project ${projectName}`} data-project-path={projectPath} - className="text-muted-dark hover:text-danger-light hover:bg-danger-light/10 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200" + className="text-muted-dark hover:text-danger-light hover:bg-danger-light/10 mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base opacity-0 transition-all duration-200" > × @@ -590,6 +595,17 @@ const ProjectSidebarInner: React.FC = ({ Remove project + {isExpanded && ( @@ -597,19 +613,8 @@ const ProjectSidebarInner: React.FC = ({ id={workspaceListId} role="region" aria-label={`Workspaces for ${projectName}`} + className="pt-1" > -
- -
{(() => { const allWorkspaces = sortedWorkspacesByProject.get(projectPath) ?? []; diff --git a/src/browser/components/RightSidebar.tsx b/src/browser/components/RightSidebar.tsx index 59070fe14f..e796e5b9c3 100644 --- a/src/browser/components/RightSidebar.tsx +++ b/src/browser/components/RightSidebar.tsx @@ -50,7 +50,7 @@ const SidebarContainer: React.FC = ({ return (
= ({
{/* Render meter when Review tab is active */} {selectedTab === "review" && ( -
+
{verticalMeter}
)} diff --git a/src/browser/components/RightSidebar/VerticalTokenMeter.tsx b/src/browser/components/RightSidebar/VerticalTokenMeter.tsx index 2673b01d36..06c558c44a 100644 --- a/src/browser/components/RightSidebar/VerticalTokenMeter.tsx +++ b/src/browser/components/RightSidebar/VerticalTokenMeter.tsx @@ -25,7 +25,7 @@ const VerticalTokenMeterComponent: React.FC = ({ return (
{/* Percentage label at top */} diff --git a/src/browser/components/TitleBar.tsx b/src/browser/components/TitleBar.tsx index 5b829ccd67..f772fb8670 100644 --- a/src/browser/components/TitleBar.tsx +++ b/src/browser/components/TitleBar.tsx @@ -230,7 +230,7 @@ export function TitleBar() { const showUpdateIndicator = true; return ( -
+
{showUpdateIndicator && ( diff --git a/src/browser/components/VimTextArea.tsx b/src/browser/components/VimTextArea.tsx index 9951102833..2c4d4f7647 100644 --- a/src/browser/components/VimTextArea.tsx +++ b/src/browser/components/VimTextArea.tsx @@ -250,7 +250,7 @@ export const VimTextArea = React.forwardRef = ({ }, [startTutorial, isSequenceCompleted]); return ( -
+
= ({ data-workspace-id={workspaceId} /> ) : ( - { - if (isDisabled) return; - e.stopPropagation(); - startRenaming(); - }} - title={isDisabled ? undefined : "Double-click to rename"} - > - {canInterrupt || isCreating ? ( - - {displayName} - - ) : ( - displayName - )} - + + { + if (isDisabled) return; + e.stopPropagation(); + startRenaming(); + }} + title={isDisabled ? undefined : "Double-click to rename"} + > + {canInterrupt || isCreating ? ( + + {displayName} + + ) : ( + displayName + )} + + + Double-click to rename + + )}
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css index d032fa4068..710513b9b6 100644 --- a/src/browser/styles/globals.css +++ b/src/browser/styles/globals.css @@ -72,7 +72,7 @@ /* Background & Layout */ --color-background: hsl(0 0% 12%); --color-background-secondary: hsl(60 1% 15%); - --color-border: hsl(240 2% 25%); + --color-border: #262626; /* neutral-800 */ --color-foreground: hsl(0 0% 83%); --color-text: hsl(0 0% 83%); --color-text-light: hsl(0 0% 73%); @@ -189,20 +189,21 @@ --color-gray: hsl(0 0% 48%); /* #7a7a7a - gray */ --color-medium: hsl(0 0% 59%); /* #969696 - medium */ - --color-border-light: hsl(240 3% 25%); /* #3e3e42 - lighter borders */ + --color-border-light: #262626; /* neutral-800 - borders */ --color-border-medium: hsl(0 0% 27%); /* #444 - medium borders */ --color-border-darker: hsl(0 0% 33%); /* #555 - darker borders */ --color-border-subtle: hsl(0 0% 40%); /* #666 - subtle border */ --color-border-gray: hsl(240 1% 31%); /* #4e4e52 - gray border */ - --color-dark: hsl(0 0% 11.5%); /* #1e1e1e - dark backgrounds */ + --color-dark: #1D1D1D; /* dark backgrounds */ --color-darker: hsl(0 0% 8.6%); /* #161616 - darker backgrounds */ --color-hover: hsl(0 0% 16.5%); /* #2a2a2b - hover states */ --color-bg-medium: hsl(0 0% 27%); /* #454545 - medium bg */ --color-bg-light: hsl(0 0% 30%); /* #4c4c4c - light bg */ --color-bg-subtle: hsl(240 3% 22%); /* #37373d - subtle bg */ - --color-separator: hsl(0 0% 15%); /* #252526 - separators */ + --color-sidebar: #171717; /* neutral-900 - sidebar background */ + --color-separator: #262626; /* neutral-800 - dividers/separators */ --color-separator-light: hsl(0 0% 27%); /* #464647 - lighter separator */ --color-modal-bg: hsl(0 0% 18%); /* #2d2d30 - modal backgrounds */ @@ -434,6 +435,7 @@ --color-bg-light: hsl(210 24% 84%); --color-bg-subtle: hsl(210 32% 92%); + --color-sidebar: hsl(0 0% 96%); /* light theme sidebar */ --color-separator: hsl(0 0% 91%); --color-separator-light: hsl(0 0% 96%); --color-modal-bg: hsl(210 35% 96%); @@ -662,7 +664,8 @@ --color-bg-light: #d5ceb8; --color-bg-subtle: #eee8d5; - --color-separator: #eee8d5; /* base2 - sidebar background */ + --color-sidebar: #eee8d5; /* base2 - sidebar background */ + --color-separator: #d5ceb8; --color-separator-light: #f5efdc; --color-modal-bg: #fdf6e3; @@ -881,7 +884,8 @@ --color-bg-light: #106577; --color-bg-subtle: #073642; - --color-separator: #073642; /* base02 - sidebar background */ + --color-sidebar: #073642; /* base02 - sidebar background */ + --color-separator: #0a4555; --color-separator-light: #094555; /* slightly lighter for hover states */ --color-modal-bg: #073642; diff --git a/tests/e2e/utils/ui.ts b/tests/e2e/utils/ui.ts index 9acb2f2d1d..5fff984b08 100644 --- a/tests/e2e/utils/ui.ts +++ b/tests/e2e/utils/ui.ts @@ -92,7 +92,9 @@ export function createWorkspaceUI(page: Page, context: DemoProjectConfig): Works const workspaceItem = workspaceItems.first(); const isVisible = await workspaceItem.isVisible().catch(() => false); if (!isVisible) { - await projectItem.click(); + // Click the expand/collapse button within the project item + const expandButton = projectItem.getByRole("button", { name: /expand project/i }); + await expandButton.click(); await workspaceItem.waitFor({ state: "visible" }); }