@neurocode-ai/app 1.18.8

package/src/pages/session/timeline/message-timeline.tsx

@@ -0,0 +1,1864 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  For,
+  Index,
+  on,
+  onCleanup,
+  onMount,
+  Show,
+  type Accessor,
+  type JSX,
+} from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+import { useNavigate } from "@solidjs/router"
+import { useMutation } from "@tanstack/solid-query"
+import { createVirtualizer, defaultRangeExtractor, elementScroll, type VirtualItem } from "@tanstack/solid-virtual"
+import { Accordion } from "@neurocode-ai/ui/accordion"
+import { Button } from "@neurocode-ai/ui/button"
+import { Card } from "@neurocode-ai/ui/card"
+import {
+  ContextToolGroup,
+  Message,
+  MessageDivider,
+  Part as MessagePart,
+  partDefaultOpen,
+  type UserActions,
+} from "@neurocode-ai/session-ui/message-part"
+import { DiffChanges } from "@neurocode-ai/ui/diff-changes"
+import { FileIcon } from "@neurocode-ai/ui/file-icon"
+import { Icon } from "@neurocode-ai/ui/icon"
+import { IconButton } from "@neurocode-ai/ui/icon-button"
+import { Icon as IconV2 } from "@neurocode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@neurocode-ai/ui/v2/icon-button-v2"
+import { DropdownMenu } from "@neurocode-ai/ui/dropdown-menu"
+import { MenuV2 } from "@neurocode-ai/ui/v2/menu-v2"
+import { Dialog } from "@neurocode-ai/ui/dialog"
+import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@neurocode-ai/ui/v2/dialog-v2"
+import { InlineInput } from "@neurocode-ai/ui/inline-input"
+import { ButtonV2 } from "@neurocode-ai/ui/v2/button-v2"
+import { SessionRetry } from "@neurocode-ai/session-ui/session-retry"
+import { isScrollKeyTarget, scrollKey, scrollKeyOwner, ScrollView } from "@neurocode-ai/ui/scroll-view"
+import { StickyAccordionHeader } from "@neurocode-ai/ui/sticky-accordion-header"
+import { TextField } from "@neurocode-ai/ui/text-field"
+import { TextReveal } from "@neurocode-ai/ui/text-reveal"
+import { TextShimmer } from "@neurocode-ai/ui/text-shimmer"
+import type {
+  AssistantMessage,
+  Message as MessageType,
+  Part as PartType,
+  ToolPart,
+  UserMessage,
+} from "@neurocode-ai/sdk/v2"
+import { showToast } from "@/utils/toast"
+import { getDirectory, getFilename } from "@neurocode-ai/core/util/path"
+import { Popover as KobaltePopover } from "@kobalte/core/popover"
+import { normalize } from "@neurocode-ai/session-ui/session-diff"
+import { useFileComponent } from "@neurocode-ai/ui/context/file"
+import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
+import { SessionContextUsage } from "@/components/session-context-usage"
+import { useDialog } from "@neurocode-ai/ui/context/dialog"
+import { useLanguage } from "@/context/language"
+import { useSessionKey } from "@/pages/session/session-layout"
+import { useServerSDK } from "@/context/server-sdk"
+import { usePlatform } from "@/context/platform"
+import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
+import { sessionTitle } from "@/utils/session-title"
+import { scheduleConnectedMeasure } from "./measure"
+import { observeElementOffsetReconnectAware } from "./observe-element-offset"
+import { createTimelineProjection } from "./projection"
+import { MessageComment, SummaryDiff, TimelineRow, TimelineRowMap } from "./rows"
+import { filterVirtualIndexes } from "./virtual-items"
+
+const emptyMessages: MessageType[] = []
+const emptyParts: PartType[] = []
+const emptyTools: ToolPart[] = []
+const emptyAssistantMessages: AssistantMessage[] = []
+const idle = { type: "idle" as const }
+
+type FramedTimelineRow = Exclude<TimelineRow.TimelineRow, { _tag: "TurnGap" }>
+type TimelineRowByTag<T extends TimelineRow.TimelineRow["_tag"]> = Extract<TimelineRow.TimelineRow, { _tag: T }>
+
+const timelineFallbackItemSize = 60
+const timelineCache = new Map<string, { measurements: VirtualItem[]; toolOpen: Record<string, boolean | undefined> }>()
+
+const taskDescription = (part: PartType, sessionID: string) => {
+  if (part.type !== "tool" || part.tool !== "task") return
+  const metadata = "metadata" in part.state ? part.state.metadata : undefined
+  if (metadata?.sessionId !== sessionID) return
+  const value = part.state.input?.description
+  if (typeof value === "string" && value) return value
+}
+
+const boundaryTarget = (root: HTMLElement, target: EventTarget | null) => {
+  const current = target instanceof Element ? target : undefined
+  const nested = current?.closest("[data-scrollable]")
+  if (!nested || nested === root) return root
+  if (!(nested instanceof HTMLElement)) return root
+  return nested
+}
+
+const markBoundaryGesture = (input: {
+  root: HTMLDivElement
+  target: EventTarget | null
+  delta: number
+  onMarkScrollGesture: (target?: EventTarget | null) => void
+}) => {
+  const target = boundaryTarget(input.root, input.target)
+  if (target === input.root) {
+    input.onMarkScrollGesture(input.root)
+    return
+  }
+  if (
+    shouldMarkBoundaryGesture({
+      delta: input.delta,
+      scrollTop: target.scrollTop,
+      scrollHeight: target.scrollHeight,
+      clientHeight: target.clientHeight,
+    })
+  ) {
+    input.onMarkScrollGesture(input.root)
+  }
+}
+
+function TimelineThinkingRow(props: { reasoningHeading?: string; showReasoningSummaries: boolean }) {
+  const language = useLanguage()
+
+  return (
+    <div data-slot="session-turn-thinking">
+      <TextShimmer text={language.t("ui.sessionTurn.status.thinking")} />
+      <Show when={!props.showReasoningSummaries}>
+        <TextReveal text={props.reasoningHeading} class="session-turn-thinking-heading" travel={25} duration={700} />
+      </Show>
+    </div>
+  )
+}
+
+function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
+  const language = useLanguage()
+  const maxFiles = 10
+  const [state, setState] = createStore({
+    showAll: false,
+    expanded: [] as string[],
+  })
+  const showAll = () => state.showAll
+  const expanded = () => state.expanded
+  const overflow = createMemo(() => Math.max(0, props.diffs.length - maxFiles))
+  const visible = createMemo(() => (showAll() ? props.diffs : props.diffs.slice(0, maxFiles)))
+
+  return (
+    <div
+      data-slot="session-turn-diffs"
+      data-component="session-turn-diffs-group"
+      data-show-all={showAll() || undefined}
+    >
+      <div data-slot="session-turn-diffs-header">
+        <span data-slot="session-turn-diffs-label">
+          {language.t(
+            props.diffs.length === 1 ? "ui.sessionTurn.diffs.changed.one" : "ui.sessionTurn.diffs.changed.other",
+            { count: String(props.diffs.length) },
+          )}
+        </span>
+        <DiffChanges changes={props.diffs} />
+        <Show when={overflow() > 0}>
+          <span data-slot="session-turn-diffs-toggle" onClick={() => setState("showAll", !showAll())}>
+            {showAll() ? language.t("ui.sessionTurn.diffs.showLess") : language.t("ui.sessionTurn.diffs.showAll")}
+          </span>
+        </Show>
+      </div>
+      <div data-component="session-turn-diffs-content">
+        <Accordion
+          multiple
+          style={{ "--sticky-accordion-offset": "44px" }}
+          value={expanded()}
+          onChange={(value) => setState("expanded", Array.isArray(value) ? value : value ? [value] : [])}
+        >
+          <For each={visible()}>
+            {(diff) => {
+              const opened = createMemo(() => expanded().includes(diff.file))
+
+              return (
+                <Accordion.Item value={diff.file}>
+                  <StickyAccordionHeader>
+                    <Accordion.Trigger>
+                      <div data-slot="session-turn-diff-trigger">
+                        <span data-slot="session-turn-diff-path">
+                          <Show when={diff.file.includes("/")}>
+                            <span data-slot="session-turn-diff-directory">{`\u202A${getDirectory(diff.file)}\u202C`}</span>
+                          </Show>
+                          <span data-slot="session-turn-diff-filename">{getFilename(diff.file)}</span>
+                        </span>
+                        <div data-slot="session-turn-diff-meta">
+                          <span data-slot="session-turn-diff-changes">
+                            <DiffChanges changes={diff} />
+                          </span>
+                          <span data-slot="session-turn-diff-chevron">
+                            <Icon name="chevron-down" size="small" />
+                          </span>
+                        </div>
+                      </div>
+                    </Accordion.Trigger>
+                  </StickyAccordionHeader>
+                  <Accordion.Content>
+                    <Show when={opened()}>
+                      <TimelineDiffView diff={diff} />
+                    </Show>
+                  </Accordion.Content>
+                </Accordion.Item>
+              )
+            }}
+          </For>
+        </Accordion>
+        <Show when={!showAll() && overflow() > 0}>
+          <div data-slot="session-turn-diffs-more" onClick={() => setState("showAll", true)}>
+            {language.t("ui.sessionTurn.diffs.more", { count: String(overflow()) })}
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+function TimelineDiffView(props: { diff: SummaryDiff }) {
+  const fileComponent = useFileComponent()
+  const view = normalize(props.diff)
+
+  return (
+    <div data-slot="session-turn-diff-view" data-scrollable>
+      <Dynamic component={fileComponent} mode="diff" virtualize={false} fileDiff={view.fileDiff} />
+    </div>
+  )
+}
+
+export function MessageTimeline(props: {
+  actions?: UserActions
+  scroll: { overflow: boolean; bottom: boolean; jump: boolean }
+  onResumeScroll: () => void
+  setScrollRef: (el: HTMLDivElement | undefined) => void
+  onScheduleScrollState: (el: HTMLDivElement) => void
+  onAutoScrollHandleScroll: () => void
+  onMarkScrollGesture: (target?: EventTarget | null) => void
+  hasScrollGesture: () => boolean
+  onUserScroll: () => void
+  onHistoryScroll: () => void
+  onAutoScrollInteraction: (event: MouseEvent) => void
+  shouldAnchorBottom: () => boolean
+  centered: boolean
+  setContentRef: (el: HTMLDivElement) => void
+  userMessages: UserMessage[]
+  anchor: (id: string) => string
+  setRevealMessage?: (fn: (id: string) => void) => void
+  setScrollToEnd?: (fn: () => void) => void
+  setHistoryAnchor?: (handlers: { capture: () => void; restore: (done: boolean) => void }) => void
+}) {
+  let touchGesture: number | undefined
+
+  const navigate = useNavigate()
+  const serverSDK = useServerSDK()
+  const sdk = useSDK()
+  const sync = useSync()
+  const settings = useSettings()
+  const tabs = useTabs()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const { params, sessionKey } = useSessionKey()
+  const ownerSessionKey = sessionKey()
+  const cached = timelineCache.get(ownerSessionKey)
+  const initialMeasurements = cached?.measurements
+  const coldBottomMount = !initialMeasurements?.length && props.shouldAnchorBottom()
+  const platform = usePlatform()
+
+  const [listRoot, setListRoot] = createSignal<HTMLDivElement>()
+  const sessionID = createMemo(() => params.id)
+  const sessionStatus = createMemo(() => {
+    const id = sessionID()
+    if (!id) return idle
+    return sync().data.session_status[id] ?? idle
+  })
+  const sessionMessages = createMemo(() => (sessionID() ? (sync().data.message[sessionID()!] ?? []) : []))
+  const projectedMessages = createMemo(() => {
+    const id = sessionID()
+    if (!id) return []
+    const visible = new Set(props.userMessages.map((message) => message.id))
+    const boundary = sessionMessages().find((message) => message.role === "user" && !visible.has(message.id))?.id
+    const messages = sync().data.session_message[id] ?? []
+    return boundary ? messages.filter((message) => message.id < boundary) : messages
+  })
+  const info = createMemo(() => {
+    const id = sessionID()
+    if (!id) return
+    return sync().session.get(id)
+  })
+  const titleValue = createMemo(() => info()?.title)
+  const titleLabel = createMemo(() => sessionTitle(titleValue()))
+  const shareUrl = createMemo(() => info()?.share?.url)
+  const shareEnabled = createMemo(() => sync().data.config.share !== "disabled")
+  const parentID = createMemo(() => info()?.parentID)
+  const parent = createMemo(() => {
+    const id = parentID()
+    if (!id) return
+    return sync().session.get(id)
+  })
+  const parentMessages = createMemo(() => {
+    const id = parentID()
+    if (!id) return emptyMessages
+    return sync().data.message[id] ?? emptyMessages
+  })
+  const parentTitle = createMemo(() => sessionTitle(parent()?.title) ?? language.t("command.session.new"))
+  const getMsgParts = (msgId: string) => sync().data.part[msgId] ?? emptyParts
+  const getMsgPart = (messageID: string, partID: string) => getMsgParts(messageID).find((part) => part.id === partID)
+  const childTaskDescription = createMemo(() => {
+    const id = sessionID()
+    if (!id) return
+    return parentMessages()
+      .flatMap((message) => getMsgParts(message.id))
+      .map((part) => taskDescription(part, id))
+      .findLast((value): value is string => !!value)
+  })
+  const childTitle = createMemo(() => {
+    if (!parentID()) return titleLabel() ?? ""
+    if (childTaskDescription()) return childTaskDescription()
+    const value = titleLabel()?.replace(/\s+\(@[^)]+ subagent\)$/, "")
+    if (value) return value
+    return language.t("command.session.new")
+  })
+  const showHeader = createMemo(() => !!(titleValue() || parentID()))
+  const projection = createTimelineProjection({
+    messages: sessionMessages,
+    userMessages: () => props.userMessages,
+    sessionMessages: projectedMessages,
+    parts: getMsgParts,
+    status: sessionStatus,
+    showReasoningSummaries: settings.general.showReasoningSummaries,
+    inlineComments: settings.general.newLayoutDesigns,
+  })
+  const activeMessageID = projection.activeMessageID
+  const assistantMessagesByParent = projection.assistantMessagesByParent
+  const lastAssistantGroupKey = projection.lastAssistantGroupKey
+  const messageByID = projection.messageByID
+  const messageLastRowIndex = projection.messageLastRowIndex
+  const messageRowIndex = projection.messageRowIndex
+  const timelineRowByKey = projection.rowByKey
+  const timelineRows = projection.rows
+
+  let prependAnchor: { key: string; offset: number } | undefined
+  let prependAnchorFrame: number | undefined
+  let prependLoading = false
+  const clearPrependAnchor = () => {
+    prependLoading = false
+    prependAnchor = undefined
+    if (prependAnchorFrame === undefined) return
+    cancelAnimationFrame(prependAnchorFrame)
+    prependAnchorFrame = undefined
+  }
+  const capturePrependAnchor = () => {
+    prependLoading = true
+    updatePrependAnchor()
+  }
+  const updatePrependAnchor = () => {
+    const root = listRoot()
+    if (!root) return
+    const view = root.getBoundingClientRect()
+    const anchor = [...root.querySelectorAll<HTMLElement>("[data-timeline-key]")]
+      .map((element) => ({ element, rect: element.getBoundingClientRect() }))
+      .filter((item) => item.rect.bottom > view.top && item.rect.top < view.bottom)
+      .sort((a, b) => a.rect.top - b.rect.top)[0]
+    if (!anchor) return
+    if (!anchor.element.dataset.timelineKey) return
+    prependAnchor = { key: anchor.element.dataset.timelineKey, offset: anchor.rect.top - view.top }
+  }
+  const restorePrependAnchor = (done: boolean) => {
+    if (done) prependLoading = false
+    applyPrependAnchor()
+  }
+  const applyPrependAnchor = () => {
+    const root = listRoot()
+    if (!root || !prependAnchor) return
+    if (prependAnchorFrame !== undefined) cancelAnimationFrame(prependAnchorFrame)
+    let frames = 0
+    let stable = 0
+    const apply = () => {
+      prependAnchorFrame = undefined
+      const anchor = prependAnchor
+      if (!anchor) return
+      const element = root.querySelector<HTMLElement>(`[data-timeline-key="${CSS.escape(anchor.key)}"]`)
+      const delta = element
+        ? element.getBoundingClientRect().top - root.getBoundingClientRect().top - anchor.offset
+        : undefined
+      if (delta !== undefined && Math.abs(delta) > 0.5) {
+        root.scrollTop += delta
+        stable = 0
+      } else {
+        stable += 1
+      }
+      frames += 1
+      if (stable >= 30 || frames >= 180) {
+        if (!prependLoading) prependAnchor = undefined
+        return
+      }
+      prependAnchorFrame = requestAnimationFrame(apply)
+    }
+    prependAnchorFrame = requestAnimationFrame(apply)
+  }
+
+  const [toolOpen, setToolOpen] = createStore<Record<string, boolean | undefined>>(cached?.toolOpen ?? {})
+  const [renderOverscan, setRenderOverscan] = createSignal(initialMeasurements?.length || coldBottomMount ? 6 : 20)
+  let resizePinnedIndexes: number[] = []
+  let resizePinFrame: number | undefined
+  let virtualContent: HTMLDivElement | undefined
+  const virtualizer = createVirtualizer<HTMLDivElement, HTMLDivElement>({
+    get count() {
+      return timelineRows().length
+    },
+    getScrollElement: () => listRoot() ?? null,
+    observeElementOffset: observeElementOffsetReconnectAware,
+    initialOffset: () => (props.shouldAnchorBottom() ? Number.MAX_SAFE_INTEGER : 0),
+    initialMeasurementsCache: initialMeasurements,
+    estimateSize: () => timelineFallbackItemSize,
+    scrollToFn: (offset, options, instance) => {
+      // Expose the computed range before core writes an anchor correction so the browser does not clamp it to the old height.
+      if (virtualContent) virtualContent.style.height = `${instance.getTotalSize()}px`
+      elementScroll(offset, options, instance)
+    },
+    get getItemKey() {
+      const rows = timelineRows()
+      return (index: number) => {
+        const row = rows[index]
+        // ResizeObserver can report a removed element after its row has left the projection.
+        if (!row) return `removed:${index}`
+        return TimelineRow.key(row)
+      }
+    },
+    anchorTo: "end",
+    followOnAppend: true,
+    scrollEndThreshold: 80,
+    get scrollMargin() {
+      return showHeader() ? 64 : 0
+    },
+    overscan: 50,
+    paddingEnd: 64,
+    rangeExtractor: (range) => {
+      const id = activeMessageID()
+      const active = id ? (messageLastRowIndex().get(id) ?? -1) : -1
+      const indexes = defaultRangeExtractor({ ...range, overscan: renderOverscan() })
+      return filterVirtualIndexes(
+        [...new Set([...resizePinnedIndexes, ...indexes, ...(active < 0 ? [] : [active])])].sort((a, b) => a - b),
+        range.count,
+      )
+    },
+  })
+  const resizeItem = virtualizer.resizeItem
+  let resizeAnchorScheduled = false
+  const anchorResizedBottom = () => {
+    if (resizeAnchorScheduled || props.hasScrollGesture()) return
+    resizeAnchorScheduled = true
+    queueMicrotask(() => {
+      resizeAnchorScheduled = false
+      if (!props.shouldAnchorBottom() || props.hasScrollGesture()) return
+      virtualizer.scrollToEnd()
+    })
+  }
+  virtualizer.resizeItem = (index, size) => {
+    const item = virtualizer.measurementsCache[index]
+    const previous = item ? (virtualizer.itemSizeCache.get(item.key) ?? item.size) : undefined
+    const root = listRoot()
+    if (root && previous !== undefined && Math.abs(size - previous) > root.clientHeight) {
+      const view = root.getBoundingClientRect()
+      resizePinnedIndexes = [...root.querySelectorAll<HTMLElement>("[data-index]")]
+        .filter((element) => {
+          const rect = element.getBoundingClientRect()
+          return rect.bottom > view.top && rect.top < view.bottom
+        })
+        .map((element) => Number(element.dataset.index))
+      if (resizePinFrame !== undefined) cancelAnimationFrame(resizePinFrame)
+      resizePinFrame = requestAnimationFrame(() => {
+        resizePinFrame = requestAnimationFrame(() => {
+          resizePinFrame = undefined
+          resizePinnedIndexes = []
+        })
+      })
+    }
+    resizeItem(index, size)
+    if (root && props.shouldAnchorBottom()) anchorResizedBottom()
+  }
+  virtualizer.shouldAdjustScrollPositionOnItemSizeChange = (item) => {
+    if (props.shouldAnchorBottom()) return false
+    const first = virtualizer.range?.startIndex
+    return first !== undefined && item.index < first
+  }
+  const virtualItemByKey = createMemo(
+    () => new Map(virtualizer.getVirtualItems().map((item) => [item.key, item] as const)),
+  )
+  const virtualRowKeys = createMemo(() => virtualizer.getVirtualItems().map((item) => item.key as string))
+  createEffect(() => {
+    props.setRevealMessage?.((id) => {
+      const index = messageRowIndex().get(id)
+      if (index === undefined) return
+      virtualizer.scrollToIndex(index, { align: "center" })
+    })
+    props.setScrollToEnd?.(() => virtualizer.scrollToEnd())
+    props.setHistoryAnchor?.({ capture: capturePrependAnchor, restore: restorePrependAnchor })
+  })
+
+  let overscanFrame: number | undefined
+  onMount(() => {
+    overscanFrame = requestAnimationFrame(() => {
+      if (props.shouldAnchorBottom()) virtualizer.scrollToEnd()
+      overscanFrame = requestAnimationFrame(() => {
+        overscanFrame = undefined
+        if (renderOverscan() < 20) setRenderOverscan(20)
+        if (props.shouldAnchorBottom()) virtualizer.scrollToEnd()
+      })
+    })
+  })
+
+  const maybeAnchorBottom = () => {
+    if (timelineRows().length === 0) return
+    if (!props.shouldAnchorBottom() || props.hasScrollGesture()) return
+    if (resizePinFrame !== undefined) cancelAnimationFrame(resizePinFrame)
+    clearPrependAnchor()
+    if (prependAnchorFrame !== undefined) cancelAnimationFrame(prependAnchorFrame)
+    virtualizer.scrollToEnd()
+  }
+
+  let measuredSessionKey = sessionKey()
+  createEffect(() => {
+    const key = sessionKey()
+    timelineRows().length
+    if (measuredSessionKey !== key) {
+      measuredSessionKey = key
+      virtualizer.measure()
+    }
+    maybeAnchorBottom()
+  })
+
+  onCleanup(() => {
+    clearPrependAnchor()
+    timelineCache.delete(ownerSessionKey)
+    timelineCache.set(ownerSessionKey, { measurements: virtualizer.takeSnapshot(), toolOpen: { ...toolOpen } })
+    while (timelineCache.size > 16) timelineCache.delete(timelineCache.keys().next().value!)
+    if (resizePinFrame !== undefined) cancelAnimationFrame(resizePinFrame)
+    if (overscanFrame !== undefined) cancelAnimationFrame(overscanFrame)
+    props.setRevealMessage?.(() => {})
+    props.setScrollToEnd?.(() => {})
+    props.setHistoryAnchor?.({ capture: () => {}, restore: () => {} })
+  })
+
+  const [title, setTitle] = createStore({
+    draft: "",
+    editing: false,
+    menuOpen: false,
+    pendingRename: false,
+    pendingShare: false,
+  })
+  let titleRef: HTMLInputElement | undefined
+
+  const [share, setShare] = createStore({
+    open: false,
+    dismiss: null as "escape" | "outside" | null,
+  })
+  let more: HTMLButtonElement | undefined
+
+  const bindListRoot = (root: HTMLDivElement) => {
+    if (root === listRoot()) return
+    setListRoot(root)
+    props.setScrollRef(root)
+  }
+
+  const handleListWheel = (event: WheelEvent & { currentTarget: HTMLDivElement }) => {
+    if (!prependLoading) clearPrependAnchor()
+    const root = event.currentTarget
+    const delta = normalizeWheelDelta({
+      deltaY: event.deltaY,
+      deltaMode: event.deltaMode,
+      rootHeight: root.clientHeight,
+    })
+    if (!delta) return
+    markBoundaryGesture({ root, target: event.target, delta, onMarkScrollGesture: props.onMarkScrollGesture })
+  }
+
+  const handleListTouchStart = (event: TouchEvent) => {
+    if (!prependLoading) clearPrependAnchor()
+    touchGesture = event.touches[0]?.clientY
+  }
+
+  const handleListTouchMove = (event: TouchEvent & { currentTarget: HTMLDivElement }) => {
+    const next = event.touches[0]?.clientY
+    const prev = touchGesture
+    touchGesture = next
+    if (next === undefined || prev === undefined) return
+
+    const delta = prev - next
+    if (!delta) return
+
+    markBoundaryGesture({
+      root: event.currentTarget,
+      target: event.target,
+      delta,
+      onMarkScrollGesture: props.onMarkScrollGesture,
+    })
+  }
+
+  const handleListTouchEnd = () => {
+    touchGesture = undefined
+  }
+
+  const handleListPointerDown = (event: PointerEvent & { currentTarget: HTMLDivElement }) => {
+    if (!prependLoading) clearPrependAnchor()
+    props.onMarkScrollGesture(event.target)
+  }
+
+  const handleListPointerMove = (event: PointerEvent) => {
+    if (event.buttons !== 1) return
+    props.onMarkScrollGesture(event.target)
+  }
+
+  const handleListKeyDown = (event: KeyboardEvent & { currentTarget: HTMLDivElement }) => {
+    const key = scrollKey(event)
+    if (!key) return
+    if (!isScrollKeyTarget(event.target, key)) return
+    if (scrollKeyOwner(event.currentTarget, event.target, key) !== event.currentTarget) return
+    if (!prependLoading) clearPrependAnchor()
+    props.onMarkScrollGesture(event.currentTarget)
+  }
+
+  const handleListScroll = (event: Event & { currentTarget: HTMLDivElement }) => {
+    if (prependLoading) updatePrependAnchor()
+    props.onScheduleScrollState(event.currentTarget)
+    props.onHistoryScroll()
+    if (!props.hasScrollGesture()) return
+    props.onUserScroll()
+    props.onAutoScrollHandleScroll()
+    props.onMarkScrollGesture(event.currentTarget)
+  }
+
+  onCleanup(() => {
+    props.setScrollRef(undefined)
+  })
+
+  const viewShare = () => {
+    const url = shareUrl()
+    if (!url) return
+    platform.openLink(url)
+  }
+
+  const errorMessage = (err: unknown) => {
+    if (err && typeof err === "object" && "data" in err) {
+      const data = (err as { data?: { message?: string } }).data
+      if (data?.message) return data.message
+    }
+    if (err instanceof Error) return err.message
+    return language.t("common.requestFailed")
+  }
+
+  const shareMutation = useMutation(() => ({
+    mutationFn: (id: string) => serverSDK().client.session.share({ sessionID: id }),
+    onError: (err) => {
+      console.error("Failed to share session", err)
+    },
+  }))
+
+  const unshareMutation = useMutation(() => ({
+    mutationFn: (id: string) => serverSDK().client.session.unshare({ sessionID: id }),
+    onError: (err) => {
+      console.error("Failed to unshare session", err)
+    },
+  }))
+
+  const titleMutation = useMutation(() => ({
+    mutationFn: (input: { id: string; title: string }) =>
+      sdk().api.session.rename({ sessionID: input.id, title: input.title }),
+    onSuccess: (_, input) => {
+      sync().set(
+        produce((draft) => {
+          const index = draft.session.findIndex((s) => s.id === input.id)
+          if (index !== -1) draft.session[index].title = input.title
+        }),
+      )
+      setTitle("editing", false)
+    },
+    onError: (err) => {
+      showToast({
+        title: language.t("common.requestFailed"),
+        description: errorMessage(err),
+      })
+    },
+  }))
+
+  const shareSession = () => {
+    const id = sessionID()
+    if (!id || shareMutation.isPending) return
+    if (!shareEnabled()) return
+    shareMutation.mutate(id)
+  }
+
+  const unshareSession = () => {
+    const id = sessionID()
+    if (!id || unshareMutation.isPending) return
+    if (!shareEnabled()) return
+    unshareMutation.mutate(id)
+  }
+  const copyShareUrl = () => {
+    const url = shareUrl()
+    if (!url) return
+    void navigator.clipboard
+      .writeText(url)
+      .then(() =>
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("session.share.copy.copied"),
+          description: url,
+        }),
+      )
+      .catch((err: unknown) =>
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        }),
+      )
+  }
+  const selectShareUrlText: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {
+    const selection = window.getSelection()
+    if (!selection) return
+    const range = document.createRange()
+    range.selectNodeContents(event.currentTarget)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+
+  createEffect(
+    on(
+      sessionKey,
+      () =>
+        setTitle({
+          draft: "",
+          editing: false,
+          menuOpen: false,
+          pendingRename: false,
+          pendingShare: false,
+        }),
+      { defer: true },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => [parentID(), childTaskDescription()] as const,
+      ([id, description]) => {
+        if (!id || description) return
+        if (sync().data.message[id] !== undefined) return
+        void sync().session.sync(id)
+      },
+      { defer: true },
+    ),
+  )
+
+  const openTitleEditor = () => {
+    if (!sessionID() || parentID()) return
+    setTitle({ editing: true, draft: titleLabel() ?? "" })
+    requestAnimationFrame(() => {
+      if (!titleRef) return
+      titleRef.focus()
+      titleRef.select()
+    })
+  }
+
+  const closeTitleEditor = () => {
+    if (titleMutation.isPending) return
+    setTitle("editing", false)
+  }
+
+  const saveTitleEditor = () => {
+    const id = sessionID()
+    if (!id) return
+    if (titleMutation.isPending) return
+
+    const next = title.draft.trim()
+    if (!next || next === (titleLabel() ?? "")) {
+      setTitle("editing", false)
+      return
+    }
+
+    titleMutation.mutate({ id, title: next })
+  }
+
+  const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
+    if (params.id !== sessionID) return
+    const href = (id: string) =>
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id)
+    if (parentID) {
+      navigate(href(parentID))
+      return
+    }
+    if (nextSessionID) {
+      navigate(href(nextSessionID))
+      return
+    }
+    if (params.serverKey) {
+      tabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
+      return
+    }
+    navigate(`/${params.dir}/session`)
+  }
+
+  const archiveSession = async (sessionID: string) => {
+    const session = sync().session.get(sessionID)
+    if (!session) return
+
+    const sessions = sync().data.session ?? []
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    await sdk()
+      .api.session.archive({ sessionID })
+      .then(() => {
+        sync().set(
+          produce((draft) => {
+            const index = draft.session.findIndex((s) => s.id === sessionID)
+            if (index !== -1) draft.session.splice(index, 1)
+          }),
+        )
+        sync().session.evict(sessionID)
+        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+        notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [sessionID] })
+      })
+      .catch((err) => {
+        showToast({
+          title: language.t("common.requestFailed"),
+          description: errorMessage(err),
+        })
+      })
+  }
+
+  const deleteSession = async (sessionID: string) => {
+    const session = sync().session.get(sessionID)
+    if (!session) return false
+
+    const sessions = (sync().data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
+    const index = sessions.findIndex((s) => s.id === sessionID)
+    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+
+    const result = await sdk()
+      .api.session.remove({ sessionID })
+      .then(() => true)
+      .catch((err) => {
+        showToast({
+          title: language.t("session.delete.failed.title"),
+          description: errorMessage(err),
+        })
+        return false
+      })
+
+    if (!result) return false
+
+    const removed = new Set<string>([sessionID])
+    const byParent = new Map<string, string[]>()
+    for (const item of sync().data.session) {
+      const parentID = item.parentID
+      if (!parentID) continue
+      const existing = byParent.get(parentID)
+      if (existing) {
+        existing.push(item.id)
+        continue
+      }
+      byParent.set(parentID, [item.id])
+    }
+
+    const stack = [sessionID]
+    while (stack.length) {
+      const parentID = stack.pop()
+      if (!parentID) continue
+
+      const children = byParent.get(parentID)
+      if (!children) continue
+
+      for (const child of children) {
+        if (removed.has(child)) continue
+        removed.add(child)
+        stack.push(child)
+      }
+    }
+
+    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
+
+    sync().set(
+      produce((draft) => {
+        draft.session = draft.session.filter((s) => !removed.has(s.id))
+      }),
+    )
+
+    for (const id of removed) {
+      sync().session.evict(id)
+    }
+    notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [...removed] })
+    return true
+  }
+
+  const navigateParent = () => {
+    const id = parentID()
+    if (!id) return
+    navigate(
+      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id),
+    )
+  }
+
+  function DialogDeleteSession(props: { sessionID: string }) {
+    const name = createMemo(
+      () => sessionTitle(sync().session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
+    )
+    const handleDelete = async () => {
+      await deleteSession(props.sessionID)
+      dialog.close()
+    }
+
+    if (settings.general.newLayoutDesigns())
+      return (
+        <DialogV2 fit>
+          <DialogHeader hideClose>
+            <DialogTitleGroup
+              title={language.t("session.delete.title")}
+              description={language.t("session.delete.confirm", { name: name() })}
+            />
+          </DialogHeader>
+          <DialogFooter>
+            <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </ButtonV2>
+            <ButtonV2 variant="danger" onClick={handleDelete}>
+              {language.t("session.delete.button")}
+            </ButtonV2>
+          </DialogFooter>
+        </DialogV2>
+      )
+
+    return (
+      <Dialog title={language.t("session.delete.title")} fit>
+        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+          <div class="flex flex-col gap-1">
+            <span class="text-14-regular text-text-strong">
+              {language.t("session.delete.confirm", { name: name() })}
+            </span>
+          </div>
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </Button>
+            <Button variant="primary" size="large" onClick={handleDelete}>
+              {language.t("session.delete.button")}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    )
+  }
+
+  const workingTurn = (userMessageID: string) => sessionStatus().type !== "idle" && activeMessageID() === userMessageID
+
+  const turnDurationMs = (userMessageID: string) => {
+    const message = messageByID().get(userMessageID)
+    if (!message || message.role !== "user") return
+    const end = (assistantMessagesByParent().get(userMessageID) ?? emptyAssistantMessages).reduce<number | undefined>(
+      (max, item) => {
+        const completed = item.time.completed
+        if (typeof completed !== "number") return max
+        if (max === undefined) return completed
+        return Math.max(max, completed)
+      },
+      undefined,
+    )
+    if (typeof end !== "number") return
+    if (end < message.time.created) return
+    return end - message.time.created
+  }
+
+  const assistantCopyPartID = (userMessageID: string) => {
+    if (workingTurn(userMessageID)) return null
+    const messages = assistantMessagesByParent().get(userMessageID) ?? emptyAssistantMessages
+
+    for (let i = messages.length - 1; i >= 0; i--) {
+      const message = messages[i]
+      if (!message) continue
+
+      const parts = getMsgParts(message.id)
+      for (let j = parts.length - 1; j >= 0; j--) {
+        const part = parts[j]
+        if (!part || part.type !== "text" || !part.text?.trim()) continue
+        return part.id
+      }
+    }
+  }
+
+  const renderAssistantPartGroup = (row: Accessor<TimelineRowMap["AssistantPart"]>, onSizeChange?: () => void) => {
+    if (row().group.type === "context") {
+      const parts = createMemo(() => {
+        const group = row().group
+        if (group.type !== "context") return emptyTools
+        return group.refs
+          .map((ref) => getMsgPart(ref.messageID, ref.partID))
+          .filter((part): part is ToolPart => part?.type === "tool")
+      })
+      const contextOpenKey = () => `context:${row().group.key}`
+      const open = createMemo(() => {
+        return toolOpen[contextOpenKey()] === true
+      })
+
+      return (
+        <ContextToolGroup
+          parts={parts()}
+          open={open()}
+          onOpenChange={(value) => setToolOpen(contextOpenKey(), value)}
+          busy={
+            workingTurn(row().userMessageID) && lastAssistantGroupKey().get(row().userMessageID) === row().group.key
+          }
+          onSizeChange={onSizeChange}
+        />
+      )
+    }
+
+    const message = createMemo(() => {
+      const group = row().group
+      if (group.type !== "part") return
+      return messageByID().get(group.ref.messageID)
+    })
+    const part = createMemo(() => {
+      const group = row().group
+      if (group.type !== "part") return
+      return getMsgPart(group.ref.messageID, group.ref.partID)
+    })
+    const defaultOpen = createMemo(() => {
+      const item = part()
+      if (!item) return
+      return partDefaultOpen(item, settings.general.shellToolPartsExpanded(), settings.general.editToolPartsExpanded())
+    })
+
+    return (
+      <Show when={message()}>
+        {(message) => (
+          <Show when={part()}>
+            {(part) => (
+              <MessagePart
+                part={part()}
+                message={message()}
+                showAssistantCopyPartID={assistantCopyPartID(row().userMessageID)}
+                turnDurationMs={turnDurationMs(row().userMessageID)}
+                useV2Actions={settings.general.newLayoutDesigns()}
+                defaultOpen={defaultOpen()}
+                toolOpen={toolOpen[part().id] ?? defaultOpen()}
+                onToolOpenChange={(open) => setToolOpen(part().id, open)}
+                deferToolContent
+                virtualizeDiff={false}
+                onContentRendered={onSizeChange}
+              />
+            )}
+          </Show>
+        )}
+      </Show>
+    )
+  }
+
+  function TimelineRowFrame(input: { row: Accessor<FramedTimelineRow>; children: JSX.Element }) {
+    const anchor = () => {
+      const row = input.row()
+      return row._tag === "CommentStrip" || (row._tag === "UserMessage" && row.anchor)
+    }
+    const previousAssistantPart = () => {
+      const row = input.row()
+      return row._tag === "AssistantPart" && row.previousAssistantPart
+    }
+
+    return (
+      <div
+        id={anchor() ? props.anchor(input.row().userMessageID) : undefined}
+        data-message-id={input.row().userMessageID}
+        data-timeline-row={input.row()._tag}
+        classList={{
+          "min-w-0 w-full max-w-full": true,
+          "md:max-w-200 2xl:max-w-[1000px]": props.centered,
+          "md:mx-auto": props.centered,
+          "pt-3": previousAssistantPart(),
+        }}
+      >
+        <div data-component="session-turn" class="min-w-0 w-full relative" style={{ height: "auto" }}>
+          {input.children}
+        </div>
+      </div>
+    )
+  }
+
+  const renderTimelineRow = (row: Accessor<TimelineRow.TimelineRow>, onSizeChange?: () => void) => {
+    switch (row()._tag) {
+      case "TurnGap":
+        return <div data-timeline-row="TurnGap" aria-hidden="true" class="h-6" />
+      case "CommentStrip": {
+        const commentStripRow = row as Accessor<TimelineRowByTag<"CommentStrip">>
+        const comments = createMemo(() =>
+          getMsgParts(commentStripRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? []),
+        )
+        return (
+          <TimelineRowFrame row={commentStripRow}>
+            <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()}>
+                    {(comment) => (
+                      <div
+                        classList={{
+                          "shrink-0 max-w-[260px] rounded-[6px] border-border-weak-base bg-background-stronger px-2.5 py-2": true,
+                          "border-[0.5px]": settings.general.newLayoutDesigns(),
+                          border: !settings.general.newLayoutDesigns(),
+                        }}
+                      >
+                        <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
+                          <FileIcon node={{ path: comment().path, type: "file" }} class="size-3.5 shrink-0" />
+                          <span class="truncate">{getFilename(comment().path)}</span>
+                          <Show when={comment().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">
+                          {comment().comment}
+                        </div>
+                      </div>
+                    )}
+                  </Index>
+                </div>
+              </div>
+            </div>
+          </TimelineRowFrame>
+        )
+      }
+      case "UserMessage": {
+        const userMessageRow = row as Accessor<TimelineRowByTag<"UserMessage">>
+        const message = createMemo(() => {
+          const m = messageByID().get(userMessageRow().userMessageID)
+          if (m?.role === "user") return m
+        })
+        const messageComments = createMemo(() => {
+          if (!settings.general.newLayoutDesigns()) return []
+          return getMsgParts(userMessageRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? [])
+        })
+        return (
+          <TimelineRowFrame row={userMessageRow}>
+            <Show when={message()}>
+              {(message) => (
+                <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+                  <div data-slot="session-turn-message-content" aria-live="off">
+                    <Message
+                      message={message()}
+                      parts={getMsgParts(userMessageRow().userMessageID)}
+                      actions={props.actions}
+                      useV2Actions={settings.general.newLayoutDesigns()}
+                      comments={messageComments()}
+                    />
+                  </div>
+                </div>
+              )}
+            </Show>
+          </TimelineRowFrame>
+        )
+      }
+      case "TurnDivider": {
+        const turnDividerRow = row as Accessor<TimelineRowByTag<"TurnDivider">>
+        return (
+          <TimelineRowFrame row={turnDividerRow}>
+            <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+              <div data-slot="session-turn-compaction">
+                <MessageDivider
+                  label={language.t(
+                    turnDividerRow().label === "compaction" ? "ui.messagePart.compaction" : "ui.message.interrupted",
+                  )}
+                />
+              </div>
+            </div>
+          </TimelineRowFrame>
+        )
+      }
+      case "AssistantPart": {
+        const assistantPartRow = row as Accessor<TimelineRowByTag<"AssistantPart">>
+        return (
+          <TimelineRowFrame row={assistantPartRow}>
+            <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+              <div
+                data-slot="session-turn-assistant-content"
+                aria-hidden={workingTurn(assistantPartRow().userMessageID)}
+              >
+                {renderAssistantPartGroup(assistantPartRow, onSizeChange)}
+              </div>
+            </div>
+          </TimelineRowFrame>
+        )
+      }
+      case "Thinking": {
+        const thinkingRow = row as Accessor<TimelineRowByTag<"Thinking">>
+        return (
+          <TimelineRowFrame row={thinkingRow}>
+            <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+              <TimelineThinkingRow
+                reasoningHeading={thinkingRow().reasoningHeading}
+                showReasoningSummaries={settings.general.showReasoningSummaries()}
+              />
+            </div>
+          </TimelineRowFrame>
+        )
+      }
+      case "Retry": {
+        const retryRow = row as Accessor<TimelineRowByTag<"Retry">>
+        return (
+          <TimelineRowFrame row={retryRow}>
+            <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+              <SessionRetry status={sessionStatus()} show={activeMessageID() === retryRow().userMessageID} />
+            </div>
+          </TimelineRowFrame>
+        )
+      }
+      case "DiffSummary": {
+        const diffSummaryRow = row as Accessor<TimelineRowByTag<"DiffSummary">>
+        return (
+          <TimelineRowFrame row={diffSummaryRow}>
+            <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+              <TimelineDiffSummaryRow diffs={diffSummaryRow().diffs} />
+            </div>
+          </TimelineRowFrame>
+        )
+      }
+      case "Error": {
+        const errorRow = row as Accessor<TimelineRowByTag<"Error">>
+        return (
+          <TimelineRowFrame row={errorRow}>
+            <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
+              <Card variant="error" class="error-card">
+                {errorRow().text}
+              </Card>
+            </div>
+          </TimelineRowFrame>
+        )
+      }
+    }
+  }
+
+  function TimelineRowView(props: { row: TimelineRow.TimelineRow; onSizeChange?: () => void }) {
+    return renderTimelineRow(() => props.row, props.onSizeChange)
+  }
+
+  function VirtualTimelineRow(props: { rowKey: string }) {
+    let element: HTMLDivElement
+    const initialItem = virtualItemByKey().get(props.rowKey)!
+    const initialRow = timelineRowByKey().get(props.rowKey)!
+    const item = createMemo(() => virtualItemByKey().get(props.rowKey) ?? initialItem)
+    const row = createMemo(() => timelineRowByKey().get(props.rowKey) ?? initialRow)
+    const tool = () => {
+      const value = row()
+      if (value._tag !== "AssistantPart" || value.group.type !== "part") return
+      const part = getMsgPart(value.group.ref.messageID, value.group.ref.partID)
+      if (part?.type === "tool") return part
+    }
+    const asyncFile = () => ["edit", "write", "apply_patch"].includes(tool()?.tool ?? "")
+    const [ready, setReady] = createSignal(initialItem.size <= timelineFallbackItemSize || !asyncFile())
+    let contentMeasureFrame: number | undefined
+
+    onMount(() => virtualizer.measureElement(element))
+
+    createEffect(
+      on(
+        () => item().index,
+        () => {
+          virtualizer.measureElement(element)
+        },
+        { defer: true },
+      ),
+    )
+
+    onCleanup(() => {
+      if (contentMeasureFrame !== undefined) cancelAnimationFrame(contentMeasureFrame)
+    })
+
+    return (
+      <div
+        data-timeline-key={props.rowKey}
+        style={{
+          position: "absolute",
+          top: `${item().start - (showHeader() ? 64 : 0)}px`,
+          left: "0",
+          width: "100%",
+          height: `${item().size}px`,
+          overflow: "clip",
+          // Rounded virtual measurements can otherwise clip a framed row's outer paint.
+          "overflow-clip-margin": row()._tag === "TurnGap" ? undefined : "0.5px",
+        }}
+      >
+        <div
+          ref={(value) => {
+            element = value
+          }}
+          data-index={item().index}
+          style={{ "min-height": ready() ? undefined : `${initialItem.size}px` }}
+        >
+          <TimelineRowView
+            row={row()}
+            onSizeChange={() => {
+              setReady(true)
+              if (contentMeasureFrame !== undefined) cancelAnimationFrame(contentMeasureFrame)
+              contentMeasureFrame = scheduleConnectedMeasure(element, virtualizer.measureElement)
+            }}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div class="relative w-full h-full min-w-0">
+      <div
+        class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
+        classList={{
+          "bottom-8": settings.general.newLayoutDesigns(),
+          "bottom-6": !settings.general.newLayoutDesigns(),
+          "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump,
+          "opacity-0 translate-y-2 pointer-events-none": !props.scroll.overflow || !props.scroll.jump,
+          "scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && settings.general.newLayoutDesigns(),
+          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !settings.general.newLayoutDesigns(),
+        }}
+      >
+        <Show
+          when={settings.general.newLayoutDesigns()}
+          fallback={
+            <button
+              type="button"
+              aria-label={language.t("session.messages.jumpToLatest")}
+              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>
+          }
+        >
+          <button
+            type="button"
+            aria-label={language.t("session.messages.jumpToLatest")}
+            class="pointer-events-auto flex items-center justify-center w-8 h-7 px-2 py-1.5 rounded-lg border-none cursor-pointer text-v2-text-text-base backdrop-blur-[2px]"
+            style={{
+              background: "color-mix(in srgb, var(--v2-background-bg-base) 92%, transparent)",
+              "box-shadow": "var(--v2-elevation-raised), 0px 2px 8px var(--v2-background-bg-base)",
+            }}
+            onClick={props.onResumeScroll}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path
+                d="M12.3333 8.66665L8 13L3.66667 8.66665M8 12.6667V2.83332"
+                stroke="currentColor"
+                stroke-linecap="square"
+              />
+            </svg>
+          </button>
+        </Show>
+      </div>
+      <ScrollView
+        viewportRef={bindListRoot}
+        onWheel={handleListWheel}
+        onTouchStart={handleListTouchStart}
+        onTouchMove={handleListTouchMove}
+        onTouchEnd={handleListTouchEnd}
+        onTouchCancel={handleListTouchEnd}
+        onPointerDown={handleListPointerDown}
+        onPointerMove={handleListPointerMove}
+        onKeyDown={handleListKeyDown}
+        onScroll={handleListScroll}
+        onClick={props.onAutoScrollInteraction}
+        class="relative min-w-0 w-full h-full"
+        style={{
+          "--sticky-accordion-top": showHeader() ? "48px" : "0px",
+        }}
+      >
+        <Show when={showHeader()}>
+          <div
+            data-session-title
+            classList={{
+              "sticky top-0 z-30": true,
+              "bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)]":
+                settings.general.newLayoutDesigns(),
+              "bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]":
+                !settings.general.newLayoutDesigns(),
+              "w-full": true,
+              "pb-4": true,
+              "pr-3": true,
+              "pl-2.5": settings.general.newLayoutDesigns(),
+              "pl-2 md:pl-4": !settings.general.newLayoutDesigns(),
+              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !settings.general.newLayoutDesigns(),
+            }}
+          >
+            <div class="h-12 w-full flex items-center justify-between gap-2">
+              <div
+                classList={{
+                  "flex items-center gap-1 min-w-0 flex-1": true,
+                  "pr-3": !settings.general.newLayoutDesigns(),
+                }}
+              >
+                <div class="flex items-center min-w-0 flex-1 w-full">
+                  <Show when={parentID()}>
+                    <button
+                      type="button"
+                      data-slot="session-title-parent"
+                      class="min-w-0 max-w-[40%] truncate pl-2 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:text-v2-text-text-muted"
+                      onClick={navigateParent}
+                    >
+                      {parentTitle()}
+                    </button>
+                    <span
+                      data-slot="session-title-separator"
+                      class="-translate-y-[0.5px] pl-2 pr-1 text-[11px] font-medium text-v2-text-text-faint"
+                      aria-hidden="true"
+                    >
+                      /
+                    </span>
+                  </Show>
+                  <Show when={childTitle() || title.editing}>
+                    <Show
+                      when={title.editing}
+                      fallback={
+                        <h1
+                          data-slot="session-title-child"
+                          classList={{
+                            "truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base": true,
+                            "w-fit rounded-[6px] px-2 py-1 hover:bg-v2-overlay-simple-overlay-hover":
+                              settings.general.newLayoutDesigns(),
+                            "grow-1 min-w-0": !settings.general.newLayoutDesigns(),
+                          }}
+                          onClick={openTitleEditor}
+                        >
+                          {childTitle()}
+                        </h1>
+                      }
+                    >
+                      <InlineInput
+                        ref={(el) => {
+                          titleRef = el
+                        }}
+                        data-slot="session-title-child"
+                        value={title.draft}
+                        disabled={titleMutation.isPending}
+                        classList={{
+                          "block text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base": true,
+                          "w-full flex-1 grow-1 min-w-0 pl-1 -ml-1 rounded-[6px]": !settings.general.newLayoutDesigns(),
+                          "field-sizing-content self-start rounded-[6px] px-2 py-1 ":
+                            settings.general.newLayoutDesigns(),
+                        }}
+                        style={{
+                          "--inline-input-shadow": settings.general.newLayoutDesigns()
+                            ? "none"
+                            : "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}
+                      />
+                    </Show>
+                  </Show>
+                </div>
+              </div>
+              <Show when={sessionID()} keyed>
+                {(id) => (
+                  <div
+                    classList={{
+                      "shrink-0 flex items-center": true,
+                      "gap-2": settings.general.newLayoutDesigns(),
+                      "gap-3": !settings.general.newLayoutDesigns(),
+                    }}
+                  >
+                    <SessionContextUsage
+                      placement="bottom"
+                      buttonAppearance={settings.general.newLayoutDesigns() ? "v2" : "default"}
+                    />
+                    <Show when={!parentID()}>
+                      <Show
+                        when={settings.general.newLayoutDesigns()}
+                        fallback={
+                          <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,
+                              }}
+                              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)
+                                  }}
+                                >
+                                  <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>
+                        }
+                      >
+                        <MenuV2
+                          gutter={6}
+                          placement="bottom-end"
+                          open={title.menuOpen}
+                          onOpenChange={(open) => {
+                            setTitle("menuOpen", open)
+                            if (open) return
+                          }}
+                        >
+                          <MenuV2.Trigger
+                            as={IconButtonV2}
+                            icon={<IconV2 name="outline-dots" />}
+                            variant="ghost-muted"
+                            size="large"
+                            state={share.open || title.pendingShare ? "pressed" : undefined}
+                            aria-label={language.t("common.moreOptions")}
+                            aria-expanded={title.menuOpen || share.open || title.pendingShare}
+                            ref={(el: HTMLButtonElement) => {
+                              more = el
+                            }}
+                          />
+                          <MenuV2.Portal>
+                            <MenuV2.Content
+                              style={{ width: "120px", "min-width": "120px" }}
+                              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)
+                                  })
+                                }
+                              }}
+                            >
+                              <MenuV2.Item
+                                onSelect={() => {
+                                  setTitle("pendingRename", true)
+                                  setTitle("menuOpen", false)
+                                }}
+                              >
+                                {language.t("common.rename")}
+                              </MenuV2.Item>
+                              <Show when={shareEnabled()}>
+                                <MenuV2.Item
+                                  onSelect={() => {
+                                    setTitle({ pendingShare: true, menuOpen: false })
+                                  }}
+                                >
+                                  {language.t("session.share.action.share")}...
+                                </MenuV2.Item>
+                              </Show>
+                              <MenuV2.Item onSelect={() => void archiveSession(id)}>
+                                {language.t("common.archive")}
+                              </MenuV2.Item>
+                              <MenuV2.Separator />
+                              <MenuV2.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}>
+                                {language.t("common.delete")}...
+                              </MenuV2.Item>
+                            </MenuV2.Content>
+                          </MenuV2.Portal>
+                        </MenuV2>
+                      </Show>
+
+                      <KobaltePopover
+                        open={share.open}
+                        anchorRef={() => more}
+                        placement="bottom-end"
+                        gutter={settings.general.newLayoutDesigns() ? 6 : 4}
+                        modal={false}
+                        onOpenChange={(open) => {
+                          if (open) setShare("dismiss", null)
+                          setShare("open", open)
+                        }}
+                      >
+                        <KobaltePopover.Portal>
+                          <KobaltePopover.Content
+                            data-component="popover-content"
+                            classList={{
+                              "flex w-80 max-w-none flex-col items-start gap-3 rounded-[10px] border-0 bg-v2-background-bg-layer-01 p-3 shadow-[var(--v2-elevation-floating)]":
+                                settings.general.newLayoutDesigns(),
+                            }}
+                            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)
+                            }}
+                          >
+                            <Show
+                              when={settings.general.newLayoutDesigns()}
+                              fallback={
+                                <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>
+                              }
+                            >
+                              <div class="flex w-full flex-col gap-1.5 px-0.5 pt-0.5">
+                                <div class="select-none text-[13px] font-[530] leading-none tracking-[-0.04px] text-v2-text-text-base [font-variation-settings:'slnt'_0]">
+                                  {language.t("session.share.popover.title")}
+                                </div>
+                                <div class="select-none text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted [font-variation-settings:'slnt'_0]">
+                                  {shareUrl()
+                                    ? language.t("session.share.popover.description.shared")
+                                    : language.t("session.share.popover.description.unshared")}
+                                </div>
+                              </div>
+                              <div class="flex w-full flex-col gap-2">
+                                <Show
+                                  when={shareUrl()}
+                                  fallback={
+                                    <ButtonV2
+                                      variant="contrast"
+                                      class="w-full"
+                                      onClick={shareSession}
+                                      disabled={shareMutation.isPending}
+                                    >
+                                      {shareMutation.isPending
+                                        ? language.t("session.share.action.publishing")
+                                        : language.t("session.share.action.publish")}
+                                    </ButtonV2>
+                                  }
+                                >
+                                  <div class="flex flex-col gap-2">
+                                    <div
+                                      class="flex h-8 w-full items-center gap-1.5 rounded-[6px] py-1 pl-2.5 pr-1.5 shadow-[var(--v2-elevation-button-neutral)]"
+                                      style={{
+                                        background:
+                                          "linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-button-neutral)",
+                                      }}
+                                    >
+                                      <div
+                                        class="min-w-0 flex-1 truncate select-text cursor-text text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-base [font-variation-settings:'slnt'_0]"
+                                        onClick={selectShareUrlText}
+                                      >
+                                        {shareUrl()}
+                                      </div>
+                                      <IconButtonV2
+                                        type="button"
+                                        size="small"
+                                        variant="ghost-muted"
+                                        icon={<IconV2 name="outline-copy" />}
+                                        aria-label={language.t("session.share.copy.copyLink")}
+                                        onClick={copyShareUrl}
+                                      />
+                                      <IconButtonV2
+                                        type="button"
+                                        size="small"
+                                        variant="ghost-muted"
+                                        icon={<IconV2 name="outline-square-arrow" />}
+                                        aria-label={language.t("session.share.action.view")}
+                                        onClick={viewShare}
+                                        disabled={unshareMutation.isPending}
+                                      />
+                                    </div>
+                                    <div class="flex w-full">
+                                      <ButtonV2
+                                        variant="outline"
+                                        class="w-full"
+                                        onClick={unshareSession}
+                                        disabled={unshareMutation.isPending}
+                                      >
+                                        {unshareMutation.isPending
+                                          ? language.t("session.share.action.unpublishing")
+                                          : language.t("session.share.action.unpublish")}
+                                      </ButtonV2>
+                                    </div>
+                                  </div>
+                                </Show>
+                              </div>
+                            </Show>
+                          </KobaltePopover.Content>
+                        </KobaltePopover.Portal>
+                      </KobaltePopover>
+                    </Show>
+                  </div>
+                )}
+              </Show>
+            </div>
+          </div>
+        </Show>
+        <div
+          data-timeline-virtual-content
+          ref={(element) => {
+            virtualContent = element
+            props.setContentRef(element)
+          }}
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+            position: "relative",
+            width: "100%",
+          }}
+        >
+          <For each={virtualRowKeys()}>{(rowKey) => <VirtualTimelineRow rowKey={rowKey} />}</For>
+          <Show when={timelineRows().length > 0}>
+            <div
+              data-timeline-row="bottom-spacer"
+              aria-hidden="true"
+              class="h-16 absolute top-0 left-0 w-full"
+              style={{ transform: `translateY(${virtualizer.getTotalSize() - 64}px)` }}
+            />
+          </Show>
+        </div>
+      </ScrollView>
+    </div>
+  )
+}