ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: defer timeline diff rendering

Browse source
This commit is contained in:
LukeParkerDev 2026-05-14 09:59:28 +10:00
commit 3fd1bddca1
1 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

20
packages/app/src/pages/session/message-timeline.tsx
View file

@ -360,7 +360,6 @@ function TimelineThinkingRow(props: { reasoningHeading?: string; showReasoningSu
function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) { function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
const language = useLanguage() const language = useLanguage()
const fileComponent = useFileComponent()
const maxFiles = 10 const maxFiles = 10
const [state, setState] = createStore({ const [state, setState] = createStore({
showAll: false, showAll: false,
@ -394,7 +393,7 @@ function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
> >
<For each={visible()}> <For each={visible()}>
{(diff) => { {(diff) => {
const view = normalize(diff) const opened = createMemo(() => expanded().includes(diff.file))
return ( return (
<Accordion.Item value={diff.file}> <Accordion.Item value={diff.file}>
@ -419,9 +418,9 @@ function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
</Accordion.Trigger> </Accordion.Trigger>
</StickyAccordionHeader> </StickyAccordionHeader>
<Accordion.Content> <Accordion.Content>
<div data-slot="session-turn-diff-view" data-scrollable> <Show when={opened()}>
<Dynamic component={fileComponent} mode="diff" fileDiff={view.fileDiff} /> <TimelineDiffView diff={diff} />
</div> </Show>
</Accordion.Content> </Accordion.Content>
</Accordion.Item> </Accordion.Item>
) )
@ -438,6 +437,17 @@ function TimelineDiffSummaryRow(props: { diffs: SummaryDiff[] }) {
) )
} }
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" fileDiff={view.fileDiff} />
</div>
)
}
export function MessageTimeline(props: { export function MessageTimeline(props: {
mobileChanges: boolean mobileChanges: boolean
mobileFallback: JSX.Element mobileFallback: JSX.Element