fix(ui): support bidirectional chat markdown

.changeset/chat-bidi-text.md

@@ -0,0 +1,5 @@
+---
+"kilo-code": patch
+---
+
+Support bidirectional text in chat messages so right-to-left and mixed-language conversations render in the correct direction.

packages/kilo-ui/src/components/message-part.css

@@ -392,6 +392,8 @@ html[data-theme="kilo-vscode"] [data-component="bash-output"] {
   }
 
   [data-slot="user-message-text"] {
+    background-color: color-mix(in srgb, var(--text-base) 7%, transparent);
+    border: 1px solid transparent;
     transition: opacity 0.3s ease;
 
     &[data-queued] {
@@ -408,6 +410,11 @@ html[data-theme="kilo-vscode"] [data-component="bash-output"] {
   }
 }
 
+body.vscode-high-contrast [data-component="user-message"] [data-slot="user-message-text"],
+body.vscode-high-contrast-light [data-component="user-message"] [data-slot="user-message-text"] {
+  border-color: var(--border-weak-base);
+}
+
 [data-component="tool-output"] {
   margin-bottom: 0px;
 }

packages/kilo-ui/src/components/message-part.tsx

@@ -849,7 +849,7 @@ export function UserMessageDisplay(props: {
             <div data-slot="user-message-body">
               {props.header}
               <Show when={text()}>
-                <div data-slot="user-message-text" data-queued={props.queued ? "" : undefined}>
+                <div data-slot="user-message-text" dir="auto" data-queued={props.queued ? "" : undefined}>
                   <HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
                 </div>
               </Show>

packages/ui/src/components/markdown.css

@@ -60,8 +60,8 @@
   ol {
     margin-top: 8px;
     margin-bottom: 12px;
-    margin-left: 0;
-    padding-left: 32px;
+    margin-inline-start: 0; /* kilocode_change */
+    padding-inline-start: 32px; /* kilocode_change */
     list-style-position: outside;
   }
 
@@ -71,7 +71,7 @@
 
   ol {
     list-style-type: decimal;
-    padding-left: 2.25rem;
+    padding-inline-start: 2.25rem; /* kilocode_change */
   }
 
   li {
@@ -97,18 +97,18 @@
   li > ol {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
-    padding-left: 1rem; /* Minimal indent for nesting only */
+    padding-inline-start: 1rem; /* Minimal indent for nesting only */  /* kilocode_change */
   }
 
   li > ol {
-    padding-left: 1.75rem;
+    padding-inline-start: 1.75rem; /* kilocode_change */
   }
 
   /* Blockquotes */
   blockquote {
-    border-left: 2px solid var(--border-weak-base);
+    border-inline-start: 2px solid var(--border-weak-base); /* kilocode_change */
     margin: 1.5rem 0;
-    padding-left: 0.5rem;
+    padding-inline-start: 0.5rem; /* kilocode_change */
     color: var(--text-weak);
     font-style: normal;
   }
@@ -255,7 +255,7 @@
     /* Minimal borders for structure, matching TUI "lines" roughly but keeping it web-clean */
     border-bottom: 1px solid var(--border-weaker-base);
     padding: 12px;
-    text-align: left;
+    text-align: start; /* kilocode_change */
     vertical-align: top;
   }
 

packages/ui/src/components/markdown.tsx

@@ -544,6 +544,7 @@ export function Markdown(
   return (
     <div
       data-component="markdown"
+      dir={"auto" /* kilocode_change */}
       classList={{
         ...local.classList,
         [local.class ?? ""]: !!local.class,

packages/ui/src/components/message-part.tsx

@@ -1167,8 +1167,7 @@ export function UserMessageDisplay(props: {
       <Show when={text()}>
         <>
           <div data-slot="user-message-body">
-            <div data-slot="user-message-text" data-queued={props.queued ? "" : undefined}>
-              {/* kilocode_change */}
+            <div data-slot="user-message-text" dir="auto" data-queued={props.queued ? "" : undefined}>{/* kilocode_change */}
               <HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
             </div>
             {/* kilocode_change start */}

packages/ui/src/context/marked.tsx

@@ -29,17 +29,26 @@ const BLOCK = /^\$\$\n((?:\\[^]|[^\\])+?)\n\$\$(?:\n|$)/
 const INLINE = /^\$\$(?!\$)((?:\\.|[^\\\n])*?(?:\\.|[^\\\n$]))\$\$/
 // kilocode_change end
 
+// kilocode_change start: isolate KaTeX from the markdown root dir=auto.
+function renderKatex(text: string, options: katex.KatexOptions): string {
+  const html = katex.renderToString(text, options)
+  return `<span dir="auto">${html}</span>`
+}
+// kilocode_change end
+
 function renderMathInText(text: string): string {
   let result = text
 
   // Display math: $$...$$
   const displayMathRegex = /\$\$([\s\S]*?)\$\$/g
   result = result.replace(displayMathRegex, (_, math) => {
     try {
-      return katex.renderToString(math, {
+      // kilocode_change start
+      return renderKatex(math, {
         displayMode: true,
         throwOnError: false,
       })
+      // kilocode_change end
     } catch {
       return `$$${math}$$`
     }
@@ -153,6 +162,8 @@ function replaceWithHighlighted(block: Element, html: string, sourceHash: string
   temp.innerHTML = html
   const highlighted = temp.firstElementChild
   if (!highlighted) return
+  const dir = pre.getAttribute("dir") // kilocode_change
+  if (dir) highlighted.setAttribute("dir", dir) // kilocode_change
   // Store a hash of the source code so the morphdom guard in Markdown can detect
   // mid-stream content changes without keeping the full source in the DOM.
   highlighted.setAttribute("data-source-hash", sourceHash)
@@ -264,121 +275,125 @@ export async function deferredHighlight(
 }
 // kilocode_change end
 
-export const { use: useMarked, provider: MarkedProvider } = createSimpleContext({
-  name: "Marked",
-  init: (props: { nativeParser?: NativeMarkdownParser }) => {
-    // kilocode_change start: two-pass parser — first pass skips Shiki highlighting
-    // to avoid blocking the main thread with Oniguruma WASM regex (issue #6221).
-    // Code blocks render as plain <pre><code data-lang="..."> immediately.
-    // The Markdown component calls deferredHighlight() after DOM paint.
-    const parser = marked.use(
-      {
-        renderer: {
-          link({ href, title, text }) {
-            const titleAttr = title ? ` title="${title}"` : ""
-            return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
+// kilocode_change start: expose the parser setup for Kilo markdown tests.
+export const createMarkedParser = (props: { nativeParser?: NativeMarkdownParser }) => {
+  // kilocode_change start: two-pass parser — first pass skips Shiki highlighting
+  // to avoid blocking the main thread with Oniguruma WASM regex (issue #6221).
+  // Code blocks render as plain <pre><code data-lang="..."> immediately.
+  // The Markdown component calls deferredHighlight() after DOM paint.
+  const parser = marked.use(
+    {
+      renderer: {
+        link({ href, title, text }) {
+          const titleAttr = title ? ` title="${title}"` : ""
+          return `<a href="${href}"${titleAttr} class="external-link" target="_blank" rel="noopener noreferrer">${text}</a>`
+        },
+        // kilocode_change start
+        codespan({ text }) {
+          const file = parseFilePath(text)
+          const escaped = text
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#39;")
+          if (file) {
+            const lineAttr = file.line ? ` data-file-line="${file.line}"` : ""
+            const colAttr = file.column ? ` data-file-col="${file.column}"` : ""
+            return `<code class="file-link" dir="auto" data-file-path="${file.path}"${lineAttr}${colAttr}>${escaped}</code>`
+          }
+          return `<code dir="auto">${escaped}</code>`
+        },
+        code({ text, lang }) {
+          const escaped = text
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/"/g, "&quot;")
+            .replace(/'/g, "&#39;")
+          // Normalize aliases (e.g. "c++" → "cpp") before stripping special
+          // chars, so "c++" doesn't become "c" (wrong language highlight).
+          const normalized = lang ? (LANG_ALIASES[lang] ?? lang) : ""
+          const safe = normalized ? normalized.replace(/[^a-zA-Z0-9_-]/g, "") : ""
+          const data = safe.toLowerCase() === "mermaid" ? "mermaid" : safe
+          const attr = data ? ` class="language-${data}" data-lang="${data}"` : ' data-lang="text"'
+          return `<pre dir="auto"><code${attr}>${escaped}</code></pre>`
+        },
+        // kilocode_change end
+      },
+    },
+    // kilocode_change start: enable only double-dollar math.
+    // Single $ is far more common as a currency symbol in agent responses
+    // (e.g. $93K, $307K) than as a LaTeX delimiter. Avoid registering the
+    // marked-katex-extension inline tokenizer because Marked falls through
+    // to later tokenizers when an override returns undefined.
+    {
+      extensions: [
+        {
+          name: "doubleKatexBlock",
+          level: "block" as const,
+          tokenizer(src) {
+            const match = src.match(BLOCK)
+            const text = match?.[1]
+            if (!match || !text) return undefined
+            return {
+              type: "doubleKatexBlock",
+              raw: match[0],
+              text: text.trim(),
+            }
+          },
+          renderer(token) {
+            return `${renderKatex(token.text, { displayMode: true, throwOnError: false })}\n`
+          },
+        } satisfies TokenizerAndRendererExtension,
+        {
+          name: "doubleKatexInline",
+          level: "inline" as const,
+          start(src) {
+            const index = src.indexOf("$$")
+            if (index === -1) return undefined
+            return index
           },
-          // kilocode_change start
-          codespan({ text }) {
-            const file = parseFilePath(text)
-            const escaped = text
-              .replace(/&/g, "&amp;")
-              .replace(/</g, "&lt;")
-              .replace(/>/g, "&gt;")
-              .replace(/"/g, "&quot;")
-              .replace(/'/g, "&#39;")
-            if (file) {
-              const lineAttr = file.line ? ` data-file-line="${file.line}"` : ""
-              const colAttr = file.column ? ` data-file-col="${file.column}"` : ""
-              return `<code class="file-link" data-file-path="${file.path}"${lineAttr}${colAttr}>${escaped}</code>`
+          tokenizer(src) {
+            const match = src.match(INLINE)
+            const text = match?.[1]
+            if (!match || !text) return undefined
+            return {
+              type: "doubleKatexInline",
+              raw: match[0],
+              text: text.trim(),
             }
-            return `<code>${escaped}</code>`
           },
-          code({ text, lang }) {
-            const escaped = text
-              .replace(/&/g, "&amp;")
-              .replace(/</g, "&lt;")
-              .replace(/>/g, "&gt;")
-              .replace(/"/g, "&quot;")
-              .replace(/'/g, "&#39;")
-            // Normalize aliases (e.g. "c++" → "cpp") before stripping special
-            // chars, so "c++" doesn't become "c" (wrong language highlight).
-            const normalized = lang ? (LANG_ALIASES[lang] ?? lang) : ""
-            const safe = normalized ? normalized.replace(/[^a-zA-Z0-9_-]/g, "") : ""
-            const data = safe.toLowerCase() === "mermaid" ? "mermaid" : safe
-            const attr = data ? ` class="language-${data}" data-lang="${data}"` : ' data-lang="text"'
-            return `<pre><code${attr}>${escaped}</code></pre>`
+          renderer(token) {
+            return renderKatex(token.text, { displayMode: true, throwOnError: false })
           },
-          // kilocode_change end
-        },
-      },
-      // kilocode_change start: enable only double-dollar math.
-      // Single $ is far more common as a currency symbol in agent responses
-      // (e.g. $93K, $307K) than as a LaTeX delimiter. Avoid registering the
-      // marked-katex-extension inline tokenizer because Marked falls through
-      // to later tokenizers when an override returns undefined.
-      {
-        extensions: [
-          {
-            name: "doubleKatexBlock",
-            level: "block" as const,
-            tokenizer(src) {
-              const match = src.match(BLOCK)
-              const text = match?.[1]
-              if (!match || !text) return undefined
-              return {
-                type: "doubleKatexBlock",
-                raw: match[0],
-                text: text.trim(),
-              }
-            },
-            renderer(token) {
-              return `${katex.renderToString(token.text, { displayMode: true, throwOnError: false })}\n`
-            },
-          } satisfies TokenizerAndRendererExtension,
-          {
-            name: "doubleKatexInline",
-            level: "inline" as const,
-            start(src) {
-              const index = src.indexOf("$$")
-              if (index === -1) return undefined
-              return index
-            },
-            tokenizer(src) {
-              const match = src.match(INLINE)
-              const text = match?.[1]
-              if (!match || !text) return undefined
-              return {
-                type: "doubleKatexInline",
-                raw: match[0],
-                text: text.trim(),
-              }
-            },
-            renderer(token) {
-              return katex.renderToString(token.text, { displayMode: true, throwOnError: false })
-            },
-          } satisfies TokenizerAndRendererExtension,
-        ],
-      } satisfies MarkedExtension,
-      // kilocode_change end
-      // kilocode_change: markedShiki removed — the custom `code` renderer
-      // above returns plain <pre><code data-lang="..."> and markdown.tsx
-      // calls deferredHighlight() after paint. Running Shiki inside parse
-      // blocks the main thread on session switches (issue #6221).
-    )
+        } satisfies TokenizerAndRendererExtension,
+      ],
+    } satisfies MarkedExtension,
     // kilocode_change end
-
-    if (props.nativeParser) {
-      const nativeParser = props.nativeParser
-      return {
-        async parse(markdown: string): Promise<string> {
-          const html = await nativeParser(markdown)
-          const withMath = renderMathExpressions(html)
-          return highlightCodeBlocks(withMath)
-        },
-      }
+    // kilocode_change: markedShiki removed — the custom `code` renderer
+    // above returns plain <pre><code data-lang="..."> and markdown.tsx
+    // calls deferredHighlight() after paint. Running Shiki inside parse
+    // blocks the main thread on session switches (issue #6221).
+  )
+  // kilocode_change end
+
+  if (props.nativeParser) {
+    const nativeParser = props.nativeParser
+    return {
+      async parse(markdown: string): Promise<string> {
+        const html = await nativeParser(markdown)
+        const withMath = renderMathExpressions(html)
+        return highlightCodeBlocks(withMath)
+      },
     }
+  }
+
+  return parser
+}
 
-    return parser
-  },
+export const { use: useMarked, provider: MarkedProvider } = createSimpleContext({
+  name: "Marked",
+  init: createMarkedParser,
 })
+// kilocode_change end