feat(ui): add line wrap toggle to markdown code blocks (#599)

## Summary
- add a wrap toggle beside the copy action in Markdown code block
headers
- default Markdown code blocks to wrapped lines for both plain and
Shiki-highlighted output
- preserve per-block wrap choices across async Markdown and
syntax-highlight re-renders
- add localized labels for the new Markdown code block wrap action

## Validation
- npm run typecheck --workspace @codenomad/ui

## Notes
- Left unrelated untracked .opencode/package-lock.json out of the
commit.

Author: shantur

packages/ui/src/components/markdown.tsx

@@ -15,6 +15,7 @@ interface ResolvedMarkdownSnapshot {
   themeKey: string
   highlightEnabled: boolean
   escapeRawHtml: boolean
+  defaultCodeBlockWrap: boolean
   partId: string | undefined
   cacheId: string
   version: string
@@ -96,6 +97,7 @@ interface MarkdownProps {
   size?: "base" | "sm" | "tight"
   disableHighlight?: boolean
   escapeRawHtml?: boolean
+  defaultCodeBlockWrap?: boolean
   onRendered?: () => void
 }
 
@@ -105,32 +107,87 @@ export function Markdown(props: MarkdownProps) {
   let containerRef: HTMLDivElement | undefined
   let latestRequestKey = ""
   let cleanupLanguageListener: (() => void) | undefined
+  const codeBlockWrapOverrides = new Map<string, boolean>()
 
   const notifyRendered = () => {
     Promise.resolve().then(() => props.onRendered?.())
   }
 
+  const codeBlockWrapKey = (codeBlock: HTMLElement): string | null => {
+    const key = codeBlock.getAttribute("data-code-block-key")
+    if (!key) {
+      return null
+    }
+    return `${resolved().cacheId}:${key}`
+  }
+
+  const applyCodeBlockWrapState = (codeBlock: HTMLElement, enabled: boolean) => {
+    codeBlock.setAttribute("data-wrap-lines", enabled ? "true" : "false")
+
+    const button = codeBlock.querySelector<HTMLButtonElement>(".code-block-wrap")
+    if (!button) {
+      return
+    }
+
+    const label = enabled ? t("markdown.codeBlock.wrap.disable") : t("markdown.codeBlock.wrap.enable")
+    button.classList.toggle("active", enabled)
+    button.setAttribute("aria-pressed", enabled ? "true" : "false")
+    button.setAttribute("aria-label", label)
+    button.setAttribute("title", label)
+
+    const text = button.querySelector(".wrap-text")
+    if (text) {
+      text.textContent = label
+    }
+  }
+
+  const syncCodeBlockWrapStates = () => {
+    if (!containerRef) {
+      return
+    }
+
+    const codeBlocks = containerRef.querySelectorAll<HTMLElement>(".markdown-code-block")
+    for (const codeBlock of codeBlocks) {
+      const key = codeBlockWrapKey(codeBlock)
+      const defaultEnabled = codeBlock.getAttribute("data-wrap-lines") !== "false"
+      const enabled = key ? (codeBlockWrapOverrides.get(key) ?? defaultEnabled) : defaultEnabled
+      applyCodeBlockWrapState(codeBlock, enabled)
+    }
+  }
+
   const resolved = createMemo(() => {
     const part = props.part
     const rawText = typeof part.text === "string" ? part.text : ""
     const text = decodeHtmlEntitiesLocally(rawText)
     const themeKey = Boolean(props.isDark) ? "dark" : "light"
     const highlightEnabled = !props.disableHighlight
     const escapeRawHtml = Boolean(props.escapeRawHtml)
+    const defaultCodeBlockWrap = props.defaultCodeBlockWrap ?? true
     const partId = typeof part.id === "string" && part.id.length > 0 ? part.id : undefined
     const cacheId = resolvePartCacheId(part, text)
     const version = resolvePartVersion(part, text)
-    const requestKey = `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${escapeRawHtml ? 1 : 0}:${version}`
-    return { part, text, themeKey, highlightEnabled, escapeRawHtml, partId, cacheId, version, requestKey }
+    const requestKey = `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${escapeRawHtml ? 1 : 0}:${defaultCodeBlockWrap ? 1 : 0}:${version}`
+    return {
+      part,
+      text,
+      themeKey,
+      highlightEnabled,
+      escapeRawHtml,
+      defaultCodeBlockWrap,
+      partId,
+      cacheId,
+      version,
+      requestKey,
+    }
   })
 
   const cacheHandle = useGlobalCache({
     instanceId: () => props.instanceId,
     sessionId: () => props.sessionId,
     scope: "markdown",
     cacheId: () => {
-      const { cacheId, themeKey, highlightEnabled } = resolved()
-      return `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${resolved().escapeRawHtml ? 1 : 0}`
+      const { cacheId, themeKey, highlightEnabled, escapeRawHtml, defaultCodeBlockWrap } = resolved()
+      return `${cacheId}:${themeKey}:${highlightEnabled ? 1 : 0}:${escapeRawHtml ? 1 : 0}:${defaultCodeBlockWrap ? 1 : 0}`
     },
     version: () => resolved().version,
   })
@@ -144,7 +201,7 @@ export function Markdown(props: MarkdownProps) {
       text: snapshot.text,
       html: renderedHtml,
       theme: snapshot.themeKey,
-      mode: `${snapshot.version}:${snapshot.escapeRawHtml ? "escaped" : "raw"}`,
+      mode: `${snapshot.version}:${snapshot.escapeRawHtml ? "escaped" : "raw"}:${snapshot.defaultCodeBlockWrap ? "wrap" : "nowrap"}`,
     }
     setHtml(renderedHtml)
     if (options?.cache ?? true) {
@@ -159,6 +216,7 @@ export function Markdown(props: MarkdownProps) {
     const rendered = await markdown.renderMarkdown(snapshot.text, {
       suppressHighlight: !snapshot.highlightEnabled,
       escapeRawHtml: snapshot.escapeRawHtml,
+      defaultCodeBlockWrap: snapshot.defaultCodeBlockWrap,
     })
     const shouldCache = !snapshot.highlightEnabled || !markdown.hasPendingCodeHighlight(snapshot.text)
 
@@ -170,7 +228,7 @@ export function Markdown(props: MarkdownProps) {
   createEffect(() => {
     const snapshot = resolved()
     latestRequestKey = snapshot.requestKey
-    const cacheMode = `${snapshot.version}:${snapshot.escapeRawHtml ? "escaped" : "raw"}`
+    const cacheMode = `${snapshot.version}:${snapshot.escapeRawHtml ? "escaped" : "raw"}:${snapshot.defaultCodeBlockWrap ? "wrap" : "nowrap"}`
 
     const cacheMatches = (cache: RenderCache | undefined) => {
       if (!cache) return false
@@ -202,9 +260,33 @@ export function Markdown(props: MarkdownProps) {
     })
   })
 
+  createEffect(() => {
+    html()
+    Promise.resolve().then(syncCodeBlockWrapStates)
+  })
+
   onMount(() => {
     const handleClick = async (event: Event) => {
       const target = event.target as HTMLElement
+      const wrapButton = target.closest(".code-block-wrap") as HTMLButtonElement
+      if (wrapButton) {
+        event.preventDefault()
+        const codeBlock = wrapButton.closest(".markdown-code-block") as HTMLElement | null
+        if (!codeBlock) {
+          return
+        }
+
+        const key = codeBlockWrapKey(codeBlock)
+        const current = codeBlock.getAttribute("data-wrap-lines") !== "false"
+        const next = !current
+        if (key) {
+          codeBlockWrapOverrides.set(key, next)
+        }
+        applyCodeBlockWrapState(codeBlock, next)
+        props.onRendered?.()
+        return
+      }
+
       const copyButton = target.closest(".code-block-copy") as HTMLButtonElement
 
       if (!copyButton) {

packages/ui/src/components/tool-call/markdown-render.tsx

@@ -30,7 +30,8 @@ export function createMarkdownContentRenderer(params: {
 
     const size = options.size || "default"
     const disableHighlight = options.disableHighlight || false
-    const messageClass = `message-text tool-call-markdown${size === "large" ? " tool-call-markdown-large" : ""}${options.wrap ? " tool-call-markdown-wrap" : ""}`
+    const wrapEnabled = options.wrap ?? true
+    const messageClass = `message-text tool-call-markdown${size === "large" ? " tool-call-markdown-large" : ""}${wrapEnabled ? " tool-call-markdown-wrap" : ""}`
     const state = params.toolState()
     const disableScrollTracking = options.disableScrollTracking || (state?.status !== "running" && state?.status !== "pending")
     const registerRef = disableScrollTracking ? registerUntracked : registerTracked
@@ -73,6 +74,7 @@ export function createMarkdownContentRenderer(params: {
           sessionId={params.sessionId}
           isDark={params.isDark()}
           disableHighlight={disableHighlight}
+          defaultCodeBlockWrap={wrapEnabled}
           onRendered={handleMarkdownRendered}
         />
         {params.scrollHelpers.renderSentinel({ disableTracking: disableScrollTracking })}

packages/ui/src/lib/i18n/messages/de/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "Kopieren",
   "markdown.codeBlock.copy.copied": "Kopiert!",
   "markdown.codeBlock.copy.failed": "Fehlgeschlagen",
+  "markdown.codeBlock.wrap.enable": "Zeilenumbruch aktivieren",
+  "markdown.codeBlock.wrap.disable": "Zeilenumbruch deaktivieren",
 
   "markdown.copy": "Kopieren",
 } as const

packages/ui/src/lib/i18n/messages/en/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "Copy",
   "markdown.codeBlock.copy.copied": "Copied!",
   "markdown.codeBlock.copy.failed": "Failed",
+  "markdown.codeBlock.wrap.enable": "Enable word wrap",
+  "markdown.codeBlock.wrap.disable": "Disable word wrap",
 
   "markdown.copy": "Copy",
 } as const

packages/ui/src/lib/i18n/messages/es/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "Copiar",
   "markdown.codeBlock.copy.copied": "¡Copiado!",
   "markdown.codeBlock.copy.failed": "Error",
+  "markdown.codeBlock.wrap.enable": "Activar ajuste de línea",
+  "markdown.codeBlock.wrap.disable": "Desactivar ajuste de línea",
 
   "markdown.copy": "Copiar",
 } as const

packages/ui/src/lib/i18n/messages/fr/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "Copier",
   "markdown.codeBlock.copy.copied": "Copié !",
   "markdown.codeBlock.copy.failed": "Échec",
+  "markdown.codeBlock.wrap.enable": "Activer le retour à la ligne",
+  "markdown.codeBlock.wrap.disable": "Désactiver le retour à la ligne",
 
   "markdown.copy": "Copier",
 } as const

packages/ui/src/lib/i18n/messages/he/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "העתק",
   "markdown.codeBlock.copy.copied": "הועתק!",
   "markdown.codeBlock.copy.failed": "נכשל",
+  "markdown.codeBlock.wrap.enable": "הפעל גלישת שורות",
+  "markdown.codeBlock.wrap.disable": "כבה גלישת שורות",
 
   "markdown.copy": "העתק",
 } as const

packages/ui/src/lib/i18n/messages/ja/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "コピー",
   "markdown.codeBlock.copy.copied": "コピーしました!",
   "markdown.codeBlock.copy.failed": "失敗",
+  "markdown.codeBlock.wrap.enable": "折り返しを有効にする",
+  "markdown.codeBlock.wrap.disable": "折り返しを無効にする",
 
   "markdown.copy": "コピー",
 } as const

packages/ui/src/lib/i18n/messages/ne/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "प्रतिलिपि गर्नुहोस्",
   "markdown.codeBlock.copy.copied": "प्रतिलिपि गरियो!",
   "markdown.codeBlock.copy.failed": "असफल",
+  "markdown.codeBlock.wrap.enable": "लाइन र्‍याप सक्षम गर्नुहोस्",
+  "markdown.codeBlock.wrap.disable": "लाइन र्‍याप असक्षम गर्नुहोस्",
 
   "markdown.copy": "प्रतिलिपि गर्नुहोस्",
 } as const

packages/ui/src/lib/i18n/messages/ru/markdown.ts

@@ -2,6 +2,8 @@ export const markdownMessages = {
   "markdown.codeBlock.copy.label": "Копировать",
   "markdown.codeBlock.copy.copied": "Скопировано!",
   "markdown.codeBlock.copy.failed": "Не удалось",
+  "markdown.codeBlock.wrap.enable": "Включить перенос строк",
+  "markdown.codeBlock.wrap.disable": "Отключить перенос строк",
 
   "markdown.copy": "Копировать",
 } as const