From 887853d90e3c128028514e1c5e28014519795c1f Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden@coder.com>
Date: Fri, 13 Mar 2026 16:39:29 +0000
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A4=96=20fix:=20restyle=20section=20h?=
 =?UTF-8?q?eaders=20and=20rename=20section=20chat=20copy?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProjectSidebar/ProjectSidebar.tsx |  2 +-
 .../components/SectionHeader/SectionHeader.tsx   | 16 ++++++----------
 .../stories/App.phoneViewports.stories.tsx       |  2 +-
 tests/ui/chat/sections.test.ts                   |  4 +---
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx b/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
index df48a5a3d1..7645337e23 100644
--- a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
+++ b/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
@@ -1920,7 +1920,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                             )
                                           ) : sectionDrafts.length === 0 ? (
                                             <div className="text-muted px-3 py-2 text-center text-xs italic">
-                                              No workspaces in this section
+                                              No chats in this section
                                             </div>
                                           ) : null}
                                         </div>
diff --git a/src/browser/components/SectionHeader/SectionHeader.tsx b/src/browser/components/SectionHeader/SectionHeader.tsx
index 1833200948..2e9a738210 100644
--- a/src/browser/components/SectionHeader/SectionHeader.tsx
+++ b/src/browser/components/SectionHeader/SectionHeader.tsx
@@ -72,12 +72,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
 
   return (
     <div
-      className="group relative flex items-center gap-1 border-t border-white/5 px-2 py-1.5 select-none"
-      style={{
-        backgroundColor: `${sectionColor}10`,
-        borderLeftWidth: 3,
-        borderLeftColor: sectionColor,
-      }}
+      className="group relative flex items-center gap-1 border-t border-white/5 py-1.5 pr-2 pl-3 select-none"
       data-section-id={section.id}
     >
       {/* Expand/Collapse Button */}
@@ -116,7 +111,8 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
         <button
           onClick={onToggleExpand}
           onDoubleClick={() => setIsEditing(true)}
-          className="text-foreground min-w-0 flex-1 cursor-pointer truncate border-none bg-transparent p-0 text-left text-xs font-medium"
+          className="min-w-0 flex-1 cursor-pointer truncate border-none bg-transparent p-0 text-left text-xs font-medium"
+          style={{ color: sectionColor }}
         >
           {section.name}
           <span className="text-muted ml-1.5 font-normal">({workspaceCount})</span>
@@ -218,18 +214,18 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
         </Tooltip>
       </div>
 
-      {/* Add Workspace — always visible on touch devices */}
+      {/* Add Chat — always visible on touch devices */}
       <Tooltip>
         <TooltipTrigger asChild>
           <button
             onClick={onAddWorkspace}
             className="text-secondary hover:text-foreground hover:bg-hover flex h-5 w-5 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-sm opacity-0 transition-[colors,opacity] group-hover:opacity-100 [@media(hover:none)_and_(pointer:coarse)]:opacity-100"
-            aria-label="New workspace in section"
+            aria-label="New chat in section"
           >
             +
           </button>
         </TooltipTrigger>
-        <TooltipContent>New workspace</TooltipContent>
+        <TooltipContent>New chat</TooltipContent>
       </Tooltip>
     </div>
   );
diff --git a/src/browser/stories/App.phoneViewports.stories.tsx b/src/browser/stories/App.phoneViewports.stories.tsx
index 15504da0b1..0f54df180f 100644
--- a/src/browser/stories/App.phoneViewports.stories.tsx
+++ b/src/browser/stories/App.phoneViewports.stories.tsx
@@ -319,7 +319,7 @@ export const IPhone16eSidebarWithSections: AppStory = {
         // The actual visibility assertion (opacity via CSS media query) is
         // validated by the Chromatic snapshot in touch mode — the Storybook
         // test runner doesn't emulate pointer:coarse media queries.
-        within(sectionHeader as HTMLElement).getByLabelText("New workspace in section");
+        within(sectionHeader as HTMLElement).getByLabelText("New chat in section");
       },
       { timeout: 10_000 }
     );
diff --git a/tests/ui/chat/sections.test.ts b/tests/ui/chat/sections.test.ts
index 3ebe9533ea..f10ac65143 100644
--- a/tests/ui/chat/sections.test.ts
+++ b/tests/ui/chat/sections.test.ts
@@ -265,9 +265,7 @@ describeIntegration("Workspace Sections", () => {
       const sectionHeader = view.container.querySelector(`[data-section-id="${sectionId}"]`);
       expect(sectionHeader).not.toBeNull();
 
-      const addButton = sectionHeader!.querySelector(
-        'button[aria-label="New workspace in section"]'
-      );
+      const addButton = sectionHeader!.querySelector('button[aria-label="New chat in section"]');
       expect(addButton).not.toBeNull();
 
       // Click the add button - this should navigate to create page with section context

From c114a8e8486e2c9f17629687a5e0661874226bdd Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 18 Mar 2026 21:54:18 +0700
Subject: [PATCH 2/3] chore: style updates

---
 .../AddSectionButton/AddSectionButton.tsx     |  7 ++----
 .../AgentListItem/AgentListItem.tsx           | 25 ++++++++++++++-----
 .../ProjectSidebar/ProjectSidebar.tsx         | 25 +++++++++++--------
 .../SectionHeader/SectionHeader.tsx           |  5 ++--
 src/browser/styles/globals.css                |  6 ++++-
 5 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/src/browser/components/AddSectionButton/AddSectionButton.tsx b/src/browser/components/AddSectionButton/AddSectionButton.tsx
index 0a8248027a..beff820652 100644
--- a/src/browser/components/AddSectionButton/AddSectionButton.tsx
+++ b/src/browser/components/AddSectionButton/AddSectionButton.tsx
@@ -28,10 +28,7 @@ export const AddSectionButton: React.FC<AddSectionButtonProps> = ({ onCreateSect
 
   if (isCreating) {
     return (
-      <div className="flex items-center gap-1 px-2 py-0.5">
-        <div className="flex h-5 w-5 shrink-0 items-center justify-center">
-          <Plus size={12} className="text-muted/60" />
-        </div>
+      <div className="flex items-center px-2 py-0.5">
         <input
           ref={inputRef}
           type="text"
@@ -47,7 +44,7 @@ export const AddSectionButton: React.FC<AddSectionButtonProps> = ({ onCreateSect
           }}
           placeholder="Section name..."
           data-testid="add-section-input"
-          className="bg-background/50 text-foreground min-w-0 flex-1 rounded border border-white/20 px-1.5 py-0.5 text-[11px] outline-none select-text"
+          className="bg-background/50 text-foreground ml-6 min-w-0 flex-1 rounded border border-white/20 px-1.5 py-0.5 text-[11px] outline-none select-text"
         />
       </div>
     );
diff --git a/src/browser/components/AgentListItem/AgentListItem.tsx b/src/browser/components/AgentListItem/AgentListItem.tsx
index a5b6fd7f7d..2718307494 100644
--- a/src/browser/components/AgentListItem/AgentListItem.tsx
+++ b/src/browser/components/AgentListItem/AgentListItem.tsx
@@ -74,6 +74,7 @@ interface AgentListItemBaseProps {
   projectPath: string;
   isSelected: boolean;
   depth?: number;
+  sectionId?: string;
 }
 
 /** Props for regular (persisted) workspace items */
@@ -122,7 +123,7 @@ const SHOW_INLINE_ACTIONS_ON_WIDE_TOUCH =
 /** Calculate left padding based on nesting depth */
 function getItemPaddingLeft(depth?: number): number {
   const safeDepth = typeof depth === "number" && Number.isFinite(depth) ? Math.max(0, depth) : 0;
-  return 12 + Math.min(32, safeDepth) * 12;
+  return 8 + Math.min(32, safeDepth) * 12;
 }
 
 type VisualState = "active" | "idle" | "seen" | "hidden" | "error" | "question";
@@ -255,7 +256,7 @@ function ActionButtonWrapper(props: { children: React.ReactNode }) {
   return (
     <div
       className={cn(
-        "relative order-last ml-auto mt-1 inline-flex h-4 w-4 shrink-0 items-center self-start"
+        "relative order-last ml-auto mt-1 inline-flex shrink-0 items-center gap-1 self-start"
       )}
     >
       {/* Keep the kebab trigger aligned with the title row. */}
@@ -269,9 +270,19 @@ function ActionButtonWrapper(props: { children: React.ReactNode }) {
 // ─────────────────────────────────────────────────────────────────────────────
 
 function DraftAgentListItemInner(props: DraftAgentListItemProps) {
-  const { projectPath, isSelected, depth, draft } = props;
+  const { projectPath, isSelected, depth, sectionId, draft } = props;
   const paddingLeft = getItemPaddingLeft(depth);
   const hasPromptPreview = draft.promptPreview.length > 0;
+  const draftBorderStyle: React.CSSProperties = {
+    backgroundImage: [
+      "repeating-linear-gradient(to right, var(--color-border) 0 8px, transparent 8px 14px)",
+      "repeating-linear-gradient(to right, var(--color-border) 0 8px, transparent 8px 14px)",
+      "repeating-linear-gradient(to bottom, var(--color-border) 0 8px, transparent 8px 14px)",
+    ].join(", "),
+    backgroundSize: "100% 1.5px, 100% 1.5px, 1.5px 100%",
+    backgroundPosition: "left top, left bottom, left top",
+    backgroundRepeat: "no-repeat",
+  };
 
   const ctxMenu = useContextMenuPosition({ longPress: true });
 
@@ -279,10 +290,11 @@ function DraftAgentListItemInner(props: DraftAgentListItemProps) {
     <div
       className={cn(
         LIST_ITEM_BASE_CLASSES,
-        "border-border cursor-pointer border-t border-b border-l border-dashed pl-1 hover:bg-surface-secondary [&:hover_button]:opacity-100",
+        sectionId != null ? "ml-8" : "ml-6.5",
+        "cursor-pointer pl-1 hover:bg-surface-secondary [&:hover_button]:opacity-100",
         isSelected && "bg-surface-secondary"
       )}
-      style={{ paddingLeft }}
+      style={{ paddingLeft, ...draftBorderStyle }}
       onClick={() => {
         if (ctxMenu.suppressClickIfLongPress()) return;
         draft.onOpen();
@@ -602,7 +614,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
     !isSelected && visualState === "idle"
       ? "text-content-primary"
       : !isSelected && visualState === "seen"
-        ? "text-content-secondary"
+        ? "text-content-tertiary"
         : "text-content-primary";
 
   const paddingLeft = getItemPaddingLeft(depth);
@@ -640,6 +652,7 @@ function RegularAgentListItemInner(props: AgentListItemProps) {
         className={cn(
           LIST_ITEM_BASE_CLASSES,
           "group/row",
+          sectionId != null ? "ml-8" : "ml-6.5",
           isDragging && "opacity-50",
           isRemoving && "opacity-70",
           // Keep hover styles enabled for initializing workspaces so the row feels interactive.
diff --git a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx b/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
index bd6df93efb..8bfa6abc2e 100644
--- a/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
+++ b/src/browser/components/ProjectSidebar/ProjectSidebar.tsx
@@ -259,6 +259,7 @@ interface DraftAgentListItemWrapperProps {
   draftId: string;
   draftNumber: number;
   isSelected: boolean;
+  sectionId?: string;
   onOpen: () => void;
   onDelete: () => void;
 }
@@ -295,6 +296,7 @@ function DraftAgentListItemWrapper(props: DraftAgentListItemWrapperProps) {
       variant="draft"
       projectPath={props.projectPath}
       isSelected={props.isSelected}
+      sectionId={props.sectionId}
       draft={{
         draftId: props.draftId,
         draftNumber: props.draftNumber,
@@ -356,7 +358,7 @@ const ProjectDragLayer: React.FC = () => {
       <div style={{ transform: `translate(${currentOffset.x + 10}px, ${currentOffset.y + 10}px)` }}>
         <div className={cn(PROJECT_ITEM_BASE_CLASS, "w-fit max-w-64 rounded-sm shadow-lg")}>
           <span className="text-secondary mr-2 flex h-5 w-5 shrink-0 items-center justify-center">
-            <ChevronRight size={12} />
+            <ChevronRight className="h-4 w-4" />
           </span>
           <div className="flex min-w-0 flex-1 items-center pr-2">
             <span className="text-foreground truncate text-sm font-medium">{basename}</span>
@@ -1337,7 +1339,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                 className="flex-1 overflow-x-hidden overflow-y-auto"
               >
                 {multiProjectWorkspaces.length > 0 && (
-                  <div className="border-hover border-b">
+                  <div>
                     <div className={PROJECT_ITEM_BASE_CLASS}>
                       <button
                         onClick={() => toggleProject(MULTI_PROJECT_SIDEBAR_SECTION_ID)}
@@ -1345,8 +1347,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                         className="text-secondary hover:bg-hover hover:border-border-light mr-1.5 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"
                       >
                         <ChevronRight
-                          size={12}
-                          className="transition-transform duration-200"
+                          className="h-4 w-4 transition-transform duration-200"
                           style={{
                             transform: isMultiProjectSectionExpanded
                               ? "rotate(90deg)"
@@ -1426,7 +1427,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                     const isEditingProjectDisplayName = editingProjectPath === projectPath;
 
                     return (
-                      <div key={projectPath} className="border-hover border-b">
+                      <div key={projectPath}>
                         <DraggableProjectItem
                           projectPath={projectPath}
                           onReorder={handleReorder}
@@ -1473,8 +1474,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             className="text-secondary hover:bg-hover hover:border-border-light mr-1.5 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"
                           >
                             <ChevronRight
-                              size={12}
-                              className="transition-transform duration-200"
+                              className="h-4 w-4 transition-transform duration-200"
                               style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
                             />
                           </button>
@@ -1574,8 +1574,12 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                             id={workspaceListId}
                             role="region"
                             aria-label={`Workspaces for ${projectName}`}
-                            className="pt-1"
+                            className="relative pt-1"
                           >
+                            <div
+                              aria-hidden="true"
+                              className="bg-border pointer-events-none absolute top-1 bottom-0 left-4.5 w-px"
+                            />
                             {(() => {
                               // Archived workspaces are excluded from workspaceMetadata so won't appear here
 
@@ -1937,6 +1941,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                     draftId={draft.draftId}
                                     draftNumber={draftNumber}
                                     isSelected={isSelected}
+                                    sectionId={sectionId ?? undefined}
                                     onOpen={() =>
                                       handleOpenWorkspaceDraft(
                                         projectPath,
@@ -2177,7 +2182,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                               : "rotate(0deg)",
                                           }}
                                         >
-                                          <ChevronRight size={12} />
+                                          <ChevronRight className="h-4 w-4" />
                                         </span>
                                       </button>
                                       {isTierExpanded && (
@@ -2369,7 +2374,7 @@ const ProjectSidebarInner: React.FC<ProjectSidebarProps> = ({
                                         )
                                       ) : unsectionedDrafts.length === 0 ? (
                                         <div className="text-muted px-3 py-2 text-center text-xs italic">
-                                          No unsectioned workspaces
+                                          No unsectioned chats
                                         </div>
                                       ) : null}
                                     </WorkspaceSectionDropZone>
diff --git a/src/browser/components/SectionHeader/SectionHeader.tsx b/src/browser/components/SectionHeader/SectionHeader.tsx
index 74c9ce359b..cd4ee58f4e 100644
--- a/src/browser/components/SectionHeader/SectionHeader.tsx
+++ b/src/browser/components/SectionHeader/SectionHeader.tsx
@@ -72,7 +72,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
 
   return (
     <div
-      className="group relative flex items-center gap-1 border-t border-white/5 py-1.5 pr-2 pl-3 select-none"
+      className="group relative ml-2 flex items-center gap-1 py-1.5 pr-2 pl-3 select-none"
       data-section-id={section.id}
     >
       {/* Expand/Collapse Button */}
@@ -83,8 +83,7 @@ export const SectionHeader: React.FC<SectionHeaderProps> = ({
         aria-expanded={isExpanded}
       >
         <ChevronRight
-          size={12}
-          className="transition-transform duration-200"
+          className="h-3 w-3 transition-transform duration-200"
           style={{ transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)" }}
         />
       </button>
diff --git a/src/browser/styles/globals.css b/src/browser/styles/globals.css
index 42f44942f4..7cc5fb8058 100644
--- a/src/browser/styles/globals.css
+++ b/src/browser/styles/globals.css
@@ -116,6 +116,7 @@
     --color-text-secondary: hsl(0 0% 42%);
     --color-content-primary: hsl(0 0% 100%);
     --color-content-secondary: hsla(240, 5%, 65%);
+    --color-content-tertiary: hsla(240, 5%, 34%);
     --color-muted-foreground: hsl(0 0% 60%);
     --color-secondary: hsl(0 0% 42%);
     --color-surface-primary: hsla(240, 10%, 4%, 1);
@@ -410,13 +411,14 @@
 
   --color-background: hsl(210 33% 98%);
   --color-background-secondary: hsl(210 36% 95%);
-  --color-border: hsl(210 24% 82%);
+  --color-border: hsla(240, 5%, 26%);
   --color-foreground: hsl(210 18% 16%);
   --color-text: hsl(210 18% 16%);
   --color-text-light: hsl(210 15% 28%);
   --color-text-secondary: hsl(210 12% 42%);
   --color-content-primary: hsl(240 10% 4%);
   --color-content-secondary: hsla(240, 5%, 34%);
+  --color-content-tertiary: hsl(240, 4%, 46%);
   --color-muted-foreground: hsl(210 14% 48%);
   --color-secondary: hsl(210 18% 60%);
   --color-surface-primary: hsla(0, 0%, 100%, 1);
@@ -675,6 +677,7 @@
   --color-text-secondary: #6f6e69;
   --color-content-primary: #100f0f;
   --color-content-secondary: #575653;
+  --color-content-tertiary: #6f6e69;
   --color-muted-foreground: #6f6e69;
   --color-secondary: #6f6e69;
   --color-surface-primary: #fffcf0;
@@ -905,6 +908,7 @@
   --color-text-secondary: #575653;
   --color-content-primary: #fffcf0;
   --color-content-secondary: #878580;
+  --color-content-tertiary: #575653;
   --color-muted-foreground: #878580;
   --color-secondary: #575653;
   --color-surface-primary: #100f0f;

From 168b2acc3a2e076ee9e0b9eaab12b3d8928ffc9b Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 19 Mar 2026 15:08:22 +0700
Subject: [PATCH 3/3] fix: fix stories

---
 src/browser/components/AgentListItem/AgentListItem.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/components/AgentListItem/AgentListItem.stories.tsx b/src/browser/components/AgentListItem/AgentListItem.stories.tsx
index f3e8ba8628..962e7039bb 100644
--- a/src/browser/components/AgentListItem/AgentListItem.stories.tsx
+++ b/src/browser/components/AgentListItem/AgentListItem.stories.tsx
@@ -541,7 +541,7 @@ async function assertNestedConnectorContinuity(
   );
   for (const trunk of ancestorTrunks) {
     await expect(trunk).toHaveAttribute("data-trunk-active", expectedTrunkActive);
-    await expect(trunk.style.left).toBe("20px");
+    await expect(trunk.style.left).toBe("16px");
   }
 }