fix(desktop): expanded states

1 files changed, 39 insertions, 3 deletions

diff --git a/packages/desktop/src/pages/session.tsx b/packages/desktop/src/pages/session.tsx
index 1cc92f759..6e993ff8f 100644
--- a/packages/desktop/src/pages/session.tsx
+++ b/packages/desktop/src/pages/session.tsx
@@ -1,4 +1,17 @@
-import { For, onCleanup, onMount, Show, Match, Switch, createResource, createMemo, createEffect, on } from "solid-js"
+import {
+  For,
+  onCleanup,
+  onMount,
+  Show,
+  Match,
+  Switch,
+  createResource,
+  createMemo,
+  createEffect,
+  on,
+  createRenderEffect,
+  batch,
+} from "solid-js"
 import { Dynamic } from "solid-js/web"
 import { useLocal, type LocalFile } from "@/context/local"
 import { createStore } from "solid-js/store"
@@ -130,7 +143,8 @@ export default function Page() {
     clickTimer: undefined as number | undefined,
     activeDraggable: undefined as string | undefined,
     activeTerminalDraggable: undefined as string | undefined,
-    stepsExpanded: false,
+    userInteracted: false,
+    stepsExpanded: true,
   })
   let inputRef!: HTMLDivElement
 
@@ -159,7 +173,28 @@ export default function Page() {
     ),
   )
 
+  createEffect(() => {
+    params.id
+    const status = sync.data.session_status[params.id ?? ""] ?? { type: "idle" }
+    batch(() => {
+      setStore("userInteracted", false)
+      setStore("stepsExpanded", status.type !== "idle")
+    })
+  })
+
   const status = createMemo(() => sync.data.session_status[params.id ?? ""] ?? { type: "idle" })
+  const working = createMemo(() => status().type !== "idle" && activeMessage()?.id === lastUserMessage()?.id)
+
+  createRenderEffect((prev) => {
+    const isWorking = working()
+    if (!prev && isWorking) {
+      setStore("stepsExpanded", true)
+    }
+    if (prev && !isWorking && !store.userInteracted) {
+      setStore("stepsExpanded", false)
+    }
+    return isWorking
+  }, working())
 
   command.register(() => [
     {
@@ -619,7 +654,8 @@ export default function Page() {
                             sessionID={params.id!}
                             messageID={activeMessage()!.id}
                             stepsExpanded={store.stepsExpanded}
-                            onStepsExpandedChange={(expanded) => setStore("stepsExpanded", expanded)}
+                            onStepsExpandedToggle={() => setStore("stepsExpanded", (x) => !x)}
+                            onUserInteracted={() => setStore("userInteracted", true)}
                             classes={{
                               root: "pb-20 flex-1 min-w-0",
                               content: "pb-20",