From e1947232d2cff20493b99626b382c626fe5d3822 Mon Sep 17 00:00:00 2001
From: Pervakov Grigorii <pervakov.grigory@gmail.com>
Date: Wed, 11 Nov 2026 18:05:14 +0100
Subject: [PATCH 1/2] Sidebar: line up every session row in one column

A row with children puts its expand chevron in front of its icon and a
row without children had nothing there, so at the same depth a parent's
icon and title sat 19px right of its siblings', and a child's title
started left of its parent's.

- Every session row without children reserves the chevron's box
  (ExpandSlot): tree rows, search results, archived, System, the new-chat
  row and the rename row. Icons and titles share one column and each
  level indents 16px, as file rows do in Files/FileTree.tsx.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/components/Chat/SessionSidebar.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Chat/SessionSidebar.tsx b/web/src/components/Chat/SessionSidebar.tsx
index 5725089da..cc4530bce 100644
--- a/web/src/components/Chat/SessionSidebar.tsx
+++ b/web/src/components/Chat/SessionSidebar.tsx
@@ -647,6 +647,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                     : 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
                   }`}
               >
+                <ExpandSlot />
                 <MessageSquare size={13} className="shrink-0 opacity-50" />
                 <div className="flex-1 min-w-0">
                   <div className="truncate text-xs in-data-[layout=page]:text-sm leading-tight italic">New chat</div>
@@ -795,6 +796,7 @@ export function SessionSidebar({ sessions, activeSession, agentStatus, onCreate,
                             : 'text-text-faint hover:bg-surface-raised hover:text-text-muted'
                           }`}
                       >
+                        <ExpandSlot />
                         <SessionOriginIcon session={s} />
                         <div className="flex-1 min-w-0">
                           <div className="truncate">{cleanTitle(s)}</div>
@@ -930,6 +932,11 @@ function GroupHeader({ label, count, collapsed, tone, onToggle }: {
 }
 
 
+/** Empty box the size of the expand chevron, so every row's icon and title sit in the same column. */
+function ExpandSlot() {
+  return <span aria-hidden="true" className="shrink-0 -ml-0.5 -mr-1 w-[17px]" />;
+}
+
 /** Sidebar icon tint for review-loop observer sessions, by loop status. */
 function reviewLoopIconTone(status: string): string {
   switch (status) {
@@ -1203,6 +1210,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
   if (renaming) {
     return (
       <div className="flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md bg-surface-raised">
+        <ExpandSlot />
         <MessageSquare size={13} className="shrink-0 opacity-50" />
         <TextField
           bare
@@ -1253,7 +1261,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
           : 'text-text-muted hover:bg-surface-raised hover:text-text-secondary'
         }${isDropTarget ? ' ring-2 ring-inset ring-accent bg-accent/10' : ''}${isDragSource ? ' opacity-50' : ''}`}
     >
-      {hasChildren && (
+      {hasChildren ? (
         <button
           type="button"
           onClick={(e) => { e.preventDefault(); e.stopPropagation(); onToggleExpand?.(session.id); }}
@@ -1262,7 +1270,7 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
         >
           {expanded ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
         </button>
-      )}
+      ) : <ExpandSlot />}
       <SessionOriginIcon session={session} />
       {session.review_loop && (
         <Repeat size={13} className={`shrink-0 ${reviewLoopIconTone(session.review_loop.status)}`} />

From b5dfbbc599d3bb6a4750498e0d97db31bb0fbd0e Mon Sep 17 00:00:00 2001
From: Pervakov Grigorii <pervakov.grigory@gmail.com>
Date: Wed, 11 Nov 2026 18:25:14 +0100
Subject: [PATCH 2/2] Sidebar: keep a nested row's indent while it is renamed

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/components/Chat/SessionSidebar.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/Chat/SessionSidebar.tsx b/web/src/components/Chat/SessionSidebar.tsx
index cc4530bce..489a73fea 100644
--- a/web/src/components/Chat/SessionSidebar.tsx
+++ b/web/src/components/Chat/SessionSidebar.tsx
@@ -1209,7 +1209,10 @@ function SessionItem({ session, isActive, isRunning, onDelete, onRename, onToggl
 
   if (renaming) {
     return (
-      <div className="flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md bg-surface-raised">
+      <div
+        style={depth ? { paddingLeft: 12 + depth * 16 } : undefined}
+        className="flex items-center gap-2 px-3 py-1.5 mx-1 rounded-md bg-surface-raised"
+      >
         <ExpandSlot />
         <MessageSquare size={13} className="shrink-0 opacity-50" />
         <TextField