feat(app): highlight code with @pierre/highlights instead of Shiki

bunfig.toml

@@ -2,7 +2,7 @@
 exact = true
 # Only install newly resolved package versions published at least 3 days ago.
 minimumReleaseAge = 259200
-minimumReleaseAgeExcludes = ["@ai-sdk/amazon-bedrock", "@ai-sdk/anthropic", "@brendonovich/vite-plugin-opencode", "@kitlangton/solid-motion", "@opencode/sdk", "@opencode-ai/pty", "@opencode-ai/pty-darwin-arm64", "@opencode-ai/pty-darwin-x64", "@opencode-ai/pty-linux-arm64-gnu", "@opencode-ai/pty-linux-arm64-musl", "@opencode-ai/pty-linux-x64-gnu", "@opencode-ai/pty-linux-x64-musl", "@opencode-ai/pty-win32-arm64", "@opencode-ai/pty-win32-x64", "@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-arm64-musl", "@opentui/core-linux-x64", "@opentui/core-linux-x64-musl", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "@opentunnel/client", "@opentunnel/protocol", "gitlab-ai-provider", "opencode-gitlab-auth", "@ff-labs/fff-node", "@ff-labs/fff-bun", "@ff-labs/fff-bin-darwin-arm64", "@ff-labs/fff-bin-darwin-x64", "@ff-labs/fff-bin-linux-arm64-gnu", "@ff-labs/fff-bin-linux-arm64-musl", "@ff-labs/fff-bin-linux-x64-gnu", "@ff-labs/fff-bin-linux-x64-musl", "@ff-labs/fff-bin-win32-arm64", "@ff-labs/fff-bin-win32-x64", "@pierre/diffs", "@pierre/theming", "app-builder-lib", "dmg-builder", "electron", "electron-builder", "electron-publish", "blume", "mermaid"]
+minimumReleaseAgeExcludes = ["@ai-sdk/amazon-bedrock", "@ai-sdk/anthropic", "@brendonovich/vite-plugin-opencode", "@kitlangton/solid-motion", "@opencode/sdk", "@opencode-ai/pty", "@opencode-ai/pty-darwin-arm64", "@opencode-ai/pty-darwin-x64", "@opencode-ai/pty-linux-arm64-gnu", "@opencode-ai/pty-linux-arm64-musl", "@opencode-ai/pty-linux-x64-gnu", "@opencode-ai/pty-linux-x64-musl", "@opencode-ai/pty-win32-arm64", "@opencode-ai/pty-win32-x64", "@opentui/core", "@opentui/core-darwin-arm64", "@opentui/core-darwin-x64", "@opentui/core-linux-arm64", "@opentui/core-linux-arm64-musl", "@opentui/core-linux-x64", "@opentui/core-linux-x64-musl", "@opentui/core-win32-arm64", "@opentui/core-win32-x64", "@opentui/keymap", "@opentui/solid", "@opentunnel/client", "@opentunnel/protocol", "gitlab-ai-provider", "opencode-gitlab-auth", "@ff-labs/fff-node", "@ff-labs/fff-bun", "@ff-labs/fff-bin-darwin-arm64", "@ff-labs/fff-bin-darwin-x64", "@ff-labs/fff-bin-linux-arm64-gnu", "@ff-labs/fff-bin-linux-arm64-musl", "@ff-labs/fff-bin-linux-x64-gnu", "@ff-labs/fff-bin-linux-x64-musl", "@ff-labs/fff-bin-win32-arm64", "@ff-labs/fff-bin-win32-x64", "@pierre/diffs", "@pierre/highlights", "@pierre/theming", "app-builder-lib", "dmg-builder", "electron", "electron-builder", "electron-publish", "blume", "mermaid"]
 
 [test]
 root = "./do-not-run-tests-from-root"

package.json

@@ -58,7 +58,6 @@
       "@opentui/keymap": "0.6.6",
       "@opentui/solid": "0.6.6",
       "@tanstack/solid-virtual": "3.13.37",
-      "@shikijs/stream": "4.4.3",
       "@standard-schema/spec": "1.1.0",
       "ulid": "3.0.1",
       "@kobalte/core": "0.13.13",
@@ -69,7 +68,8 @@
       "@tsconfig/node22": "22.0.2",
       "@tsconfig/bun": "1.0.9",
       "@cloudflare/workers-types": "4.20251008.0",
-      "@pierre/diffs": "1.5.1",
+      "@pierre/diffs": "1.6.1",
+      "@pierre/highlights": "0.2.0",
       "@solid-primitives/event-listener": "2.4.6",
       "@solid-primitives/media": "2.3.6",
       "@solid-primitives/resize-observer": "2.2.0",

packages/app/e2e/performance/timeline/session-timeline-stream-probe.ts

@@ -4,6 +4,12 @@ const STREAM_MARKER_PATTERN = "stream-(\\d+)"
 
 const STREAM_FRAGMENT_COUNT = 18
 
+declare global {
+  interface Window {
+    __timelineStreamBenchmark?: TimelineProbeState
+  }
+}
+
 type TimelineProbeState = {
   started: number
   ended: number
@@ -126,26 +132,29 @@ export async function installTimelineStreamProbe(
         start: () => {},
       }
 
-      ;(window as Window & { __timelineStreamBenchmark?: TimelineProbeState }).__timelineStreamBenchmark = state
+      window.__timelineStreamBenchmark = state
       const scrollTo = Element.prototype.scrollTo
+      const scrollToPoint: (this: Element, x: number, y: number) => void = scrollTo
+      const scrollToOptions: (this: Element, options?: ScrollToOptions) => void = scrollTo
       const scrollTop = Object.getOwnPropertyDescriptor(Element.prototype, "scrollTop")!
 
       if (profileVisual) {
-        function measuredScrollTo(this: Element, options?: ScrollToOptions): void
-        function measuredScrollTo(this: Element, x: number, y: number): void
-        function measuredScrollTo(this: Element, first?: number | ScrollToOptions, second?: number) {
+        // The two `scrollTo` overloads differ by arity: `(options?)` or `(x, y)`.
+        function measuredScrollTo(this: Element, ...args: [options?: ScrollToOptions] | [x: number, y: number]) {
           state.scroll.calls += 1
-          const top = typeof first === "object" ? first?.top : second
+          const top = args.length === 2 ? args[1] : args[0]?.top
 
-          if (typeof top === "number") {
+          if (top !== undefined) {
             const target = Math.min(top, this.scrollHeight - this.clientHeight)
 
             if (Math.abs(this.scrollTop - target) < 1) state.scroll.callNoops += 1
           }
 
           if (state.scroll.lastCallFrame === state.scroll.frame) state.scroll.sameFrameCalls += 1
           state.scroll.lastCallFrame = state.scroll.frame
-          scrollTo.apply(this, typeof first === "number" ? [first, second] : [first])
+
+          if (args.length === 2) scrollToPoint.call(this, args[0], args[1])
+          else scrollToOptions.call(this, args[0])
         }
 
         Element.prototype.scrollTo = measuredScrollTo
@@ -164,9 +173,9 @@ export async function installTimelineStreamProbe(
       const recordLongTasks = (entries: PerformanceEntry[]) => {
         if (!state.running) return
         state.longTasks.push(
-          ...entries
-            .filter((entry) => entry.startTime >= state.started && entry.startTime <= state.ended)
-            .map((entry) => entry.duration),
+          ...entries.flatMap((entry) =>
+            entry.startTime >= state.started && entry.startTime <= state.ended ? [entry.duration] : [],
+          ),
         )
       }
 
@@ -176,15 +185,14 @@ export async function installTimelineStreamProbe(
       const recordLayoutShifts = (entries: PerformanceEntry[]) => {
         if (!state.running) return
         state.layoutShifts.push(
-          ...entries
-            .map((entry) => {
-              const shift = entry as LayoutShiftEntry
+          ...entries.flatMap((entry) => {
+            // SAFETY: this observer only subscribes to "layout-shift" entries, which carry `value` and `hadRecentInput`.
+            const shift = entry as LayoutShiftEntry
 
-              if (shift.startTime < state.started || shift.hadRecentInput) return
+            if (shift.startTime < state.started || shift.hadRecentInput) return []
 
-              return shift.value
-            })
-            .filter((value): value is number => value !== undefined),
+            return [shift.value]
+          }),
         )
       }
 
@@ -335,8 +343,11 @@ export async function installTimelineStreamProbe(
 
           if (profileVisual) {
             const visibleRows = [...root.querySelectorAll<HTMLElement>("[data-timeline-key]")]
-              .map((element) => ({ element, rect: element.getBoundingClientRect() }))
-              .filter((item) => item.rect.bottom > viewport.top && item.rect.top < viewport.bottom)
+              .flatMap((element) => {
+                const rect = element.getBoundingClientRect()
+
+                return rect.bottom > viewport.top && rect.top < viewport.bottom ? [{ element, rect }] : []
+              })
               .sort((a, b) => a.rect.top - b.rect.top)
 
             state.visibleRows = new Set(visibleRows.map((item) => item.element))
@@ -426,7 +437,7 @@ export async function installTimelineStreamProbe(
                   : index >= 0
                     ? "stream"
                     : "unknown",
-              tokenSpans: livePart?.querySelectorAll(".shiki span").length ?? 0,
+              tokenSpans: livePart?.querySelectorAll(".highlights span").length ?? 0,
               blocks: livePart?.querySelectorAll("[data-markdown-block]").length ?? 0,
               codeBlocks: livePart?.querySelectorAll('[data-component="markdown-code"]').length ?? 0,
               height: livePart?.getBoundingClientRect().height ?? 0,
@@ -451,7 +462,7 @@ export async function installTimelineStreamProbe(
 
 export function startTimelineStreamProbe(page: Page) {
   return page.evaluate(() => {
-    const state = (window as Window & { __timelineStreamBenchmark?: TimelineProbeState }).__timelineStreamBenchmark
+    const state = window.__timelineStreamBenchmark
 
     if (!state) throw new Error("missing streaming benchmark state")
     state.start()
@@ -493,7 +504,7 @@ export async function collectTimelineStreamMetrics(
   options: { textPartID: string; finalIndex: number; navigations: string[] },
 ) {
   return page.evaluate(({ textPartID, finalIndex, navigations }) => {
-    const state = (window as Window & { __timelineStreamBenchmark?: TimelineProbeState }).__timelineStreamBenchmark
+    const state = window.__timelineStreamBenchmark
 
     if (!state) throw new Error(`missing streaming benchmark state after navigation: ${JSON.stringify(navigations)}`)
     state.ended = performance.now()