{
- 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,
- }}
- >
-
-
-
-
-
-
-
-
-
- /
-
-
-
-
-
- {childTitle()}
-
- }
- >
- {
- 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}
- />
-
-
-
-
-
- {(id) => (
-
-
-
- {
- setTitle("menuOpen", open)
- if (open) return
- }}
- >
- {
- more = el
- }}
- />
-
- {
- if (title.pendingRename) {
- event.preventDefault()
- setTitle("pendingRename", false)
- openTitleEditor()
- return
- }
- if (title.pendingShare) {
- event.preventDefault()
- requestAnimationFrame(() => {
- setShare({ open: true, dismiss: null })
- setTitle("pendingShare", false)
- })
- }
- }}
- >
- {
- setTitle("pendingRename", true)
- setTitle("menuOpen", false)
- }}
- >
- {language.t("common.rename")}
-
-
- {
- setTitle({ pendingShare: true, menuOpen: false })
- }}
- >
-
- {language.t("session.share.action.share")}
-
-
-
- void archiveSession(id)}>
- {language.t("common.archive")}
-
-
- dialog.show(() => )}
- >
- {language.t("common.delete")}
-
-
-
-
-
- more}
- placement="bottom-end"
- gutter={4}
- modal={false}
- onOpenChange={(open) => {
- if (open) setShare("dismiss", null)
- setShare("open", open)
- }}
- >
-
- {
- 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)
- }}
- >
-
-
-
- {language.t("session.share.popover.title")}
-
-
- {shareUrl()
- ? language.t("session.share.popover.description.shared")
- : language.t("session.share.popover.description.unshared")}
-
-
-
-
- {shareMutation.isPending
- ? language.t("session.share.action.publishing")
- : language.t("session.share.action.publish")}
-
- }
- >
-
-
-
-
-
-
-
-
-
+ const renderTimelineRow = (row: Accessor
) => {
+ switch (row()._tag) {
+ case "CommentStrip": {
+ const commentStripRow = row as Accessor>
+ const comments = createMemo(() =>
+ getMsgParts(commentStripRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? []),
+ )
+ return (
+
+
+
+ )
+ }
+ case "UserMessage": {
+ const userMessageRow = row as Accessor>
+ const message = createMemo(() => {
+ const m = messageByID().get(userMessageRow().userMessageID)
+ if (m?.role === "user") return m
+ })
+ return (
+
+
+ {(message) => (
+
+ )}
+
+
+ )
+ }
+ case "TurnDivider": {
+ const turnDividerRow = row as Accessor>
+ return (
+
+
+
+ )
+ }
+ case "AssistantPart": {
+ const assistantPartRow = row as Accessor>
+ return (
+
+
+
+ {renderAssistantPartGroup(assistantPartRow)}
+
+
+
+
+
+ )
+ }
+ case "Retry": {
+ const retryRow = row as Accessor>
+ return (
+
+
+
+
+
+ )
+ }
+ case "DiffSummary": {
+ const diffSummaryRow = row as Accessor>
+ return (
+
+
+
+
+
+ )
+ }
+ case "Error": {
+ const errorRow = row as Accessor>
+ return (
+
+
+
+ {errorRow().text}
+
+
+
+ )
+ }
+ case "BottomSpacer":
+ return
+ }
+ }
+
+ function TimelineRowView(props: { rowKey: string }) {
+ return (
+
+ {(item) => renderTimelineRow(item)}
+
+ )
+ }
+
+ return (
+
+
+
+
+ {
+ head = el
+ updateTitleMetrics()
+ }}
+ 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,
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ /
+
+
+
+
+
+ {childTitle()}
+
+ }
+ >
+ {
+ 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}
+ />
+
-
-
-
0 || props.historyMore}>
-
-
-
-
-
- {(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 (
-
-
0}>
-
-
-
+ {(id) => (
+
+
+
+ {
+ setTitle("menuOpen", open)
+ if (open) return
}}
- />
-
- )
- }}
-
+ >
+ {
+ more = el
+ }}
+ />
+
+ {
+ if (title.pendingRename) {
+ event.preventDefault()
+ setTitle("pendingRename", false)
+ openTitleEditor()
+ return
+ }
+ if (title.pendingShare) {
+ event.preventDefault()
+ requestAnimationFrame(() => {
+ setShare({ open: true, dismiss: null })
+ setTitle("pendingShare", false)
+ })
+ }
+ }}
+ >
+ {
+ setTitle("pendingRename", true)
+ setTitle("menuOpen", false)
+ }}
+ >
+ {language.t("common.rename")}
+
+
+ {
+ setTitle({ pendingShare: true, menuOpen: false })
+ }}
+ >
+
+ {language.t("session.share.action.share")}
+
+
+
+ void archiveSession(id)}>
+ {language.t("common.archive")}
+
+
+ dialog.show(() => )}
+ >
+ {language.t("common.delete")}
+
+
+
+
+
+ more}
+ placement="bottom-end"
+ gutter={4}
+ modal={false}
+ onOpenChange={(open) => {
+ if (open) setShare("dismiss", null)
+ setShare("open", open)
+ }}
+ >
+
+ {
+ 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)
+ }}
+ >
+
+
+
+ {language.t("session.share.popover.title")}
+
+
+ {shareUrl()
+ ? language.t("session.share.popover.description.shared")
+ : language.t("session.share.popover.description.unshared")}
+
+
+
+
+ {shareMutation.isPending
+ ? language.t("session.share.action.publishing")
+ : language.t("session.share.action.publish")}
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+ {(root) => (
+ {
+ if (!handle) {
+ writeTimelineCache(virtualizerSessionKey, virtualizerRowKeys, virtualizer)
+ virtualizer = undefined
+ return
+ }
+ virtualizer = handle
+ virtualizerSessionKey = cacheSessionKey
+ virtualizerRowKeys = cacheRowKeys
+ maybeAnchorBottom()
+ scheduleContentRoot(root())
+ }}
+ >
+ {(key) => }
+
+ )}
+
+
)
}
diff --git a/packages/app/src/pages/session/use-session-hash-scroll.ts b/packages/app/src/pages/session/use-session-hash-scroll.ts
index c582749d1c..65577abae2 100644
--- a/packages/app/src/pages/session/use-session-hash-scroll.ts
+++ b/packages/app/src/pages/session/use-session-hash-scroll.ts
@@ -11,21 +11,19 @@ export const useSessionHashScroll = (input: {
historyMore: () => boolean
historyLoading: () => boolean
loadMore: (sessionID: string) => Promise
- turnStart: () => number
currentMessageId: () => string | undefined
pendingMessage: () => string | undefined
setPendingMessage: (value: string | undefined) => void
setActiveMessage: (message: UserMessage | undefined) => void
- setTurnStart: (value: number) => void
autoScroll: { pause: () => void; forceScrollToBottom: () => void }
scroller: () => HTMLDivElement | undefined
anchor: (id: string) => string
+ revealMessage?: (id: string) => void
scheduleScrollState: (el: HTMLDivElement) => void
consumePendingMessage: (key: string) => string | undefined
}) => {
const visibleUserMessages = createMemo(() => input.visibleUserMessages())
const messageById = createMemo(() => new Map(visibleUserMessages().map((m) => [m.id, m])))
- const messageIndex = createMemo(() => new Map(visibleUserMessages().map((m, i) => [m.id, i])))
let pendingKey = ""
let clearing = false
@@ -77,6 +75,7 @@ export const useSessionHashScroll = (input: {
}
const seek = (id: string, behavior: ScrollBehavior, left = 4): boolean => {
+ input.revealMessage?.(id)
const el = document.getElementById(input.anchor(id))
if (el) return scrollToElement(el, behavior)
if (left <= 0) return false
@@ -89,18 +88,7 @@ export const useSessionHashScroll = (input: {
const scrollToMessage = (message: UserMessage, behavior: ScrollBehavior = "smooth") => {
cancel()
if (input.currentMessageId() !== message.id) input.setActiveMessage(message)
-
- const index = messageIndex().get(message.id) ?? -1
- if (index !== -1 && index < input.turnStart()) {
- input.setTurnStart(index)
-
- queue(() => {
- seek(message.id, behavior)
- })
-
- updateHash(message.id)
- return
- }
+ input.revealMessage?.(message.id)
if (seek(message.id, behavior)) {
updateHash(message.id)
@@ -154,7 +142,6 @@ export const useSessionHashScroll = (input: {
if (!input.sessionID() || !input.messagesReady()) return
visibleUserMessages()
- input.turnStart()
let targetId = input.pendingMessage()
if (!targetId) {
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 28e2f86ba5..a335aa3b77 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -6,6 +6,7 @@
"exports": {
"./package.json": "./package.json",
"./*": "./src/components/*.tsx",
+ "./session-diff": "./src/components/session-diff.ts",
"./i18n/*": "./src/i18n/*.ts",
"./pierre": "./src/pierre/index.ts",
"./pierre/*": "./src/pierre/*.ts",
diff --git a/packages/ui/src/components/basic-tool.tsx b/packages/ui/src/components/basic-tool.tsx
index 27ad7c3c70..cb9f9b17fe 100644
--- a/packages/ui/src/components/basic-tool.tsx
+++ b/packages/ui/src/components/basic-tool.tsx
@@ -1,4 +1,4 @@
-import { createEffect, For, Match, on, onCleanup, Show, Switch, type JSX } from "solid-js"
+import { createEffect, For, Match, on, onCleanup, onMount, Show, Switch, type JSX } from "solid-js"
import { animate, type AnimationPlaybackControls } from "motion"
import { useI18n } from "../context/i18n"
import { createStore } from "solid-js/store"
@@ -40,26 +40,76 @@ export interface BasicToolProps {
}
const SPRING = { type: "spring" as const, visualDuration: 0.35, bounce: 0 }
+const deferredMounts: Array<{ active: boolean; fn: () => void }> = []
+let deferredFrame: number | undefined
+
+function flushDeferredMounts() {
+ while (deferredMounts.length > 0) {
+ // Timeline tools are mounted top-to-bottom, but the viewport starts at the latest turn.
+ // Pop from the end so heavy default-open bodies near the bottom become interactive first.
+ const item = deferredMounts.pop()!
+ if (item.active) {
+ deferredFrame = deferredMounts.length > 0 ? requestAnimationFrame(flushDeferredMounts) : undefined
+ item.fn()
+ return
+ }
+ }
+ deferredFrame = undefined
+}
+
+function scheduleDeferredFlush() {
+ if (deferredFrame !== undefined) return
+ deferredFrame = requestAnimationFrame(() => {
+ deferredFrame = requestAnimationFrame(flushDeferredMounts)
+ })
+}
+
+function scheduleDeferredMount(fn: () => void) {
+ const item = { active: true, fn }
+ deferredMounts.push(item)
+ scheduleDeferredFlush()
+ return () => {
+ item.active = false
+ }
+}
+
+function scheduleFrameMount(fn: () => void) {
+ const frame = requestAnimationFrame(fn)
+ return () => cancelAnimationFrame(frame)
+}
export function BasicTool(props: BasicToolProps) {
const [state, setState] = createStore({
open: props.defaultOpen ?? false,
- ready: props.defaultOpen ?? false,
+ ready: !props.defer && (props.defaultOpen ?? false),
})
const open = () => state.open
const ready = () => state.ready
const pending = () => props.status === "pending" || props.status === "running"
+ const hasChildren = () => (props.defer ? "children" in props : props.children)
- let frame: number | undefined
+ let cancelReady: (() => void) | undefined
const cancel = () => {
- if (frame === undefined) return
- cancelAnimationFrame(frame)
- frame = undefined
+ cancelReady?.()
+ cancelReady = undefined
+ }
+
+ const scheduleReady = (initial = false) => {
+ cancel()
+ cancelReady = (initial ? scheduleDeferredMount : scheduleFrameMount)(() => {
+ cancelReady = undefined
+ if (!open()) return
+ setState("ready", true)
+ })
}
onCleanup(cancel)
+ onMount(() => {
+ if (props.defer && open()) scheduleReady(true)
+ })
+
createEffect(() => {
if (props.forceOpen) setState("open", true)
})
@@ -75,12 +125,7 @@ export function BasicTool(props: BasicToolProps) {
return
}
- cancel()
- frame = requestAnimationFrame(() => {
- frame = undefined
- if (!open()) return
- setState("ready", true)
- })
+ scheduleReady()
},
{ defer: true },
),
@@ -189,7 +234,7 @@ export function BasicTool(props: BasicToolProps) {
@@ -219,7 +264,7 @@ export function BasicTool(props: BasicToolProps) {
)}
-
+
- {props.children}
+ {props.children}
-
+
{props.children}
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 94da6cc669..07b8022abe 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -150,6 +150,7 @@ export interface MessagePartProps {
message: MessageType
hideDetails?: boolean
defaultOpen?: boolean
+ deferToolContent?: boolean
showAssistantCopyPartID?: string | null
turnDurationMs?: number
}
@@ -486,12 +487,12 @@ function same(a: readonly T[] | undefined, b: readonly T[] | undefined) {
return a.every((x, i) => x === b[i])
}
-type PartRef = {
+export type PartRef = {
messageID: string
partID: string
}
-type PartGroup =
+export type PartGroup =
| {
key: string
type: "part"
@@ -520,14 +521,14 @@ function sameGroup(a: PartGroup, b: PartGroup) {
return a.refs.every((ref, i) => sameRef(ref, b.refs[i]!))
}
-function sameGroups(a: readonly PartGroup[] | undefined, b: readonly PartGroup[] | undefined) {
+export function sameGroups(a: readonly PartGroup[] | undefined, b: readonly PartGroup[] | undefined) {
if (a === b) return true
if (!a || !b) return false
if (a.length !== b.length) return false
return a.every((item, i) => sameGroup(item, b[i]!))
}
-function groupParts(parts: { messageID: string; part: PartType }[]) {
+export function groupParts(parts: { messageID: string; part: PartType }[]) {
const result: PartGroup[] = []
let start = -1
@@ -575,7 +576,7 @@ function index(items: readonly T[]) {
return new Map(items.map((item) => [item.id, item] as const))
}
-function renderable(part: PartType, showReasoningSummaries = true) {
+export function renderable(part: PartType, showReasoningSummaries = true) {
if (part.type === "tool") {
if (HIDDEN_TOOLS.has(part.tool)) return false
if (part.tool === "question") return part.state.status !== "pending" && part.state.status !== "running"
@@ -591,7 +592,7 @@ function toolDefaultOpen(tool: string, shell = false, edit = false) {
if (tool === "edit" || tool === "write" || tool === "apply_patch") return edit
}
-function partDefaultOpen(part: PartType, shell = false, edit = false) {
+export function partDefaultOpen(part: PartType, shell = false, edit = false) {
if (part.type !== "tool") return
return toolDefaultOpen(part.tool, shell, edit)
}
@@ -904,7 +905,7 @@ export function AssistantMessageDisplay(props: {
)
}
-function ContextToolGroup(props: { parts: ToolPart[]; busy?: boolean }) {
+export function ContextToolGroup(props: { parts: ToolPart[]; busy?: boolean }) {
const i18n = useI18n()
const [open, setOpen] = createSignal(false)
const pending = createMemo(
@@ -914,7 +915,13 @@ function ContextToolGroup(props: { parts: ToolPart[]; busy?: boolean }) {
const summary = createMemo(() => contextToolSummary(props.parts))
return (
-
+ part.id).join(",")}
+ >
+
0}>
@@ -1228,6 +1235,7 @@ export function Part(props: MessagePartProps) {
message={props.message}
hideDetails={props.hideDetails}
defaultOpen={props.defaultOpen}
+ deferToolContent={props.deferToolContent}
showAssistantCopyPartID={props.showAssistantCopyPartID}
turnDurationMs={props.turnDurationMs}
/>
@@ -1244,6 +1252,7 @@ export interface ToolProps {
status?: string
hideDetails?: boolean
defaultOpen?: boolean
+ deferContent?: boolean
forceOpen?: boolean
locked?: boolean
}
@@ -1344,7 +1353,7 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
return (
-
+
{(error) => {
@@ -1382,6 +1391,7 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
status={part().state.status}
hideDetails={props.hideDetails}
defaultOpen={props.defaultOpen}
+ deferContent={props.deferToolContent}
/>
@@ -1487,7 +1497,7 @@ PART_MAPPING["text"] = function TextPartDisplay(props) {
return (
-
+
}>
@@ -1531,7 +1541,7 @@ PART_MAPPING["reasoning"] = function ReasoningPartDisplay(props) {
return (
-
+
}>
@@ -1913,7 +1923,7 @@ ToolRegistry.register({
@@ -1974,7 +1984,7 @@ ToolRegistry.register({
@@ -2056,7 +2066,7 @@ ToolRegistry.register({
-
+