fix(app): tool details indentation

2 files changed, 18 insertions, 11 deletions

diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 35aa56dea..e6e4ba7a6 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -28,7 +28,7 @@
     align-items: flex-start;
     align-self: stretch;
     min-width: 0;
-    gap: 28px;
+    gap: 18px;
     overflow-anchor: none;
 
     [data-slot="session-turn-badge"] {
@@ -60,7 +60,7 @@
     background-color: var(--background-stronger);
     margin-left: -9px;
     padding-left: 9px;
-    padding-bottom: 12px;
+    /* padding-bottom: 12px; */
     display: flex;
     flex-direction: column;
     gap: 12px;
@@ -479,9 +479,8 @@
     width: fit-content;
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 8px;
     color: var(--text-weak);
-    margin-left: -9px;
 
     [data-component="spinner"] {
       width: 12px;
@@ -527,6 +526,10 @@
     flex-direction: column;
     align-self: stretch;
     gap: 12px;
+    margin-left: 12px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-left: 1px solid var(--border-base);
 
     > :first-child>[data-component="markdown"]:first-child {
       margin-top: 0;
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 27b256d3c..5b759c739 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -536,12 +536,19 @@ export function SessionTurn(
                             data-slot="session-turn-collapsible-trigger-content"
                             variant="ghost"
                             size="small"
-                            onClick={props.onStepsExpandedToggle ?? (() => {})}
+                            onClick={props.onStepsExpandedToggle ?? (() => { })}
                             aria-expanded={props.stepsExpanded}
                           >
-                            <Show when={working()}>
-                              <Spinner />
-                            </Show>
+                            <Switch>
+                              <Match when={working()}>
+                                <Spinner />
+                              </Match>
+                              <Match when={true}>
+                                <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="text-icon-base">
+                                  <path d="M8.125 1.875H1.875L5 8.125L8.125 1.875Z" fill="currentColor" stroke="currentColor" stroke-linejoin="round" />
+                                </svg>
+                              </Match>
+                            </Switch>
                             <Switch>
                               <Match when={retry()}>
                                 <span data-slot="session-turn-retry-message">
@@ -567,9 +574,6 @@ export function SessionTurn(
                             </Switch>
                             <span aria-hidden="true">·</span>
                             <span aria-live="off">{store.duration}</span>
-                            <Show when={assistantMessages().length > 0}>
-                              <Icon name="chevron-grabber-vertical" size="small" />
-                            </Show>
                           </Button>
                         </div>
                       </Show>