@xincli/opentui-core 0.4.6 → 0.4.7

package/src/renderables/Code.test.ts

@@ -1,2388 +0,0 @@
-import { test, expect, beforeEach, afterEach } from "bun:test"
-import { CodeRenderable } from "./Code.js"
-import { SyntaxStyle } from "../syntax-style.js"
-import { RGBA } from "../lib/RGBA.js"
-import { createTestRenderer, type TestRenderer, MockTreeSitterClient, type MockMouse } from "../testing.js"
-import { ManualClock } from "../testing/manual-clock.js"
-import { TreeSitterClient } from "../lib/tree-sitter/index.js"
-import type { SimpleHighlight } from "../lib/tree-sitter/types.js"
-import { BoxRenderable } from "./Box.js"
-import { TextAttributes, type CapturedFrame } from "../types.js"
-
-let currentRenderer: TestRenderer
-let renderOnce: () => Promise<void>
-let captureFrame: () => string
-let captureSpans: () => CapturedFrame
-let mockMouse: MockMouse
-let resize: (width: number, height: number) => void
-let clock: ManualClock
-const HIGHLIGHT_TIMEOUT_MS = 5000
-
-function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => {
-    clock.setTimeout(resolve, ms)
-  })
-}
-
-async function flushAsync(): Promise<void> {
-  await Promise.resolve()
-  await Promise.resolve()
-}
-
-async function waitForClock(ms: number): Promise<void> {
-  const wait = sleep(ms)
-  clock.advance(ms)
-  await wait
-  await flushAsync()
-}
-
-async function waitForHighlight(codeRenderable: CodeRenderable, delayMs: number = 0): Promise<void> {
-  if (delayMs > 0) {
-    await waitForClock(delayMs)
-  } else {
-    await flushAsync()
-  }
-
-  let timeoutId: ReturnType<typeof setTimeout> | undefined
-  try {
-    await Promise.race([
-      codeRenderable.highlightingDone,
-      new Promise<never>((_, reject) => {
-        timeoutId = setTimeout(
-          () => reject(new Error("Timed out waiting for CodeRenderable highlighting")),
-          HIGHLIGHT_TIMEOUT_MS,
-        )
-      }),
-    ])
-  } finally {
-    if (timeoutId !== undefined) {
-      clearTimeout(timeoutId)
-    }
-  }
-
-  await flushAsync()
-}
-
-beforeEach(async () => {
-  clock = new ManualClock()
-  const testRenderer = await createTestRenderer({ width: 80, height: 24 })
-  currentRenderer = testRenderer.renderer
-  renderOnce = testRenderer.renderOnce
-  captureFrame = testRenderer.captureCharFrame
-  captureSpans = testRenderer.captureSpans
-  mockMouse = testRenderer.mockMouse
-  resize = testRenderer.resize
-})
-
-function findSpanContaining(frame: CapturedFrame, text: string) {
-  for (const line of frame.lines) {
-    const span = line.spans.find((candidate) => candidate.text.includes(text))
-    if (span) return span
-  }
-}
-
-async function resolveMockHighlights(codeRenderable: CodeRenderable, mockClient: MockTreeSitterClient): Promise<void> {
-  await renderOnce()
-  mockClient.resolveAllHighlightOnce()
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-}
-
-afterEach(async () => {
-  if (currentRenderer) {
-    currentRenderer.destroy()
-  }
-})
-
-test("CodeRenderable - basic construction", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-    string: { fg: RGBA.fromValues(0, 1, 0, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: 'const message = "Hello, world!";',
-    filetype: "javascript",
-    syntaxStyle,
-    conceal: false,
-  })
-
-  expect(codeRenderable.content).toBe('const message = "Hello, world!";')
-  expect(codeRenderable.filetype).toBe("javascript")
-  expect(codeRenderable.syntaxStyle).toBe(syntaxStyle)
-  expect(codeRenderable.baseHighlight).toBeUndefined()
-})
-
-test("CodeRenderable - content updates", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "original content",
-    filetype: "javascript",
-    syntaxStyle,
-    conceal: false,
-  })
-
-  expect(codeRenderable.content).toBe("original content")
-
-  codeRenderable.content = "updated content"
-  expect(codeRenderable.content).toBe("updated content")
-})
-
-test("CodeRenderable - filetype updates", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "console.log('test');",
-    filetype: "javascript",
-    syntaxStyle,
-    conceal: false,
-  })
-
-  expect(codeRenderable.filetype).toBe("javascript")
-
-  codeRenderable.filetype = "typescript"
-  expect(codeRenderable.filetype).toBe("typescript")
-})
-
-test("CodeRenderable - re-highlights when content changes during active highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [
-      [0, 5, "keyword"],
-      [6, 13, "identifier"],
-    ] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  codeRenderable.content = "let newMessage = 'world';"
-
-  expect(codeRenderable.content).toBe("let newMessage = 'world';")
-
-  await renderOnce()
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await flushAsync()
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  expect(mockClient.isHighlighting()).toBe(false)
-})
-
-test("CodeRenderable - multiple content changes during highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "original content",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  codeRenderable.content = "first change"
-  codeRenderable.content = "second change"
-  codeRenderable.content = "final content"
-
-  expect(codeRenderable.content).toBe("final content")
-
-  await renderOnce()
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-
-  await flushAsync()
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  expect(mockClient.isHighlighting()).toBe(false)
-})
-
-test("CodeRenderable - uses fallback rendering when no filetype provided", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello world';",
-    syntaxStyle,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("const message = 'hello world';")
-  expect(codeRenderable.filetype).toBeUndefined()
-  expect(codeRenderable.plainText).toBe("const message = 'hello world';")
-})
-
-test("CodeRenderable - uses fallback rendering when highlighting throws error", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-
-  mockClient.highlightOnce = async () => {
-    throw new Error("Highlighting failed")
-  }
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello world';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("const message = 'hello world';")
-  expect(codeRenderable.filetype).toBe("javascript")
-  expect(codeRenderable.plainText).toBe("const message = 'hello world';")
-})
-
-test("CodeRenderable - handles empty content", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "",
-    filetype: "javascript",
-    syntaxStyle,
-    conceal: false,
-  })
-
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("")
-  expect(codeRenderable.filetype).toBe("javascript")
-  expect(codeRenderable.plainText).toBe("")
-})
-
-test("CodeRenderable - empty content does not trigger highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("const message = 'hello';")
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-
-  codeRenderable.content = ""
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(false)
-  expect(codeRenderable.content).toBe("")
-})
-
-test("CodeRenderable - text renders immediately before highlighting completes", async () => {
-  resize(32, 2)
-
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [
-      [0, 5, "keyword"],
-      [6, 13, "identifier"],
-    ] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello world';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  const frameBeforeHighlighting = captureFrame()
-  expect(frameBeforeHighlighting).toMatchSnapshot("text visible before highlighting completes")
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  const frameAfterHighlighting = captureFrame()
-  expect(frameAfterHighlighting).toMatchSnapshot("text visible after highlighting completes")
-})
-
-test("CodeRenderable - batches concurrent content and filetype updates", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  let highlightCount = 0
-  const mockClient = new MockTreeSitterClient()
-  const originalHighlightOnce = mockClient.highlightOnce.bind(mockClient)
-
-  mockClient.highlightOnce = async (content: string, filetype: string) => {
-    highlightCount++
-    return originalHighlightOnce(content, filetype)
-  }
-
-  mockClient.setMockResult({
-    highlights: [[0, 3, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  highlightCount = 0
-
-  codeRenderable.content = "let newMessage = 'world';"
-  codeRenderable.filetype = "typescript"
-
-  await renderOnce()
-
-  mockClient.resolveAllHighlightOnce()
-  await waitForHighlight(codeRenderable)
-
-  expect(highlightCount).toBe(1)
-  expect(codeRenderable.content).toBe("let newMessage = 'world';")
-  expect(codeRenderable.filetype).toBe("typescript")
-})
-
-test("CodeRenderable - batches multiple updates in same tick into single highlight", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  let highlightCount = 0
-  const highlightCalls: Array<{ content: string; filetype: string }> = []
-  const mockClient = new MockTreeSitterClient()
-  const originalHighlightOnce = mockClient.highlightOnce.bind(mockClient)
-
-  mockClient.highlightOnce = async (content: string, filetype: string) => {
-    highlightCount++
-    highlightCalls.push({ content, filetype })
-    return originalHighlightOnce(content, filetype)
-  }
-
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "initial",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  highlightCount = 0
-  highlightCalls.length = 0
-
-  codeRenderable.content = "first content change"
-  codeRenderable.filetype = "typescript"
-  codeRenderable.content = "second content change"
-
-  await renderOnce()
-
-  mockClient.resolveAllHighlightOnce()
-  await waitForHighlight(codeRenderable)
-
-  expect(highlightCount).toBe(1)
-  expect(highlightCalls[0]?.content).toBe("second content change")
-  expect(highlightCalls[0]?.filetype).toBe("typescript")
-})
-
-test("CodeRenderable - renders markdown with TypeScript injection correctly", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(1, 0, 0, 1) }, // Red
-    string: { fg: RGBA.fromValues(0, 1, 0, 1) }, // Green
-    "markup.heading.1": { fg: RGBA.fromValues(0, 0, 1, 1) }, // Blue
-  })
-
-  const markdownCode = `# Hello\n\n\`\`\`typescript\nconst msg: string = "hi";\n\`\`\``
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-markdown",
-    content: markdownCode,
-    filetype: "markdown",
-    syntaxStyle,
-    conceal: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toContain("# Hello")
-  expect(codeRenderable.plainText).toContain("const msg")
-  expect(codeRenderable.plainText).toContain("typescript")
-})
-
-test("CodeRenderable - continues highlighting after unresolved promise", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  let highlightCount = 0
-  const pendingPromises: Array<{ content: string; filetype: string; never: boolean }> = []
-
-  class HangingMockClient extends TreeSitterClient {
-    constructor() {
-      super({ dataPath: "/tmp/mock" }, { autoStartWorker: false })
-    }
-
-    async highlightOnce(
-      content: string,
-      filetype: string,
-    ): Promise<{ highlights?: SimpleHighlight[]; warning?: string; error?: string }> {
-      highlightCount++
-
-      const shouldHang = highlightCount === 4 && filetype === "typescript"
-
-      pendingPromises.push({ content, filetype, never: shouldHang })
-
-      if (shouldHang) {
-        return new Promise(() => {})
-      }
-
-      return Promise.resolve({ highlights: [] })
-    }
-  }
-
-  const mockClient = new HangingMockClient()
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "interface User { name: string; }",
-    filetype: "typescript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-  await waitForHighlight(codeRenderable)
-
-  highlightCount = 0
-  pendingPromises.length = 0
-
-  codeRenderable.content = "const message = 'hello';"
-  codeRenderable.filetype = "javascript"
-  await renderOnce()
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.content = "# Documentation"
-  codeRenderable.filetype = "markdown"
-  await renderOnce()
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.content = "const message = 'world';"
-  codeRenderable.filetype = "javascript"
-  await renderOnce()
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.content = "interface User { name: string; }"
-  codeRenderable.filetype = "typescript"
-  await renderOnce()
-  await flushAsync()
-
-  codeRenderable.content = "# New Documentation"
-  codeRenderable.filetype = "markdown"
-  await renderOnce()
-  await waitForHighlight(codeRenderable)
-
-  const markdownHighlightHappened = pendingPromises.some(
-    (p) => p.content === "# New Documentation" && p.filetype === "markdown",
-  )
-
-  expect(codeRenderable.content).toBe("# New Documentation")
-  expect(codeRenderable.filetype).toBe("markdown")
-  expect(markdownHighlightHappened).toBe(true)
-  expect(highlightCount).toBe(5)
-})
-
-test("CodeRenderable - concealment is enabled by default", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-  })
-
-  expect(codeRenderable.conceal).toBe(true)
-})
-
-test("CodeRenderable - concealment can be disabled explicitly", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    conceal: false,
-  })
-
-  expect(codeRenderable.conceal).toBe(false)
-})
-
-test("CodeRenderable - applies concealment to styled text", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: true,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  expect(codeRenderable.conceal).toBe(true)
-
-  await renderOnce()
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("const message = 'hello';")
-})
-
-test("CodeRenderable - updating conceal triggers re-highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.conceal).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.conceal = false
-  expect(codeRenderable.conceal).toBe(false)
-
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-})
-
-test("CodeRenderable - drawUnstyledText is true by default", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-  })
-
-  expect(codeRenderable.drawUnstyledText).toBe(true)
-})
-
-test("CodeRenderable - drawUnstyledText can be set to false", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    drawUnstyledText: false,
-  })
-
-  expect(codeRenderable.drawUnstyledText).toBe(false)
-})
-
-test("CodeRenderable - with drawUnstyledText=true, text renders before highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: true,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-})
-
-test("CodeRenderable - with drawUnstyledText=false, text does not render before highlighting but lineCount is correct", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  // Text buffer has content (for lineCount), but nothing renders yet
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-  expect(codeRenderable.lineCount).toBe(1)
-  const frameBeforeHighlighting = captureFrame()
-  expect(frameBeforeHighlighting.trim()).toBe("")
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-  const frameAfterHighlighting = captureFrame()
-  expect(frameAfterHighlighting).toContain("const message")
-})
-
-test("CodeRenderable - updating drawUnstyledText from false to true triggers re-highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  expect(codeRenderable.drawUnstyledText).toBe(false)
-
-  await renderOnce()
-  // Text buffer has content for lineCount, but we can verify nothing renders
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-  expect(codeRenderable.lineCount).toBe(1)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.drawUnstyledText = true
-  expect(codeRenderable.drawUnstyledText).toBe(true)
-
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(false)
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-})
-
-test("CodeRenderable - updating drawUnstyledText from true to false triggers re-highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.drawUnstyledText).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.drawUnstyledText = false
-  expect(codeRenderable.drawUnstyledText).toBe(false)
-
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-})
-
-test("CodeRenderable - uses fallback rendering on error even with drawUnstyledText=false", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-
-  mockClient.highlightOnce = async () => {
-    throw new Error("Highlighting failed")
-  }
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello world';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("const message = 'hello world';")
-})
-
-test("CodeRenderable - with drawUnstyledText=false and no filetype, fallback is used", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello world';",
-    syntaxStyle,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  await renderOnce()
-
-  expect(codeRenderable.filetype).toBeUndefined()
-  expect(codeRenderable.plainText).toBe("const message = 'hello world';")
-})
-
-test("CodeRenderable - with drawUnstyledText=false, multiple updates only render final highlighted text", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 3, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  // Text buffer has content (for lineCount), but nothing renders yet
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-  expect(codeRenderable.lineCount).toBe(1)
-  const frameBeforeHighlighting = captureFrame()
-  expect(frameBeforeHighlighting.trim()).toBe("")
-
-  codeRenderable.content = "let newMessage = 'world';"
-  await renderOnce()
-
-  // Text buffer updated immediately, but still no rendering
-  expect(codeRenderable.plainText).toBe("let newMessage = 'world';")
-  expect(codeRenderable.lineCount).toBe(1)
-  const frameAfterUpdate = captureFrame()
-  expect(frameAfterUpdate.trim()).toBe("")
-
-  mockClient.resolveAllHighlightOnce()
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-  await flushAsync()
-
-  expect(mockClient.isHighlighting()).toBe(false)
-  expect(codeRenderable.plainText).toBe("let newMessage = 'world';")
-  const frameAfterHighlighting = captureFrame()
-  expect(frameAfterHighlighting).toContain("let newMessage")
-})
-
-// TODO: flaky in CI because it needs to finish in time
-// lib/tree-sitter/client.ts needs a way to check if the queue is empty
-// then this can wait for all tree-sitter operations to complete
-// instead of the arbitrary 500ms wait
-// it worked before because text was set anyway for drawUnstyledText=false
-test.skip("CodeRenderable - simulates markdown stream from LLM with async updates", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-    string: { fg: RGBA.fromValues(0, 1, 0, 1) },
-    "markup.heading.1": { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  // Base markdown content that we'll repeat to grow to ~1MB
-  const baseMarkdownContent = `# Code Example
-
-Here's a simple TypeScript function:
-
-\`\`\`typescript
-function greet(name: string): string {
-  return \`Hello, \${name}!\`;
-}
-
-const message = greet("World");
-console.log(message);
-\`\`\`
-`
-
-  const targetSize = 64 * 128
-  let fullMarkdownContent = ""
-  let iteration = 0
-  while (fullMarkdownContent.length < targetSize) {
-    fullMarkdownContent += `\n--- Iteration ${iteration} ---\n\n` + baseMarkdownContent
-    iteration++
-  }
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-markdown-stream",
-    content: "",
-    filetype: "markdown",
-    syntaxStyle,
-    conceal: false,
-    left: 0,
-    top: 0,
-    drawUnstyledText: false,
-  })
-  await codeRenderable.treeSitterClient.initialize()
-  await codeRenderable.treeSitterClient.preloadParser("markdown")
-
-  currentRenderer.root.add(codeRenderable)
-  currentRenderer.start()
-
-  let currentContent = ""
-
-  const chunkSize = 64
-  const chunks: string[] = []
-  for (let i = 0; i < fullMarkdownContent.length; i += chunkSize) {
-    chunks.push(fullMarkdownContent.slice(i, Math.min(i + chunkSize, fullMarkdownContent.length)))
-  }
-
-  for (let i = 0; i < chunks.length; i++) {
-    const chunk = chunks[i]
-    currentContent += chunk
-    codeRenderable.content = currentContent
-    await waitForClock(Math.floor(Math.random() * 25) + 1)
-  }
-
-  // wait for highlighting to complete (long for slow machines/CI)
-  await waitForHighlight(codeRenderable)
-
-  expect(codeRenderable.content).toBe(fullMarkdownContent)
-  expect(codeRenderable.content.length).toBeGreaterThanOrEqual(targetSize)
-  expect(codeRenderable.plainText).toContain("# Code Example")
-  expect(codeRenderable.plainText).toContain("function greet")
-  expect(codeRenderable.plainText).toContain("typescript")
-  expect(codeRenderable.plainText).toContain("Hello")
-
-  const plainText = codeRenderable.plainText
-  expect(plainText.length).toBeGreaterThan(targetSize * 0.9)
-  expect(plainText).toContain("Code Example")
-  expect(plainText).toContain("const message = greet")
-})
-
-test("CodeRenderable - streaming option is false by default", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-  })
-
-  expect(codeRenderable.streaming).toBe(false)
-})
-
-test("CodeRenderable - streaming can be enabled", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    streaming: true,
-  })
-
-  expect(codeRenderable.streaming).toBe(true)
-})
-
-test("CodeRenderable - streaming mode respects drawUnstyledText only for initial content", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const initial = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    drawUnstyledText: true,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  await renderOnce()
-  expect(codeRenderable.plainText).toBe("const initial = 'hello';")
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.content = "const updated = 'world';"
-  await flushAsync()
-
-  expect(codeRenderable.content).toBe("const updated = 'world';")
-})
-
-test("CodeRenderable - streaming mode with drawUnstyledText=false waits for new highlights", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient({ autoResolveTimeout: 10, clock })
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const initial = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-  await waitForHighlight(codeRenderable, 30)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("const initial = 'hello';")
-
-  codeRenderable.content = "const updated = 'world';"
-  expect(codeRenderable.plainText).toBe("const initial = 'hello';")
-
-  await renderOnce()
-  await waitForHighlight(codeRenderable, 30)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("const updated = 'world';")
-})
-
-test("CodeRenderable - onChunks callback can transform chunks when highlights are empty", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  let callbackInvoked = false
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "hello",
-    filetype: "plaintext",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    onChunks: (chunks) => {
-      callbackInvoked = true
-      return chunks.map((chunk) => ({
-        ...chunk,
-        text: chunk.text.toUpperCase(),
-      }))
-    },
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(callbackInvoked).toBe(true)
-  expect(codeRenderable.plainText).toBe("HELLO")
-})
-
-test("CodeRenderable - baseHighlight applies a style when parser highlights are empty", async () => {
-  const quoteColor = RGBA.fromValues(0.25, 0.5, 0.75, 1)
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    "markup.quote": { fg: quoteColor, italic: true },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code-base-highlight-empty",
-    content: "hello world",
-    filetype: "plaintext",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    baseHighlight: "markup.quote",
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-
-  const span = findSpanContaining(captureSpans(), "hello world")
-  expect(span?.fg?.toInts()).toEqual(quoteColor.toInts())
-  expect((span?.attributes ?? 0) & TextAttributes.ITALIC).toBe(TextAttributes.ITALIC)
-})
-
-test("CodeRenderable - parser highlights override baseHighlight properties and inherit unspecified ones", async () => {
-  const quoteColor = RGBA.fromValues(0.25, 0.5, 0.75, 1)
-  const keywordColor = RGBA.fromValues(1, 0, 0, 1)
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    "markup.quote": { fg: quoteColor, italic: true },
-    keyword: { fg: keywordColor },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code-base-highlight-precedence",
-    content: "const value",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    baseHighlight: "markup.quote",
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-
-  const keywordSpan = findSpanContaining(captureSpans(), "const")
-  expect(keywordSpan?.fg?.toInts()).toEqual(keywordColor.toInts())
-  expect((keywordSpan?.attributes ?? 0) & TextAttributes.ITALIC).toBe(TextAttributes.ITALIC)
-
-  const baseSpan = findSpanContaining(captureSpans(), "value")
-  expect(baseSpan?.fg?.toInts()).toEqual(quoteColor.toInts())
-  expect((baseSpan?.attributes ?? 0) & TextAttributes.ITALIC).toBe(TextAttributes.ITALIC)
-})
-
-test("CodeRenderable - onHighlight receives parser highlights without baseHighlight", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    "markup.quote": { fg: RGBA.fromValues(0.25, 0.5, 0.75, 1) },
-    keyword: { fg: RGBA.fromValues(1, 0, 0, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  let receivedHighlights: SimpleHighlight[] | undefined
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code-base-highlight-callback",
-    content: "const value",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    baseHighlight: "markup.quote",
-    onHighlight: (highlights) => {
-      receivedHighlights = [...highlights]
-      return highlights
-    },
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-
-  expect(receivedHighlights).toEqual([[0, 5, "keyword"]])
-})
-
-test("CodeRenderable - changing baseHighlight re-highlights content", async () => {
-  const quoteColor = RGBA.fromValues(0.25, 0.5, 0.75, 1)
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    "markup.quote": { fg: quoteColor },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code-base-highlight-update",
-    content: "hello world",
-    filetype: "plaintext",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    baseHighlight: "markup.quote",
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-  expect(findSpanContaining(captureSpans(), "hello world")?.fg?.toInts()).toEqual(quoteColor.toInts())
-
-  codeRenderable.baseHighlight = undefined
-  await resolveMockHighlights(codeRenderable, mockClient)
-  expect(findSpanContaining(captureSpans(), "hello world")?.fg?.toInts()).toEqual(RGBA.fromValues(1, 1, 1, 1).toInts())
-})
-
-test("CodeRenderable - onHighlight callback receives highlights and context", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  let callbackInvoked = false
-  let receivedHighlights: SimpleHighlight[] = []
-  let receivedContext: { content: string; filetype: string | undefined; syntaxStyle: SyntaxStyle } | undefined
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    onHighlight: (highlights, context) => {
-      callbackInvoked = true
-      receivedHighlights = [...highlights]
-      receivedContext = { ...context }
-      return highlights
-    },
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(callbackInvoked).toBe(true)
-  if (receivedContext === undefined) {
-    throw new Error("Expected onHighlight callback to receive highlights and context")
-  }
-
-  expect(receivedHighlights.length).toBe(1)
-  expect(receivedHighlights[0]).toEqual([0, 5, "keyword"])
-  expect(receivedContext.content).toBe("const message = 'hello';")
-  expect(receivedContext.filetype).toBe("javascript")
-  expect(receivedContext.syntaxStyle).toBe(syntaxStyle)
-})
-
-test("CodeRenderable - onHighlight callback can add custom highlights", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-    "custom.highlight": { fg: RGBA.fromValues(1, 0, 0, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    onHighlight: (highlights) => {
-      highlights.push([6, 13, "custom.highlight", {}])
-      return highlights
-    },
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-
-  // Verify both the original keyword highlight and the custom highlight are applied
-  const lineHighlights = codeRenderable.getLineHighlights(0)
-  expect(lineHighlights.length).toBeGreaterThanOrEqual(2)
-
-  // Check keyword highlight exists with the correct styleId
-  const keywordStyleId = syntaxStyle.getStyleId("keyword")
-  const keywordHighlight = lineHighlights.find((h) => h.styleId === keywordStyleId)
-  expect(keywordHighlight).toBeDefined()
-
-  // Check custom highlight exists with the correct styleId
-  const customStyleId = syntaxStyle.getStyleId("custom.highlight")
-  const customHighlight = lineHighlights.find((h) => h.styleId === customStyleId)
-  expect(customHighlight).toBeDefined()
-})
-
-test("CodeRenderable - onHighlight callback returning undefined uses original highlights", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  let callbackInvoked = false
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    onHighlight: (highlights) => {
-      callbackInvoked = true
-      return undefined as unknown as SimpleHighlight[]
-    },
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(callbackInvoked).toBe(true)
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-})
-
-test("CodeRenderable - onHighlight callback is called on re-highlighting when content changes", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  let callbackCount = 0
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    onHighlight: (highlights) => {
-      callbackCount++
-      return highlights
-    },
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(callbackCount).toBe(1)
-
-  codeRenderable.content = "let newMessage = 'world';"
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(callbackCount).toBe(2)
-})
-
-test("CodeRenderable - onHighlight callback supports async functions", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-    "async.highlight": { fg: RGBA.fromValues(0, 1, 0, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  let asyncCallbackCompleted = false
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const message = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    onHighlight: async (highlights) => {
-      // Simulate async operation (e.g., fetching additional highlight data)
-      await waitForClock(5)
-      highlights.push([6, 13, "async.highlight", {}])
-      asyncCallbackCompleted = true
-      return highlights
-    },
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(asyncCallbackCompleted).toBe(true)
-  expect(codeRenderable.plainText).toBe("const message = 'hello';")
-
-  // Verify the async highlight was applied
-  const lineHighlights = codeRenderable.getLineHighlights(0)
-  expect(lineHighlights.length).toBeGreaterThanOrEqual(2)
-
-  const asyncStyleId = syntaxStyle.getStyleId("async.highlight")
-  const asyncHighlight = lineHighlights.find((h) => h.styleId === asyncStyleId && h.start === 6 && h.end === 13)
-  expect(asyncHighlight).toBeDefined()
-})
-
-test("CodeRenderable - streaming mode caches highlights between updates", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const initial = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  await renderOnce()
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.content = "const updated = 'world';"
-  await flushAsync()
-
-  codeRenderable.content = "const updated2 = 'test';"
-  await flushAsync()
-
-  codeRenderable.content = "const final = 'done';"
-  await flushAsync()
-
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("const final = 'done';")
-  expect(codeRenderable.plainText).toBe("const final = 'done';")
-})
-
-test("CodeRenderable - streaming mode works with large content updates", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const x = 1;",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    drawUnstyledText: true,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  // Wait for initial highlighting
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  // Simulate streaming with progressively larger content
-  let content = "const x = 1;"
-  for (let i = 0; i < 10; i++) {
-    content += `\nconst var${i} = ${i};`
-    codeRenderable.content = content
-    await waitForClock(5)
-  }
-
-  await renderOnce()
-  mockClient.resolveAllHighlightOnce()
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.content).toContain("const var9 = 9;")
-  expect(codeRenderable.plainText).toContain("const var9 = 9;")
-})
-
-test("CodeRenderable - disabling streaming clears cached highlights", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const initial = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.streaming).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.streaming = false
-  expect(codeRenderable.streaming).toBe(false)
-
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-})
-
-test("CodeRenderable - streaming mode with drawUnstyledText=false shows nothing initially", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const initial = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  await renderOnce()
-  const frameBeforeHighlighting = captureFrame()
-  expect(frameBeforeHighlighting.trim()).toBe("")
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  const frameAfterHighlighting = captureFrame()
-  expect(frameAfterHighlighting).toContain("const initial")
-})
-
-test("CodeRenderable - streaming mode handles empty cached highlights gracefully", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "plain text",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    drawUnstyledText: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-
-  codeRenderable.content = "more plain text"
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("more plain text")
-  expect(codeRenderable.plainText).toBe("more plain text")
-})
-
-test("CodeRenderable - selection across two Code renderables in flex row", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const container = new BoxRenderable(currentRenderer, {
-    id: "container",
-    width: 80,
-    height: 10,
-    flexDirection: "row",
-    left: 0,
-    top: 0,
-  })
-  currentRenderer.root.add(container)
-
-  const leftCode = new CodeRenderable(currentRenderer, {
-    id: "left-code",
-    content: "line1\nline2\nline3\nline4\nline5",
-    syntaxStyle,
-    selectable: true,
-    wrapMode: "none",
-    width: 20,
-    height: 5,
-  })
-
-  const rightCode = new CodeRenderable(currentRenderer, {
-    id: "right-code",
-    content: "lineA\nlineB\nlineC\nlineD\nlineE",
-    syntaxStyle,
-    selectable: true,
-    wrapMode: "none",
-    width: 20,
-    height: 5,
-  })
-
-  container.add(leftCode)
-  container.add(rightCode)
-
-  await renderOnce()
-
-  expect(leftCode.x).toBe(0)
-  expect(rightCode.x).toBeGreaterThan(leftCode.x)
-
-  const startX = leftCode.x + 2
-  const startY = leftCode.y + 2
-  const endX = rightCode.x + 3
-  const endY = rightCode.y + rightCode.height + 2
-
-  await mockMouse.drag(startX, startY, endX, endY)
-  await renderOnce()
-
-  expect(leftCode.hasSelection()).toBe(true)
-  expect(rightCode.hasSelection()).toBe(true)
-
-  const leftSelection = leftCode.getSelectedText()
-  const rightSelection = rightCode.getSelectedText()
-  const leftSelectionObj = leftCode.getSelection()
-  const rightSelectionObj = rightCode.getSelection()
-
-  expect(leftSelectionObj).not.toBeNull()
-  expect(rightSelectionObj).not.toBeNull()
-
-  if (leftSelectionObj && rightSelectionObj) {
-    expect(leftSelectionObj.start).toBeGreaterThan(0)
-    expect(leftSelectionObj.end).toBe(29)
-    expect(rightSelectionObj.start).toBe(0)
-    expect(rightSelectionObj.end).toBe(29)
-    expect(leftSelection).toBe("ne3\nline4\nline5")
-    expect(rightSelection).toBe("lineA\nlineB\nlineC\nlineD\nlineE")
-  }
-})
-
-test("CodeRenderable - content update during async highlighting does not get overwritten by stale highlight result", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 5, "keyword"]] as SimpleHighlight[],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "line1\nline2\nline3",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-  expect(codeRenderable.lineCount).toBe(3)
-
-  codeRenderable.content = "line1\nline2\nline3\nline4\nline5"
-  expect(codeRenderable.lineCount).toBe(5)
-
-  mockClient.resolveHighlightOnce(0)
-  await flushAsync()
-
-  expect(codeRenderable.content).toBe("line1\nline2\nline3\nline4\nline5")
-  expect(codeRenderable.lineCount).toBe(5)
-
-  await renderOnce()
-  expect(codeRenderable.lineCount).toBe(5)
-
-  expect(mockClient.isHighlighting()).toBe(true)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.content).toBe("line1\nline2\nline3\nline4\nline5")
-  expect(codeRenderable.lineCount).toBe(5)
-  expect(codeRenderable.plainText).toBe("line1\nline2\nline3\nline4\nline5")
-})
-
-test("CodeRenderable - lineCount is correct immediately with drawUnstyledText=false", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "line1\nline2\nline3\nline4\nline5",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-  })
-
-  expect(codeRenderable.lineCount).toBe(5)
-  expect(codeRenderable.content).toBe("line1\nline2\nline3\nline4\nline5")
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-  expect(codeRenderable.lineCount).toBe(5)
-
-  const frameBeforeHighlighting = captureFrame()
-  expect(frameBeforeHighlighting.trim()).toBe("")
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.lineCount).toBe(5)
-  const frameAfterHighlighting = captureFrame()
-  expect(frameAfterHighlighting).toContain("line1")
-})
-
-test("CodeRenderable - lineCount updates correctly when content changes with drawUnstyledText=false", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "line1\nline2\nline3",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-  })
-
-  expect(codeRenderable.lineCount).toBe(3)
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  codeRenderable.content = "line1\nline2\nline3\nline4\nline5\nline6\nline7"
-  expect(codeRenderable.lineCount).toBe(7)
-
-  await renderOnce()
-  expect(codeRenderable.lineCount).toBe(7)
-
-  codeRenderable.content = "line1\nline2"
-  expect(codeRenderable.lineCount).toBe(2)
-
-  await renderOnce()
-  expect(codeRenderable.lineCount).toBe(2)
-})
-
-test("CodeRenderable - lineInfo is accessible with drawUnstyledText=false before highlighting", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "short\nlonger line here\nmed",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  expect(codeRenderable.lineCount).toBe(3)
-  expect(codeRenderable.lineInfo.lineStartCols.length).toBe(3)
-
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-  expect(codeRenderable.lineInfo.lineStartCols.length).toBe(3)
-  expect(codeRenderable.lineInfo.lineSources.length).toBe(3)
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.lineInfo.lineStartCols.length).toBe(3)
-  expect(codeRenderable.lineInfo.lineSources.length).toBe(3)
-})
-
-test("CodeRenderable - lineInfo source lines account for concealed whole lines", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const content = "```ts\nfirst\n```\n```ts\nsecond\n```\ntail"
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [
-      [0, 5, "markup.raw.block", { conceal: "", concealLines: "" }],
-      [content.indexOf("```", 5), content.indexOf("```", 5) + 3, "markup.raw.block", { conceal: "", concealLines: "" }],
-      [
-        content.indexOf("```", 14),
-        content.indexOf("```", 14) + 5,
-        "markup.raw.block",
-        { conceal: "", concealLines: "" },
-      ],
-      [
-        content.lastIndexOf("```"),
-        content.lastIndexOf("```") + 3,
-        "markup.raw.block",
-        { conceal: "", concealLines: "" },
-      ],
-    ],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content,
-    filetype: "markdown",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-
-  expect(codeRenderable.plainText).toBe("first\nsecond\ntail")
-  expect(codeRenderable.lineInfo.lineSources).toEqual([1, 4, 6])
-})
-
-test("CodeRenderable - lineInfo source lines account for multiline concealed ranges", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [[0, 3, "conceal", { conceal: "", concealLines: "" }]],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "a\nb\nc",
-    filetype: "text",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-
-  expect(codeRenderable.plainText).toBe("c")
-  expect(codeRenderable.lineInfo.lineSources).toEqual([2])
-})
-
-test("CodeRenderable - skipped concealed lines preserve pending empty rendered line source", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const content = "visible\n```\n```ts"
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [
-      [8, 11, "markup.raw.block", { conceal: "", concealLines: "" }],
-      [12, 17, "markup.raw.block", { conceal: "", concealLines: "" }],
-    ],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content,
-    filetype: "markdown",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: true,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-
-  expect(codeRenderable.plainText).toBe("visible\n")
-  expect(codeRenderable.lineInfo.lineSources).toEqual([0, 1])
-})
-
-test("CodeRenderable - concealed lineInfo source cache invalidates when wrap mode changes", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const content = "```ts\nabcdefghijklmnopqrst\n```\ntail"
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({
-    highlights: [
-      [0, 5, "markup.raw.block", { conceal: "", concealLines: "" }],
-      [content.indexOf("```", 5), content.indexOf("```", 5) + 3, "markup.raw.block", { conceal: "", concealLines: "" }],
-    ],
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content,
-    filetype: "markdown",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    conceal: true,
-    wrapMode: "none",
-    width: 10,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await resolveMockHighlights(codeRenderable, mockClient)
-
-  expect(codeRenderable.lineInfo.lineSources).toEqual([1, 3])
-  expect(codeRenderable.lineInfo.lineSources).toEqual([1, 3])
-
-  codeRenderable.wrapMode = "char"
-
-  expect(codeRenderable.lineInfo.lineSources).toEqual([1, 1, 3])
-})
-
-test("CodeRenderable - plainText reflects content immediately with drawUnstyledText=false", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "initial content",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-  })
-
-  expect(codeRenderable.plainText).toBe("initial content")
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(mockClient.isHighlighting()).toBe(true)
-  expect(codeRenderable.plainText).toBe("initial content")
-
-  codeRenderable.content = "updated content"
-  expect(codeRenderable.plainText).toBe("updated content")
-
-  await renderOnce()
-  const frame = captureFrame()
-  expect(frame.trim()).toBe("")
-
-  mockClient.resolveAllHighlightOnce()
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("updated content")
-  const finalFrame = captureFrame()
-  expect(finalFrame).toContain("updated content")
-})
-
-test("CodeRenderable - textLength is correct with drawUnstyledText=false", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const content = "hello world test"
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content,
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    drawUnstyledText: false,
-  })
-
-  expect(codeRenderable.textLength).toBe(content.length)
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.textLength).toBe(content.length)
-
-  const newContent = "longer content here"
-  codeRenderable.content = newContent
-  expect(codeRenderable.textLength).toBe(newContent.length)
-})
-
-test("CodeRenderable - streaming mode with drawUnstyledText=false has correct lineCount", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient()
-  mockClient.setMockResult({ highlights: [] })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "line1\nline2",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    drawUnstyledText: false,
-  })
-
-  expect(codeRenderable.lineCount).toBe(2)
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-
-  const frameBeforeHighlighting = captureFrame()
-  expect(frameBeforeHighlighting.trim()).toBe("")
-
-  mockClient.resolveHighlightOnce(0)
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.lineCount).toBe(2)
-
-  codeRenderable.content = "line1\nline2\nline3\nline4"
-  expect(codeRenderable.lineCount).toBe(2)
-
-  codeRenderable.content = "line1\nline2\nline3\nline4\nline5\nline6"
-  expect(codeRenderable.lineCount).toBe(2)
-
-  await renderOnce()
-  mockClient.resolveAllHighlightOnce()
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.lineCount).toBe(6)
-  const finalFrame = captureFrame()
-  expect(finalFrame).toContain("line1")
-})
-
-test("CodeRenderable - streaming with conceal and drawUnstyledText=false should not jump when fenced code blocks are concealed", async () => {
-  resize(80, 20)
-
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-    keyword: { fg: RGBA.fromValues(0, 0, 1, 1) },
-    string: { fg: RGBA.fromValues(0, 1, 0, 1) },
-    "markup.heading.1": { fg: RGBA.fromValues(0, 0, 1, 1) },
-    "markup.raw.block": { fg: RGBA.fromValues(0.5, 0.5, 0.5, 1) },
-  })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-markdown",
-    content: "# Example",
-    filetype: "markdown",
-    syntaxStyle,
-    streaming: true,
-    conceal: true,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-
-  const waitForHighlightingCycle = async () => {
-    await renderOnce()
-    await waitForHighlight(codeRenderable)
-    await renderOnce()
-  }
-
-  // Use TestRecorder to capture frames
-  const { TestRecorder } = await import("../testing/test-recorder.js")
-  const recorder = new TestRecorder(currentRenderer)
-
-  // Start renderer and recorder
-  currentRenderer.start()
-  recorder.rec()
-
-  // Wait for initial highlighting to complete
-  await waitForHighlightingCycle()
-
-  // Now simulate streaming: add more content including fenced code block
-  codeRenderable.content = `# Example\n\nHere's some code:\n\n\`\`\`typescript\nconst x = 1;\n\`\`\``
-
-  // Wait for highlighting to process the update
-  await waitForHighlightingCycle()
-
-  // Stop everything
-  currentRenderer.stop()
-  recorder.stop()
-
-  const frames = recorder.recordedFrames
-
-  // Analyze frames to detect the presence of backticks
-  const frameAnalysis: Array<{ hasBackticks: boolean; lineCount: number; isEmpty: boolean }> = []
-
-  for (const recordedFrame of frames) {
-    const frame = recordedFrame.frame
-    const hasBackticks = frame.includes("```")
-    const lines = frame.split("\n").filter((line) => line.trim().length > 0)
-    const isEmpty = frame.trim().length === 0
-
-    frameAnalysis.push({
-      hasBackticks,
-      lineCount: lines.length,
-      isEmpty,
-    })
-  }
-
-  let hasFlickering = false
-  for (let i = 2; i < frameAnalysis.length; i++) {
-    const prev = frameAnalysis[i - 1]
-    const curr = frameAnalysis[i]
-    if (!prev.isEmpty && curr.isEmpty) {
-      hasFlickering = true
-    }
-  }
-
-  const framesWithBackticks = frameAnalysis.filter((f) => f.hasBackticks && !f.isEmpty)
-
-  expect(framesWithBackticks.length).toBe(0)
-  expect(hasFlickering).toBe(false)
-
-  const finalFrame = frameAnalysis[frameAnalysis.length - 1]
-  expect(finalFrame.isEmpty).toBe(false)
-  expect(finalFrame.hasBackticks).toBe(false)
-  expect(finalFrame.lineCount).toBe(3)
-
-  const finalFrameText = frames[frames.length - 1].frame
-  expect(finalFrameText).toContain("Example")
-  expect(finalFrameText).toContain("Here's some code")
-  expect(finalFrameText).toContain("const x = 1")
-  expect(finalFrameText).not.toContain("```")
-})
-
-test("CodeRenderable - streaming with drawUnstyledText=false falls back to unstyled text when highlights fail", async () => {
-  const syntaxStyle = SyntaxStyle.fromStyles({
-    default: { fg: RGBA.fromValues(1, 1, 1, 1) },
-  })
-
-  const mockClient = new MockTreeSitterClient({ autoResolveTimeout: 10, clock })
-
-  const codeRenderable = new CodeRenderable(currentRenderer, {
-    id: "test-code",
-    content: "const initial = 'hello';",
-    filetype: "javascript",
-    syntaxStyle,
-    treeSitterClient: mockClient,
-    streaming: true,
-    drawUnstyledText: false,
-    left: 0,
-    top: 0,
-  })
-
-  currentRenderer.root.add(codeRenderable)
-  await renderOnce()
-  await waitForHighlight(codeRenderable, 30)
-  await renderOnce()
-
-  mockClient.highlightOnce = async () => {
-    throw new Error("Highlighting failed")
-  }
-
-  codeRenderable.content = "const updated = 'world';"
-
-  await renderOnce()
-  await waitForHighlight(codeRenderable)
-  await renderOnce()
-
-  expect(codeRenderable.plainText).toBe("const updated = 'world';")
-})