fix(jetbrains): render markdown code blocks with scrollable components

packages/kilo-jetbrains/frontend/src/main/kotlin/ai/kilocode/client/session/ui/EmptySessionPanel.kt

@@ -3,7 +3,7 @@ package ai.kilocode.client.session.ui
 import ai.kilocode.client.plugin.KiloBundle
 import ai.kilocode.client.session.update.SessionController
 import ai.kilocode.client.ui.UiStyle
-import ai.kilocode.client.ui.md.MdView
+import ai.kilocode.client.ui.md.MdViewFactory
 import ai.kilocode.rpc.dto.SessionDto
 import com.intellij.openapi.Disposable
 import com.intellij.openapi.util.Disposer
@@ -84,7 +84,7 @@ class EmptySessionPanel(
             }
         })
     }
-    private val md = MdView.html().apply {
+    private val md = MdViewFactory.html(style).apply {
         // MdView uses an HTML component; transparency keeps the centered panel seamless.
         opaque = false
         foreground = UIUtil.getContextHelpForeground()
@@ -242,7 +242,9 @@ class EmptySessionPanel(
 
     override fun applyStyle(style: SessionStyle) {
         this.style = style
+        md.applyStyle(style)
         md.font = style.uiFont
+        md.foreground = UIUtil.getContextHelpForeground()
         recentTitle.font = style.smallUiFont
         revalidate()
         repaint()

packages/kilo-jetbrains/frontend/src/main/kotlin/ai/kilocode/client/session/views/ReasoningView.kt

@@ -8,6 +8,7 @@ import ai.kilocode.client.session.model.Reasoning
 import ai.kilocode.client.session.ui.SessionStyle
 import ai.kilocode.client.ui.UiStyle
 import ai.kilocode.client.ui.md.MdView
+import ai.kilocode.client.ui.md.MdViewFactory
 import com.intellij.icons.AllIcons
 import com.intellij.ui.components.JBLabel
 import com.intellij.ui.components.JBScrollPane
@@ -28,7 +29,7 @@ class ReasoningView(reasoning: Reasoning) : PartView() {
 
     override val contentId: String = reasoning.id
 
-    val md: MdView = MdView.html()
+    val md: MdView = MdViewFactory.create(SessionStyle.current())
 
     private val arrow = JBLabel()
     private val body = TrackPanel().apply {
@@ -153,6 +154,7 @@ class ReasoningView(reasoning: Reasoning) : PartView() {
             title.font = style.smallEditorFont
             changed = true
         }
+        md.applyStyle(style)
         changed = apply(md) || changed
         if (changed) refresh()
     }

packages/kilo-jetbrains/frontend/src/main/kotlin/ai/kilocode/client/session/views/TextView.kt

@@ -4,6 +4,7 @@ import ai.kilocode.client.session.model.Content
 import ai.kilocode.client.session.model.Text
 import ai.kilocode.client.session.ui.SessionStyle
 import ai.kilocode.client.ui.md.MdView
+import ai.kilocode.client.ui.md.MdViewFactory
 import java.awt.BorderLayout
 
 /**
@@ -15,7 +16,7 @@ class TextView(text: Text) : PartView() {
 
     override val contentId: String = text.id
 
-    val md: MdView = MdView.html()
+    val md: MdView = MdViewFactory.create(SessionStyle.current())
 
     init {
         layout = BorderLayout()
@@ -42,6 +43,7 @@ class TextView(text: Text) : PartView() {
 
     override fun applyStyle(style: SessionStyle) {
         val changed = md.font != style.transcriptFont || md.codeFont != style.editorFamily
+        md.applyStyle(style)
         if (md.font != style.transcriptFont) md.font = style.transcriptFont
         if (md.codeFont != style.editorFamily) md.codeFont = style.editorFamily
         if (!changed) return

packages/kilo-jetbrains/frontend/src/main/kotlin/ai/kilocode/client/ui/md/MdCommon.kt

@@ -0,0 +1,77 @@
+package ai.kilocode.client.ui.md
+
+import ai.kilocode.client.session.ui.SessionStyle
+import java.awt.Color
+
+internal object MdCommon {
+    val tags = listOf(
+        "body", "p", "div", "span", "ul", "ol", "li", "table", "thead", "tbody", "tr", "th", "td",
+        "blockquote", "h1", "h2", "h3", "h4", "h5", "h6", "a", "tt", "code", "samp", "pre",
+    )
+
+    fun hex(c: Color): String = String.format("#%02x%02x%02x", c.red, c.green, c.blue)
+
+    fun css(text: String): String = text
+        .replace("\\", "\\\\")
+        .replace("'", "\\'")
+        .replace("\n", " ")
+        .replace("\r", " ")
+
+    fun rules(opts: MdStyle): String {
+        val rules = StringBuilder()
+
+        val text = mutableListOf<String>()
+        text.add("color: ${hex(opts.foreground)}")
+        text.add("font-family: '${css(opts.font.name)}', sans-serif")
+        text.add("font-size: ${opts.font.size}pt")
+        if (opts.font.isItalic) text.add("font-style: italic")
+        if (opts.font.isBold) text.add("font-weight: bold")
+        val rule = text.joinToString("; ")
+        for (tag in tags) rules.append("$tag { $rule } ")
+
+        val body = mutableListOf<String>()
+        if (!opts.opaque) body.add("background: transparent")
+        if (body.isNotEmpty()) rules.append("body { ${body.joinToString("; ")} } ")
+
+        rules.append("a { color: ${hex(opts.linkColor)} } ")
+        rules.append("tt, code, samp, pre { font-family: '${css(opts.codeFont)}', monospace } ")
+        rules.append("pre { background: ${hex(opts.preBg)} } ")
+        rules.append("pre { color: ${hex(opts.preFg)} } ")
+        rules.append("code { background: ${hex(opts.codeBg)} } ")
+        rules.append("blockquote { border-left-color: ${hex(opts.quoteBorder)} } ")
+        rules.append("blockquote { color: ${hex(opts.quoteFg)} } ")
+        rules.append("th, td { border-color: ${hex(opts.tableBorder)} } ")
+
+        return rules.toString().trim()
+    }
+
+    fun defaults(style: SessionStyle) = MdStyle(
+        font = style.transcriptFont,
+        foreground = com.intellij.util.ui.UIUtil.getLabelForeground(),
+        background = style.editorScheme.defaultBackground,
+        linkColor = com.intellij.util.ui.JBUI.CurrentTheme.Link.Foreground.ENABLED,
+        codeBg = style.editorScheme.defaultBackground,
+        preBg = style.editorScheme.defaultBackground,
+        preFg = style.editorScheme.defaultForeground,
+        codeFont = style.editorFamily,
+        quoteBorder = com.intellij.ui.JBColor.border(),
+        quoteFg = com.intellij.util.ui.UIUtil.getContextHelpForeground(),
+        tableBorder = com.intellij.ui.JBColor.border(),
+        opaque = true,
+    )
+}
+
+internal data class MdStyle(
+    val font: java.awt.Font,
+    val foreground: Color,
+    val background: Color,
+    val linkColor: Color,
+    val codeBg: Color,
+    val preBg: Color,
+    val preFg: Color,
+    val codeFont: String,
+    val quoteBorder: Color,
+    val quoteFg: Color,
+    val tableBorder: Color,
+    val opaque: Boolean,
+)