chore: cleanup

packages/app/src/pages/session/message-timeline.tsx

@@ -368,7 +368,7 @@ export function MessageTimeline(props: {
           class="relative min-w-0 w-full h-full overflow-y-auto session-scroller"
           style={{
             "--session-title-height": showHeader() ? "40px" : "0px",
-            "--sticky-accordion-top": showHeader() ? "64px" : "0px",
+            "--sticky-accordion-top": showHeader() ? "48px" : "0px",
           }}
         >
           <Show when={showHeader()}>

packages/ui/src/components/message-part.css

@@ -1219,6 +1219,21 @@
   }
 }
 
+[data-component="apply-patch-tool"] {
+  > [data-component="collapsible"].tool-collapsible {
+    gap: 0px;
+  }
+
+  > [data-component="collapsible"] > [data-slot="collapsible-trigger"][aria-expanded="true"] {
+    position: sticky;
+    top: var(--sticky-accordion-top, 0px);
+    z-index: 20;
+    height: 40px;
+    padding-bottom: 8px;
+    background-color: var(--background-stronger);
+  }
+}
+
 [data-component="accordion"][data-scope="apply-patch"] {
   [data-slot="accordion-trigger"] {
     background-color: var(--background-stronger) !important;

packages/ui/src/components/message-part.tsx

@@ -1611,6 +1611,7 @@ ToolRegistry.register({
     })
 
     return (
+      <div data-component="apply-patch-tool">
         <BasicTool
           {...props}
           icon="code-lines"
@@ -1624,6 +1625,7 @@ ToolRegistry.register({
             <Accordion
               multiple
               data-scope="apply-patch"
+              style={{ "--sticky-accordion-offset": "40px" }}
               value={expanded()}
               onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])}
             >
@@ -1702,6 +1704,7 @@ ToolRegistry.register({
             </Accordion>
           </Show>
         </BasicTool>
+      </div>
     )
   },
 })

packages/ui/src/components/session-turn.css

@@ -81,6 +81,17 @@
     min-width: 0;
   }
 
+  [data-slot="session-turn-diffs"]
+    > [data-component="collapsible"]
+    > [data-slot="collapsible-trigger"][aria-expanded="true"] {
+    position: sticky;
+    top: var(--sticky-accordion-top, 0px);
+    z-index: 20;
+    height: 40px;
+    padding-bottom: 8px;
+    background-color: var(--background-stronger);
+  }
+
   [data-component="session-turn-diffs-trigger"] {
     width: 100%;
     display: flex;
@@ -124,7 +135,7 @@
   }
 
   [data-component="session-turn-diffs-content"] {
-    padding-top: 8px;
+    padding-top: 0px;
     display: flex;
     flex-direction: column;
   }

packages/ui/src/components/session-turn.tsx

@@ -318,6 +318,7 @@ export function SessionTurn(
                           <div data-component="session-turn-diffs-content">
                             <Accordion
                               multiple
+                              style={{ "--sticky-accordion-offset": "40px" }}
                               value={expanded()}
                               onChange={(value) => setExpanded(Array.isArray(value) ? value : value ? [value] : [])}
                             >

packages/ui/src/components/sticky-accordion-header.css

@@ -1,14 +1,6 @@
 [data-component="sticky-accordion-header"] {
-  --sticky-accordion-top: 0px;
   position: sticky;
-  top: var(--sticky-accordion-top);
-}
-
-[data-slot="accordion-item"]:first-child [data-component="sticky-accordion-header"] {
+  top: calc(var(--sticky-accordion-top, 0px) + var(--sticky-accordion-offset, 0px));
+  z-index: 10;
   background-color: var(--background-stronger);
 }
-
-[data-component="sticky-accordion-header"][data-expanded],
-[data-slot="accordion-item"][data-expanded] [data-component="sticky-accordion-header"] {
-  z-index: 10;
-}