refactor(ui): clean up remaining perf nit issues

Author: pascalandr

packages/ui/src/App.tsx

@@ -55,6 +55,7 @@ const log = getLogger("actions")
 
 const LazyFolderSelectionView = lazy(() => import("./components/folder-selection-view"))
 const LazyInstanceDisconnectedModal = lazy(() => import("./components/instance-disconnected-modal"))
+// Solid's lazy helper expects a default export, so wrap named exports explicitly.
 const LazySettingsScreen = lazy(() =>
   import("./components/settings-screen").then((module) => ({ default: module.SettingsScreen })),
 )

packages/ui/src/components/instance/instance-shell2.tsx

@@ -59,6 +59,7 @@ const log = getLogger("session")
 const LazyInstanceWelcomeView = lazy(() => import("../instance-welcome-view"))
 const LazyInfoView = lazy(() => import("../info-view"))
 const LazyCommandPalette = lazy(() => import("../command-palette"))
+// Solid's lazy helper expects a default export, so wrap named exports explicitly.
 const LazyBackgroundProcessOutputDialog = lazy(() =>
   import("../background-process-output-dialog").then((module) => ({ default: module.BackgroundProcessOutputDialog })),
 )

packages/ui/src/components/markdown.tsx

@@ -1,13 +1,24 @@
 import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
-import { renderMarkdown, onLanguagesLoaded, decodeHtmlEntities, setMarkdownTheme } from "../lib/markdown"
 import { useGlobalCache } from "../lib/hooks/use-global-cache"
 import type { TextPart, RenderCache } from "../types/message"
 import { getLogger } from "../lib/logger"
 import { copyToClipboard } from "../lib/clipboard"
 import { useI18n } from "../lib/i18n"
+import { escapeHtml } from "../lib/text-render-utils"
 
 const log = getLogger("session")
 
+type MarkdownModule = typeof import("../lib/markdown")
+
+let markdownModulePromise: Promise<MarkdownModule> | null = null
+
+function loadMarkdownModule(): Promise<MarkdownModule> {
+  if (!markdownModulePromise) {
+    markdownModulePromise = import("../lib/markdown")
+  }
+  return markdownModulePromise
+}
+
 function hashText(value: string): string {
   let hash = 2166136261
   for (let index = 0; index < value.length; index++) {
@@ -24,6 +35,24 @@ function resolvePartVersion(part: TextPart, text: string): string {
   return `text-${hashText(text)}`
 }
 
+function decodeHtmlEntitiesLocally(content: string): string {
+  if (!content.includes("&") || typeof document === "undefined") {
+    return content
+  }
+
+  const textarea = document.createElement("textarea")
+  textarea.innerHTML = content
+  return textarea.value
+}
+
+function renderFallbackHtml(content: string): string {
+  if (!content) {
+    return ""
+  }
+
+  return escapeHtml(content).replace(/\n/g, "<br />")
+}
+
 interface MarkdownProps {
   part: TextPart
   instanceId?: string
@@ -38,7 +67,8 @@ export function Markdown(props: MarkdownProps) {
   const { t } = useI18n()
   const [html, setHtml] = createSignal("")
   let containerRef: HTMLDivElement | undefined
-  let latestRequestedText = ""
+  let latestRequestKey = ""
+  let cleanupLanguageListener: (() => void) | undefined
 
   const notifyRendered = () => {
     Promise.resolve().then(() => props.onRendered?.())
@@ -47,15 +77,16 @@ export function Markdown(props: MarkdownProps) {
   const resolved = createMemo(() => {
     const part = props.part
     const rawText = typeof part.text === "string" ? part.text : ""
-    const text = decodeHtmlEntities(rawText)
+    const text = decodeHtmlEntitiesLocally(rawText)
     const themeKey = Boolean(props.isDark) ? "dark" : "light"
     const highlightEnabled = !props.disableHighlight
     const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : ""
     if (!partId) {
       throw new Error("Markdown rendering requires a part id")
     }
     const version = resolvePartVersion(part, text)
-    return { part, text, themeKey, highlightEnabled, partId, version }
+    const requestKey = `${partId}:${themeKey}:${highlightEnabled ? 1 : 0}:${version}`
+    return { part, text, themeKey, highlightEnabled, partId, version, requestKey }
   })
 
   const cacheHandle = useGlobalCache({
@@ -69,20 +100,40 @@ export function Markdown(props: MarkdownProps) {
     version: () => resolved().version,
   })
 
-  createEffect(async () => {
-    const { part, text, themeKey, highlightEnabled, version } = resolved()
+  const commitCacheEntry = (snapshot: ReturnType<typeof resolved>, renderedHtml: string) => {
+    const cacheEntry: RenderCache = {
+      text: snapshot.text,
+      html: renderedHtml,
+      theme: snapshot.themeKey,
+      mode: snapshot.version,
+    }
+    setHtml(renderedHtml)
+    cacheHandle.set(cacheEntry)
+    notifyRendered()
+  }
+
+  const renderSnapshot = async (snapshot: ReturnType<typeof resolved>) => {
+    const markdown = await loadMarkdownModule()
+    markdown.setMarkdownTheme(snapshot.themeKey === "dark")
+    const rendered = await markdown.renderMarkdown(snapshot.text, {
+      suppressHighlight: !snapshot.highlightEnabled,
+    })
 
-    // Ensure the markdown highlighter theme matches the active UI theme.
-    setMarkdownTheme(themeKey === "dark")
+    if (latestRequestKey === snapshot.requestKey) {
+      commitCacheEntry(snapshot, rendered)
+    }
+  }
 
-    latestRequestedText = text
+  createEffect(() => {
+    const snapshot = resolved()
+    latestRequestKey = snapshot.requestKey
 
     const cacheMatches = (cache: RenderCache | undefined) => {
       if (!cache) return false
-      return cache.theme === themeKey && cache.mode === version
+      return cache.theme === snapshot.themeKey && cache.mode === snapshot.version
     }
 
-    const localCache = part.renderCache
+    const localCache = snapshot.part.renderCache
     if (localCache && cacheMatches(localCache)) {
       setHtml(localCache.html)
       notifyRendered()
@@ -96,111 +147,82 @@ export function Markdown(props: MarkdownProps) {
       return
     }
 
-    const commitCacheEntry = (renderedHtml: string) => {
-      const cacheEntry: RenderCache = { text, html: renderedHtml, theme: themeKey, mode: version }
-      setHtml(renderedHtml)
-      cacheHandle.set(cacheEntry)
-      notifyRendered()
-    }
-
-    if (!highlightEnabled) {
-      try {
-        const rendered = await renderMarkdown(text, { suppressHighlight: true })
+    setHtml(renderFallbackHtml(snapshot.text))
+    notifyRendered()
 
-        if (latestRequestedText === text) {
-          commitCacheEntry(rendered)
-        }
-      } catch (error) {
-        log.error("Failed to render markdown:", error)
-        if (latestRequestedText === text) {
-          commitCacheEntry(text)
-        }
-      }
-      return
-    }
-
-    try {
-      const rendered = await renderMarkdown(text)
-      if (latestRequestedText === text) {
-        commitCacheEntry(rendered)
-      }
-    } catch (error) {
+    void renderSnapshot(snapshot).catch((error) => {
       log.error("Failed to render markdown:", error)
-      if (latestRequestedText === text) {
-        commitCacheEntry(text)
+      if (latestRequestKey === snapshot.requestKey) {
+        commitCacheEntry(snapshot, renderFallbackHtml(snapshot.text))
       }
-    }
+    })
   })
 
   onMount(() => {
-    const handleClick = async (e: Event) => {
-      const target = e.target as HTMLElement
+    const handleClick = async (event: Event) => {
+      const target = event.target as HTMLElement
       const copyButton = target.closest(".code-block-copy") as HTMLButtonElement
 
-      if (copyButton) {
-        e.preventDefault()
-        const code = copyButton.getAttribute("data-code")
-        if (code) {
-          const decodedCode = decodeURIComponent(code)
-          const success = await copyToClipboard(decodedCode)
-          const copyText = copyButton.querySelector(".copy-text")
-          if (copyText) {
-            if (success) {
-              copyText.textContent = t("markdown.codeBlock.copy.copied")
-              setTimeout(() => {
-                copyText.textContent = t("markdown.codeBlock.copy.label")
-              }, 2000)
-            } else {
-              copyText.textContent = t("markdown.codeBlock.copy.failed")
-              setTimeout(() => {
-                copyText.textContent = t("markdown.codeBlock.copy.label")
-              }, 2000)
-            }
-          }
-        }
+      if (!copyButton) {
+        return
       }
-    }
-
-    containerRef?.addEventListener("click", handleClick)
 
-    const cleanupLanguageListener = onLanguagesLoaded(async () => {
-      if (props.disableHighlight) {
+      event.preventDefault()
+      const code = copyButton.getAttribute("data-code")
+      if (!code) {
         return
       }
 
-      const { part, text, themeKey, version } = resolved()
-
-      setMarkdownTheme(themeKey === "dark")
-
-      if (latestRequestedText !== text) {
+      const decodedCode = decodeURIComponent(code)
+      const success = await copyToClipboard(decodedCode)
+      const copyText = copyButton.querySelector(".copy-text")
+      if (!copyText) {
         return
       }
 
-      try {
-        const rendered = await renderMarkdown(text)
-        if (latestRequestedText === text) {
-          const cacheEntry: RenderCache = { text, html: rendered, theme: themeKey, mode: version }
-          setHtml(rendered)
-          cacheHandle.set(cacheEntry)
-          notifyRendered()
+      copyText.textContent = success ? t("markdown.codeBlock.copy.copied") : t("markdown.codeBlock.copy.failed")
+      setTimeout(() => {
+        copyText.textContent = t("markdown.codeBlock.copy.label")
+      }, 2000)
+    }
+
+    containerRef?.addEventListener("click", handleClick)
+
+    let disposed = false
+    void loadMarkdownModule()
+      .then((markdown) => {
+        if (disposed) {
+          return
         }
-      } catch (error) {
-        log.error("Failed to re-render markdown after language load:", error)
-      }
-    })
+
+        cleanupLanguageListener = markdown.onLanguagesLoaded(() => {
+          const snapshot = resolved()
+          if (!snapshot.highlightEnabled) {
+            return
+          }
+
+          latestRequestKey = snapshot.requestKey
+          void renderSnapshot(snapshot).catch((error) => {
+            log.error("Failed to re-render markdown after language load:", error)
+          })
+        })
+      })
+      .catch((error) => {
+        log.error("Failed to load markdown module:", error)
+      })
 
     onCleanup(() => {
+      disposed = true
       containerRef?.removeEventListener("click", handleClick)
-      cleanupLanguageListener()
+      cleanupLanguageListener?.()
+      cleanupLanguageListener = undefined
     })
   })
 
-  const proseClass = () => "markdown-body"
-
   return (
     <div
       ref={containerRef}
-      class={proseClass()}
+      class="markdown-body"
       data-view="markdown"
       data-part-id={resolved().partId}
       data-markdown-theme={resolved().themeKey}

packages/ui/src/lib/git-diff-lowlight.ts

@@ -1,3 +1,4 @@
+import type { Root, RootContent } from "hast"
 import { createLowlight, common } from "lowlight"
 
 // NOTE:
@@ -7,7 +8,7 @@ import { createLowlight, common } from "lowlight"
 // may fall back to auto-detection/plain highlighting; add targeted registrations here
 // if real-world usage shows important gaps.
 
-type AstNode = {
+type AstNode = RootContent & {
   type: string
   value?: string
   children?: AstNode[]
@@ -30,7 +31,9 @@ type SyntaxFileLine = {
 
 type LowlightApi = ReturnType<typeof createLowlight>
 
-export function processAST(ast: { children: AstNode[] }) {
+type AstRoot = Root & { children: AstNode[] }
+
+export function processAST(ast: AstRoot) {
   let lineNumber = 1
   const syntaxObj: Record<number, SyntaxFileLine> = {}
 
@@ -109,7 +112,13 @@ export function processAST(ast: { children: AstNode[] }) {
   return { syntaxFileObject: syntaxObj, syntaxFileLineNumber: lineNumber }
 }
 
+let didWarnUnsupportedAst = false
+
 export function _getAST() {
+  if (import.meta.env.DEV && !didWarnUnsupportedAst) {
+    didWarnUnsupportedAst = true
+    console.warn("[git-diff-lowlight] _getAST is a compatibility stub and does not build a syntax tree")
+  }
   return {}
 }
 
@@ -192,7 +201,7 @@ export const highlighter = {
 
     return lowlight.highlightAuto(raw)
   },
-  processAST(ast: { children: AstNode[] }) {
+  processAST(ast: AstRoot) {
     return processAST(ast)
   },
   hasRegisteredCurrentLang(lang: string) {