From f1ac2226037c80e3e9125da726be409a2cf533e6 Mon Sep 17 00:00:00 2001
From: DoSun <dosun9588@gmail.com>
Date: Thu, 16 Jul 2026 18:08:54 +0800
Subject: [PATCH 1/6] perf(app-ai-native): tighten timeline gap and shed
 per-message DOM
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Drop the gap-3 that was forcing 12px between every message and only
apply mt-3 at turn boundaries (user messages after the first), so
assistants sit tight against their parent user message again.

Strip per-message wrappers in TimelineMessage: the fake scroll-content
slot, the interaction shim, and the duplicate container around the
assistant slot are gone. The assistant branch now reuses the
session-turn-assistant-content slot directly. Drop createAutoScroll
from TimelineMessage entirely — it was creating a store, two effects,
and a ResizeObserver per message for a scroll viewport that lives on
the outer ScrollView. Also drop the now-unused MessageTransition
wrapper and dead queued memo in MessageTimeline.

Co-Authored-By: CoStrict <noreply@costrict.ai>
---
 .../src/pages/session/message-timeline.tsx    |  43 +--
 .../ui/src/components/timeline-message.tsx    | 309 ++++++++----------
 2 files changed, 162 insertions(+), 190 deletions(-)

diff --git a/packages/app-ai-native/src/pages/session/message-timeline.tsx b/packages/app-ai-native/src/pages/session/message-timeline.tsx
index 98cca9275..4d483db4e 100644
--- a/packages/app-ai-native/src/pages/session/message-timeline.tsx
+++ b/packages/app-ai-native/src/pages/session/message-timeline.tsx
@@ -20,7 +20,6 @@ import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { useSessionChat } from "@/context/session-chat"
 import { parseCommentNote, readCommentMetadata } from "@/utils/comment-note"
-import { MessageTransition } from "./message-transition"
 
 type MessageComment = {
   path: string
@@ -511,7 +510,7 @@ export function MessageTimeline(props: {
 
             <div
               role="log"
-              class="flex flex-col gap-3 items-start justify-start pt-4 pb-16 transition-[margin]"
+              class="flex flex-col items-start justify-start pt-4 pb-16 transition-[margin]"
               classList={{
                 "w-full": true,
                 "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
@@ -520,7 +519,7 @@ export function MessageTimeline(props: {
               }}
             >
               <Show when={props.turnStart > 0 || props.historyMore}>
-                <div class="w-full flex justify-center">
+                <div class="w-full flex justify-center mb-3">
                   <Button
                     variant="ghost"
                     size="large"
@@ -535,7 +534,7 @@ export function MessageTimeline(props: {
                 </div>
               </Show>
               <For each={rendered()}>
-                {(message) => {
+                {(message, index) => {
                   const messageID = message.id
                   const active = createMemo(() => {
                     const activeID = activeMessageID()
@@ -547,12 +546,6 @@ export function MessageTimeline(props: {
                     }
                     return false
                   })
-                  const queued = createMemo(() => {
-                    if (active()) return false
-                    const activeID = activeMessageID()
-                    if (activeID) return messageID > activeID
-                    return false
-                  })
                   const comments = createMemo(() => messageComments(chat.messageParts(messageID)), [], {
                     equals: (a, b) => JSON.stringify(a) === JSON.stringify(b),
                   })
@@ -568,6 +561,7 @@ export function MessageTimeline(props: {
                       classList={{
                         "min-w-0 w-full max-w-full": true,
                         "md:max-w-200 2xl:max-w-[1000px]": props.centered,
+                        "mt-3": index() > 0 && message.role === "user",
                       }}
                     >
                       <Show when={commentCount() > 0}>
@@ -606,22 +600,19 @@ export function MessageTimeline(props: {
                           </div>
                         </div>
                       </Show>
-                      <MessageTransition messageID={messageID}>
-                        <TimelineMessage
-                          sessionID={sessionID() ?? ""}
-                          message={message}
-                          active={active()}
-                          status={active() ? sessionStatus() : idle}
-                          showReasoningSummaries={settings.general.showReasoningSummaries()}
-                          shellToolDefaultOpen={settings.general.shellToolPartsExpanded()}
-                          editToolDefaultOpen={settings.general.editToolPartsExpanded()}
-                          classes={{
-                            root: "min-w-0 w-full relative",
-                            content: "flex flex-col justify-between !overflow-visible",
-                            container: "w-full px-4 md:px-5",
-                          }}
-                        />
-                      </MessageTransition>
+                      <TimelineMessage
+                        sessionID={sessionID() ?? ""}
+                        message={message}
+                        active={active()}
+                        status={active() ? sessionStatus() : idle}
+                        showReasoningSummaries={settings.general.showReasoningSummaries()}
+                        shellToolDefaultOpen={settings.general.shellToolPartsExpanded()}
+                        editToolDefaultOpen={settings.general.editToolPartsExpanded()}
+                        classes={{
+                          root: "min-w-0 w-full relative",
+                          container: "w-full px-4 md:px-5",
+                        }}
+                      />
                     </div>
                   )
                 }}
diff --git a/packages/ui/src/components/timeline-message.tsx b/packages/ui/src/components/timeline-message.tsx
index e0eb408a8..79e7e07ad 100644
--- a/packages/ui/src/components/timeline-message.tsx
+++ b/packages/ui/src/components/timeline-message.tsx
@@ -15,7 +15,6 @@ import { Icon } from "./icon"
 import { TextShimmer } from "./text-shimmer"
 import { SessionRetry } from "./session-retry"
 import { TextReveal } from "./text-reveal"
-import { createAutoScroll } from "../hooks"
 import { useI18n } from "../context/i18n"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 
@@ -127,8 +126,7 @@ export function TimelineMessage(props: {
   showReasoningSummaries?: boolean
   shellToolDefaultOpen?: boolean
   editToolDefaultOpen?: boolean
-  onUserInteracted?: () => void
-  classes?: { root?: string; content?: string; container?: string }
+  classes?: { root?: string; container?: string }
 }) {
   const data = useData()
   const i18n = useI18n()
@@ -281,178 +279,161 @@ export function TimelineMessage(props: {
     return t.completed - t.created
   })
 
-  const autoScroll = createAutoScroll({
-    working,
-    onUserInteracted: props.onUserInteracted,
-    overflowAnchor: "dynamic",
-  })
-
   return (
     <div data-component="session-turn" data-message={props.message.id} class={props.classes?.root}>
-      <div
-        ref={autoScroll.scrollRef}
-        onScroll={autoScroll.handleScroll}
-        data-slot="session-turn-content"
-        class={props.classes?.content}
-      >
-        <div onClick={autoScroll.handleInteraction}>
-          <Show when={isUser()}>
-            <div ref={autoScroll.contentRef} data-slot="session-turn-message-container" class={props.classes?.container}>
-              <div data-slot="session-turn-message-content" aria-live="off">
-                <Message message={props.message} parts={parts()} actions={props.actions} />
-              </div>
-              <Show when={compaction()}>
-                <div data-slot="session-turn-compaction">
-                  <MessageDivider label={i18n.t("ui.messagePart.compaction")} />
-                </div>
-              </Show>
-              <Show when={showThinking()}>
-                <div data-slot="session-turn-thinking">
-                  <TextShimmer text={i18n.t("ui.sessionTurn.status.thinking")} />
-                  <Show when={!showReasoningSummaries()}>
-                    <TextReveal
-                      text={reasoningHeading()}
-                      class="session-turn-thinking-heading"
-                      travel={25}
-                      duration={700}
-                    />
-                  </Show>
-                </div>
+      <Show when={isUser()}>
+        <div data-slot="session-turn-message-container" class={props.classes?.container}>
+          <div data-slot="session-turn-message-content" aria-live="off">
+            <Message message={props.message} parts={parts()} actions={props.actions} />
+          </div>
+          <Show when={compaction()}>
+            <div data-slot="session-turn-compaction">
+              <MessageDivider label={i18n.t("ui.messagePart.compaction")} />
+            </div>
+          </Show>
+          <Show when={showThinking()}>
+            <div data-slot="session-turn-thinking">
+              <TextShimmer text={i18n.t("ui.sessionTurn.status.thinking")} />
+              <Show when={!showReasoningSummaries()}>
+                <TextReveal
+                  text={reasoningHeading()}
+                  class="session-turn-thinking-heading"
+                  travel={25}
+                  duration={700}
+                />
               </Show>
-              <SessionRetry status={status()} show={props.active} />
-              <Show when={edited() > 0 && !working()}>
-                <div data-slot="session-turn-diffs">
-                  <Collapsible
-                    open={diffState.open}
-                    onOpenChange={(value) => setDiffState("open", value)}
-                    variant="ghost"
-                  >
-                    <Collapsible.Trigger>
-                      <div data-component="session-turn-diffs-trigger">
-                        <div data-slot="session-turn-diffs-title">
-                          <span data-slot="session-turn-diffs-label">
-                            {i18n.t("ui.sessionReview.change.modified")}
-                          </span>
-                          <span data-slot="session-turn-diffs-count">
-                            {edited()} {i18n.t(edited() === 1 ? "ui.common.file.one" : "ui.common.file.other")}
-                          </span>
-                          <div data-slot="session-turn-diffs-meta">
-                            <DiffChanges changes={diffs()} variant="bars" />
-                            <Collapsible.Arrow />
-                          </div>
-                        </div>
+            </div>
+          </Show>
+          <SessionRetry status={status()} show={props.active} />
+          <Show when={edited() > 0 && !working()}>
+            <div data-slot="session-turn-diffs">
+              <Collapsible
+                open={diffState.open}
+                onOpenChange={(value) => setDiffState("open", value)}
+                variant="ghost"
+              >
+                <Collapsible.Trigger>
+                  <div data-component="session-turn-diffs-trigger">
+                    <div data-slot="session-turn-diffs-title">
+                      <span data-slot="session-turn-diffs-label">
+                        {i18n.t("ui.sessionReview.change.modified")}
+                      </span>
+                      <span data-slot="session-turn-diffs-count">
+                        {edited()} {i18n.t(edited() === 1 ? "ui.common.file.one" : "ui.common.file.other")}
+                      </span>
+                      <div data-slot="session-turn-diffs-meta">
+                        <DiffChanges changes={diffs()} variant="bars" />
+                        <Collapsible.Arrow />
                       </div>
-                    </Collapsible.Trigger>
-                    <Collapsible.Content>
-                      <Show when={diffState.open}>
-                        <div data-component="session-turn-diffs-content">
-                          <Accordion
-                            multiple
-                            style={{ "--sticky-accordion-offset": "40px" }}
-                            value={diffState.expanded}
-                            onChange={(value) =>
-                              setDiffState("expanded", Array.isArray(value) ? value : value ? [value] : [])
-                            }
-                          >
-                            <For each={diffs()}>
-                              {(diff) => {
-                                const active = createMemo(() => diffState.expanded.includes(diff.file))
-                                const [visible, setVisible] = createSignal(false)
-                                createEffect(
-                                  on(
-                                    active,
-                                    (value) => {
-                                      if (!value) {
-                                        setVisible(false)
-                                        return
-                                      }
-                                      requestAnimationFrame(() => {
-                                        if (!active()) return
-                                        setVisible(true)
-                                      })
-                                    },
-                                    { defer: true },
-                                  ),
-                                )
-                                return (
-                                  <Accordion.Item value={diff.file}>
-                                    <StickyAccordionHeader>
-                                      <Accordion.Trigger>
-                                        <div data-slot="session-turn-diff-trigger">
-                                          <span data-slot="session-turn-diff-path">
-                                            <Show when={diff.file.includes("/")}>
-                                              <span data-slot="session-turn-diff-directory">
-                                                {`\u202A${getDirectory(diff.file)}\u202C`}
-                                              </span>
-                                            </Show>
-                                            <span data-slot="session-turn-diff-filename">
-                                              {getFilename(diff.file)}
-                                            </span>
+                    </div>
+                  </div>
+                </Collapsible.Trigger>
+                <Collapsible.Content>
+                  <Show when={diffState.open}>
+                    <div data-component="session-turn-diffs-content">
+                      <Accordion
+                        multiple
+                        style={{ "--sticky-accordion-offset": "40px" }}
+                        value={diffState.expanded}
+                        onChange={(value) =>
+                          setDiffState("expanded", Array.isArray(value) ? value : value ? [value] : [])
+                        }
+                      >
+                        <For each={diffs()}>
+                          {(diff) => {
+                            const active = createMemo(() => diffState.expanded.includes(diff.file))
+                            const [visible, setVisible] = createSignal(false)
+                            createEffect(
+                              on(
+                                active,
+                                (value) => {
+                                  if (!value) {
+                                    setVisible(false)
+                                    return
+                                  }
+                                  requestAnimationFrame(() => {
+                                    if (!active()) return
+                                    setVisible(true)
+                                  })
+                                },
+                                { defer: true },
+                              ),
+                            )
+                            return (
+                              <Accordion.Item value={diff.file}>
+                                <StickyAccordionHeader>
+                                  <Accordion.Trigger>
+                                    <div data-slot="session-turn-diff-trigger">
+                                      <span data-slot="session-turn-diff-path">
+                                        <Show when={diff.file.includes("/")}>
+                                          <span data-slot="session-turn-diff-directory">
+                                            {`\u202A${getDirectory(diff.file)}\u202C`}
                                           </span>
-                                          <div data-slot="session-turn-diff-meta">
-                                            <span data-slot="session-turn-diff-changes">
-                                              <DiffChanges changes={diff} />
-                                            </span>
-                                            <span data-slot="session-turn-diff-chevron">
-                                              <Icon name="chevron-down" size="small" />
-                                            </span>
-                                          </div>
-                                        </div>
-                                      </Accordion.Trigger>
-                                    </StickyAccordionHeader>
-                                    <Accordion.Content>
-                                      <Show when={visible()}>
-                                        <div data-slot="session-turn-diff-view" data-scrollable>
-                                          <Dynamic
-                                            component={fileComponent}
-                                            mode="diff"
-                                            before={{ name: diff.file, contents: diff.before }}
-                                            after={{ name: diff.file, contents: diff.after }}
-                                          />
-                                        </div>
-                                      </Show>
-                                    </Accordion.Content>
-                                  </Accordion.Item>
-                                )
-                              }}
-                            </For>
-                          </Accordion>
-                        </div>
-                      </Show>
-                    </Collapsible.Content>
-                  </Collapsible>
-                </div>
-              </Show>
+                                        </Show>
+                                        <span data-slot="session-turn-diff-filename">
+                                          {getFilename(diff.file)}
+                                        </span>
+                                      </span>
+                                      <div data-slot="session-turn-diff-meta">
+                                        <span data-slot="session-turn-diff-changes">
+                                          <DiffChanges changes={diff} />
+                                        </span>
+                                        <span data-slot="session-turn-diff-chevron">
+                                          <Icon name="chevron-down" size="small" />
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </Accordion.Trigger>
+                                </StickyAccordionHeader>
+                                <Accordion.Content>
+                                  <Show when={visible()}>
+                                    <div data-slot="session-turn-diff-view" data-scrollable>
+                                      <Dynamic
+                                        component={fileComponent}
+                                        mode="diff"
+                                        before={{ name: diff.file, contents: diff.before }}
+                                        after={{ name: diff.file, contents: diff.after }}
+                                      />
+                                    </div>
+                                  </Show>
+                                </Accordion.Content>
+                              </Accordion.Item>
+                            )
+                          }}
+                        </For>
+                      </Accordion>
+                    </div>
+                  </Show>
+                </Collapsible.Content>
+              </Collapsible>
             </div>
           </Show>
+        </div>
+      </Show>
 
-          <Show when={isAssistant()}>
-            <div ref={autoScroll.contentRef} data-slot="session-turn-message-container" class={props.classes?.container}>
-              <div data-slot="session-turn-assistant-content">
-                <AssistantParts
-                  messages={[props.message as AssistantMessage]}
-                  turnDurationMs={turnDurationMs()}
-                  working={working()}
-                  showReasoningSummaries={showReasoningSummaries()}
-                  showAssistantCopyPartID={assistantCopyPartID()}
-                  shellToolDefaultOpen={props.shellToolDefaultOpen}
-                  editToolDefaultOpen={props.editToolDefaultOpen}
-                />
-              </div>
-              <Show when={interrupted()}>
-                <div data-slot="session-turn-compaction">
-                  <MessageDivider label={i18n.t("ui.message.interrupted")} />
-                </div>
-              </Show>
-              <Show when={error()}>
-                <Card variant="error" class="error-card">
-                  {errorText()}
-                </Card>
-              </Show>
+      <Show when={isAssistant()}>
+        <div data-slot="session-turn-assistant-content" class={props.classes?.container}>
+          <AssistantParts
+            messages={[props.message as AssistantMessage]}
+            turnDurationMs={turnDurationMs()}
+            working={working()}
+            showReasoningSummaries={showReasoningSummaries()}
+            showAssistantCopyPartID={assistantCopyPartID()}
+            shellToolDefaultOpen={props.shellToolDefaultOpen}
+            editToolDefaultOpen={props.editToolDefaultOpen}
+          />
+          <Show when={interrupted()}>
+            <div data-slot="session-turn-compaction">
+              <MessageDivider label={i18n.t("ui.message.interrupted")} />
             </div>
           </Show>
+          <Show when={error()}>
+            <Card variant="error" class="error-card">
+              {errorText()}
+            </Card>
+          </Show>
         </div>
-      </div>
+      </Show>
     </div>
   )
 }

From 80a32f45f90745b06f10b59e42c4c175c9d44d55 Mon Sep 17 00:00:00 2001
From: DoSun <dosun9588@gmail.com>
Date: Thu, 16 Jul 2026 19:53:28 +0800
Subject: [PATCH 2/6] fix(ui): compute per-assistant duration from prior
 message anchor

Assistant messages stamp time.created === time.completed at finalization,
so completed - created is always 0. Walk backwards from each assistant to
the previous message's anchor (prior assistant's completed, or the user
message's created) so consecutive assistants show distinct durations
instead of a shared turn value or zero.

Co-Authored-By: CoStrict <noreply@costrict.ai>
---
 .../src/pages/session/message-timeline.tsx    |  7 ++--
 packages/ui/src/components/message-part.tsx   | 19 ++++------
 packages/ui/src/components/session-turn.tsx   | 16 ---------
 .../ui/src/components/timeline-message.tsx    | 35 +++++++++++++++----
 4 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/packages/app-ai-native/src/pages/session/message-timeline.tsx b/packages/app-ai-native/src/pages/session/message-timeline.tsx
index 4d483db4e..4982d2452 100644
--- a/packages/app-ai-native/src/pages/session/message-timeline.tsx
+++ b/packages/app-ai-native/src/pages/session/message-timeline.tsx
@@ -510,7 +510,7 @@ export function MessageTimeline(props: {
 
             <div
               role="log"
-              class="flex flex-col items-start justify-start pt-4 pb-16 transition-[margin]"
+              class="flex flex-col gap-2 items-start justify-start pt-4 pb-16 transition-[margin]"
               classList={{
                 "w-full": true,
                 "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
@@ -519,7 +519,7 @@ export function MessageTimeline(props: {
               }}
             >
               <Show when={props.turnStart > 0 || props.historyMore}>
-                <div class="w-full flex justify-center mb-3">
+                <div class="w-full flex justify-center">
                   <Button
                     variant="ghost"
                     size="large"
@@ -534,7 +534,7 @@ export function MessageTimeline(props: {
                 </div>
               </Show>
               <For each={rendered()}>
-                {(message, index) => {
+                {(message) => {
                   const messageID = message.id
                   const active = createMemo(() => {
                     const activeID = activeMessageID()
@@ -561,7 +561,6 @@ export function MessageTimeline(props: {
                       classList={{
                         "min-w-0 w-full max-w-full": true,
                         "md:max-w-200 2xl:max-w-[1000px]": props.centered,
-                        "mt-3": index() > 0 && message.role === "user",
                       }}
                     >
                       <Show when={commentCount() > 0}>
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index b87810fb5..3b1c62f3d 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -151,7 +151,7 @@ export interface MessagePartProps {
   defaultOpen?: boolean
   copy?: boolean
   showAssistantCopyPartID?: string | null
-  turnDurationMs?: number
+  durationMs?: number
 }
 
 export type PartComponent = Component<MessagePartProps>
@@ -552,7 +552,7 @@ function partDefaultOpen(part: PartType, shell = false, edit = false) {
 export function AssistantParts(props: {
   messages: AssistantMessage[]
   showAssistantCopyPartID?: string | null
-  turnDurationMs?: number
+  durationMs?: number
   working?: boolean
   showReasoningSummaries?: boolean
   shellToolDefaultOpen?: boolean
@@ -643,7 +643,7 @@ export function AssistantParts(props: {
                         part={item()!}
                         message={message()!}
                         showAssistantCopyPartID={props.showAssistantCopyPartID}
-                        turnDurationMs={props.turnDurationMs}
+                        durationMs={props.durationMs}
                         defaultOpen={partDefaultOpen(item()!, props.shellToolDefaultOpen, props.editToolDefaultOpen)}
                         copy={copy()}
                       />
@@ -1232,7 +1232,7 @@ export function Part(props: MessagePartProps) {
         hideDetails={props.hideDetails}
         defaultOpen={props.defaultOpen}
         showAssistantCopyPartID={props.showAssistantCopyPartID}
-        turnDurationMs={props.turnDurationMs}
+        durationMs={props.durationMs}
         copy={props.copy}
       />
     </Show>
@@ -1456,15 +1456,8 @@ PART_MAPPING["text"] = function TextPartDisplay(props) {
 
   const duration = createMemo(() => {
     if (props.message.role !== "assistant") return ""
-    const message = props.message as AssistantMessage
-    const completed = message.time.completed
-    const ms =
-      typeof props.turnDurationMs === "number"
-        ? props.turnDurationMs
-        : typeof completed === "number"
-          ? completed - message.time.created
-          : -1
-    if (!(ms >= 0)) return ""
+    const ms = typeof props.durationMs === "number" ? props.durationMs : -1
+    if (!(ms > 0)) return ""
     const total = Math.round(ms / 1000)
     if (total < 60) return i18n.t("ui.message.duration.seconds", { count: numfmt().format(total) })
     const minutes = Math.floor(total / 60)
diff --git a/packages/ui/src/components/session-turn.tsx b/packages/ui/src/components/session-turn.tsx
index 6c1050056..9353ba9fb 100644
--- a/packages/ui/src/components/session-turn.tsx
+++ b/packages/ui/src/components/session-turn.tsx
@@ -329,21 +329,6 @@ export function SessionTurn(
     if (working()) return null
     return showAssistantCopyPartID() ?? null
   })
-  const turnDurationMs = createMemo(() => {
-    const start = message()?.time.created
-    if (typeof start !== "number") return undefined
-
-    const end = assistantMessages().reduce<number | undefined>((max, item) => {
-      const completed = item.time.completed
-      if (typeof completed !== "number") return max
-      if (max === undefined) return completed
-      return Math.max(max, completed)
-    }, undefined)
-
-    if (typeof end !== "number") return undefined
-    if (end < start) return undefined
-    return end - start
-  })
   const assistantDerived = createMemo(() => {
     let visible = 0
     let tail: "text" | "other" | undefined
@@ -408,7 +393,6 @@ export function SessionTurn(
                   <AssistantParts
                     messages={assistantMessages()}
                     showAssistantCopyPartID={assistantCopyPartID()}
-                    turnDurationMs={turnDurationMs()}
                     working={working()}
                     showReasoningSummaries={showReasoningSummaries()}
                     shellToolDefaultOpen={props.shellToolDefaultOpen}
diff --git a/packages/ui/src/components/timeline-message.tsx b/packages/ui/src/components/timeline-message.tsx
index 79e7e07ad..c29ad451c 100644
--- a/packages/ui/src/components/timeline-message.tsx
+++ b/packages/ui/src/components/timeline-message.tsx
@@ -271,12 +271,35 @@ export function TimelineMessage(props: {
     () => isAssistant() && (props.message as AssistantMessage).error?.name === "MessageAbortedError",
   )
 
-  const turnDurationMs = createMemo(() => {
+  const durationMs = createMemo(() => {
     if (!isAssistant()) return undefined
-    const t = (props.message as AssistantMessage).time
-    if (typeof t.created !== "number" || typeof t.completed !== "number") return undefined
-    if (t.completed < t.created) return undefined
-    return t.completed - t.created
+    const self = props.message as AssistantMessage
+    const end = self.time.completed
+    if (typeof end !== "number") return undefined
+    const all = list(data.store.message?.[props.sessionID], [] as MessageType[])
+    const idx = all.findIndex((m) => m.id === props.message.id)
+    if (idx === -1) return undefined
+    let start: number | undefined
+    for (let i = idx - 1; i >= 0; i--) {
+      const m = all[i]
+      if (!m) continue
+      if (m.role === "assistant") {
+        const c = (m as AssistantMessage).time.completed
+        if (typeof c === "number") {
+          start = c
+          break
+        }
+      } else if (m.role === "user") {
+        const c = m.time.created
+        if (typeof c === "number") {
+          start = c
+          break
+        }
+      }
+    }
+    if (typeof start !== "number") return undefined
+    if (end < start) return undefined
+    return end - start
   })
 
   return (
@@ -415,7 +438,7 @@ export function TimelineMessage(props: {
         <div data-slot="session-turn-assistant-content" class={props.classes?.container}>
           <AssistantParts
             messages={[props.message as AssistantMessage]}
-            turnDurationMs={turnDurationMs()}
+            durationMs={durationMs()}
             working={working()}
             showReasoningSummaries={showReasoningSummaries()}
             showAssistantCopyPartID={assistantCopyPartID()}

From da6d1fa2e087f40dac799cad849733b5d1f5759b Mon Sep 17 00:00:00 2001
From: DoSun <dosun9588@gmail.com>
Date: Thu, 16 Jul 2026 20:31:51 +0800
Subject: [PATCH 3/6] fix(ui): smooth timeline gaps and rethink thinking
 indicator

Hide empty user turns reactively during SSE streaming and gate the
thinking shimmer on whether the latest message is producing visible
content, so it covers wait-after-send, first-token, and between-steps
gaps instead of only the user turn.

Co-Authored-By: CoStrict <noreply@costrict.ai>
---
 .../src/pages/session/message-timeline.tsx    |  2 +-
 packages/ui/src/components/session-turn.css   |  4 ++
 .../ui/src/components/timeline-message.tsx    | 38 +++++++++++++++----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/packages/app-ai-native/src/pages/session/message-timeline.tsx b/packages/app-ai-native/src/pages/session/message-timeline.tsx
index 4982d2452..7ff7e9984 100644
--- a/packages/app-ai-native/src/pages/session/message-timeline.tsx
+++ b/packages/app-ai-native/src/pages/session/message-timeline.tsx
@@ -603,7 +603,7 @@ export function MessageTimeline(props: {
                         sessionID={sessionID() ?? ""}
                         message={message}
                         active={active()}
-                        status={active() ? sessionStatus() : idle}
+                        status={sessionStatus()}
                         showReasoningSummaries={settings.general.showReasoningSummaries()}
                         shellToolDefaultOpen={settings.general.shellToolPartsExpanded()}
                         editToolDefaultOpen={settings.general.editToolPartsExpanded()}
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 16acedb83..e15cb70b3 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -230,3 +230,7 @@
 [data-slot="session-turn-list"] {
   gap: 12px;
 }
+
+[data-message-id]:not(:has(*)) {
+  display: none;
+}
diff --git a/packages/ui/src/components/timeline-message.tsx b/packages/ui/src/components/timeline-message.tsx
index c29ad451c..1056b1208 100644
--- a/packages/ui/src/components/timeline-message.tsx
+++ b/packages/ui/src/components/timeline-message.tsx
@@ -249,11 +249,15 @@ export function TimelineMessage(props: {
   })
 
   const showThinking = createMemo(() => {
-    if (!working()) return false
+    if (status().type === "idle") return false
     if (status().type === "retry") return false
-    if (!isUser()) return false
-    if (showReasoningSummaries()) return !assistantHasVisible()
-    return true
+    const all = list(data.store.message?.[props.sessionID], [] as MessageType[])
+    const last = all[all.length - 1]
+    if (!last || last.id !== props.message.id) return false
+    if (last.role !== "assistant") return true
+    if (typeof (last as AssistantMessage).time.completed === "number") return true
+    const lastParts = list(data.store.part?.[last.id], emptyParts)
+    return !lastParts.some((p) => partVisible(p, showReasoningSummaries()))
   })
 
   const error = createMemo(() => {
@@ -271,6 +275,19 @@ export function TimelineMessage(props: {
     () => isAssistant() && (props.message as AssistantMessage).error?.name === "MessageAbortedError",
   )
 
+  const userHasContent = createMemo(() => {
+    if (!isUser()) return true
+    if (compaction() || showThinking() || edited() > 0 || status().type === "retry") return true
+    for (const p of parts()) {
+      if (p.type === "text") {
+        if (!(p as { synthetic?: boolean }).synthetic && (p.text ?? "").trim()) return true
+      } else if (p.type === "file" || p.type === "agent" || p.type === "compaction") {
+        return true
+      }
+    }
+    return false
+  })
+
   const durationMs = createMemo(() => {
     if (!isAssistant()) return undefined
     const self = props.message as AssistantMessage
@@ -303,8 +320,9 @@ export function TimelineMessage(props: {
   })
 
   return (
-    <div data-component="session-turn" data-message={props.message.id} class={props.classes?.root}>
-      <Show when={isUser()}>
+    <Show when={!isUser() || userHasContent()}>
+      <div data-component="session-turn" data-message={props.message.id} class={props.classes?.root}>
+        <Show when={isUser()}>
         <div data-slot="session-turn-message-container" class={props.classes?.container}>
           <div data-slot="session-turn-message-content" aria-live="off">
             <Message message={props.message} parts={parts()} actions={props.actions} />
@@ -445,6 +463,11 @@ export function TimelineMessage(props: {
             shellToolDefaultOpen={props.shellToolDefaultOpen}
             editToolDefaultOpen={props.editToolDefaultOpen}
           />
+          <Show when={showThinking()}>
+            <div data-slot="session-turn-thinking">
+              <TextShimmer text={i18n.t("ui.sessionTurn.status.thinking")} />
+            </div>
+          </Show>
           <Show when={interrupted()}>
             <div data-slot="session-turn-compaction">
               <MessageDivider label={i18n.t("ui.message.interrupted")} />
@@ -457,6 +480,7 @@ export function TimelineMessage(props: {
           </Show>
         </div>
       </Show>
-    </div>
+      </div>
+    </Show>
   )
 }

From 787ce27335485ed26d9b6707d01516ec38ab588d Mon Sep 17 00:00:00 2001
From: DoSun <dosun9588@gmail.com>
Date: Thu, 16 Jul 2026 20:35:17 +0800
Subject: [PATCH 4/6] fix(ui): keep thinking indicator when latest message
 lacks visible parts

Drop the early-out that showed thinking whenever the latest assistant
message was completed, so a finished message with no renderable parts
(e.g. hidden reasoning summaries) no longer hides the shimmer prematurely.

Co-Authored-By: CoStrict <noreply@costrict.ai>
---
 packages/ui/src/components/timeline-message.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/components/timeline-message.tsx b/packages/ui/src/components/timeline-message.tsx
index 1056b1208..a15f57dc9 100644
--- a/packages/ui/src/components/timeline-message.tsx
+++ b/packages/ui/src/components/timeline-message.tsx
@@ -255,7 +255,6 @@ export function TimelineMessage(props: {
     const last = all[all.length - 1]
     if (!last || last.id !== props.message.id) return false
     if (last.role !== "assistant") return true
-    if (typeof (last as AssistantMessage).time.completed === "number") return true
     const lastParts = list(data.store.part?.[last.id], emptyParts)
     return !lastParts.some((p) => partVisible(p, showReasoningSummaries()))
   })

From 7a78c36f61a26a9560e87d9dfce1249149fea67b Mon Sep 17 00:00:00 2001
From: DoSun <dosun9588@gmail.com>
Date: Thu, 16 Jul 2026 20:50:28 +0800
Subject: [PATCH 5/6] refactor(app-ai-native): swap workspace sidebar search
 for full-width create button

Drop the workspace filter input and turn the create trigger into a
full-width primary button with an icon and label, reusing the existing
"workspace.device.createWorkspace" copy.

Co-Authored-By: CoStrict <noreply@costrict.ai>
---
 .../components/workspace-sidebar.tsx          | 190 ++++++++----------
 1 file changed, 79 insertions(+), 111 deletions(-)

diff --git a/packages/app-ai-native/src/pages/workspace/components/workspace-sidebar.tsx b/packages/app-ai-native/src/pages/workspace/components/workspace-sidebar.tsx
index 71e9f5000..f0459fe19 100644
--- a/packages/app-ai-native/src/pages/workspace/components/workspace-sidebar.tsx
+++ b/packages/app-ai-native/src/pages/workspace/components/workspace-sidebar.tsx
@@ -2,6 +2,7 @@ import { createSignal, createMemo, For, Show } from "solid-js"
 import { useNavigate, useParams } from "@solidjs/router"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Button } from "@opencode-ai/ui/button"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -13,7 +14,7 @@ import { useWorkspace } from "../context"
 import { useWorkspaceNavigate } from "@/hooks/use-workspace-navigate"
 import { useActiveWorkspace } from "../active-workspace"
 import { useLanguage } from "@/context/language"
-import { WorkspaceCard, getPrimaryDirectory } from "./workspace-card"
+import { WorkspaceCard } from "./workspace-card"
 
 export function WorkspaceSidebar(props: { hide?: () => void } = {}) {
   const language = useLanguage()
@@ -56,27 +57,13 @@ export function WorkspaceSidebar(props: { hide?: () => void } = {}) {
     if (active.id === workspace.id) active.clear()
   }
 
-  const [workspaceSearchQuery, setWorkspaceSearchQuery] = createSignal("")
-
-  const filteredWorkspaces = createMemo(() => {
-    const query = workspaceSearchQuery().toLowerCase()
-    const all = workspaces()
-    if (!query) return all
-    return all.filter(
-      (workspace) =>
-        workspace.name.toLowerCase().includes(query) ||
-        workspace.description?.toLowerCase().includes(query) ||
-        getPrimaryDirectory(workspace)?.path.toLowerCase().includes(query),
-    )
-  })
-
   const runningIds = createMemo(() =>
-    filteredWorkspaces()
+    workspaces()
       .filter((w) => isEnabled(w))
       .map((w) => w.id),
   )
   const idleIds = createMemo(() =>
-    filteredWorkspaces()
+    workspaces()
       .filter((w) => !isEnabled(w))
       .map((w) => w.id),
   )
@@ -151,103 +138,84 @@ export function WorkspaceSidebar(props: { hide?: () => void } = {}) {
       </div>
 
       <div class="shrink-0 px-3 py-2.5">
-        <div class="flex items-center gap-1">
-          <div class="flex h-8 flex-1 items-center rounded-[var(--native-radius-sm)] border border-sidebar-border bg-[color:color-mix(in_oklab,var(--native-panel)_82%,var(--native-bg-subtle))] shadow-[var(--native-shadow-sm)] transition-all duration-200 focus-within:border-sidebar-ring focus-within:ring-1 focus-within:ring-sidebar-ring">
-            <Icon name="magnifying-glass" class="size-4 text-sidebar-foreground/50 shrink-0 ml-3" />
-            <input
-              type="text"
-              placeholder={t("workspace.search.placeholder")}
-              value={workspaceSearchQuery()}
-              onInput={(e: Event) => setWorkspaceSearchQuery((e.target as HTMLInputElement).value)}
-              class="flex-1 min-w-0 h-full px-2 text-sm bg-transparent text-sidebar-foreground placeholder:text-sidebar-foreground/50 focus:outline-none"
-            />
-            <Show when={workspaceSearchQuery()}>
-              <button
-                type="button"
-                onClick={() => setWorkspaceSearchQuery("")}
-                class="flex items-center justify-center size-6 rounded-full text-sidebar-foreground/50 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer mr-1"
-              >
-                <Icon name="close" class="size-3.5" />
-              </button>
+        <Popover
+          open={createPopoverOpen()}
+          onOpenChange={setCreatePopoverOpen}
+        >
+          <div class="relative">
+            <PopoverTrigger
+              as={Button}
+              variant="ghost"
+              icon="plus-small"
+              class="w-full h-8 shrink-0 justify-center gap-1.5 rounded-[var(--native-radius-sm)] border border-transparent cursor-pointer bg-[color:color-mix(in_oklab,var(--native-primary)_72%,var(--native-panel))] text-[var(--native-primary-foreground)] text-sm font-medium transition-colors duration-200 hover:bg-[var(--native-primary)] [&_[data-slot=icon-svg]]:text-[var(--native-primary-foreground)]"
+              aria-label={t("workspace.device.createWorkspace")}
+            >
+              {t("workspace.device.createWorkspace")}
+            </PopoverTrigger>
+            <Show when={hasUpgradableDevices()}>
+              <span class="pointer-events-none absolute -right-0.5 -top-0.5 size-2 rounded-full bg-[#ff9800] ring-[1.5px] ring-[var(--native-panel)]" />
             </Show>
           </div>
-          <Popover
-            open={createPopoverOpen()}
-            onOpenChange={setCreatePopoverOpen}
-          >
-            <div class="relative">
-              <PopoverTrigger
-                as={IconButton}
-                icon="plus-small"
-                variant="ghost"
-                class="size-8 shrink-0 rounded-[var(--native-radius-sm)] border border-transparent cursor-pointer bg-[color:color-mix(in_oklab,var(--native-primary)_72%,var(--native-panel))] transition-colors duration-200 hover:bg-[var(--native-primary)] [&_[data-slot=icon-svg]]:text-[var(--native-primary-foreground)]"
-                aria-label={t("workspace.createFromDevice")}
-              />
-              <Show when={hasUpgradableDevices()}>
-                <span class="pointer-events-none absolute -right-0.5 -top-0.5 size-2 rounded-full bg-[#ff9800] ring-[1.5px] ring-[var(--native-panel)]" />
-              </Show>
+          <PopoverContent class="w-80 rounded-[var(--native-radius-md)] border border-sidebar-border bg-sidebar p-1.5 shadow-[var(--native-shadow-md)]">
+            <div class="flex items-center gap-1 px-2 py-1.5">
+              <span class="text-[11px] font-semibold uppercase tracking-[0.12em] text-sidebar-foreground/70">{t("workspace.createFromDevice")}</span>
+              <div class="ml-auto flex items-center gap-0.5">
+                <Tooltip value={t("workspace.device.manage")} placement="bottom">
+                  <button
+                    type="button"
+                    class="flex size-6 items-center justify-center rounded-[var(--native-radius-sm)] text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer focus:outline-none"
+                    onClick={handleManageDevices}
+                    aria-label={t("workspace.device.manage")}
+                  >
+                    <Icon name="configuration" size="small" />
+                  </button>
+                </Tooltip>
+                <Tooltip value={t("workspace.device.refresh")} placement="bottom">
+                  <button
+                    type="button"
+                    class="flex size-6 items-center justify-center rounded-[var(--native-radius-sm)] text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer focus:outline-none"
+                    classList={{ "pointer-events-none": deviceRefreshing() }}
+                    onClick={handleDeviceRefresh}
+                    aria-label={t("workspace.device.refresh")}
+                  >
+                    <Icon name="arrows-rotate" size="small" classList={{ "animate-spin": deviceRefreshing() }} />
+                  </button>
+                </Tooltip>
+              </div>
             </div>
-            <PopoverContent class="w-80 rounded-[var(--native-radius-md)] border border-sidebar-border bg-sidebar p-1.5 shadow-[var(--native-shadow-md)]">
-              <div class="flex items-center gap-1 px-2 py-1.5">
-                <span class="text-[11px] font-semibold uppercase tracking-[0.12em] text-sidebar-foreground/70">{t("workspace.createFromDevice")}</span>
-                <div class="ml-auto flex items-center gap-0.5">
-                  <Tooltip value={t("workspace.device.manage")} placement="bottom">
-                    <button
-                      type="button"
-                      class="flex size-6 items-center justify-center rounded-[var(--native-radius-sm)] text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer focus:outline-none"
-                      onClick={handleManageDevices}
-                      aria-label={t("workspace.device.manage")}
-                    >
-                      <Icon name="configuration" size="small" />
-                    </button>
-                  </Tooltip>
-                  <Tooltip value={t("workspace.device.refresh")} placement="bottom">
-                    <button
-                      type="button"
-                      class="flex size-6 items-center justify-center rounded-[var(--native-radius-sm)] text-sidebar-foreground/60 hover:text-sidebar-foreground hover:bg-sidebar-accent transition-colors cursor-pointer focus:outline-none"
-                      classList={{ "pointer-events-none": deviceRefreshing() }}
-                      onClick={handleDeviceRefresh}
-                      aria-label={t("workspace.device.refresh")}
-                    >
-                      <Icon name="arrows-rotate" size="small" classList={{ "animate-spin": deviceRefreshing() }} />
-                    </button>
-                  </Tooltip>
+            <Show
+              when={onlineDevices().length > 0}
+              fallback={
+                <div class="flex flex-col items-center gap-1 px-2 py-6 text-center">
+                  <Icon name="server" class="size-6 text-sidebar-foreground/30" />
+                  <span class="text-xs text-sidebar-foreground/50">{t("workspace.createFromDevice.empty")}</span>
                 </div>
-              </div>
-              <Show
-                when={onlineDevices().length > 0}
-                fallback={
-                  <div class="flex flex-col items-center gap-1 px-2 py-6 text-center">
-                    <Icon name="server" class="size-6 text-sidebar-foreground/30" />
-                    <span class="text-xs text-sidebar-foreground/50">{t("workspace.createFromDevice.empty")}</span>
-                  </div>
-                }
-              >
-                <ul class="space-y-0.5">
-                  <For each={onlineDevices()}>
-                    {(device) => {
-                      const state = () => upgrade.upgradeMap()[device.deviceId]
-                      const hasUpgrade = () =>
-                        !!device.canUpdate &&
-                        device.status === "online" &&
-                        !state() &&
-                        !upgrade.isRecentlyUpgraded(device.deviceId)
-                      return (
-                        <DeviceItem
-                          device={device}
-                          upgradeState={state()}
-                          hasUpgrade={hasUpgrade()}
-                          onCreate={handleCreateWorkspace}
-                          onUpgrade={handleUpgrade}
-                        />
-                      )
-                    }}
-                  </For>
-                </ul>
-              </Show>
-            </PopoverContent>
-          </Popover>
-        </div>
+              }
+            >
+              <ul class="space-y-0.5">
+                <For each={onlineDevices()}>
+                  {(device) => {
+                    const state = () => upgrade.upgradeMap()[device.deviceId]
+                    const hasUpgrade = () =>
+                      !!device.canUpdate &&
+                      device.status === "online" &&
+                      !state() &&
+                      !upgrade.isRecentlyUpgraded(device.deviceId)
+                    return (
+                      <DeviceItem
+                        device={device}
+                        upgradeState={state()}
+                        hasUpgrade={hasUpgrade()}
+                        onCreate={handleCreateWorkspace}
+                        onUpgrade={handleUpgrade}
+                      />
+                    )
+                  }}
+                </For>
+              </ul>
+            </Show>
+          </PopoverContent>
+        </Popover>
       </div>
 
       <div class="thin-scrollbar min-h-0 flex-1 overflow-y-auto py-1 pr-1">
@@ -302,7 +270,7 @@ export function WorkspaceSidebar(props: { hide?: () => void } = {}) {
           </div>
           <div class="flex flex-col gap-1.5">
             <For each={idleIds()}>{(id) => <WorkspaceCard id={id} isRunning={false} onOpen={handleOpenWorkspace} onClose={handleCloseWorkspace} />}</For>
-            <Show when={filteredWorkspaces().length === 0}>
+            <Show when={workspaces().length === 0}>
               <div class="flex flex-col items-center justify-center rounded-[var(--native-radius-lg)] border border-[color:color-mix(in_oklab,var(--native-border)_24%,transparent)] bg-[color:color-mix(in_oklab,var(--native-surface)_72%,var(--native-panel))] py-8 text-sidebar-foreground/50">
                 <Icon name="folder" class="mb-2 size-8 opacity-30" />
                 <span class="text-xs font-medium text-sidebar-foreground/65">{t("workspace.empty")}</span>

From a72087370fda58f71006778cc3f921b6567268df Mon Sep 17 00:00:00 2001
From: DoSun <dosun9588@gmail.com>
Date: Thu, 16 Jul 2026 20:50:40 +0800
Subject: [PATCH 6/6] fix(app-ai-native): clarify workspace sidebar empty-state
 hints

Reword the device-registration prompt to point at the home page guide
and note that only online idle workspaces can be activated.

Co-Authored-By: CoStrict <noreply@costrict.ai>
---
 packages/app-ai-native/src/i18n/en.ts | 4 ++--
 packages/app-ai-native/src/i18n/zh.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/app-ai-native/src/i18n/en.ts b/packages/app-ai-native/src/i18n/en.ts
index b855e9840..197104453 100644
--- a/packages/app-ai-native/src/i18n/en.ts
+++ b/packages/app-ai-native/src/i18n/en.ts
@@ -2105,7 +2105,7 @@ export const dict = {
   "workspace.running": "Running",
   "workspace.idle": "Idle",
   "workspace.running.empty": "No running workspaces",
-  "workspace.running.emptyHint": "Click an idle workspace below to activate",
+  "workspace.running.emptyHint": "Click an online idle workspace below to activate",
   "workspace.empty": "No workspaces",
   "workspace.emptyHint": "Click the + button above to create one",
   "workspace.close": "Close",
@@ -2128,7 +2128,7 @@ export const dict = {
   "workspace.content.closeAll": "Close All",
 
   "workspace.createFromDevice": "Create from",
-  "workspace.createFromDevice.empty": "Please register a device first",
+  "workspace.createFromDevice.empty": "Follow the guide on the home page to connect your device and complete registration",
   "workspace.device.list": "Device List",
   "workspace.device.search": "Search devices...",
   "workspace.device.notFound": "No devices found",
diff --git a/packages/app-ai-native/src/i18n/zh.ts b/packages/app-ai-native/src/i18n/zh.ts
index e0c79b7f7..eabc0307b 100644
--- a/packages/app-ai-native/src/i18n/zh.ts
+++ b/packages/app-ai-native/src/i18n/zh.ts
@@ -1850,7 +1850,7 @@ export const dict = {
   "workspace.running": "运行中",
   "workspace.idle": "空闲",
   "workspace.running.empty": "暂无运行中工作空间",
-  "workspace.running.emptyHint": "点击下方空闲工作空间以激活",
+  "workspace.running.emptyHint": "点击下方在线的空闲工作空间以激活",
   "workspace.empty": "暂无工作空间",
   "workspace.emptyHint": "点击上方的 + 按钮创建",
   "workspace.close": "关闭",
@@ -1873,7 +1873,7 @@ export const dict = {
   "workspace.content.closeAll": "关闭全部",
 
   "workspace.createFromDevice": "创建自",
-  "workspace.createFromDevice.empty": "请先完成设备注册",
+  "workspace.createFromDevice.empty": "请根据主页的引导连接开发设备，完成设备注册",
   "workspace.device.list": "设备列表",
   "workspace.device.search": "搜索设备...",
   "workspace.device.notFound": "未找到设备",