From d463ade028211e7bcfcb69338ecb82b2dbcef51c Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 12 Dec 2025 15:18:07 -0600
Subject: [PATCH] fix: desktop layout

---
 packages/ui/src/components/basic-tool.tsx   |  3 ++-
 packages/ui/src/components/message-part.tsx |  1 +
 packages/ui/src/components/session-turn.tsx | 16 +++++++---------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/components/basic-tool.tsx b/packages/ui/src/components/basic-tool.tsx
index 596eef00b..4fab331a5 100644
--- a/packages/ui/src/components/basic-tool.tsx
+++ b/packages/ui/src/components/basic-tool.tsx
@@ -21,12 +21,13 @@ export interface BasicToolProps {
   trigger: TriggerTitle | JSX.Element
   children?: JSX.Element
   hideDetails?: boolean
+  defaultOpen?: boolean
 }
 
 export function BasicTool(props: BasicToolProps) {
   const resolved = children(() => props.children)
   return (
-    <Collapsible>
+    <Collapsible defaultOpen={props.defaultOpen}>
       <Collapsible.Trigger>
         <div data-component="tool-trigger">
           <div data-slot="basic-tool-tool-trigger-content">
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index d69432caa..b70a68de8 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -343,6 +343,7 @@ ToolRegistry.register({
     const diffComponent = useDiffComponent()
     return (
       <BasicTool
+        defaultOpen
         icon="code-lines"
         trigger={
           <div data-component="edit-trigger">
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 71032be92..0cbe1a0d2 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -25,7 +25,6 @@ import { StickyAccordionHeader } from "./sticky-accordion-header"
 import { FileIcon } from "./file-icon"
 import { Icon } from "./icon"
 import { Card } from "./card"
-import { Collapsible } from "./collapsible"
 import { Dynamic } from "solid-js/web"
 import { Button } from "./button"
 import { Spinner } from "./spinner"
@@ -206,7 +205,7 @@ export function SessionTurn(
 
               const [store, setStore] = createStore({
                 status: rawStatus(),
-                detailsExpanded: true,
+                stepsExpanded: true,
                 duration: duration(),
               })
 
@@ -242,11 +241,10 @@ export function SessionTurn(
                 }
               })
 
-              // Auto-collapse steps when done working (if user hasn't interacted)
               createEffect((prev) => {
                 const isWorking = working()
                 if (prev && !isWorking && !userScrolled()) {
-                  setStore("detailsExpanded", false)
+                  setStore("stepsExpanded", false)
                 }
                 return isWorking
               }, working())
@@ -280,15 +278,15 @@ export function SessionTurn(
                         data-slot="session-turn-collapsible-trigger-content"
                         variant="ghost"
                         size="small"
-                        onClick={() => setStore("detailsExpanded", !store.detailsExpanded)}
+                        onClick={() => setStore("stepsExpanded", !store.stepsExpanded)}
                       >
                         <Show when={working()}>
                           <Spinner />
                         </Show>
                         <Switch>
                           <Match when={working()}>{store.status ?? "Considering next steps..."}</Match>
-                          <Match when={store.detailsExpanded}>Hide steps</Match>
-                          <Match when={!store.detailsExpanded}>Show steps</Match>
+                          <Match when={store.stepsExpanded}>Hide steps</Match>
+                          <Match when={!store.stepsExpanded}>Show steps</Match>
                         </Switch>
                         <span>·</span>
                         <span>{store.duration}</span>
@@ -297,7 +295,7 @@ export function SessionTurn(
                     </div>
                   </div>
                   {/* Response */}
-                  <Show when={store.detailsExpanded}>
+                  <Show when={store.stepsExpanded}>
                     <div data-slot="session-turn-collapsible-content-inner">
                       <For each={assistantMessages()}>
                         {(assistantMessage) => {
@@ -396,7 +394,7 @@ export function SessionTurn(
                       </Accordion>
                     </div>
                   </Show>
-                  <Show when={error() && !store.detailsExpanded}>
+                  <Show when={error() && !store.stepsExpanded}>
                     <Card variant="error" class="error-card">
                       {error()?.data?.message as string}
                     </Card>