From 3f6d369c4d45186390e29ef12d3a5c42385e07f6 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Fri, 5 Dec 2025 10:48:08 -0600
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20refactor:=20move=20New=20Workspa?=
 =?UTF-8?q?ce=20to=20+=20icon=20on=20project=20row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Rename sidebar header from "Agents" to "Projects"
- Replace full-width "+ New Workspace" button with compact + icon
- Icon always visible on project row (before secrets/remove)
- Saves vertical real estate in sidebar
- Expand projects by default in sidebar storybook stories
---
 docs/system-prompt.md                       |  1 -
 src/browser/components/ProjectSidebar.tsx   | 38 ++++++++++++---------
 src/browser/stories/App.sidebar.stories.tsx |  8 +++++
 3 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/docs/system-prompt.md b/docs/system-prompt.md
index fb5bb1305..3b7de1ba0 100644
--- a/docs/system-prompt.md
+++ b/docs/system-prompt.md
@@ -62,5 +62,4 @@ You are in a git worktree at ${workspacePath}
 }
 ```
 
-
 {/* END SYSTEM_PROMPT_DOCS */}
diff --git a/src/browser/components/ProjectSidebar.tsx b/src/browser/components/ProjectSidebar.tsx
index 46159c5d3..72136321d 100644
--- a/src/browser/components/ProjectSidebar.tsx
+++ b/src/browser/components/ProjectSidebar.tsx
@@ -471,13 +471,13 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
         >
           {!collapsed && (
             <>
-              <div className="border-dark flex items-center justify-between border-b p-4">
-                <h2 className="text-foreground text-md m-0 font-semibold">Agents</h2>
+              <div className="border-dark flex items-center justify-between border-b py-2 pr-3 pl-4">
+                <h2 className="text-foreground text-md m-0 font-semibold">Projects</h2>
                 <TooltipWrapper inline>
                   <button
                     onClick={onAddProject}
                     aria-label="Add project"
-                    className="text-foreground hover:bg-hover hover:border-border-light flex h-6 w-6 cursor-pointer items-center justify-center rounded border border-transparent bg-transparent p-0 text-lg transition-all duration-200"
+                    className="text-muted-dark hover:text-foreground hover:bg-hover flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-lg transition-all duration-200"
                   >
                     +
                   </button>
@@ -565,7 +565,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               }}
                               aria-label={`Manage secrets for ${projectName}`}
                               data-project-path={projectPath}
-                              className="text-muted-dark mr-1 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200 hover:bg-yellow-500/10 hover:text-yellow-500"
+                              className="text-muted-dark flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-sm opacity-0 transition-all duration-200 hover:bg-yellow-500/10 hover:text-yellow-500"
                             >
                               <KeyRound size={12} />
                             </button>
@@ -590,6 +590,24 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                               Remove project
                             </Tooltip>
                           </TooltipWrapper>
+                          <TooltipWrapper inline>
+                            <button
+                              onClick={(event) => {
+                                event.stopPropagation();
+                                handleAddWorkspace(projectPath);
+                              }}
+                              aria-label={`Add workspace to ${projectName}`}
+                              data-project-path={projectPath}
+                              className="text-muted-dark hover:text-foreground hover:bg-hover flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-[3px] border-none bg-transparent text-base transition-all duration-200"
+                            >
+                              +
+                            </button>
+                            <Tooltip className="tooltip" align="right">
+                              New Workspace
+                              {selectedWorkspace?.projectPath === projectPath &&
+                                ` (${formatKeybind(KEYBINDS.NEW_WORKSPACE)})`}
+                            </Tooltip>
+                          </TooltipWrapper>
                         </DraggableProjectItem>
 
                         {isExpanded && (
@@ -598,18 +616,6 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             role="region"
                             aria-label={`Workspaces for ${projectName}`}
                           >
-                            <div className="border-hover border-b px-3 py-2">
-                              <button
-                                onClick={() => handleAddWorkspace(projectPath)}
-                                data-project-path={projectPath}
-                                aria-label={`Add workspace to ${projectName}`}
-                                className="text-muted border-border-medium hover:bg-hover hover:border-border-darker hover:text-foreground w-full cursor-pointer rounded border border-dashed bg-transparent px-3 py-1.5 text-left text-[13px] transition-all duration-200"
-                              >
-                                + New Workspace
-                                {selectedWorkspace?.projectPath === projectPath &&
-                                  ` (${formatKeybind(KEYBINDS.NEW_WORKSPACE)})`}
-                              </button>
-                            </div>
                             {(() => {
                               const allWorkspaces =
                                 sortedWorkspacesByProject.get(projectPath) ?? [];
diff --git a/src/browser/stories/App.sidebar.stories.tsx b/src/browser/stories/App.sidebar.stories.tsx
index c15ed980b..3af60560d 100644
--- a/src/browser/stories/App.sidebar.stories.tsx
+++ b/src/browser/stories/App.sidebar.stories.tsx
@@ -71,6 +71,7 @@ export const SingleProject: AppStory = {
           createWorkspace({ id: "ws-3", name: "bugfix/memory-leak", projectName: "my-app" }),
         ];
 
+        expandProjects(["/home/user/projects/my-app"]);
         return createMockORPCClient({
           projects: groupWorkspacesByProject(workspaces),
           workspaces,
@@ -99,6 +100,11 @@ export const MultipleProjects: AppStory = {
           createWorkspace({ id: "ws-6", name: "main", projectName: "mobile" }),
         ];
 
+        expandProjects([
+          "/home/user/projects/frontend",
+          "/home/user/projects/backend",
+          "/home/user/projects/mobile",
+        ]);
         return createMockORPCClient({
           projects: groupWorkspacesByProject(workspaces),
           workspaces,
@@ -132,6 +138,7 @@ export const ManyWorkspaces: AppStory = {
           createWorkspace({ id: `ws-${i}`, name, projectName: "big-app" })
         );
 
+        expandProjects(["/home/user/projects/big-app"]);
         return createMockORPCClient({
           projects: groupWorkspacesByProject(workspaces),
           workspaces,
@@ -195,6 +202,7 @@ export const GitStatusVariations: AppStory = {
           ["ws-ssh", { ahead: 1 }],
         ]);
 
+        expandProjects(["/home/user/projects/my-app"]);
         return createMockORPCClient({
           projects: groupWorkspacesByProject(workspaces),
           workspaces,