tui: improve session UI with better sidebar toggle and message handling

Author: thdxr

packages/opencode/src/cli/cmd/tui/routes/session/index.tsx

@@ -149,15 +149,6 @@ export function Session() {
     }, 50)
   }
 
-  // snap to bottom when revert position changes
-  createEffect((old) => {
-    if (old !== session()?.revert?.messageID) toBottom()
-    return session()?.revert?.messageID
-  })
-
-  // snap to bottom when session changes
-  createEffect(on(() => route.sessionID, toBottom))
-
   const local = useLocal()
 
   function moveChild(direction: number) {
@@ -272,14 +263,18 @@ export function Session() {
         const revert = session().revert?.messageID
         const message = messages().findLast((x) => (!revert || x.id < revert) && x.role === "user")
         if (!message) return
-        sdk.client.session.revert({
-          path: {
-            id: route.sessionID,
-          },
-          body: {
-            messageID: message.id,
-          },
-        })
+        sdk.client.session
+          .revert({
+            path: {
+              id: route.sessionID,
+            },
+            body: {
+              messageID: message.id,
+            },
+          })
+          .then(() => {
+            toBottom()
+          })
         const parts = sync.data.part[message.id]
         prompt.set(
           parts.reduce(
@@ -327,7 +322,7 @@ export function Session() {
       },
     },
     {
-      title: "Toggle sidebar",
+      title: sidebarVisible() ? "Hide sidebar" : "Show sidebar",
       value: "session.sidebar.toggle",
       keybind: "sidebar_toggle",
       category: "Session",
@@ -879,11 +874,16 @@ function AssistantMessage(props: { message: AssistantMessage; parts: Part[]; las
   return (
     <>
       <For each={props.parts}>
-        {(part) => {
+        {(part, index) => {
           const component = createMemo(() => PART_MAPPING[part.type as keyof typeof PART_MAPPING])
           return (
             <Show when={component()}>
-              <Dynamic component={component()} part={part as any} message={props.message} />
+              <Dynamic
+                last={index() === props.parts.length - 1}
+                component={component()}
+                part={part as any}
+                message={props.message}
+              />
             </Show>
           )
         }}
@@ -944,7 +944,7 @@ const PART_MAPPING = {
   reasoning: ReasoningPart,
 }
 
-function ReasoningPart(props: { part: ReasoningPart; message: AssistantMessage }) {
+function ReasoningPart(props: { last: boolean; part: ReasoningPart; message: AssistantMessage }) {
   const { theme, syntax } = useTheme()
   const ctx = use()
   return (
@@ -973,7 +973,7 @@ function ReasoningPart(props: { part: ReasoningPart; message: AssistantMessage }
   )
 }
 
-function TextPart(props: { part: TextPart; message: AssistantMessage }) {
+function TextPart(props: { last: boolean; part: TextPart; message: AssistantMessage }) {
   const ctx = use()
   const { syntax } = useTheme()
   return (
@@ -994,7 +994,7 @@ function TextPart(props: { part: TextPart; message: AssistantMessage }) {
 
 // Pending messages moved to individual tool pending functions
 
-function ToolPart(props: { part: ToolPart; message: AssistantMessage }) {
+function ToolPart(props: { last: boolean; part: ToolPart; message: AssistantMessage }) {
   const { theme } = useTheme()
   const sync = useSync()
   const [margin, setMargin] = createSignal(0)