From 372116115d3e7eee4e706c37063e4e1f2bfea696 Mon Sep 17 00:00:00 2001
From: Jon <jon@local>
Date: Wed, 13 May 2026 14:01:08 +0700
Subject: [PATCH 1/6] Tune chat feed spacing

---
 packages/ui/src/components/message-part.css | 4 ++--
 packages/ui/src/components/session-turn.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index c84a36892242..ff1d689cadc6 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -132,7 +132,7 @@
     overflow: hidden;
     background: var(--surface-base);
     border: 1px solid var(--border-weak-base);
-    padding: 8px 12px;
+    padding: 6px 12px;
     border-radius: 6px;
 
     [data-highlight="file"] {
@@ -209,7 +209,7 @@
 
 [data-component="text-part"] {
   width: 100%;
-  margin-top: 24px;
+  margin-top: 4px;
 
   [data-slot="text-part-body"] {
     margin-top: 0;
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 54076f3f8939..25b3d9d1d4ad 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -227,5 +227,5 @@
 }
 
 [data-slot="session-turn-list"] {
-  gap: 24px;
+  gap: 4px;
 }

From 9c5e727ff633a89e4ff5392f49639d5c66529f0d Mon Sep 17 00:00:00 2001
From: Jon <jon@local>
Date: Wed, 13 May 2026 14:01:09 +0700
Subject: [PATCH 2/6] Refine tool summaries and chat spacing

---
 packages/app/src/components/prompt-input.tsx  |   2 +-
 packages/ui/src/components/basic-tool.css     | 105 ++++++++++
 packages/ui/src/components/basic-tool.tsx     |  52 +++++
 packages/ui/src/components/collapsible.css    |   8 +
 packages/ui/src/components/message-part.css   |  10 +-
 packages/ui/src/components/message-part.tsx   | 190 ++++++++++--------
 packages/ui/src/components/session-turn.css   |   2 +-
 .../ui/src/components/tool-error-card.tsx     |   4 +-
 8 files changed, 278 insertions(+), 95 deletions(-)

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 77a18430d249..09c5cf12441a 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -134,7 +134,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   let slashPopoverRef!: HTMLDivElement
 
   const mirror = { input: false }
-  const inset = 56
+  const inset = 44
   const space = `${inset}px`
 
   const scrollCursorIntoView = () => {
diff --git a/packages/ui/src/components/basic-tool.css b/packages/ui/src/components/basic-tool.css
index 198412dcb9f9..e910adb19354 100644
--- a/packages/ui/src/components/basic-tool.css
+++ b/packages/ui/src/components/basic-tool.css
@@ -33,6 +33,17 @@
     gap: 8px;
   }
 
+  &[data-multiline="true"] {
+    align-items: flex-start;
+
+    [data-slot="basic-tool-tool-trigger-content"],
+    [data-slot="basic-tool-tool-info"] {
+      flex: 1 1 auto;
+      width: 100%;
+      max-width: 100%;
+    }
+  }
+
   [data-slot="basic-tool-tool-indicator"] {
     width: 16px;
     height: 16px;
@@ -181,6 +192,100 @@
   }
 }
 
+[data-component="tool-summary-trigger"] {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--font-family-mono);
+  font-size: 14px;
+  line-height: var(--line-height-large);
+  color: var(--text-base);
+  text-align: left;
+
+  [data-slot="tool-summary-main"] {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+  }
+
+  [data-slot="tool-summary-dot"] {
+    width: 8px;
+    height: 8px;
+    border-radius: 999px;
+    flex-shrink: 0;
+    background: var(--icon-weak-base);
+    transform: translateY(-1px);
+  }
+
+  &[data-state="success"] [data-slot="tool-summary-dot"] {
+    background: var(--icon-success-base);
+  }
+
+  &[data-state="error"] [data-slot="tool-summary-dot"] {
+    background: var(--icon-critical-base);
+  }
+
+  &[data-state="running"] [data-slot="tool-summary-dot"] {
+    background: var(--icon-warning-base);
+  }
+
+  [data-slot="tool-summary-call"] {
+    display: flex;
+    align-items: baseline;
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  [data-slot="tool-summary-name"] {
+    flex-shrink: 0;
+    font-weight: var(--font-weight-medium);
+    color: var(--text-strong);
+  }
+
+  [data-slot="tool-summary-paren"] {
+    flex-shrink: 0;
+    color: var(--text-base);
+  }
+
+  [data-slot="tool-summary-subject"] {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-base);
+  }
+
+  [data-slot="tool-summary-preview"] {
+    display: grid;
+    grid-template-columns: 16px minmax(0, 1fr);
+    gap: 4px;
+    align-items: start;
+    padding-left: 4px;
+    font-size: 13px;
+    color: var(--text-base);
+  }
+
+  [data-slot="tool-summary-branch"] {
+    width: 10px;
+    height: 13px;
+    border-left: 1px solid var(--border-weak-hover);
+    border-bottom: 1px solid var(--border-weak-hover);
+    transform: translate(4px, -4px);
+  }
+
+  [data-slot="tool-summary-preview-text"] {
+    justify-self: start;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 [data-component="task-tool-card"] {
   width: 100%;
   min-width: 0;
diff --git a/packages/ui/src/components/basic-tool.tsx b/packages/ui/src/components/basic-tool.tsx
index 27ad7c3c7010..152a279a6b21 100644
--- a/packages/ui/src/components/basic-tool.tsx
+++ b/packages/ui/src/components/basic-tool.tsx
@@ -37,10 +37,59 @@ export interface BasicToolProps {
   onTriggerClick?: JSX.EventHandlerUnion<HTMLElement, MouseEvent>
   triggerHref?: string
   clickable?: boolean
+  multilineTrigger?: boolean
+}
+
+export interface ToolSummaryTriggerProps {
+  title: string
+  subject?: string
+  preview?: JSX.Element
+  status?: string
+  failed?: boolean
 }
 
 const SPRING = { type: "spring" as const, visualDuration: 0.35, bounce: 0 }
 
+export function ToolSummaryTrigger(props: ToolSummaryTriggerProps) {
+  const pending = () => props.status === "pending" || props.status === "running"
+  const state = () => {
+    if (props.failed || props.status === "error") return "error"
+    if (pending()) return "running"
+    if (props.status === "completed") return "success"
+    return "neutral"
+  }
+
+  return (
+    <div data-component="tool-summary-trigger" data-state={state()}>
+      <div data-slot="tool-summary-main">
+        <span data-slot="tool-summary-dot" />
+        <span data-slot="tool-summary-call">
+          <span data-slot="tool-summary-name">
+            <TextShimmer text={props.title} active={pending()} />
+          </span>
+          <Show when={props.subject}>
+            {(subject) => (
+              <>
+                <span data-slot="tool-summary-paren">(</span>
+                <span data-slot="tool-summary-subject">{subject()}</span>
+                <span data-slot="tool-summary-paren">)</span>
+              </>
+            )}
+          </Show>
+        </span>
+      </div>
+      <Show when={!pending() && props.preview}>
+        {(preview) => (
+          <div data-slot="tool-summary-preview">
+            <span data-slot="tool-summary-branch" aria-hidden="true" />
+            <span data-slot="tool-summary-preview-text">{preview()}</span>
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}
+
 export function BasicTool(props: BasicToolProps) {
   const [state, setState] = createStore({
     open: props.defaultOpen ?? false,
@@ -129,6 +178,7 @@ export function BasicTool(props: BasicToolProps) {
       data-component="tool-trigger"
       data-clickable={props.clickable ? "true" : undefined}
       data-hide-details={props.hideDetails ? "true" : undefined}
+      data-multiline={props.multilineTrigger ? "true" : undefined}
     >
       <div data-slot="basic-tool-tool-trigger-content">
         <div data-slot="basic-tool-tool-info">
@@ -202,6 +252,7 @@ export function BasicTool(props: BasicToolProps) {
         fallback={
           <Collapsible.Trigger
             data-hide-details={props.hideDetails ? "true" : undefined}
+            data-multiline={props.multilineTrigger ? "true" : undefined}
             onClick={props.onTriggerClick}
           >
             {trigger()}
@@ -213,6 +264,7 @@ export function BasicTool(props: BasicToolProps) {
             as="a"
             href={href()}
             data-hide-details={props.hideDetails ? "true" : undefined}
+            data-multiline={props.multilineTrigger ? "true" : undefined}
             onClick={props.onTriggerClick}
           >
             {trigger()}
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 82c133f738aa..298837e8e34d 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -67,6 +67,14 @@
       align-items: stretch;
     }
 
+    &[data-multiline="true"] {
+      height: auto;
+      min-height: 36px;
+      align-items: flex-start;
+      padding: 2px 0;
+      text-align: left;
+    }
+
     [data-slot="collapsible-arrow"] {
       flex-shrink: 0;
       width: 24px;
diff --git a/packages/ui/src/components/message-part.css b/packages/ui/src/components/message-part.css
index ff1d689cadc6..6698cfc2cd51 100644
--- a/packages/ui/src/components/message-part.css
+++ b/packages/ui/src/components/message-part.css
@@ -132,7 +132,7 @@
     overflow: hidden;
     background: var(--surface-base);
     border: 1px solid var(--border-weak-base);
-    padding: 6px 12px;
+    padding: 4px 10px;
     border-radius: 6px;
 
     [data-highlight="file"] {
@@ -147,8 +147,8 @@
   }
 
   [data-slot="user-message-copy-wrapper"] {
-    min-height: 24px;
-    margin-top: 4px;
+    min-height: 20px;
+    margin-top: 2px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -216,8 +216,8 @@
   }
 
   [data-slot="text-part-copy-wrapper"] {
-    min-height: 24px;
-    margin-top: 4px;
+    min-height: 20px;
+    margin-top: 2px;
     display: flex;
     align-items: center;
     justify-content: flex-start;
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 9c0c90c00076..291aa4264e7a 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -5,7 +5,6 @@ import {
   createSignal,
   For,
   Match,
-  onMount,
   Show,
   Switch,
   onCleanup,
@@ -34,7 +33,7 @@ import { useData } from "../context"
 import { useFileComponent } from "../context/file"
 import { useDialog } from "../context/dialog"
 import { type UiI18n, useI18n } from "../context/i18n"
-import { BasicTool, GenericTool } from "./basic-tool"
+import { BasicTool, GenericTool, ToolSummaryTrigger } from "./basic-tool"
 import { Accordion } from "./accordion"
 import { StickyAccordionHeader } from "./sticky-accordion-header"
 import { Collapsible } from "./collapsible"
@@ -53,44 +52,10 @@ import { Spinner } from "./spinner"
 import { TextShimmer } from "./text-shimmer"
 import { AnimatedCountList } from "./tool-count-summary"
 import { ToolStatusTitle } from "./tool-status-title"
-import { patchFiles } from "./apply-patch-file"
-import { animate } from "motion"
+import { patchFiles, type ApplyPatchFile } from "./apply-patch-file"
 import { useLocation } from "@solidjs/router"
 import { attached, inline, kind } from "./message-file"
 
-function ShellSubmessage(props: { text: string; animate?: boolean }) {
-  let widthRef: HTMLSpanElement | undefined
-  let valueRef: HTMLSpanElement | undefined
-
-  onMount(() => {
-    if (!props.animate) return
-    requestAnimationFrame(() => {
-      if (widthRef) {
-        animate(widthRef, { width: "auto" }, { type: "spring", visualDuration: 0.25, bounce: 0 })
-      }
-      if (valueRef) {
-        animate(valueRef, { opacity: 1, filter: "blur(0px)" }, { duration: 0.32, ease: [0.16, 1, 0.3, 1] })
-      }
-    })
-  })
-
-  return (
-    <span data-component="shell-submessage">
-      <span ref={widthRef} data-slot="shell-submessage-width" style={{ width: props.animate ? "0px" : undefined }}>
-        <span data-slot="basic-tool-tool-subtitle">
-          <span
-            ref={valueRef}
-            data-slot="shell-submessage-value"
-            style={props.animate ? { opacity: 0, filter: "blur(2px)" } : undefined}
-          >
-            {props.text}
-          </span>
-        </span>
-      </span>
-    </span>
-  )
-}
-
 interface Diagnostic {
   range: {
     start: { line: number; character: number }
@@ -376,7 +341,7 @@ export function getToolInfo(tool: string, input: any = {}): ToolInfo {
     case "bash":
       return {
         icon: "console",
-        title: i18n.t("ui.tool.shell"),
+        title: "Bash",
         subtitle: input.description,
       }
     case "edit":
@@ -422,6 +387,73 @@ export function getToolInfo(tool: string, input: any = {}): ToolInfo {
   }
 }
 
+function stringValue(value: unknown) {
+  return typeof value === "string" ? value : undefined
+}
+
+function firstOutputLine(value: unknown) {
+  const text = stringValue(value)
+  if (!text) return undefined
+  return stripAnsi(text)
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .find((line) => line.length > 0)
+}
+
+function toolFailed(status: string | undefined, metadata: Record<string, any>) {
+  if (status === "error") return true
+  const exit = metadata.exit ?? metadata.exitCode
+  return typeof exit === "number" && exit !== 0
+}
+
+function plural(count: number, singular: string, plural = `${singular}s`) {
+  return `${count} ${count === 1 ? singular : plural}`
+}
+
+function patchChangeSummary(file: ApplyPatchFile) {
+  const changes = []
+  if (file.additions) changes.push(plural(file.additions, "addition"))
+  if (file.deletions) changes.push(plural(file.deletions, "removal"))
+  return changes.length ? changes.join(" and ") : "no line changes"
+}
+
+function applyPatchSummary(file: ApplyPatchFile | undefined, count: number, output: unknown) {
+  if (!file) {
+    return {
+      title: "apply_patch",
+      subject: count ? plural(count, "file") : undefined,
+      preview: count ? `Updated ${plural(count, "file")}` : firstOutputLine(output),
+    }
+  }
+
+  switch (file.type) {
+    case "add":
+      return {
+        title: "apply_patch",
+        subject: file.relativePath,
+        preview: `Created ${file.relativePath} with ${plural(file.additions, "line")}`,
+      }
+    case "delete":
+      return {
+        title: "apply_patch",
+        subject: file.relativePath,
+        preview: `Deleted ${file.relativePath}`,
+      }
+    case "move":
+      return {
+        title: "apply_patch",
+        subject: file.relativePath,
+        preview: `Moved ${file.relativePath}`,
+      }
+    case "update":
+      return {
+        title: "apply_patch",
+        subject: file.relativePath,
+        preview: `Updated ${file.relativePath} with ${patchChangeSummary(file)}`,
+      }
+  }
+}
+
 function urls(text: string | undefined) {
   if (!text) return []
   const seen = new Set<string>()
@@ -1821,12 +1853,13 @@ ToolRegistry.register({
   name: "bash",
   render(props) {
     const i18n = useI18n()
-    const pending = () => props.status === "pending" || props.status === "running"
-    const sawPending = pending()
+    const command = createMemo(() => stringValue(props.input.command) ?? stringValue(props.metadata.command) ?? "")
+    const output = createMemo(() => stringValue(props.output) ?? stringValue(props.metadata.output) ?? "")
+    const preview = createMemo(() => firstOutputLine(output()))
+    const failed = createMemo(() => toolFailed(props.status, props.metadata))
     const text = createMemo(() => {
-      const cmd = props.input.command ?? props.metadata.command ?? ""
-      const out = stripAnsi(props.output || props.metadata.output || "")
-      return `$ ${cmd}${out ? "\n\n" + out : ""}`
+      const out = stripAnsi(output())
+      return `$ ${command()}${out ? "\n\n" + out : ""}`
     })
     const [copied, setCopied] = createSignal(false)
 
@@ -1842,17 +1875,15 @@ ToolRegistry.register({
       <BasicTool
         {...props}
         icon="console"
+        multilineTrigger
         trigger={
-          <div data-slot="basic-tool-tool-info-structured">
-            <div data-slot="basic-tool-tool-info-main">
-              <span data-slot="basic-tool-tool-title">
-                <TextShimmer text={i18n.t("ui.tool.shell")} active={pending()} />
-              </span>
-              <Show when={!pending() && props.input.description}>
-                <ShellSubmessage text={props.input.description} animate={sawPending} />
-              </Show>
-            </div>
-          </div>
+          <ToolSummaryTrigger
+            title="Bash"
+            subject={command()}
+            preview={preview()}
+            status={props.status}
+            failed={failed()}
+          />
         }
       >
         <div data-component="bash-output">
@@ -2020,12 +2051,13 @@ ToolRegistry.register({
     const i18n = useI18n()
     const fileComponent = useFileComponent()
     const files = createMemo(() => patchFiles(props.metadata.files))
-    const pending = createMemo(() => props.status === "pending" || props.status === "running")
     const single = createMemo(() => {
       const list = files()
       if (list.length !== 1) return
       return list[0]
     })
+    const summary = createMemo(() => applyPatchSummary(single(), files().length, props.output))
+    const failed = createMemo(() => toolFailed(props.status, props.metadata))
     const [expanded, setExpanded] = createSignal<string[]>([])
     let seeded = false
 
@@ -2037,12 +2069,6 @@ ToolRegistry.register({
       setExpanded(list.filter((f) => f.type !== "delete").map((f) => f.filePath))
     })
 
-    const subtitle = createMemo(() => {
-      const count = files().length
-      if (count === 0) return ""
-      return `${count} ${i18n.t(count > 1 ? "ui.common.file.other" : "ui.common.file.one")}`
-    })
-
     return (
       <Show
         when={single()}
@@ -2052,10 +2078,16 @@ ToolRegistry.register({
               {...props}
               icon="code-lines"
               defer
-              trigger={{
-                title: i18n.t("ui.tool.patch"),
-                subtitle: subtitle(),
-              }}
+              multilineTrigger
+              trigger={
+                <ToolSummaryTrigger
+                  title={summary().title}
+                  subject={summary().subject}
+                  preview={summary().preview}
+                  status={props.status}
+                  failed={failed()}
+                />
+              }
             >
               <Show when={files().length > 0}>
                 <Accordion
@@ -2144,29 +2176,15 @@ ToolRegistry.register({
             {...props}
             icon="code-lines"
             defer
+            multilineTrigger
             trigger={
-              <div data-component="edit-trigger">
-                <div data-slot="message-part-title-area">
-                  <div data-slot="message-part-title">
-                    <span data-slot="message-part-title-text">
-                      <TextShimmer text={i18n.t("ui.tool.patch")} active={pending()} />
-                    </span>
-                    <Show when={!pending()}>
-                      <span data-slot="message-part-title-filename">{getFilename(single()!.relativePath)}</span>
-                    </Show>
-                  </div>
-                  <Show when={!pending() && single()!.relativePath.includes("/")}>
-                    <div data-slot="message-part-path">
-                      <span data-slot="message-part-directory">{getDirectory(single()!.relativePath)}</span>
-                    </div>
-                  </Show>
-                </div>
-                <div data-slot="message-part-actions">
-                  <Show when={!pending()}>
-                    <DiffChanges changes={{ additions: single()!.additions, deletions: single()!.deletions }} />
-                  </Show>
-                </div>
-              </div>
+              <ToolSummaryTrigger
+                title={summary().title}
+                subject={summary().subject}
+                preview={summary().preview}
+                status={props.status}
+                failed={failed()}
+              />
             }
           >
             <ToolFileAccordion
diff --git a/packages/ui/src/components/session-turn.css b/packages/ui/src/components/session-turn.css
index 25b3d9d1d4ad..621df13b9b04 100644
--- a/packages/ui/src/components/session-turn.css
+++ b/packages/ui/src/components/session-turn.css
@@ -85,7 +85,7 @@
     display: flex;
     flex-direction: column;
     align-self: stretch;
-    gap: 12px;
+    gap: 6px;
   }
 
   [data-slot="session-turn-diffs"] {
diff --git a/packages/ui/src/components/tool-error-card.tsx b/packages/ui/src/components/tool-error-card.tsx
index 9983e2fe79b9..03c21c0e26ce 100644
--- a/packages/ui/src/components/tool-error-card.tsx
+++ b/packages/ui/src/components/tool-error-card.tsx
@@ -34,8 +34,8 @@ export function ToolErrorCard(props: ToolErrorCardProps) {
       webfetch: "ui.tool.webfetch",
       websearch: "ui.tool.websearch",
       codesearch: "ui.tool.codesearch",
-      bash: "ui.tool.shell",
-      apply_patch: "ui.tool.patch",
+      bash: "Bash",
+      apply_patch: "apply_patch",
       question: "ui.tool.questions",
     }
     const key = map[split.tool]

From 2d73c01e4dbe6e80a98c796d288f331e3f4ad8d9 Mon Sep 17 00:00:00 2001
From: Jon <jon@local>
Date: Wed, 13 May 2026 14:01:09 +0700
Subject: [PATCH 3/6] Stabilize Android keyboard scrolling

---
 packages/android/index.html                          |  2 +-
 .../gen/android/app/src/main/AndroidManifest.xml     |  1 +
 packages/android/src/entry-android.tsx               | 12 ++++++++++++
 packages/app/src/pages/session/message-timeline.tsx  |  9 ++++++---
 packages/ui/src/components/scroll-view.css           |  5 +++++
 packages/ui/src/hooks/create-auto-scroll.tsx         | 11 +++++++++++
 6 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/android/index.html b/packages/android/index.html
index 115bc63b96ab..caf3d000ca96 100644
--- a/packages/android/index.html
+++ b/packages/android/index.html
@@ -20,7 +20,7 @@
     <div
       id="root"
       class="flex flex-col h-dvh"
-      style="padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)"
+      style="height: var(--android-viewport-height, 100dvh); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom)"
     ></div>
     <script src="/src/entry-android.tsx" type="module"></script>
   </body>
diff --git a/packages/android/src-tauri/gen/android/app/src/main/AndroidManifest.xml b/packages/android/src-tauri/gen/android/app/src/main/AndroidManifest.xml
index e217244b4b95..0a8802b8eb01 100644
--- a/packages/android/src-tauri/gen/android/app/src/main/AndroidManifest.xml
+++ b/packages/android/src-tauri/gen/android/app/src/main/AndroidManifest.xml
@@ -15,6 +15,7 @@
             android:launchMode="singleTask"
             android:label="@string/main_activity_title"
             android:name=".MainActivity"
+            android:windowSoftInputMode="adjustResize"
             android:exported="true">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
diff --git a/packages/android/src/entry-android.tsx b/packages/android/src/entry-android.tsx
index 9c080fac9eaa..ede875096400 100644
--- a/packages/android/src/entry-android.tsx
+++ b/packages/android/src/entry-android.tsx
@@ -262,6 +262,12 @@ const App = () => {
     document.documentElement.dataset.platform = "android"
     void refreshVoice()
 
+    const syncViewport = () => {
+      const height = window.visualViewport?.height ?? window.innerHeight
+      document.documentElement.style.setProperty("--android-viewport-height", `${height}px`)
+    }
+    syncViewport()
+
     const handleClick = (event: MouseEvent) => {
       const link = (event.target as HTMLElement | null)?.closest("a.external-link") as HTMLAnchorElement | null
       if (!link?.href) return
@@ -291,10 +297,16 @@ const App = () => {
 
     document.addEventListener("click", handleClick)
     window.addEventListener("focus", onFocus)
+    window.addEventListener("resize", syncViewport)
+    window.visualViewport?.addEventListener("resize", syncViewport)
+    window.visualViewport?.addEventListener("scroll", syncViewport)
     document.addEventListener("visibilitychange", onVisible)
     onCleanup(() => {
       document.removeEventListener("click", handleClick)
       window.removeEventListener("focus", onFocus)
+      window.removeEventListener("resize", syncViewport)
+      window.visualViewport?.removeEventListener("resize", syncViewport)
+      window.visualViewport?.removeEventListener("scroll", syncViewport)
       document.removeEventListener("visibilitychange", onVisible)
       stopListening()
       stopVoiceState()
diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx
index e64fa9fc2a4c..551fbaec6b63 100644
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@@ -244,6 +244,7 @@ export function MessageTimeline(props: {
   const language = useLanguage()
   const { params, sessionKey } = useSessionKey()
   const platform = usePlatform()
+  const nativeMobile = platform.platform === "ios" || platform.platform === "android"
 
   const rendered = createMemo(() => props.renderedUserMessages.map((message) => message.id))
   const sessionID = createMemo(() => params.id)
@@ -1001,12 +1002,14 @@ export function MessageTimeline(props: {
             <div
               role="log"
               data-slot="session-turn-list"
-              class="flex flex-col items-start justify-start pb-16 transition-[margin]"
+              class="flex flex-col items-start justify-start transition-[margin]"
               classList={{
                 "w-full": true,
                 "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
                 "mt-0.5": props.centered,
                 "mt-0": !props.centered,
+                "pb-4": nativeMobile,
+                "pb-16": !nativeMobile,
               }}
             >
               <Show when={props.turnStart > 0 || props.historyMore}>
@@ -1048,8 +1051,8 @@ export function MessageTimeline(props: {
                         "md:max-w-200 2xl:max-w-[1000px]": props.centered,
                       }}
                       style={{
-                        "content-visibility": active() ? undefined : "auto",
-                        "contain-intrinsic-size": active() ? undefined : "auto 500px",
+                        "content-visibility": active() || nativeMobile ? undefined : "auto",
+                        "contain-intrinsic-size": active() || nativeMobile ? undefined : "auto 500px",
                       }}
                     >
                       <Show when={commentCount() > 0}>
diff --git a/packages/ui/src/components/scroll-view.css b/packages/ui/src/components/scroll-view.css
index 1ebc4e9496a5..fe67d0aa415c 100644
--- a/packages/ui/src/components/scroll-view.css
+++ b/packages/ui/src/components/scroll-view.css
@@ -17,6 +17,11 @@
   flex-direction: unset;
 }
 
+:root[data-platform="ios"] .scroll-view__viewport,
+:root[data-platform="android"] .scroll-view__viewport {
+  overscroll-behavior-y: contain;
+}
+
 .scroll-view__viewport::-webkit-scrollbar {
   display: none;
 }
diff --git a/packages/ui/src/hooks/create-auto-scroll.tsx b/packages/ui/src/hooks/create-auto-scroll.tsx
index 1c4f1257a545..328d7e782601 100644
--- a/packages/ui/src/hooks/create-auto-scroll.tsx
+++ b/packages/ui/src/hooks/create-auto-scroll.tsx
@@ -191,6 +191,17 @@ export function createAutoScroll(options: AutoScrollOptions) {
     },
   )
 
+  createResizeObserver(
+    () => store.scrollRef,
+    () => {
+      const el = store.scrollRef
+      if (!el || !canScroll(el)) return
+      if (!active()) return
+      if (store.userScrolled) return
+      scrollToBottom(false)
+    },
+  )
+
   createEffect(
     on(options.working, (working: boolean) => {
       settling = false

From d64444ae5f6b1ddde3bbec25af6ae2a158175f9e Mon Sep 17 00:00:00 2001
From: Jon <jon@local>
Date: Wed, 13 May 2026 14:01:09 +0700
Subject: [PATCH 4/6] Refine mobile session header

---
 packages/app/src/components/prompt-input.tsx  |   16 +
 packages/app/src/pages/session.tsx            |   42 +-
 .../src/pages/session/message-timeline.tsx    | 1128 ++++++++++-------
 3 files changed, 704 insertions(+), 482 deletions(-)

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 09c5cf12441a..289795d67424 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -28,6 +28,7 @@ import { Select } from "@opencode-ai/ui/select"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { useProviders } from "@/hooks/use-providers"
+import { getSessionContextMetrics } from "@/components/session/session-context-metrics"
 import { useCommand } from "@/context/command"
 import { Persist, persisted } from "@/utils/persist"
 import { usePermission } from "@/context/permission"
@@ -1127,6 +1128,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   })
 
   const variants = createMemo(() => ["default", ...local.model.variant.list()])
+  const sessionMessages = createMemo(() => (params.id ? (sync.data.message[params.id] ?? []) : []))
+  const contextTokens = createMemo(
+    () => getSessionContextMetrics(sessionMessages(), providers.all()).context?.total ?? 0,
+  )
+  const contextTokenLabel = createMemo(() => contextTokens().toLocaleString(language.intl()))
   const accepting = createMemo(() => {
     const id = params.id
     if (!id) return permission.isAutoAcceptingDirectory(sdk.directory)
@@ -1745,6 +1751,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                         </TooltipKeybind>
                       </div>
                     </Show>
+                    <Show when={params.id}>
+                      <div
+                        data-component="prompt-context-tokens"
+                        class="shrink-0 whitespace-nowrap text-13-regular text-text-weak"
+                      >
+                        <span>Context: </span>
+                        <span class="text-text-base">{contextTokenLabel()}</span>
+                        <span>t</span>
+                      </div>
+                    </Show>
                   </Show>
                 </Show>
               </div>
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index 133cce4e1482..e20ba4852296 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -23,7 +23,6 @@ import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange
 import { createStore } from "solid-js/store"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Select } from "@opencode-ai/ui/select"
-import { Tabs } from "@opencode-ai/ui/tabs"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
 import { Button } from "@opencode-ai/ui/button"
@@ -1961,34 +1960,6 @@ export default function Page() {
       {sessionSync() ?? ""}
       <SessionHeader />
       <div class="flex-1 min-h-0 flex flex-col md:flex-row">
-        <Show when={!isDesktop() && !!params.id}>
-          {/* UPSTREAM-DIVERGENCE: Mobile uses a compact chat switcher so the primary flow keeps more vertical space. */}
-          <Tabs value={store.mobileTab} class="h-auto">
-            <Tabs.List class="!h-9 !px-2 !py-1 !bg-background-stronger">
-              <Tabs.Trigger
-                value="session"
-                class="!w-1/2 !max-w-none !h-full text-13-medium"
-                classes={{ button: "w-full !h-full !px-2 !py-0" }}
-                onClick={() => setStore("mobileTab", "session")}
-              >
-                {language.t("session.tab.session")}
-              </Tabs.Trigger>
-              <Tabs.Trigger
-                value="changes"
-                class="!w-1/2 !max-w-none !h-full !border-r-0 text-13-medium"
-                classes={{ button: "w-full !h-full !px-2 !py-0" }}
-                onClick={() => setStore("mobileTab", "changes")}
-              >
-                {hasReview()
-                  ? `${reviewCount()} ${language.t(
-                      reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other",
-                    )}`
-                  : language.t("session.review.change.other")}
-              </Tabs.Trigger>
-            </Tabs.List>
-          </Tabs>
-        </Show>
-
         {/* Session panel */}
         <div
           classList={{
@@ -2006,6 +1977,19 @@ export default function Page() {
                 <Show when={messagesReady()}>
                   <MessageTimeline
                     mobileChanges={mobileChanges()}
+                    mobileTabs={
+                      !isDesktop() && params.id
+                        ? {
+                            value: store.mobileTab,
+                            changesLabel: hasReview()
+                              ? `${reviewCount()} ${language.t(
+                                  reviewCount() === 1 ? "session.review.change.one" : "session.review.change.other",
+                                )}`
+                              : language.t("session.review.change.other"),
+                            onChange: (value) => setStore("mobileTab", value),
+                          }
+                        : undefined
+                    }
                     mobileFallback={reviewContent({
                       diffStyle: "unified",
                       classes: {
diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx
index 551fbaec6b63..70639054964f 100644
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@@ -12,6 +12,7 @@ import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { Spinner } from "@opencode-ai/ui/spinner"
 import { SessionTurn } from "@opencode-ai/ui/session-turn"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { Tabs } from "@opencode-ai/ui/tabs"
 import { TextField } from "@opencode-ai/ui/text-field"
 import type { AssistantMessage, Message as MessageType, Part, TextPart, UserMessage } from "@opencode-ai/sdk/v2"
 import { showToast } from "@opencode-ai/ui/toast"
@@ -213,6 +214,11 @@ function createTimelineStaging(input: TimelineStageInput) {
 export function MessageTimeline(props: {
   mobileChanges: boolean
   mobileFallback: JSX.Element
+  mobileTabs?: {
+    value: "session" | "changes"
+    changesLabel: string
+    onChange: (value: "session" | "changes") => void
+  }
   actions?: UserActions
   scroll: { overflow: boolean; bottom: boolean; jump: boolean }
   onResumeScroll: () => void
@@ -352,6 +358,7 @@ export function MessageTimeline(props: {
     pendingRename: false,
     pendingShare: false,
   })
+  const showTimelineHeader = createMemo(() => showHeader() && (!props.mobileTabs || title.editing))
   let titleRef: HTMLInputElement | undefined
 
   const [share, setShare] = createStore({
@@ -627,498 +634,713 @@ export function MessageTimeline(props: {
     )
   }
 
-  return (
-    <Show
-      when={!props.mobileChanges}
-      fallback={<div class="relative h-full overflow-hidden">{props.mobileFallback}</div>}
-    >
-      <div class="relative w-full h-full min-w-0">
-        <div
-          class="absolute left-1/2 -translate-x-1/2 bottom-6 z-[60] pointer-events-none transition-all duration-200 ease-out"
-          classList={{
-            "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump && !staging.isStaging(),
-            "opacity-0 translate-y-2 scale-95 pointer-events-none":
-              !props.scroll.overflow || !props.scroll.jump || staging.isStaging(),
-          }}
-        >
-          <button
-            class="pointer-events-auto flex items-center justify-center w-10 h-8 bg-transparent border-none cursor-pointer p-0 group"
-            onClick={props.onResumeScroll}
-          >
-            <div
-              class="flex items-center justify-center w-8 h-6 rounded-[6px] border border-border-weaker-base bg-[color-mix(in_srgb,var(--surface-raised-stronger-non-alpha)_80%,transparent)] backdrop-blur-[0.75px] transition-colors group-hover:border-[var(--border-weak-base)] group-hover:[--icon-base:var(--icon-hover)]"
-              style={{
-                "box-shadow":
-                  "0 51px 60px 0 rgba(0,0,0,0.10), 0 15px 18px 0 rgba(0,0,0,0.12), 0 6.386px 7.513px 0 rgba(0,0,0,0.12), 0 2.31px 2.717px 0 rgba(0,0,0,0.20)",
+  const mobileTabActions = () => (
+    <Show when={sessionID()} keyed>
+      {(id) => (
+        <div class="shrink-0 flex items-center gap-3">
+          <SessionContextUsage placement="bottom" />
+          <Show when={!parentID()}>
+            <DropdownMenu
+              gutter={4}
+              placement="bottom-end"
+              open={title.menuOpen}
+              onOpenChange={(open) => {
+                setTitle("menuOpen", open)
+                if (open) return
               }}
             >
-              <Icon name="arrow-down-to-line" size="small" />
-            </div>
-          </button>
-        </div>
-        <ScrollView
-          viewportRef={props.setScrollRef}
-          onWheel={(e) => {
-            const root = e.currentTarget
-            const delta = normalizeWheelDelta({
-              deltaY: e.deltaY,
-              deltaMode: e.deltaMode,
-              rootHeight: root.clientHeight,
-            })
-            if (!delta) return
-            markBoundaryGesture({ root, target: e.target, delta, onMarkScrollGesture: props.onMarkScrollGesture })
-          }}
-          onTouchStart={(e) => {
-            touchGesture = e.touches[0]?.clientY
-          }}
-          onTouchMove={(e) => {
-            const next = e.touches[0]?.clientY
-            const prev = touchGesture
-            touchGesture = next
-            if (next === undefined || prev === undefined) return
-
-            const delta = prev - next
-            if (!delta) return
-
-            const root = e.currentTarget
-            markBoundaryGesture({ root, target: e.target, delta, onMarkScrollGesture: props.onMarkScrollGesture })
-          }}
-          onTouchEnd={() => {
-            touchGesture = undefined
-          }}
-          onTouchCancel={() => {
-            touchGesture = undefined
-          }}
-          onPointerDown={(e) => {
-            if (e.target !== e.currentTarget) return
-            props.onMarkScrollGesture(e.currentTarget)
-          }}
-          onScroll={(e) => {
-            props.onScheduleScrollState(e.currentTarget)
-            props.onTurnBackfillScroll()
-            if (!props.hasScrollGesture()) return
-            props.onUserScroll()
-            props.onAutoScrollHandleScroll()
-            props.onMarkScrollGesture(e.currentTarget)
-          }}
-          onClick={props.onAutoScrollInteraction}
-          class="relative min-w-0 w-full h-full"
-          style={{
-            "--session-title-height": showHeader() ? "40px" : "0px",
-            "--sticky-accordion-top": showHeader() ? "48px" : "0px",
-          }}
-        >
-          <div ref={props.setContentRef} class="min-w-0 w-full">
-            <Show when={showHeader()}>
-              <div
-                ref={(el) => {
-                  head = el
-                  setBar("ms", pace(el.clientWidth))
-                }}
-                data-session-title
+              <DropdownMenu.Trigger
+                as={IconButton}
+                icon="dot-grid"
+                variant="ghost"
+                class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
                 classList={{
-                  "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
-                  relative: true,
-                  "w-full": true,
-                  "pb-4": true,
-                  "pl-2 pr-3 md:pl-4 md:pr-3": true,
-                  "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
+                  "bg-surface-base-active": share.open || title.pendingShare,
                 }}
-              >
-                <Show when={workingStatus() !== "hidden" && settings.general.showSessionProgressBar()}>
-                  <div
-                    data-component="session-progress"
-                    data-state={workingStatus()}
-                    aria-hidden="true"
-                    style={{
-                      "--session-progress-color": tint() ?? "var(--icon-interactive-base)",
-                      "--session-progress-ms": `${bar.ms}ms`,
+                aria-label={language.t("common.moreOptions")}
+                aria-expanded={title.menuOpen || share.open || title.pendingShare}
+                ref={(el: HTMLButtonElement) => {
+                  more = el
+                }}
+              />
+              <DropdownMenu.Portal>
+                <DropdownMenu.Content
+                  style={{ "min-width": "104px" }}
+                  onCloseAutoFocus={(event) => {
+                    if (title.pendingRename) {
+                      event.preventDefault()
+                      setTitle("pendingRename", false)
+                      openTitleEditor()
+                      return
+                    }
+                    if (title.pendingShare) {
+                      event.preventDefault()
+                      requestAnimationFrame(() => {
+                        setShare({ open: true, dismiss: null })
+                        setTitle("pendingShare", false)
+                      })
+                    }
+                  }}
+                >
+                  <DropdownMenu.Item
+                    onSelect={() => {
+                      setTitle("pendingRename", true)
+                      setTitle("menuOpen", false)
                     }}
                   >
-                    <div data-component="session-progress-bar" />
-                  </div>
-                </Show>
-                <div class="h-12 w-full flex items-center justify-between gap-2">
-                  <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
-                    <div class="flex items-center min-w-0 grow-1">
-                      <Show when={parentID()}>
-                        <button
-                          type="button"
-                          data-slot="session-title-parent"
-                          class="min-w-0 max-w-[40%] truncate text-14-medium text-text-weak transition-colors hover:text-text-base"
-                          onClick={navigateParent}
-                        >
-                          {parentTitle()}
-                        </button>
-                        <span
-                          data-slot="session-title-separator"
-                          class="px-2 text-14-medium text-text-weak"
-                          aria-hidden="true"
-                        >
-                          /
-                        </span>
-                      </Show>
-                      <div
-                        class="shrink-0 flex items-center justify-center overflow-hidden transition-[width,margin] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
-                        style={{
-                          width: working() ? "16px" : "0px",
-                          "margin-right": working() ? "8px" : "0px",
-                        }}
-                        aria-hidden="true"
-                      >
-                        <Show when={workingStatus() !== "hidden"}>
-                          <div
-                            class="transition-opacity duration-200 ease-out"
-                            classList={{ "opacity-0": workingStatus() === "hiding" }}
-                          >
-                            <Spinner class="size-4" style={{ color: tint() ?? "var(--icon-interactive-base)" }} />
-                          </div>
-                        </Show>
+                    <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
+                  </DropdownMenu.Item>
+                  <Show when={shareEnabled()}>
+                    <DropdownMenu.Item
+                      onSelect={() => {
+                        setTitle({ pendingShare: true, menuOpen: false })
+                      }}
+                    >
+                      <DropdownMenu.ItemLabel>{language.t("session.share.action.share")}</DropdownMenu.ItemLabel>
+                    </DropdownMenu.Item>
+                  </Show>
+                  <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
+                    <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Separator />
+                  <DropdownMenu.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}>
+                    <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Portal>
+            </DropdownMenu>
+
+            <KobaltePopover
+              open={share.open}
+              anchorRef={() => more}
+              placement="bottom-end"
+              gutter={4}
+              modal={false}
+              onOpenChange={(open) => {
+                if (open) setShare("dismiss", null)
+                setShare("open", open)
+              }}
+            >
+              <KobaltePopover.Portal>
+                <KobaltePopover.Content
+                  data-component="popover-content"
+                  style={{ "min-width": "320px" }}
+                  onEscapeKeyDown={(event) => {
+                    setShare({ dismiss: "escape", open: false })
+                    event.preventDefault()
+                    event.stopPropagation()
+                  }}
+                  onPointerDownOutside={() => {
+                    setShare({ dismiss: "outside", open: false })
+                  }}
+                  onFocusOutside={() => {
+                    setShare({ dismiss: "outside", open: false })
+                  }}
+                  onCloseAutoFocus={(event) => {
+                    if (share.dismiss === "outside") event.preventDefault()
+                    setShare("dismiss", null)
+                  }}
+                >
+                  <div class="flex flex-col p-3">
+                    <div class="flex flex-col gap-1">
+                      <div class="text-13-medium text-text-strong">{language.t("session.share.popover.title")}</div>
+                      <div class="text-12-regular text-text-weak">
+                        {shareUrl()
+                          ? language.t("session.share.popover.description.shared")
+                          : language.t("session.share.popover.description.unshared")}
                       </div>
-                      <Show when={childTitle() || title.editing}>
-                        <Show
-                          when={title.editing}
-                          fallback={
-                            <h1
-                              data-slot="session-title-child"
-                              class="text-14-medium text-text-strong truncate grow-1 min-w-0"
-                              onDblClick={openTitleEditor}
-                            >
-                              {childTitle()}
-                            </h1>
-                          }
-                        >
-                          <InlineInput
-                            ref={(el) => {
-                              titleRef = el
-                            }}
-                            data-slot="session-title-child"
-                            value={title.draft}
-                            disabled={titleMutation.isPending}
-                            class="text-14-medium text-text-strong grow-1 min-w-0 rounded-[6px] pl-1 -ml-1"
-                            style={{ "--inline-input-shadow": "var(--shadow-xs-border-select)" }}
-                            onInput={(event) => setTitle("draft", event.currentTarget.value)}
-                            onKeyDown={(event) => {
-                              event.stopPropagation()
-                              if (event.key === "Enter") {
-                                event.preventDefault()
-                                void saveTitleEditor()
-                                return
-                              }
-                              if (event.key === "Escape") {
-                                event.preventDefault()
-                                closeTitleEditor()
-                              }
-                            }}
-                            onBlur={closeTitleEditor}
+                    </div>
+                    <div class="mt-3 flex flex-col gap-2">
+                      <Show
+                        when={shareUrl()}
+                        fallback={
+                          <Button
+                            size="large"
+                            variant="primary"
+                            class="w-full"
+                            onClick={shareSession}
+                            disabled={shareMutation.isPending}
+                          >
+                            {shareMutation.isPending
+                              ? language.t("session.share.action.publishing")
+                              : language.t("session.share.action.publish")}
+                          </Button>
+                        }
+                      >
+                        <div class="flex flex-col gap-2">
+                          <TextField
+                            value={shareUrl() ?? ""}
+                            readOnly
+                            copyable
+                            copyKind="link"
+                            tabIndex={-1}
+                            class="w-full"
                           />
-                        </Show>
+                          <div class="grid grid-cols-2 gap-2">
+                            <Button
+                              size="large"
+                              variant="secondary"
+                              class="w-full shadow-none border border-border-weak-base"
+                              onClick={unshareSession}
+                              disabled={unshareMutation.isPending}
+                            >
+                              {unshareMutation.isPending
+                                ? language.t("session.share.action.unpublishing")
+                                : language.t("session.share.action.unpublish")}
+                            </Button>
+                            <Button
+                              size="large"
+                              variant="primary"
+                              class="w-full"
+                              onClick={viewShare}
+                              disabled={unshareMutation.isPending}
+                            >
+                              {language.t("session.share.action.view")}
+                            </Button>
+                          </div>
+                        </div>
                       </Show>
                     </div>
                   </div>
-                  <Show when={sessionID()} keyed>
-                    {(id) => (
-                      <div class="shrink-0 flex items-center gap-3">
-                        <SessionContextUsage placement="bottom" />
-                        <Show when={!parentID()}>
-                          <DropdownMenu
-                            gutter={4}
-                            placement="bottom-end"
-                            open={title.menuOpen}
-                            onOpenChange={(open) => {
-                              setTitle("menuOpen", open)
-                              if (open) return
-                            }}
+                </KobaltePopover.Content>
+              </KobaltePopover.Portal>
+            </KobaltePopover>
+          </Show>
+        </div>
+      )}
+    </Show>
+  )
+
+  const mobileTabBar = () => {
+    const tabs = props.mobileTabs
+    if (!tabs) return null
+    return (
+      <Tabs value={tabs.value} class="h-auto shrink-0">
+        <Tabs.List class="!h-9 !px-2 !py-1 !bg-background-stronger">
+          <Tabs.Trigger
+            value="session"
+            class="!w-[65%] !max-w-none !h-full text-13-medium"
+            classes={{ button: "flex-1 !h-full !px-2 !py-0 min-w-0" }}
+            closeButton={
+              <div class="flex items-center gap-3 pl-1" onPointerDown={(event) => event.stopPropagation()}>
+                {mobileTabActions()}
+              </div>
+            }
+            onClick={() => tabs.onChange("session")}
+          >
+            <span class="min-w-0 truncate text-center">
+              <span class="text-text-weak">Session: </span>
+              {childTitle() || language.t("command.session.new")}
+            </span>
+          </Tabs.Trigger>
+          <Tabs.Trigger
+            value="changes"
+            class="!w-[35%] !max-w-none !h-full !border-r-0 text-13-medium"
+            classes={{ button: "w-full !h-full !px-2 !py-0" }}
+            onClick={() => tabs.onChange("changes")}
+          >
+            {tabs.changesLabel}
+          </Tabs.Trigger>
+        </Tabs.List>
+      </Tabs>
+    )
+  }
+
+  return (
+    <div class="relative w-full h-full min-w-0 flex flex-col">
+      {mobileTabBar()}
+      <Show
+        when={!props.mobileChanges}
+        fallback={<div class="relative flex-1 min-h-0 overflow-hidden">{props.mobileFallback}</div>}
+      >
+        <div class="relative w-full flex-1 min-h-0 min-w-0">
+          <div
+            class="absolute left-1/2 -translate-x-1/2 bottom-6 z-[60] pointer-events-none transition-all duration-200 ease-out"
+            classList={{
+              "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump && !staging.isStaging(),
+              "opacity-0 translate-y-2 scale-95 pointer-events-none":
+                !props.scroll.overflow || !props.scroll.jump || staging.isStaging(),
+            }}
+          >
+            <button
+              class="pointer-events-auto flex items-center justify-center w-10 h-8 bg-transparent border-none cursor-pointer p-0 group"
+              onClick={props.onResumeScroll}
+            >
+              <div
+                class="flex items-center justify-center w-8 h-6 rounded-[6px] border border-border-weaker-base bg-[color-mix(in_srgb,var(--surface-raised-stronger-non-alpha)_80%,transparent)] backdrop-blur-[0.75px] transition-colors group-hover:border-[var(--border-weak-base)] group-hover:[--icon-base:var(--icon-hover)]"
+                style={{
+                  "box-shadow":
+                    "0 51px 60px 0 rgba(0,0,0,0.10), 0 15px 18px 0 rgba(0,0,0,0.12), 0 6.386px 7.513px 0 rgba(0,0,0,0.12), 0 2.31px 2.717px 0 rgba(0,0,0,0.20)",
+                }}
+              >
+                <Icon name="arrow-down-to-line" size="small" />
+              </div>
+            </button>
+          </div>
+          <ScrollView
+            viewportRef={props.setScrollRef}
+            onWheel={(e) => {
+              const root = e.currentTarget
+              const delta = normalizeWheelDelta({
+                deltaY: e.deltaY,
+                deltaMode: e.deltaMode,
+                rootHeight: root.clientHeight,
+              })
+              if (!delta) return
+              markBoundaryGesture({ root, target: e.target, delta, onMarkScrollGesture: props.onMarkScrollGesture })
+            }}
+            onTouchStart={(e) => {
+              touchGesture = e.touches[0]?.clientY
+            }}
+            onTouchMove={(e) => {
+              const next = e.touches[0]?.clientY
+              const prev = touchGesture
+              touchGesture = next
+              if (next === undefined || prev === undefined) return
+
+              const delta = prev - next
+              if (!delta) return
+
+              const root = e.currentTarget
+              markBoundaryGesture({ root, target: e.target, delta, onMarkScrollGesture: props.onMarkScrollGesture })
+            }}
+            onTouchEnd={() => {
+              touchGesture = undefined
+            }}
+            onTouchCancel={() => {
+              touchGesture = undefined
+            }}
+            onPointerDown={(e) => {
+              if (e.target !== e.currentTarget) return
+              props.onMarkScrollGesture(e.currentTarget)
+            }}
+            onScroll={(e) => {
+              props.onScheduleScrollState(e.currentTarget)
+              props.onTurnBackfillScroll()
+              if (!props.hasScrollGesture()) return
+              props.onUserScroll()
+              props.onAutoScrollHandleScroll()
+              props.onMarkScrollGesture(e.currentTarget)
+            }}
+            onClick={props.onAutoScrollInteraction}
+            class="relative min-w-0 w-full h-full"
+            style={{
+              "--session-title-height": showTimelineHeader() ? "40px" : "0px",
+              "--sticky-accordion-top": showTimelineHeader() ? "48px" : "0px",
+            }}
+          >
+            <div ref={props.setContentRef} class="min-w-0 w-full">
+              <Show when={showTimelineHeader()}>
+                <div
+                  ref={(el) => {
+                    head = el
+                    setBar("ms", pace(el.clientWidth))
+                  }}
+                  data-session-title
+                  classList={{
+                    "sticky top-0 z-30 bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]": true,
+                    relative: true,
+                    "w-full": true,
+                    "pb-4": true,
+                    "pl-2 pr-3 md:pl-4 md:pr-3": true,
+                    "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
+                  }}
+                >
+                  <Show when={workingStatus() !== "hidden" && settings.general.showSessionProgressBar()}>
+                    <div
+                      data-component="session-progress"
+                      data-state={workingStatus()}
+                      aria-hidden="true"
+                      style={{
+                        "--session-progress-color": tint() ?? "var(--icon-interactive-base)",
+                        "--session-progress-ms": `${bar.ms}ms`,
+                      }}
+                    >
+                      <div data-component="session-progress-bar" />
+                    </div>
+                  </Show>
+                  <div class="h-12 w-full flex items-center justify-between gap-2">
+                    <div class="flex items-center gap-1 min-w-0 flex-1 pr-3">
+                      <div class="flex items-center min-w-0 grow-1">
+                        <Show when={parentID()}>
+                          <button
+                            type="button"
+                            data-slot="session-title-parent"
+                            class="min-w-0 max-w-[40%] truncate text-14-medium text-text-weak transition-colors hover:text-text-base"
+                            onClick={navigateParent}
+                          >
+                            {parentTitle()}
+                          </button>
+                          <span
+                            data-slot="session-title-separator"
+                            class="px-2 text-14-medium text-text-weak"
+                            aria-hidden="true"
+                          >
+                            /
+                          </span>
+                        </Show>
+                        <div
+                          class="shrink-0 flex items-center justify-center overflow-hidden transition-[width,margin] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]"
+                          style={{
+                            width: working() ? "16px" : "0px",
+                            "margin-right": working() ? "8px" : "0px",
+                          }}
+                          aria-hidden="true"
+                        >
+                          <Show when={workingStatus() !== "hidden"}>
+                            <div
+                              class="transition-opacity duration-200 ease-out"
+                              classList={{ "opacity-0": workingStatus() === "hiding" }}
+                            >
+                              <Spinner class="size-4" style={{ color: tint() ?? "var(--icon-interactive-base)" }} />
+                            </div>
+                          </Show>
+                        </div>
+                        <Show when={childTitle() || title.editing}>
+                          <Show
+                            when={title.editing}
+                            fallback={
+                              <h1
+                                data-slot="session-title-child"
+                                class="text-14-medium text-text-strong truncate grow-1 min-w-0"
+                                onDblClick={openTitleEditor}
+                              >
+                                {childTitle()}
+                              </h1>
+                            }
                           >
-                            <DropdownMenu.Trigger
-                              as={IconButton}
-                              icon="dot-grid"
-                              variant="ghost"
-                              class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                              classList={{
-                                "bg-surface-base-active": share.open || title.pendingShare,
+                            <InlineInput
+                              ref={(el) => {
+                                titleRef = el
                               }}
-                              aria-label={language.t("common.moreOptions")}
-                              aria-expanded={title.menuOpen || share.open || title.pendingShare}
-                              ref={(el: HTMLButtonElement) => {
-                                more = el
+                              data-slot="session-title-child"
+                              value={title.draft}
+                              disabled={titleMutation.isPending}
+                              class="text-14-medium text-text-strong grow-1 min-w-0 rounded-[6px] pl-1 -ml-1"
+                              style={{ "--inline-input-shadow": "var(--shadow-xs-border-select)" }}
+                              onInput={(event) => setTitle("draft", event.currentTarget.value)}
+                              onKeyDown={(event) => {
+                                event.stopPropagation()
+                                if (event.key === "Enter") {
+                                  event.preventDefault()
+                                  void saveTitleEditor()
+                                  return
+                                }
+                                if (event.key === "Escape") {
+                                  event.preventDefault()
+                                  closeTitleEditor()
+                                }
                               }}
+                              onBlur={closeTitleEditor}
                             />
-                            <DropdownMenu.Portal>
-                              <DropdownMenu.Content
-                                style={{ "min-width": "104px" }}
-                                onCloseAutoFocus={(event) => {
-                                  if (title.pendingRename) {
-                                    event.preventDefault()
-                                    setTitle("pendingRename", false)
-                                    openTitleEditor()
-                                    return
-                                  }
-                                  if (title.pendingShare) {
-                                    event.preventDefault()
-                                    requestAnimationFrame(() => {
-                                      setShare({ open: true, dismiss: null })
-                                      setTitle("pendingShare", false)
-                                    })
-                                  }
+                          </Show>
+                        </Show>
+                      </div>
+                    </div>
+                    <Show when={sessionID()} keyed>
+                      {(id) => (
+                        <div class="shrink-0 flex items-center gap-3">
+                          <SessionContextUsage placement="bottom" />
+                          <Show when={!parentID()}>
+                            <DropdownMenu
+                              gutter={4}
+                              placement="bottom-end"
+                              open={title.menuOpen}
+                              onOpenChange={(open) => {
+                                setTitle("menuOpen", open)
+                                if (open) return
+                              }}
+                            >
+                              <DropdownMenu.Trigger
+                                as={IconButton}
+                                icon="dot-grid"
+                                variant="ghost"
+                                class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
+                                classList={{
+                                  "bg-surface-base-active": share.open || title.pendingShare,
                                 }}
-                              >
-                                <DropdownMenu.Item
-                                  onSelect={() => {
-                                    setTitle("pendingRename", true)
-                                    setTitle("menuOpen", false)
+                                aria-label={language.t("common.moreOptions")}
+                                aria-expanded={title.menuOpen || share.open || title.pendingShare}
+                                ref={(el: HTMLButtonElement) => {
+                                  more = el
+                                }}
+                              />
+                              <DropdownMenu.Portal>
+                                <DropdownMenu.Content
+                                  style={{ "min-width": "104px" }}
+                                  onCloseAutoFocus={(event) => {
+                                    if (title.pendingRename) {
+                                      event.preventDefault()
+                                      setTitle("pendingRename", false)
+                                      openTitleEditor()
+                                      return
+                                    }
+                                    if (title.pendingShare) {
+                                      event.preventDefault()
+                                      requestAnimationFrame(() => {
+                                        setShare({ open: true, dismiss: null })
+                                        setTitle("pendingShare", false)
+                                      })
+                                    }
                                   }}
                                 >
-                                  <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                                <Show when={shareEnabled()}>
                                   <DropdownMenu.Item
                                     onSelect={() => {
-                                      setTitle({ pendingShare: true, menuOpen: false })
+                                      setTitle("pendingRename", true)
+                                      setTitle("menuOpen", false)
                                     }}
                                   >
-                                    <DropdownMenu.ItemLabel>
-                                      {language.t("session.share.action.share")}
-                                    </DropdownMenu.ItemLabel>
+                                    <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
+                                  </DropdownMenu.Item>
+                                  <Show when={shareEnabled()}>
+                                    <DropdownMenu.Item
+                                      onSelect={() => {
+                                        setTitle({ pendingShare: true, menuOpen: false })
+                                      }}
+                                    >
+                                      <DropdownMenu.ItemLabel>
+                                        {language.t("session.share.action.share")}
+                                      </DropdownMenu.ItemLabel>
+                                    </DropdownMenu.Item>
+                                  </Show>
+                                  <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
+                                    <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
                                   </DropdownMenu.Item>
-                                </Show>
-                                <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
-                                  <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                                <DropdownMenu.Separator />
-                                <DropdownMenu.Item
-                                  onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
+                                  <DropdownMenu.Separator />
+                                  <DropdownMenu.Item
+                                    onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
+                                  >
+                                    <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
+                                  </DropdownMenu.Item>
+                                </DropdownMenu.Content>
+                              </DropdownMenu.Portal>
+                            </DropdownMenu>
+
+                            <KobaltePopover
+                              open={share.open}
+                              anchorRef={() => more}
+                              placement="bottom-end"
+                              gutter={4}
+                              modal={false}
+                              onOpenChange={(open) => {
+                                if (open) setShare("dismiss", null)
+                                setShare("open", open)
+                              }}
+                            >
+                              <KobaltePopover.Portal>
+                                <KobaltePopover.Content
+                                  data-component="popover-content"
+                                  style={{ "min-width": "320px" }}
+                                  onEscapeKeyDown={(event) => {
+                                    setShare({ dismiss: "escape", open: false })
+                                    event.preventDefault()
+                                    event.stopPropagation()
+                                  }}
+                                  onPointerDownOutside={() => {
+                                    setShare({ dismiss: "outside", open: false })
+                                  }}
+                                  onFocusOutside={() => {
+                                    setShare({ dismiss: "outside", open: false })
+                                  }}
+                                  onCloseAutoFocus={(event) => {
+                                    if (share.dismiss === "outside") event.preventDefault()
+                                    setShare("dismiss", null)
+                                  }}
                                 >
-                                  <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
-                                </DropdownMenu.Item>
-                              </DropdownMenu.Content>
-                            </DropdownMenu.Portal>
-                          </DropdownMenu>
-
-                          <KobaltePopover
-                            open={share.open}
-                            anchorRef={() => more}
-                            placement="bottom-end"
-                            gutter={4}
-                            modal={false}
-                            onOpenChange={(open) => {
-                              if (open) setShare("dismiss", null)
-                              setShare("open", open)
-                            }}
-                          >
-                            <KobaltePopover.Portal>
-                              <KobaltePopover.Content
-                                data-component="popover-content"
-                                style={{ "min-width": "320px" }}
-                                onEscapeKeyDown={(event) => {
-                                  setShare({ dismiss: "escape", open: false })
-                                  event.preventDefault()
-                                  event.stopPropagation()
-                                }}
-                                onPointerDownOutside={() => {
-                                  setShare({ dismiss: "outside", open: false })
-                                }}
-                                onFocusOutside={() => {
-                                  setShare({ dismiss: "outside", open: false })
-                                }}
-                                onCloseAutoFocus={(event) => {
-                                  if (share.dismiss === "outside") event.preventDefault()
-                                  setShare("dismiss", null)
-                                }}
-                              >
-                                <div class="flex flex-col p-3">
-                                  <div class="flex flex-col gap-1">
-                                    <div class="text-13-medium text-text-strong">
-                                      {language.t("session.share.popover.title")}
-                                    </div>
-                                    <div class="text-12-regular text-text-weak">
-                                      {shareUrl()
-                                        ? language.t("session.share.popover.description.shared")
-                                        : language.t("session.share.popover.description.unshared")}
+                                  <div class="flex flex-col p-3">
+                                    <div class="flex flex-col gap-1">
+                                      <div class="text-13-medium text-text-strong">
+                                        {language.t("session.share.popover.title")}
+                                      </div>
+                                      <div class="text-12-regular text-text-weak">
+                                        {shareUrl()
+                                          ? language.t("session.share.popover.description.shared")
+                                          : language.t("session.share.popover.description.unshared")}
+                                      </div>
                                     </div>
-                                  </div>
-                                  <div class="mt-3 flex flex-col gap-2">
-                                    <Show
-                                      when={shareUrl()}
-                                      fallback={
-                                        <Button
-                                          size="large"
-                                          variant="primary"
-                                          class="w-full"
-                                          onClick={shareSession}
-                                          disabled={shareMutation.isPending}
-                                        >
-                                          {shareMutation.isPending
-                                            ? language.t("session.share.action.publishing")
-                                            : language.t("session.share.action.publish")}
-                                        </Button>
-                                      }
-                                    >
-                                      <div class="flex flex-col gap-2">
-                                        <TextField
-                                          value={shareUrl() ?? ""}
-                                          readOnly
-                                          copyable
-                                          copyKind="link"
-                                          tabIndex={-1}
-                                          class="w-full"
-                                        />
-                                        <div class="grid grid-cols-2 gap-2">
-                                          <Button
-                                            size="large"
-                                            variant="secondary"
-                                            class="w-full shadow-none border border-border-weak-base"
-                                            onClick={unshareSession}
-                                            disabled={unshareMutation.isPending}
-                                          >
-                                            {unshareMutation.isPending
-                                              ? language.t("session.share.action.unpublishing")
-                                              : language.t("session.share.action.unpublish")}
-                                          </Button>
+                                    <div class="mt-3 flex flex-col gap-2">
+                                      <Show
+                                        when={shareUrl()}
+                                        fallback={
                                           <Button
                                             size="large"
                                             variant="primary"
                                             class="w-full"
-                                            onClick={viewShare}
-                                            disabled={unshareMutation.isPending}
+                                            onClick={shareSession}
+                                            disabled={shareMutation.isPending}
                                           >
-                                            {language.t("session.share.action.view")}
+                                            {shareMutation.isPending
+                                              ? language.t("session.share.action.publishing")
+                                              : language.t("session.share.action.publish")}
                                           </Button>
+                                        }
+                                      >
+                                        <div class="flex flex-col gap-2">
+                                          <TextField
+                                            value={shareUrl() ?? ""}
+                                            readOnly
+                                            copyable
+                                            copyKind="link"
+                                            tabIndex={-1}
+                                            class="w-full"
+                                          />
+                                          <div class="grid grid-cols-2 gap-2">
+                                            <Button
+                                              size="large"
+                                              variant="secondary"
+                                              class="w-full shadow-none border border-border-weak-base"
+                                              onClick={unshareSession}
+                                              disabled={unshareMutation.isPending}
+                                            >
+                                              {unshareMutation.isPending
+                                                ? language.t("session.share.action.unpublishing")
+                                                : language.t("session.share.action.unpublish")}
+                                            </Button>
+                                            <Button
+                                              size="large"
+                                              variant="primary"
+                                              class="w-full"
+                                              onClick={viewShare}
+                                              disabled={unshareMutation.isPending}
+                                            >
+                                              {language.t("session.share.action.view")}
+                                            </Button>
+                                          </div>
                                         </div>
-                                      </div>
-                                    </Show>
+                                      </Show>
+                                    </div>
                                   </div>
-                                </div>
-                              </KobaltePopover.Content>
-                            </KobaltePopover.Portal>
-                          </KobaltePopover>
-                        </Show>
-                      </div>
-                    )}
-                  </Show>
-                </div>
-              </div>
-            </Show>
-            <div
-              role="log"
-              data-slot="session-turn-list"
-              class="flex flex-col items-start justify-start transition-[margin]"
-              classList={{
-                "w-full": true,
-                "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
-                "mt-0.5": props.centered,
-                "mt-0": !props.centered,
-                "pb-4": nativeMobile,
-                "pb-16": !nativeMobile,
-              }}
-            >
-              <Show when={props.turnStart > 0 || props.historyMore}>
-                <div class="w-full flex justify-center">
-                  <Button
-                    variant="ghost"
-                    size="large"
-                    class="text-12-medium opacity-50"
-                    disabled={props.historyLoading}
-                    onClick={props.onLoadEarlier}
-                  >
-                    {props.historyLoading
-                      ? language.t("session.messages.loadingEarlier")
-                      : language.t("session.messages.loadEarlier")}
-                  </Button>
+                                </KobaltePopover.Content>
+                              </KobaltePopover.Portal>
+                            </KobaltePopover>
+                          </Show>
+                        </div>
+                      )}
+                    </Show>
+                  </div>
                 </div>
               </Show>
-              <For each={rendered()}>
-                {(messageID) => {
-                  const active = createMemo(() => activeMessageID() === messageID)
-                  const comments = createMemo(() => messageComments(sync.data.part[messageID] ?? []), [], {
-                    equals: (a, b) =>
-                      a.length === b.length &&
-                      a.every(
-                        (c, i) =>
-                          c.path === b[i].path &&
-                          c.comment === b[i].comment &&
-                          c.selection?.startLine === b[i].selection?.startLine &&
-                          c.selection?.endLine === b[i].selection?.endLine,
-                      ),
-                  })
-                  const commentCount = createMemo(() => comments().length)
-                  return (
-                    <div
-                      id={props.anchor(messageID)}
-                      data-message-id={messageID}
-                      classList={{
-                        "min-w-0 w-full max-w-full": true,
-                        "md:max-w-200 2xl:max-w-[1000px]": props.centered,
-                      }}
-                      style={{
-                        "content-visibility": active() || nativeMobile ? undefined : "auto",
-                        "contain-intrinsic-size": active() || nativeMobile ? undefined : "auto 500px",
-                      }}
+              <div
+                role="log"
+                data-slot="session-turn-list"
+                class="flex flex-col items-start justify-start transition-[margin]"
+                classList={{
+                  "w-full": true,
+                  "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered,
+                  "mt-0.5": props.centered,
+                  "mt-0": !props.centered,
+                  "pb-4": nativeMobile,
+                  "pb-16": !nativeMobile,
+                }}
+              >
+                <Show when={props.turnStart > 0 || props.historyMore}>
+                  <div class="w-full flex justify-center">
+                    <Button
+                      variant="ghost"
+                      size="large"
+                      class="text-12-medium opacity-50"
+                      disabled={props.historyLoading}
+                      onClick={props.onLoadEarlier}
                     >
-                      <Show when={commentCount() > 0}>
-                        <div class="w-full px-4 md:px-5 pb-2">
-                          <div class="ml-auto max-w-[82%] overflow-x-auto no-scrollbar">
-                            <div class="flex w-max min-w-full justify-end gap-2">
-                              <Index each={comments()}>
-                                {(commentAccessor: () => MessageComment) => {
-                                  const comment = createMemo(() => commentAccessor())
-                                  return (
-                                    <Show when={comment()}>
-                                      {(c) => (
-                                        <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
-                                          <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
-                                            <FileIcon
-                                              node={{ path: c().path, type: "file" }}
-                                              class="size-3.5 shrink-0"
-                                            />
-                                            <span class="truncate">{getFilename(c().path)}</span>
-                                            <Show when={c().selection}>
-                                              {(selection) => (
-                                                <span class="shrink-0 text-text-weak">
-                                                  {selection().startLine === selection().endLine
-                                                    ? `:${selection().startLine}`
-                                                    : `:${selection().startLine}-${selection().endLine}`}
-                                                </span>
-                                              )}
-                                            </Show>
-                                          </div>
-                                          <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words">
-                                            {c().comment}
+                      {props.historyLoading
+                        ? language.t("session.messages.loadingEarlier")
+                        : language.t("session.messages.loadEarlier")}
+                    </Button>
+                  </div>
+                </Show>
+                <For each={rendered()}>
+                  {(messageID) => {
+                    const active = createMemo(() => activeMessageID() === messageID)
+                    const comments = createMemo(() => messageComments(sync.data.part[messageID] ?? []), [], {
+                      equals: (a, b) =>
+                        a.length === b.length &&
+                        a.every(
+                          (c, i) =>
+                            c.path === b[i].path &&
+                            c.comment === b[i].comment &&
+                            c.selection?.startLine === b[i].selection?.startLine &&
+                            c.selection?.endLine === b[i].selection?.endLine,
+                        ),
+                    })
+                    const commentCount = createMemo(() => comments().length)
+                    return (
+                      <div
+                        id={props.anchor(messageID)}
+                        data-message-id={messageID}
+                        classList={{
+                          "min-w-0 w-full max-w-full": true,
+                          "md:max-w-200 2xl:max-w-[1000px]": props.centered,
+                        }}
+                        style={{
+                          "content-visibility": active() || nativeMobile ? undefined : "auto",
+                          "contain-intrinsic-size": active() || nativeMobile ? undefined : "auto 500px",
+                        }}
+                      >
+                        <Show when={commentCount() > 0}>
+                          <div class="w-full px-4 md:px-5 pb-2">
+                            <div class="ml-auto max-w-[82%] overflow-x-auto no-scrollbar">
+                              <div class="flex w-max min-w-full justify-end gap-2">
+                                <Index each={comments()}>
+                                  {(commentAccessor: () => MessageComment) => {
+                                    const comment = createMemo(() => commentAccessor())
+                                    return (
+                                      <Show when={comment()}>
+                                        {(c) => (
+                                          <div class="shrink-0 max-w-[260px] rounded-[6px] border border-border-weak-base bg-background-stronger px-2.5 py-2">
+                                            <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
+                                              <FileIcon
+                                                node={{ path: c().path, type: "file" }}
+                                                class="size-3.5 shrink-0"
+                                              />
+                                              <span class="truncate">{getFilename(c().path)}</span>
+                                              <Show when={c().selection}>
+                                                {(selection) => (
+                                                  <span class="shrink-0 text-text-weak">
+                                                    {selection().startLine === selection().endLine
+                                                      ? `:${selection().startLine}`
+                                                      : `:${selection().startLine}-${selection().endLine}`}
+                                                  </span>
+                                                )}
+                                              </Show>
+                                            </div>
+                                            <div class="pt-1 text-12-regular text-text-strong whitespace-pre-wrap break-words">
+                                              {c().comment}
+                                            </div>
                                           </div>
-                                        </div>
-                                      )}
-                                    </Show>
-                                  )
-                                }}
-                              </Index>
+                                        )}
+                                      </Show>
+                                    )
+                                  }}
+                                </Index>
+                              </div>
                             </div>
                           </div>
-                        </div>
-                      </Show>
-                      <SessionTurn
-                        sessionID={sessionID() ?? ""}
-                        messageID={messageID}
-                        messages={sessionMessages()}
-                        actions={props.actions}
-                        active={active()}
-                        status={active() ? sessionStatus() : undefined}
-                        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",
-                        }}
-                      />
-                    </div>
-                  )
-                }}
-              </For>
+                        </Show>
+                        <SessionTurn
+                          sessionID={sessionID() ?? ""}
+                          messageID={messageID}
+                          messages={sessionMessages()}
+                          actions={props.actions}
+                          active={active()}
+                          status={active() ? sessionStatus() : undefined}
+                          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",
+                          }}
+                        />
+                      </div>
+                    )
+                  }}
+                </For>
+              </div>
             </div>
-          </div>
-        </ScrollView>
-      </div>
-    </Show>
+          </ScrollView>
+        </div>
+      </Show>
+    </div>
   )
 }

From 66207dcc55a0b6294080579c3d85c47a3a952e82 Mon Sep 17 00:00:00 2001
From: Jon <jon@local>
Date: Wed, 13 May 2026 14:01:09 +0700
Subject: [PATCH 5/6] Fix mobile session delete dialog

---
 .../src/pages/session/message-timeline.tsx    | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx
index 70639054964f..b807a2151af2 100644
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@@ -357,6 +357,7 @@ export function MessageTimeline(props: {
     menuOpen: false,
     pendingRename: false,
     pendingShare: false,
+    pendingDelete: undefined as string | undefined,
   })
   const showTimelineHeader = createMemo(() => showHeader() && (!props.mobileTabs || title.editing))
   let titleRef: HTMLInputElement | undefined
@@ -453,6 +454,7 @@ export function MessageTimeline(props: {
           menuOpen: false,
           pendingRename: false,
           pendingShare: false,
+          pendingDelete: undefined,
         }),
       { defer: true },
     ),
@@ -642,6 +644,7 @@ export function MessageTimeline(props: {
           <Show when={!parentID()}>
             <DropdownMenu
               gutter={4}
+              modal={!nativeMobile}
               placement="bottom-end"
               open={title.menuOpen}
               onOpenChange={(open) => {
@@ -679,6 +682,15 @@ export function MessageTimeline(props: {
                         setShare({ open: true, dismiss: null })
                         setTitle("pendingShare", false)
                       })
+                      return
+                    }
+                    if (title.pendingDelete) {
+                      const id = title.pendingDelete
+                      event.preventDefault()
+                      requestAnimationFrame(() => {
+                        dialog.show(() => <DialogDeleteSession sessionID={id} />)
+                        setTitle("pendingDelete", undefined)
+                      })
                     }
                   }}
                 >
@@ -703,7 +715,11 @@ export function MessageTimeline(props: {
                     <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
                   </DropdownMenu.Item>
                   <DropdownMenu.Separator />
-                  <DropdownMenu.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}>
+                  <DropdownMenu.Item
+                    onSelect={() => {
+                      setTitle({ pendingDelete: id, menuOpen: false })
+                    }}
+                  >
                     <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                   </DropdownMenu.Item>
                 </DropdownMenu.Content>
@@ -1044,6 +1060,7 @@ export function MessageTimeline(props: {
                           <Show when={!parentID()}>
                             <DropdownMenu
                               gutter={4}
+                              modal={!nativeMobile}
                               placement="bottom-end"
                               open={title.menuOpen}
                               onOpenChange={(open) => {
@@ -1081,6 +1098,15 @@ export function MessageTimeline(props: {
                                         setShare({ open: true, dismiss: null })
                                         setTitle("pendingShare", false)
                                       })
+                                      return
+                                    }
+                                    if (title.pendingDelete) {
+                                      const id = title.pendingDelete
+                                      event.preventDefault()
+                                      requestAnimationFrame(() => {
+                                        dialog.show(() => <DialogDeleteSession sessionID={id} />)
+                                        setTitle("pendingDelete", undefined)
+                                      })
                                     }
                                   }}
                                 >
@@ -1108,7 +1134,9 @@ export function MessageTimeline(props: {
                                   </DropdownMenu.Item>
                                   <DropdownMenu.Separator />
                                   <DropdownMenu.Item
-                                    onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
+                                    onSelect={() => {
+                                      setTitle({ pendingDelete: id, menuOpen: false })
+                                    }}
                                   >
                                     <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                                   </DropdownMenu.Item>

From 6871ddb57e5ce0acd408e3e22485bfcf2d14bb2d Mon Sep 17 00:00:00 2001
From: Jon <jon@local>
Date: Wed, 13 May 2026 14:01:10 +0700
Subject: [PATCH 6/6] Deduplicate session title actions

---
 .../src/pages/session/message-timeline.tsx    | 538 ++++++------------
 1 file changed, 176 insertions(+), 362 deletions(-)

diff --git a/packages/app/src/pages/session/message-timeline.tsx b/packages/app/src/pages/session/message-timeline.tsx
index b807a2151af2..2707f752ffc9 100644
--- a/packages/app/src/pages/session/message-timeline.tsx
+++ b/packages/app/src/pages/session/message-timeline.tsx
@@ -636,200 +636,203 @@ export function MessageTimeline(props: {
     )
   }
 
-  const mobileTabActions = () => (
-    <Show when={sessionID()} keyed>
-      {(id) => (
-        <div class="shrink-0 flex items-center gap-3">
-          <SessionContextUsage placement="bottom" />
-          <Show when={!parentID()}>
-            <DropdownMenu
-              gutter={4}
-              modal={!nativeMobile}
-              placement="bottom-end"
-              open={title.menuOpen}
-              onOpenChange={(open) => {
-                setTitle("menuOpen", open)
-                if (open) return
-              }}
-            >
-              <DropdownMenu.Trigger
-                as={IconButton}
-                icon="dot-grid"
-                variant="ghost"
-                class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                classList={{
-                  "bg-surface-base-active": share.open || title.pendingShare,
-                }}
-                aria-label={language.t("common.moreOptions")}
-                aria-expanded={title.menuOpen || share.open || title.pendingShare}
-                ref={(el: HTMLButtonElement) => {
-                  more = el
+  function SessionTitleActions() {
+    return (
+      <Show when={sessionID()} keyed>
+        {(id) => (
+          <div class="shrink-0 flex items-center gap-3">
+            <SessionContextUsage placement="bottom" />
+            <Show when={!parentID()}>
+              <DropdownMenu
+                gutter={4}
+                modal={!nativeMobile}
+                placement="bottom-end"
+                open={title.menuOpen}
+                onOpenChange={(open) => {
+                  setTitle("menuOpen", open)
+                  if (open) return
                 }}
-              />
-              <DropdownMenu.Portal>
-                <DropdownMenu.Content
-                  style={{ "min-width": "104px" }}
-                  onCloseAutoFocus={(event) => {
-                    if (title.pendingRename) {
-                      event.preventDefault()
-                      setTitle("pendingRename", false)
-                      openTitleEditor()
-                      return
-                    }
-                    if (title.pendingShare) {
-                      event.preventDefault()
-                      requestAnimationFrame(() => {
-                        setShare({ open: true, dismiss: null })
-                        setTitle("pendingShare", false)
-                      })
-                      return
-                    }
-                    if (title.pendingDelete) {
-                      const id = title.pendingDelete
-                      event.preventDefault()
-                      requestAnimationFrame(() => {
-                        dialog.show(() => <DialogDeleteSession sessionID={id} />)
-                        setTitle("pendingDelete", undefined)
-                      })
-                    }
+              >
+                <DropdownMenu.Trigger
+                  as={IconButton}
+                  icon="dot-grid"
+                  variant="ghost"
+                  class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
+                  classList={{
+                    "bg-surface-base-active": share.open || title.pendingShare,
                   }}
-                >
-                  <DropdownMenu.Item
-                    onSelect={() => {
-                      setTitle("pendingRename", true)
-                      setTitle("menuOpen", false)
+                  aria-label={language.t("common.moreOptions")}
+                  aria-expanded={title.menuOpen || share.open || title.pendingShare}
+                  ref={(el: HTMLButtonElement) => {
+                    more = el
+                  }}
+                />
+                <DropdownMenu.Portal>
+                  <DropdownMenu.Content
+                    style={{ "min-width": "104px" }}
+                    onCloseAutoFocus={(event) => {
+                      if (title.pendingRename) {
+                        event.preventDefault()
+                        setTitle("pendingRename", false)
+                        openTitleEditor()
+                        return
+                      }
+                      if (title.pendingShare) {
+                        event.preventDefault()
+                        requestAnimationFrame(() => {
+                          setShare({ open: true, dismiss: null })
+                          setTitle("pendingShare", false)
+                        })
+                        return
+                      }
+                      if (title.pendingDelete) {
+                        const id = title.pendingDelete
+                        event.preventDefault()
+                        requestAnimationFrame(() => {
+                          dialog.show(() => <DialogDeleteSession sessionID={id} />)
+                          setTitle("pendingDelete", undefined)
+                        })
+                      }
                     }}
                   >
-                    <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
-                  </DropdownMenu.Item>
-                  <Show when={shareEnabled()}>
                     <DropdownMenu.Item
                       onSelect={() => {
-                        setTitle({ pendingShare: true, menuOpen: false })
+                        setTitle("pendingRename", true)
+                        setTitle("menuOpen", false)
                       }}
                     >
-                      <DropdownMenu.ItemLabel>{language.t("session.share.action.share")}</DropdownMenu.ItemLabel>
+                      <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
                     </DropdownMenu.Item>
-                  </Show>
-                  <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
-                    <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Separator />
-                  <DropdownMenu.Item
-                    onSelect={() => {
-                      setTitle({ pendingDelete: id, menuOpen: false })
+                    <Show when={shareEnabled()}>
+                      <DropdownMenu.Item
+                        onSelect={() => {
+                          setTitle({ pendingShare: true, menuOpen: false })
+                        }}
+                      >
+                        <DropdownMenu.ItemLabel>{language.t("session.share.action.share")}</DropdownMenu.ItemLabel>
+                      </DropdownMenu.Item>
+                    </Show>
+                    <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
+                      <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Separator />
+                    <DropdownMenu.Item
+                      onSelect={() => {
+                        setTitle({ pendingDelete: id, menuOpen: false })
+                      }}
+                    >
+                      <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
+                    </DropdownMenu.Item>
+                  </DropdownMenu.Content>
+                </DropdownMenu.Portal>
+              </DropdownMenu>
+
+              <KobaltePopover
+                open={share.open}
+                anchorRef={() => more}
+                placement="bottom-end"
+                gutter={4}
+                modal={false}
+                onOpenChange={(open) => {
+                  if (open) setShare("dismiss", null)
+                  setShare("open", open)
+                }}
+              >
+                <KobaltePopover.Portal>
+                  <KobaltePopover.Content
+                    data-component="popover-content"
+                    style={{ "min-width": "320px" }}
+                    onEscapeKeyDown={(event) => {
+                      setShare({ dismiss: "escape", open: false })
+                      event.preventDefault()
+                      event.stopPropagation()
+                    }}
+                    onPointerDownOutside={() => {
+                      setShare({ dismiss: "outside", open: false })
+                    }}
+                    onFocusOutside={() => {
+                      setShare({ dismiss: "outside", open: false })
+                    }}
+                    onCloseAutoFocus={(event) => {
+                      if (share.dismiss === "outside") event.preventDefault()
+                      setShare("dismiss", null)
                     }}
                   >
-                    <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
-                  </DropdownMenu.Item>
-                </DropdownMenu.Content>
-              </DropdownMenu.Portal>
-            </DropdownMenu>
-
-            <KobaltePopover
-              open={share.open}
-              anchorRef={() => more}
-              placement="bottom-end"
-              gutter={4}
-              modal={false}
-              onOpenChange={(open) => {
-                if (open) setShare("dismiss", null)
-                setShare("open", open)
-              }}
-            >
-              <KobaltePopover.Portal>
-                <KobaltePopover.Content
-                  data-component="popover-content"
-                  style={{ "min-width": "320px" }}
-                  onEscapeKeyDown={(event) => {
-                    setShare({ dismiss: "escape", open: false })
-                    event.preventDefault()
-                    event.stopPropagation()
-                  }}
-                  onPointerDownOutside={() => {
-                    setShare({ dismiss: "outside", open: false })
-                  }}
-                  onFocusOutside={() => {
-                    setShare({ dismiss: "outside", open: false })
-                  }}
-                  onCloseAutoFocus={(event) => {
-                    if (share.dismiss === "outside") event.preventDefault()
-                    setShare("dismiss", null)
-                  }}
-                >
-                  <div class="flex flex-col p-3">
-                    <div class="flex flex-col gap-1">
-                      <div class="text-13-medium text-text-strong">{language.t("session.share.popover.title")}</div>
-                      <div class="text-12-regular text-text-weak">
-                        {shareUrl()
-                          ? language.t("session.share.popover.description.shared")
-                          : language.t("session.share.popover.description.unshared")}
+                    <div class="flex flex-col p-3">
+                      <div class="flex flex-col gap-1">
+                        <div class="text-13-medium text-text-strong">{language.t("session.share.popover.title")}</div>
+                        <div class="text-12-regular text-text-weak">
+                          {shareUrl()
+                            ? language.t("session.share.popover.description.shared")
+                            : language.t("session.share.popover.description.unshared")}
+                        </div>
                       </div>
-                    </div>
-                    <div class="mt-3 flex flex-col gap-2">
-                      <Show
-                        when={shareUrl()}
-                        fallback={
-                          <Button
-                            size="large"
-                            variant="primary"
-                            class="w-full"
-                            onClick={shareSession}
-                            disabled={shareMutation.isPending}
-                          >
-                            {shareMutation.isPending
-                              ? language.t("session.share.action.publishing")
-                              : language.t("session.share.action.publish")}
-                          </Button>
-                        }
-                      >
-                        <div class="flex flex-col gap-2">
-                          <TextField
-                            value={shareUrl() ?? ""}
-                            readOnly
-                            copyable
-                            copyKind="link"
-                            tabIndex={-1}
-                            class="w-full"
-                          />
-                          <div class="grid grid-cols-2 gap-2">
-                            <Button
-                              size="large"
-                              variant="secondary"
-                              class="w-full shadow-none border border-border-weak-base"
-                              onClick={unshareSession}
-                              disabled={unshareMutation.isPending}
-                            >
-                              {unshareMutation.isPending
-                                ? language.t("session.share.action.unpublishing")
-                                : language.t("session.share.action.unpublish")}
-                            </Button>
+                      <div class="mt-3 flex flex-col gap-2">
+                        <Show
+                          when={shareUrl()}
+                          fallback={
                             <Button
                               size="large"
                               variant="primary"
                               class="w-full"
-                              onClick={viewShare}
-                              disabled={unshareMutation.isPending}
+                              onClick={shareSession}
+                              disabled={shareMutation.isPending}
                             >
-                              {language.t("session.share.action.view")}
+                              {shareMutation.isPending
+                                ? language.t("session.share.action.publishing")
+                                : language.t("session.share.action.publish")}
                             </Button>
+                          }
+                        >
+                          <div class="flex flex-col gap-2">
+                            <TextField
+                              value={shareUrl() ?? ""}
+                              readOnly
+                              copyable
+                              copyKind="link"
+                              tabIndex={-1}
+                              class="w-full"
+                            />
+                            <div class="grid grid-cols-2 gap-2">
+                              <Button
+                                size="large"
+                                variant="secondary"
+                                class="w-full shadow-none border border-border-weak-base"
+                                onClick={unshareSession}
+                                disabled={unshareMutation.isPending}
+                              >
+                                {unshareMutation.isPending
+                                  ? language.t("session.share.action.unpublishing")
+                                  : language.t("session.share.action.unpublish")}
+                              </Button>
+                              <Button
+                                size="large"
+                                variant="primary"
+                                class="w-full"
+                                onClick={viewShare}
+                                disabled={unshareMutation.isPending}
+                              >
+                                {language.t("session.share.action.view")}
+                              </Button>
+                            </div>
                           </div>
-                        </div>
-                      </Show>
+                        </Show>
+                      </div>
                     </div>
-                  </div>
-                </KobaltePopover.Content>
-              </KobaltePopover.Portal>
-            </KobaltePopover>
-          </Show>
-        </div>
-      )}
-    </Show>
-  )
+                  </KobaltePopover.Content>
+                </KobaltePopover.Portal>
+              </KobaltePopover>
+            </Show>
+          </div>
+        )}
+      </Show>
+    )
+  }
 
   const mobileTabBar = () => {
     const tabs = props.mobileTabs
     if (!tabs) return null
+    // UPSTREAM-DIVERGENCE: Mobile folds title/actions into the switcher to keep vertical space for chat.
     return (
       <Tabs value={tabs.value} class="h-auto shrink-0">
         <Tabs.List class="!h-9 !px-2 !py-1 !bg-background-stronger">
@@ -839,7 +842,7 @@ export function MessageTimeline(props: {
             classes={{ button: "flex-1 !h-full !px-2 !py-0 min-w-0" }}
             closeButton={
               <div class="flex items-center gap-3 pl-1" onPointerDown={(event) => event.stopPropagation()}>
-                {mobileTabActions()}
+                <SessionTitleActions />
               </div>
             }
             onClick={() => tabs.onChange("session")}
@@ -1053,197 +1056,8 @@ export function MessageTimeline(props: {
                         </Show>
                       </div>
                     </div>
-                    <Show when={sessionID()} keyed>
-                      {(id) => (
-                        <div class="shrink-0 flex items-center gap-3">
-                          <SessionContextUsage placement="bottom" />
-                          <Show when={!parentID()}>
-                            <DropdownMenu
-                              gutter={4}
-                              modal={!nativeMobile}
-                              placement="bottom-end"
-                              open={title.menuOpen}
-                              onOpenChange={(open) => {
-                                setTitle("menuOpen", open)
-                                if (open) return
-                              }}
-                            >
-                              <DropdownMenu.Trigger
-                                as={IconButton}
-                                icon="dot-grid"
-                                variant="ghost"
-                                class="size-6 rounded-md data-[expanded]:bg-surface-base-active"
-                                classList={{
-                                  "bg-surface-base-active": share.open || title.pendingShare,
-                                }}
-                                aria-label={language.t("common.moreOptions")}
-                                aria-expanded={title.menuOpen || share.open || title.pendingShare}
-                                ref={(el: HTMLButtonElement) => {
-                                  more = el
-                                }}
-                              />
-                              <DropdownMenu.Portal>
-                                <DropdownMenu.Content
-                                  style={{ "min-width": "104px" }}
-                                  onCloseAutoFocus={(event) => {
-                                    if (title.pendingRename) {
-                                      event.preventDefault()
-                                      setTitle("pendingRename", false)
-                                      openTitleEditor()
-                                      return
-                                    }
-                                    if (title.pendingShare) {
-                                      event.preventDefault()
-                                      requestAnimationFrame(() => {
-                                        setShare({ open: true, dismiss: null })
-                                        setTitle("pendingShare", false)
-                                      })
-                                      return
-                                    }
-                                    if (title.pendingDelete) {
-                                      const id = title.pendingDelete
-                                      event.preventDefault()
-                                      requestAnimationFrame(() => {
-                                        dialog.show(() => <DialogDeleteSession sessionID={id} />)
-                                        setTitle("pendingDelete", undefined)
-                                      })
-                                    }
-                                  }}
-                                >
-                                  <DropdownMenu.Item
-                                    onSelect={() => {
-                                      setTitle("pendingRename", true)
-                                      setTitle("menuOpen", false)
-                                    }}
-                                  >
-                                    <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
-                                  </DropdownMenu.Item>
-                                  <Show when={shareEnabled()}>
-                                    <DropdownMenu.Item
-                                      onSelect={() => {
-                                        setTitle({ pendingShare: true, menuOpen: false })
-                                      }}
-                                    >
-                                      <DropdownMenu.ItemLabel>
-                                        {language.t("session.share.action.share")}
-                                      </DropdownMenu.ItemLabel>
-                                    </DropdownMenu.Item>
-                                  </Show>
-                                  <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
-                                    <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
-                                  </DropdownMenu.Item>
-                                  <DropdownMenu.Separator />
-                                  <DropdownMenu.Item
-                                    onSelect={() => {
-                                      setTitle({ pendingDelete: id, menuOpen: false })
-                                    }}
-                                  >
-                                    <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
-                                  </DropdownMenu.Item>
-                                </DropdownMenu.Content>
-                              </DropdownMenu.Portal>
-                            </DropdownMenu>
-
-                            <KobaltePopover
-                              open={share.open}
-                              anchorRef={() => more}
-                              placement="bottom-end"
-                              gutter={4}
-                              modal={false}
-                              onOpenChange={(open) => {
-                                if (open) setShare("dismiss", null)
-                                setShare("open", open)
-                              }}
-                            >
-                              <KobaltePopover.Portal>
-                                <KobaltePopover.Content
-                                  data-component="popover-content"
-                                  style={{ "min-width": "320px" }}
-                                  onEscapeKeyDown={(event) => {
-                                    setShare({ dismiss: "escape", open: false })
-                                    event.preventDefault()
-                                    event.stopPropagation()
-                                  }}
-                                  onPointerDownOutside={() => {
-                                    setShare({ dismiss: "outside", open: false })
-                                  }}
-                                  onFocusOutside={() => {
-                                    setShare({ dismiss: "outside", open: false })
-                                  }}
-                                  onCloseAutoFocus={(event) => {
-                                    if (share.dismiss === "outside") event.preventDefault()
-                                    setShare("dismiss", null)
-                                  }}
-                                >
-                                  <div class="flex flex-col p-3">
-                                    <div class="flex flex-col gap-1">
-                                      <div class="text-13-medium text-text-strong">
-                                        {language.t("session.share.popover.title")}
-                                      </div>
-                                      <div class="text-12-regular text-text-weak">
-                                        {shareUrl()
-                                          ? language.t("session.share.popover.description.shared")
-                                          : language.t("session.share.popover.description.unshared")}
-                                      </div>
-                                    </div>
-                                    <div class="mt-3 flex flex-col gap-2">
-                                      <Show
-                                        when={shareUrl()}
-                                        fallback={
-                                          <Button
-                                            size="large"
-                                            variant="primary"
-                                            class="w-full"
-                                            onClick={shareSession}
-                                            disabled={shareMutation.isPending}
-                                          >
-                                            {shareMutation.isPending
-                                              ? language.t("session.share.action.publishing")
-                                              : language.t("session.share.action.publish")}
-                                          </Button>
-                                        }
-                                      >
-                                        <div class="flex flex-col gap-2">
-                                          <TextField
-                                            value={shareUrl() ?? ""}
-                                            readOnly
-                                            copyable
-                                            copyKind="link"
-                                            tabIndex={-1}
-                                            class="w-full"
-                                          />
-                                          <div class="grid grid-cols-2 gap-2">
-                                            <Button
-                                              size="large"
-                                              variant="secondary"
-                                              class="w-full shadow-none border border-border-weak-base"
-                                              onClick={unshareSession}
-                                              disabled={unshareMutation.isPending}
-                                            >
-                                              {unshareMutation.isPending
-                                                ? language.t("session.share.action.unpublishing")
-                                                : language.t("session.share.action.unpublish")}
-                                            </Button>
-                                            <Button
-                                              size="large"
-                                              variant="primary"
-                                              class="w-full"
-                                              onClick={viewShare}
-                                              disabled={unshareMutation.isPending}
-                                            >
-                                              {language.t("session.share.action.view")}
-                                            </Button>
-                                          </div>
-                                        </div>
-                                      </Show>
-                                    </div>
-                                  </div>
-                                </KobaltePopover.Content>
-                              </KobaltePopover.Portal>
-                            </KobaltePopover>
-                          </Show>
-                        </div>
-                      )}
+                    <Show when={!props.mobileTabs}>
+                      <SessionTitleActions />
                     </Show>
                   </div>
                 </div>