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

feat(app): make session timelines much faster AND without flicker or scroll jumps (#32331)

Browse source
This commit is contained in:
Luke Parker 2026-06-16 18:53:57 +02:00 • committed by GitHub
commit 3b811bd019
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
49 changed files with 2824 additions and 845 deletions
Download patch file Download diff file Expand all files Collapse all files

93
packages/ui/src/components/markdown-stream.ts
View file

@ -4,11 +4,28 @@ import remend from "remend"
export type Block = {
raw: string
src: string
mode: "full" | "live"
mode: "full" | "live" | "code"
language?: string
complete?: boolean
}
export type Projection = {
text: string
blocks: Block[]
}
function refs(text: string) {
return /^\[[^\]]+\]:\s+\S+/m.test(text) || /^\[\^[^\]]+\]:\s+/m.test(text)
if (!text.includes("]:")) return false
return /^[ \t]{0,3}\[[^\]]+\]:[ \t]*(?:\S+|\r?\n[ \t]+\S+)/m.test(text)
}
function language(value: string | undefined) {
return value?.trim().split(/\s+/, 1)[0] || undefined
}
function openCode(raw: string) {
const newline = raw.indexOf("\n")
return newline < 0 ? "" : raw.slice(newline + 1)
}
function open(raw: string) {
@ -22,28 +39,72 @@ function open(raw: string) {
return !new RegExp(`^[\\t ]{0,3}${char}{${size},}[\\t ]*$`).test(last)
}
function closesFence(raw: string, suffix: string) {
const mark = raw.match(/^[ \t]{0,3}(`{3,}|~{3,})/)?.[1]
if (!mark) return suffix.includes("```") || suffix.includes("~~~")
return `${raw.slice(-(mark.length - 1))}${suffix}`.includes(mark)
}
function heal(text: string) {
return remend(text, { linkMode: "text-only" })
}
export function stream(text: string, live: boolean) {
export function stream(text: string, live: boolean): Block[] {
if (!live) return [{ raw: text, src: text, mode: "full" }] satisfies Block[]
const src = heal(text)
if (refs(text)) return [{ raw: text, src, mode: "live" }] satisfies Block[]
if (refs(text)) return [{ raw: text, src: heal(text), mode: "live" }] satisfies Block[]
const tokens = marked.lexer(text)
const tail = tokens.findLastIndex((token) => token.type !== "space")
if (tail < 0) return [{ raw: text, src, mode: "live" }] satisfies Block[]
if (tail < 0) return [{ raw: text, src: heal(text), mode: "live" }] satisfies Block[]
const last = tokens[tail]
if (!last || last.type !== "code") return [{ raw: text, src, mode: "live" }] satisfies Block[]
const code = last as Tokens.Code
if (!open(code.raw)) return [{ raw: text, src, mode: "live" }] satisfies Block[]
const head = tokens
.slice(0, tail)
if (!last) return [{ raw: text, src: heal(text), mode: "live" }] satisfies Block[]
const result: Block[] = []
for (let index = 0; index < tail; index++) {
const token = tokens[index]
if (!token || token.type === "space") continue
let raw = token.raw
while (tokens[index + 1]?.type === "space" && index + 1 < tail) raw += tokens[++index]!.raw
if (token.type === "code") {
const code = token as Tokens.Code
result.push({ raw, src: code.text, mode: "code", language: language(code.lang), complete: true })
continue
}
result.push({ raw, src: raw, mode: "full" })
}
const raw = tokens
.slice(tail)
.map((token) => token.raw)
.join("")
if (!head) return [{ raw: code.raw, src: code.raw, mode: "live" }] satisfies Block[]
return [
{ raw: head, src: heal(head), mode: "live" },
{ raw: code.raw, src: code.raw, mode: "live" },
] satisfies Block[]
if (last.type !== "code") return [...result, { raw, src: heal(raw), mode: "live" }]
const code = last as Tokens.Code
if (!open(code.raw))
return [...result, { raw, src: code.text, mode: "code", language: language(code.lang), complete: true }]
return [...result, { raw, src: openCode(code.raw), mode: "code", language: language(code.lang) }]
}
export function canReusePendingBlock(current: Pick<Block, "mode" | "raw"> | undefined, next: Block) {
if (!current || current.mode !== next.mode) return false
if (next.mode === "code") return next.raw.startsWith(current.raw)
return current.raw === next.raw
}
export function project(previous: Projection | undefined, text: string, live: boolean): Projection {
if (!live || !previous || !text.startsWith(previous.text)) return { text, blocks: stream(text, live) }
const tail = previous.blocks.at(-1)
const suffix = text.slice(previous.text.length)
if (!suffix || tail?.mode !== "code" || tail.complete || closesFence(tail.raw, suffix))
return { text, blocks: stream(text, live) }
return {
text,
blocks: [
...previous.blocks.slice(0, -1),
{
...tail,
raw: tail.raw + suffix,
src: tail.src + suffix,
},
],
}
}