From e5730d18cd4fa9e95770ef7c6fd5b6c265dcec18 Mon Sep 17 00:00:00 2001 From: Mohammad Javad Naderi Date: Sat, 4 Jul 2026 18:10:11 +0330 Subject: [PATCH 01/10] fix(ui): support bidirectional chat markdown --- .changeset/chat-bidi-text.md | 5 ++ .../kilo-ui/src/components/message-part.tsx | 2 +- .../tests/unit/kilo-ui-contract.test.ts | 57 +++++++++++++++++++ packages/ui/src/components/markdown.css | 14 ++--- packages/ui/src/components/markdown.tsx | 17 ++++++ packages/ui/src/components/message-part.tsx | 2 +- packages/ui/src/context/marked.tsx | 2 + 7 files changed, 90 insertions(+), 9 deletions(-) create mode 100644 .changeset/chat-bidi-text.md diff --git a/.changeset/chat-bidi-text.md b/.changeset/chat-bidi-text.md new file mode 100644 index 00000000000..7f984c6eeaf --- /dev/null +++ b/.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. diff --git a/packages/kilo-ui/src/components/message-part.tsx b/packages/kilo-ui/src/components/message-part.tsx index 7fca6106088..2ffb6a4f428 100644 --- a/packages/kilo-ui/src/components/message-part.tsx +++ b/packages/kilo-ui/src/components/message-part.tsx @@ -849,7 +849,7 @@ export function UserMessageDisplay(props: {
{props.header} -
+
diff --git a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts index 03b83d60f65..01743ec010b 100644 --- a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts +++ b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts @@ -18,7 +18,9 @@ import fs from "node:fs" import path from "node:path" const MONOREPO_ROOT = path.resolve(import.meta.dir, "../../../..") +const KILO_VSCODE_DIR = path.join(MONOREPO_ROOT, "packages/kilo-vscode") const KILO_UI_DIR = path.join(MONOREPO_ROOT, "packages/kilo-ui") +const HAPPY_DOM_FILE = Bun.resolveSync("happy-dom", KILO_VSCODE_DIR) const BASIC_TOOL_FILE = path.join(MONOREPO_ROOT, "packages/ui/src/components/basic-tool.tsx") const DATA_CONTEXT_FILE = path.join(MONOREPO_ROOT, "packages/ui/src/context/data.tsx") const MESSAGE_PART_FILE = path.join(MONOREPO_ROOT, "packages/ui/src/components/message-part.tsx") @@ -159,6 +161,61 @@ describe("Assistant Markdown streaming contract (source)", () => { }) }) +describe("Markdown bidirectional rendering contract", () => { + it("adds dir to direction-owning markdown blocks without nesting it inside containers", () => { + const result = check(` + import { Window } from ${JSON.stringify(HAPPY_DOM_FILE)} + + const window = new Window() + globalThis.window = window + globalThis.document = window.document + globalThis.Node = window.Node + globalThis.HTMLElement = window.HTMLElement + globalThis.HTMLAnchorElement = window.HTMLAnchorElement + globalThis.customElements = window.customElements + + const { markBidi } = await import("@opencode-ai/ui/markdown") + const root = document.createElement("div") + root.innerHTML = \` +

عنوان ۱

+

عنوان ۲

+

عنوان ۳

+

عنوان ۴

+
عنوان ۵
+
عنوان ۶
+

متن فارسی با inline

+

نقل قول فارسی

+
  • مورد اول
    • مورد دوم
+
ستون
کیلو
+ 
const value = "کیلو"
+ \` + + markBidi(root) + + const assert = (condition, message) => { + if (condition) return + throw new Error(message) + } + + for (const tag of ["h1", "h2", "h3", "h4", "h5", "h6"]) { + assert(root.querySelector(tag)?.getAttribute("dir") === "auto", tag + " dir missing") + } + assert(root.querySelector("p")?.getAttribute("dir") === "auto", "paragraph dir missing") + assert(root.querySelector("blockquote")?.getAttribute("dir") === "auto", "blockquote dir missing") + assert(root.querySelector("ul")?.getAttribute("dir") === "auto", "list dir missing") + assert(root.querySelector("table")?.getAttribute("dir") === "auto", "table dir missing") + assert(root.querySelector("pre")?.getAttribute("dir") === "auto", "fenced code dir missing") + assert(root.querySelector(":not(pre) > code")?.getAttribute("dir") === "auto", "inline code dir missing") + + assert(!root.querySelector("blockquote p")?.hasAttribute("dir"), "nested blockquote paragraph should not own dir") + assert(!root.querySelector("li")?.hasAttribute("dir"), "list item should not own dir") + assert(!root.querySelector("td")?.hasAttribute("dir"), "table cell should not own dir") + `) + + expect(result.ok, `Markdown bidi check failed: ${result.output}`).toBe(true) + }) +}) + describe("Edit tool diff-first click contract (source)", () => { const src = fs.readFileSync(KILO_MESSAGE_PART_FILE, "utf-8") diff --git a/packages/ui/src/components/markdown.css b/packages/ui/src/components/markdown.css index 1190222956f..64599c9f59e 100644 --- a/packages/ui/src/components/markdown.css +++ b/packages/ui/src/components/markdown.css @@ -61,7 +61,7 @@ margin-top: 8px; margin-bottom: 12px; margin-left: 0; - padding-left: 32px; + 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; } diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx index 822b94c02fa..7b35e1626f2 100644 --- a/packages/ui/src/components/markdown.tsx +++ b/packages/ui/src/components/markdown.tsx @@ -182,12 +182,29 @@ function markCodeLinks(root: HTMLDivElement) { } } +// kilocode_change start: add bidi direction after Marked renders, so we keep +// Marked's HTML generation intact while avoiding nested dir="auto" on list, +// quote, and table contents. +export function markBidi(root: HTMLElement) { + const blocks = "p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, table" + for (const child of Array.from(root.children)) { + if (child.matches(blocks)) child.setAttribute("dir", "auto") + } + + const code = Array.from(root.querySelectorAll("pre, :not(pre) > code")) + for (const node of code) { + node.setAttribute("dir", "auto") + } +} +// kilocode_change end + function decorate(root: HTMLDivElement, labels: CopyLabels) { const blocks = Array.from(root.querySelectorAll("pre")) for (const block of blocks) { ensureCodeWrapper(block, labels) } markCodeLinks(root) + markBidi(root) // kilocode_change } function setupCodeCopy(root: HTMLDivElement, getLabels: () => CopyLabels) { diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index 8782cdff6ec..db17c74915d 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -1167,7 +1167,7 @@ export function UserMessageDisplay(props: { <>
-
+
{/* kilocode_change */}
diff --git a/packages/ui/src/context/marked.tsx b/packages/ui/src/context/marked.tsx index ce91a223990..b0be5caa893 100644 --- a/packages/ui/src/context/marked.tsx +++ b/packages/ui/src/context/marked.tsx @@ -153,6 +153,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) From a8bb361ecc2847cdf4fd6b4be844f96d53df8c0e Mon Sep 17 00:00:00 2001 From: Mohammad Javad Naderi Date: Sat, 4 Jul 2026 19:03:28 +0330 Subject: [PATCH 02/10] fix(ui): address bidi markdown review feedback --- .../tests/unit/kilo-ui-contract.test.ts | 85 +++++++------------ packages/ui/src/components/markdown.css | 2 +- packages/ui/src/components/markdown.tsx | 17 +--- packages/ui/src/components/message-part.tsx | 3 +- packages/ui/src/kilocode/markdown-bidi.ts | 18 ++++ 5 files changed, 54 insertions(+), 71 deletions(-) create mode 100644 packages/ui/src/kilocode/markdown-bidi.ts diff --git a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts index 01743ec010b..4ecce45d4c9 100644 --- a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts +++ b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts @@ -16,11 +16,11 @@ import { describe, it, expect } from "bun:test" import fs from "node:fs" import path from "node:path" +import { Window } from "happy-dom" +import { markBidi } from "../../../ui/src/kilocode/markdown-bidi" const MONOREPO_ROOT = path.resolve(import.meta.dir, "../../../..") -const KILO_VSCODE_DIR = path.join(MONOREPO_ROOT, "packages/kilo-vscode") const KILO_UI_DIR = path.join(MONOREPO_ROOT, "packages/kilo-ui") -const HAPPY_DOM_FILE = Bun.resolveSync("happy-dom", KILO_VSCODE_DIR) const BASIC_TOOL_FILE = path.join(MONOREPO_ROOT, "packages/ui/src/components/basic-tool.tsx") const DATA_CONTEXT_FILE = path.join(MONOREPO_ROOT, "packages/ui/src/context/data.tsx") const MESSAGE_PART_FILE = path.join(MONOREPO_ROOT, "packages/ui/src/components/message-part.tsx") @@ -163,56 +163,37 @@ describe("Assistant Markdown streaming contract (source)", () => { describe("Markdown bidirectional rendering contract", () => { it("adds dir to direction-owning markdown blocks without nesting it inside containers", () => { - const result = check(` - import { Window } from ${JSON.stringify(HAPPY_DOM_FILE)} - - const window = new Window() - globalThis.window = window - globalThis.document = window.document - globalThis.Node = window.Node - globalThis.HTMLElement = window.HTMLElement - globalThis.HTMLAnchorElement = window.HTMLAnchorElement - globalThis.customElements = window.customElements - - const { markBidi } = await import("@opencode-ai/ui/markdown") - const root = document.createElement("div") - root.innerHTML = \` -

عنوان ۱

-

عنوان ۲

-

عنوان ۳

-

عنوان ۴

-
عنوان ۵
-
عنوان ۶
-

متن فارسی با inline

-

نقل قول فارسی

-
  • مورد اول
    • مورد دوم
-
ستون
کیلو
- 
const value = "کیلو"
- \` - - markBidi(root) - - const assert = (condition, message) => { - if (condition) return - throw new Error(message) - } - - for (const tag of ["h1", "h2", "h3", "h4", "h5", "h6"]) { - assert(root.querySelector(tag)?.getAttribute("dir") === "auto", tag + " dir missing") - } - assert(root.querySelector("p")?.getAttribute("dir") === "auto", "paragraph dir missing") - assert(root.querySelector("blockquote")?.getAttribute("dir") === "auto", "blockquote dir missing") - assert(root.querySelector("ul")?.getAttribute("dir") === "auto", "list dir missing") - assert(root.querySelector("table")?.getAttribute("dir") === "auto", "table dir missing") - assert(root.querySelector("pre")?.getAttribute("dir") === "auto", "fenced code dir missing") - assert(root.querySelector(":not(pre) > code")?.getAttribute("dir") === "auto", "inline code dir missing") - - assert(!root.querySelector("blockquote p")?.hasAttribute("dir"), "nested blockquote paragraph should not own dir") - assert(!root.querySelector("li")?.hasAttribute("dir"), "list item should not own dir") - assert(!root.querySelector("td")?.hasAttribute("dir"), "table cell should not own dir") - `) - - expect(result.ok, `Markdown bidi check failed: ${result.output}`).toBe(true) + const win = new Window() + const root = win.document.createElement("div") + root.innerHTML = ` +

عنوان ۱

+

عنوان ۲

+

عنوان ۳

+

عنوان ۴

+
عنوان ۵
+
عنوان ۶
+

متن فارسی با inline

+

نقل قول فارسی

+
  • مورد اول
    • مورد دوم
+
ستون
کیلو
+ 
const value = "کیلو"
+ ` + + markBidi(root) + + for (const tag of ["h1", "h2", "h3", "h4", "h5", "h6"]) { + expect(root.querySelector(tag)?.getAttribute("dir")).toBe("auto") + } + expect(root.querySelector("p")?.getAttribute("dir")).toBe("auto") + expect(root.querySelector("blockquote")?.getAttribute("dir")).toBe("auto") + expect(root.querySelector("ul")?.getAttribute("dir")).toBe("auto") + expect(root.querySelector("table")?.getAttribute("dir")).toBe("auto") + expect(root.querySelector("pre")?.getAttribute("dir")).toBe("auto") + expect(root.querySelector(":not(pre) > code")?.getAttribute("dir")).toBe("auto") + + expect(root.querySelector("blockquote p")?.hasAttribute("dir")).toBe(false) + expect(root.querySelector("li")?.hasAttribute("dir")).toBe(false) + expect(root.querySelector("td")?.hasAttribute("dir")).toBe(false) }) }) diff --git a/packages/ui/src/components/markdown.css b/packages/ui/src/components/markdown.css index 64599c9f59e..d246cb2302f 100644 --- a/packages/ui/src/components/markdown.css +++ b/packages/ui/src/components/markdown.css @@ -60,7 +60,7 @@ ol { margin-top: 8px; margin-bottom: 12px; - margin-left: 0; + margin-inline-start: 0; /* kilocode_change */ padding-inline-start: 32px; /* kilocode_change */ list-style-position: outside; } diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx index 7b35e1626f2..0e905b5e2a5 100644 --- a/packages/ui/src/components/markdown.tsx +++ b/packages/ui/src/components/markdown.tsx @@ -8,6 +8,7 @@ import { ComponentProps, createEffect, createResource, createSignal, onCleanup, import { isServer } from "solid-js/web" import { stream } from "./markdown-stream" import { tryFastRender } from "../kilocode/markdown-fast-path" // kilocode_change +import { markBidi } from "../kilocode/markdown-bidi" // kilocode_change import { hasMermaid, preserveMermaid, renderMermaid, type MermaidLabels } from "../kilocode/markdown-mermaid" // kilocode_change import { preserveStreamingHighlight } from "../kilocode/markdown-stream-highlight" // kilocode_change import { createIncrementalMarkdown, type MarkdownBlock } from "../kilocode/markdown-incremental-dom" // kilocode_change @@ -182,22 +183,6 @@ function markCodeLinks(root: HTMLDivElement) { } } -// kilocode_change start: add bidi direction after Marked renders, so we keep -// Marked's HTML generation intact while avoiding nested dir="auto" on list, -// quote, and table contents. -export function markBidi(root: HTMLElement) { - const blocks = "p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, table" - for (const child of Array.from(root.children)) { - if (child.matches(blocks)) child.setAttribute("dir", "auto") - } - - const code = Array.from(root.querySelectorAll("pre, :not(pre) > code")) - for (const node of code) { - node.setAttribute("dir", "auto") - } -} -// kilocode_change end - function decorate(root: HTMLDivElement, labels: CopyLabels) { const blocks = Array.from(root.querySelectorAll("pre")) for (const block of blocks) { diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx index db17c74915d..4e75d22d12e 100644 --- a/packages/ui/src/components/message-part.tsx +++ b/packages/ui/src/components/message-part.tsx @@ -1167,8 +1167,7 @@ export function UserMessageDisplay(props: { <>
-
- {/* kilocode_change */} +
{/* kilocode_change */}
{/* kilocode_change start */} diff --git a/packages/ui/src/kilocode/markdown-bidi.ts b/packages/ui/src/kilocode/markdown-bidi.ts new file mode 100644 index 00000000000..7909a9765a4 --- /dev/null +++ b/packages/ui/src/kilocode/markdown-bidi.ts @@ -0,0 +1,18 @@ +export function markBidi(root: HTMLElement) { + // The decoration intentionally only marks direct markdown children. It does + // not recursively add dir="auto" to nested paragraphs, list items, table + // cells, or quote contents. + // This matters because the HTML directionality algorithm for dir=auto skips + // text inside descendants that already have their own dir attribute. + // If every nested element gets dir="auto", then a parent list, table, or + // blockquote may fail to detect its RTL text and keep the wrong direction. + const blocks = "p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol, table" + for (const child of Array.from(root.children)) { + if (child.matches(blocks)) child.setAttribute("dir", "auto") + } + + const code = Array.from(root.querySelectorAll("pre, :not(pre) > code")) + for (const node of code) { + node.setAttribute("dir", "auto") + } +} From 47eb5a1f874701bf4a6501844c9c2e39e86bd49d Mon Sep 17 00:00:00 2001 From: Mohammad Javad Naderi Date: Wed, 8 Jul 2026 16:37:47 +0330 Subject: [PATCH 03/10] fix(ui): distinguish user message bubbles --- packages/kilo-ui/src/components/message-part.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/kilo-ui/src/components/message-part.css b/packages/kilo-ui/src/components/message-part.css index 5a3fd732da0..bf6a604d249 100644 --- a/packages/kilo-ui/src/components/message-part.css +++ b/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; } From 0ea9d14de843278a717f3865ec6ae12f82c7d9b7 Mon Sep 17 00:00:00 2001 From: Mohammad Javad Naderi Date: Thu, 9 Jul 2026 15:06:16 +0330 Subject: [PATCH 04/10] fix(ui): simplify markdown bidi direction Mark the markdown container with one auto direction instead of decorating each rendered block after parsing. Assistant replies usually have one dominant natural language, but coding responses often start list items and paragraphs with identifiers, method names, or HTTP terms. Per-block auto direction lets those English tokens choose the direction for whole lists even when the surrounding answer is right-to-left. Keeping direction on the root makes the answer follow the dominant prose direction more consistently, while code and pre elements keep their own auto direction so code-like content does not decide the container direction. This also removes the post-render bidi decoration pass. --- .../tests/unit/kilo-ui-contract.test.ts | 38 ------------------- packages/ui/src/components/markdown.tsx | 3 +- packages/ui/src/context/marked.tsx | 6 +-- .../ui/src/kilocode/markdown-bidi.test.ts | 19 ++++++++++ packages/ui/src/kilocode/markdown-bidi.ts | 18 --------- 5 files changed, 23 insertions(+), 61 deletions(-) create mode 100644 packages/ui/src/kilocode/markdown-bidi.test.ts delete mode 100644 packages/ui/src/kilocode/markdown-bidi.ts diff --git a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts index 4ecce45d4c9..03b83d60f65 100644 --- a/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts +++ b/packages/kilo-vscode/tests/unit/kilo-ui-contract.test.ts @@ -16,8 +16,6 @@ import { describe, it, expect } from "bun:test" import fs from "node:fs" import path from "node:path" -import { Window } from "happy-dom" -import { markBidi } from "../../../ui/src/kilocode/markdown-bidi" const MONOREPO_ROOT = path.resolve(import.meta.dir, "../../../..") const KILO_UI_DIR = path.join(MONOREPO_ROOT, "packages/kilo-ui") @@ -161,42 +159,6 @@ describe("Assistant Markdown streaming contract (source)", () => { }) }) -describe("Markdown bidirectional rendering contract", () => { - it("adds dir to direction-owning markdown blocks without nesting it inside containers", () => { - const win = new Window() - const root = win.document.createElement("div") - root.innerHTML = ` -

عنوان ۱

-

عنوان ۲

-

عنوان ۳

-

عنوان ۴

-
عنوان ۵
-
عنوان ۶
-

متن فارسی با inline

-

نقل قول فارسی

-
  • مورد اول
    • مورد دوم
-
ستون
کیلو
- 
const value = "کیلو"
- ` - - markBidi(root) - - for (const tag of ["h1", "h2", "h3", "h4", "h5", "h6"]) { - expect(root.querySelector(tag)?.getAttribute("dir")).toBe("auto") - } - expect(root.querySelector("p")?.getAttribute("dir")).toBe("auto") - expect(root.querySelector("blockquote")?.getAttribute("dir")).toBe("auto") - expect(root.querySelector("ul")?.getAttribute("dir")).toBe("auto") - expect(root.querySelector("table")?.getAttribute("dir")).toBe("auto") - expect(root.querySelector("pre")?.getAttribute("dir")).toBe("auto") - expect(root.querySelector(":not(pre) > code")?.getAttribute("dir")).toBe("auto") - - expect(root.querySelector("blockquote p")?.hasAttribute("dir")).toBe(false) - expect(root.querySelector("li")?.hasAttribute("dir")).toBe(false) - expect(root.querySelector("td")?.hasAttribute("dir")).toBe(false) - }) -}) - describe("Edit tool diff-first click contract (source)", () => { const src = fs.readFileSync(KILO_MESSAGE_PART_FILE, "utf-8") diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx index 0e905b5e2a5..a46b5fbd1e4 100644 --- a/packages/ui/src/components/markdown.tsx +++ b/packages/ui/src/components/markdown.tsx @@ -8,7 +8,6 @@ import { ComponentProps, createEffect, createResource, createSignal, onCleanup, import { isServer } from "solid-js/web" import { stream } from "./markdown-stream" import { tryFastRender } from "../kilocode/markdown-fast-path" // kilocode_change -import { markBidi } from "../kilocode/markdown-bidi" // kilocode_change import { hasMermaid, preserveMermaid, renderMermaid, type MermaidLabels } from "../kilocode/markdown-mermaid" // kilocode_change import { preserveStreamingHighlight } from "../kilocode/markdown-stream-highlight" // kilocode_change import { createIncrementalMarkdown, type MarkdownBlock } from "../kilocode/markdown-incremental-dom" // kilocode_change @@ -189,7 +188,6 @@ function decorate(root: HTMLDivElement, labels: CopyLabels) { ensureCodeWrapper(block, labels) } markCodeLinks(root) - markBidi(root) // kilocode_change } function setupCodeCopy(root: HTMLDivElement, getLabels: () => CopyLabels) { @@ -546,6 +544,7 @@ export function Markdown( return (
${escaped}` + return `${escaped}` } - return `${escaped}` + return `${escaped}` }, code({ text, lang }) { const escaped = text @@ -309,7 +309,7 @@ export const { use: useMarked, provider: MarkedProvider } = createSimpleContext( 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 `
${escaped}
` + return `
${escaped}
` }, // kilocode_change end }, diff --git a/packages/ui/src/kilocode/markdown-bidi.test.ts b/packages/ui/src/kilocode/markdown-bidi.test.ts new file mode 100644 index 00000000000..2684feeca58 --- /dev/null +++ b/packages/ui/src/kilocode/markdown-bidi.test.ts @@ -0,0 +1,19 @@ +import { describe, expect, test } from "bun:test" +import fs from "node:fs" +import path from "node:path" + +const root = path.resolve(import.meta.dir, "..") +const markdownPath = path.join(root, "components/markdown.tsx") +const markedPath = path.join(root, "context/marked.tsx") + +describe("Markdown bidirectional rendering contract", () => { + test("sets one auto direction on the markdown root and isolates code direction", () => { + const markdown = fs.readFileSync(markdownPath, "utf-8") + const marked = fs.readFileSync(markedPath, "utf-8") + + expect(markdown).toMatch(/data-component="markdown"[\s\S]*dir=\{"auto" \/\* kilocode_change \*\/\}/) + expect(marked).toContain('') + expect(marked).toContain('
 code"))
-  for (const node of code) {
-    node.setAttribute("dir", "auto")
-  }
-}

From 3df328aea60396c021bb0bfbee8e46154835de7b Mon Sep 17 00:00:00 2001
From: Mohammad Javad Naderi 
Date: Thu, 9 Jul 2026 17:23:25 +0330
Subject: [PATCH 05/10] fix(ui): isolate markdown math direction

---
 packages/ui/src/context/marked.tsx            | 235 +++++++++---------
 .../ui/src/kilocode/markdown-bidi.test.ts     |  22 +-
 2 files changed, 140 insertions(+), 117 deletions(-)

diff --git a/packages/ui/src/context/marked.tsx b/packages/ui/src/context/marked.tsx
index 2e1e234f4e0..050b7005264 100644
--- a/packages/ui/src/context/marked.tsx
+++ b/packages/ui/src/context/marked.tsx
@@ -29,6 +29,13 @@ 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 `${html}`
+}
+// kilocode_change end
+
 function renderMathInText(text: string): string {
   let result = text
 
@@ -36,10 +43,12 @@ function renderMathInText(text: string): string {
   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}$$`
     }
@@ -266,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 
 immediately.
-    // The Markdown component calls deferredHighlight() after DOM paint.
-    const parser = marked.use(
-      {
-        renderer: {
-          link({ href, title, text }) {
-            const titleAttr = title ? ` title="${title}"` : ""
-            return `${text}`
+// 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 
 immediately.
+  // The Markdown component calls deferredHighlight() after DOM paint.
+  const parser = marked.use(
+    {
+      renderer: {
+        link({ href, title, text }) {
+          const titleAttr = title ? ` title="${title}"` : ""
+          return `${text}`
+        },
+        // kilocode_change start
+        codespan({ text }) {
+          const file = parseFilePath(text)
+          const escaped = text
+            .replace(/&/g, "&")
+            .replace(//g, ">")
+            .replace(/"/g, """)
+            .replace(/'/g, "'")
+          if (file) {
+            const lineAttr = file.line ? ` data-file-line="${file.line}"` : ""
+            const colAttr = file.column ? ` data-file-col="${file.column}"` : ""
+            return `${escaped}`
+          }
+          return `${escaped}`
+        },
+        code({ text, lang }) {
+          const escaped = text
+            .replace(/&/g, "&")
+            .replace(//g, ">")
+            .replace(/"/g, """)
+            .replace(/'/g, "'")
+          // 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 `
${escaped}
`
+        },
+        // 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, "&")
-              .replace(//g, ">")
-              .replace(/"/g, """)
-              .replace(/'/g, "'")
-            if (file) {
-              const lineAttr = file.line ? ` data-file-line="${file.line}"` : ""
-              const colAttr = file.column ? ` data-file-col="${file.column}"` : ""
-              return `${escaped}`
+          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 `${escaped}`
           },
-          code({ text, lang }) {
-            const escaped = text
-              .replace(/&/g, "&")
-              .replace(//g, ">")
-              .replace(/"/g, """)
-              .replace(/'/g, "'")
-            // 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 `
${escaped}
`
+          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 
 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 {
-          const html = await nativeParser(markdown)
-          const withMath = renderMathExpressions(html)
-          return highlightCodeBlocks(withMath)
-        },
-      }
+    // kilocode_change: markedShiki removed — the custom `code` renderer
+    // above returns plain 
 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 {
+        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
diff --git a/packages/ui/src/kilocode/markdown-bidi.test.ts b/packages/ui/src/kilocode/markdown-bidi.test.ts
index 2684feeca58..b992f09ce52 100644
--- a/packages/ui/src/kilocode/markdown-bidi.test.ts
+++ b/packages/ui/src/kilocode/markdown-bidi.test.ts
@@ -1,19 +1,29 @@
 import { describe, expect, test } from "bun:test"
 import fs from "node:fs"
 import path from "node:path"
+import { createMarkedParser } from "../context/marked"
 
 const root = path.resolve(import.meta.dir, "..")
 const markdownPath = path.join(root, "components/markdown.tsx")
-const markedPath = path.join(root, "context/marked.tsx")
 
 describe("Markdown bidirectional rendering contract", () => {
-  test("sets one auto direction on the markdown root and isolates code direction", () => {
+  test("sets one auto direction on the markdown root", () => {
     const markdown = fs.readFileSync(markdownPath, "utf-8")
-    const marked = fs.readFileSync(markedPath, "utf-8")
 
     expect(markdown).toMatch(/data-component="markdown"[\s\S]*dir=\{"auto" \/\* kilocode_change \*\/\}/)
-    expect(marked).toContain('')
-    expect(marked).toContain('
 {
+    const parser = createMarkedParser({})
+    const html = await Promise.resolve(
+      parser.parse(
+        ["متن با `inlineCode`", "", "```ts", "const value = 1", "```", "", "$$", "a = b + c", "$$"].join("\n"),
+      ),
+    )
+
+    expect(html).toContain('inlineCode')
+    expect(html).toContain('
')
+    expect(html).toContain("const value = 1")
+    expect(html.match(/ {
                             session.selectSession(s.id)
                           }}
                         >
-                          {s.title || t("agentManager.session.untitled")}
+                          {s.title || t("agentManager.session.untitled")}
                           {formatRelativeDate(s.updatedAt)}
                           

                              = (props) => {
                 startRename()
               }}
             >
-              {title()}
+              {title()}
             
           
         

diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx
index a5bed638192..79bdd7aeb84 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx
@@ -41,7 +41,7 @@ export const WelcomeEmptyState: Component = (props) => {
           
             {(item) => (
               
             )}
diff --git a/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx b/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx
index 79e7d8b8ff5..f999f951973 100644
--- a/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx
@@ -169,7 +169,7 @@ const CloudSessionList: Component = (props) => {
       >
         {(s) => (
           <>
-            {s.title}
+            {s.title}
             {formatRelativeDate(s.updatedAt)}
           
         )}
diff --git a/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx b/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx
index 6d412adb77d..5446bca90c2 100644
--- a/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx
@@ -210,7 +210,7 @@ const SessionList: Component = (props) => {
       >
         {(s) => (
           <>
-            {name(s)}
+            {name(s)}
             {formatRelativeDate(s.updatedAt)}
             
               {language.t("session.current")}

From 1c427f7ea2c6ebdbc819f48577668c6798a91b0d Mon Sep 17 00:00:00 2001
From: Mohammad Javad Naderi 
Date: Fri, 10 Jul 2026 00:02:00 +0330
Subject: [PATCH 07/10] fix(ui): preserve code block direction while streaming

Keep dir on the existing pre element when streaming Shiki highlighting
updates it in place. The updater removes current attributes before
copying Shiki attributes, and Shiki does not emit dir, so RTL markdown
roots could briefly force code blocks to render right-to-left during
streaming.

Export the update helper for a focused behavior test that verifies the
in-place highlight update keeps direction, replaces stale attributes,
applies Shiki attributes, preserves scroll position, and updates the
source hash.
---
 .../ui/src/kilocode/markdown-bidi.test.ts     | 102 ++++++++++++++++++
 .../src/kilocode/markdown-stream-highlight.ts |   4 +-
 2 files changed, 105 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/kilocode/markdown-bidi.test.ts b/packages/ui/src/kilocode/markdown-bidi.test.ts
index b992f09ce52..5d2c3dce366 100644
--- a/packages/ui/src/kilocode/markdown-bidi.test.ts
+++ b/packages/ui/src/kilocode/markdown-bidi.test.ts
@@ -2,6 +2,8 @@ import { describe, expect, test } from "bun:test"
 import fs from "node:fs"
 import path from "node:path"
 import { createMarkedParser } from "../context/marked"
+import { fnv1a } from "../context/marked"
+import { update } from "./markdown-stream-highlight"
 
 const root = path.resolve(import.meta.dir, "..")
 const markdownPath = path.join(root, "components/markdown.tsx")
@@ -26,4 +28,104 @@ describe("Markdown bidirectional rendering contract", () => {
     expect(html).toContain("const value = 1")
     expect(html.match(/ {
+    class Code {
+      constructor(readonly textContent: string) {}
+    }
+
+    class Pre {
+      isConnected = true
+      scrollLeft = 0
+      childNodes: Code[] = []
+      private attrs = new Map()
+
+      getAttribute(name: string) {
+        return this.attrs.get(name) ?? null
+      }
+
+      setAttribute(name: string, value: string) {
+        this.attrs.set(name, value)
+      }
+
+      removeAttribute(name: string) {
+        this.attrs.delete(name)
+      }
+
+      hasAttribute(name: string) {
+        return this.attrs.has(name)
+      }
+
+      getAttributeNames() {
+        return Array.from(this.attrs.keys())
+      }
+
+      get attributes() {
+        return Array.from(this.attrs, ([name, value]) => ({ name, value }))
+      }
+
+      get className() {
+        return this.getAttribute("class") ?? ""
+      }
+
+      get textContent() {
+        return this.childNodes.map((node) => node.textContent).join("")
+      }
+
+      set innerHTML(html: string) {
+        const text = html.match(/]*>([\s\S]*)<\/code>/)?.[1] ?? ""
+        this.childNodes = [new Code(text)]
+      }
+
+      replaceChildren(...nodes: Code[]) {
+        this.childNodes = nodes
+      }
+    }
+
+    class Div {
+      firstElementChild: Pre | null = null
+
+      set innerHTML(html: string) {
+        const pre = new Pre()
+        for (const match of html.matchAll(/\s([a-z-]+)="([^"]*)"/g)) {
+          pre.setAttribute(match[1]!, match[2]!)
+        }
+        pre.innerHTML = html
+        this.firstElementChild = pre
+      }
+    }
+
+    const scope = globalThis as typeof globalThis & {
+      document: Document
+      HTMLPreElement: typeof HTMLPreElement
+    }
+    const doc = scope.document
+    const elem = scope.HTMLPreElement
+    scope.document = {
+      createElement: (tag: string) => (tag === "pre" ? new Pre() : new Div()),
+    } as unknown as Document
+    scope.HTMLPreElement = Pre as unknown as typeof HTMLPreElement
+
+    const pre = document.createElement("pre")
+    const code = "const value = 1"
+    pre.setAttribute("dir", "auto")
+    pre.setAttribute("data-old", "removed")
+    pre.scrollLeft = 24
+    pre.innerHTML = `${code}`
+
+    try {
+      update(pre, `
${code}
`, code)
+
+      expect(pre.getAttribute("dir")).toBe("auto")
+      expect(pre.className).toBe("shiki")
+      expect(pre.getAttribute("tabindex")).toBe("0")
+      expect(pre.hasAttribute("data-old")).toBe(false)
+      expect(pre.getAttribute("data-source-hash")).toBe(fnv1a(code))
+      expect(pre.textContent).toBe(code)
+      expect(pre.scrollLeft).toBe(24)
+    } finally {
+      scope.document = doc
+      scope.HTMLPreElement = elem
+    }
+  })
 })
diff --git a/packages/ui/src/kilocode/markdown-stream-highlight.ts b/packages/ui/src/kilocode/markdown-stream-highlight.ts
index 993199a0933..2021fca95f8 100644
--- a/packages/ui/src/kilocode/markdown-stream-highlight.ts
+++ b/packages/ui/src/kilocode/markdown-stream-highlight.ts
@@ -29,8 +29,9 @@ async function source(lang: string, code: string) {
   }
 }
 
-function update(pre: HTMLPreElement, html: string, code: string) {
+export function update(pre: HTMLPreElement, html: string, code: string) {
   if (!pre.isConnected) return
+  const dir = pre.getAttribute("dir") ?? "auto"
   const temp = document.createElement("div")
   temp.innerHTML = html
   const next = temp.firstElementChild
@@ -42,6 +43,7 @@ function update(pre: HTMLPreElement, html: string, code: string) {
   for (const attr of next.attributes) {
     pre.setAttribute(attr.name, attr.value)
   }
+  pre.setAttribute("dir", dir)
   pre.setAttribute("data-source-hash", fnv1a(code))
   pre.replaceChildren(...Array.from(next.childNodes))
   pre.scrollLeft = x

From 52115fd47f4a1c81816c31fa0078d1d2d0d63a62 Mon Sep 17 00:00:00 2001
From: Mohammad Javad Naderi 
Date: Fri, 10 Jul 2026 00:16:54 +0330
Subject: [PATCH 08/10] chore(vscode): fix formatting issues

Format files after adding automatic direction attributes.
---
 .../kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx  | 4 +++-
 .../kilo-vscode/webview-ui/src/components/chat/TaskHeader.tsx | 4 +++-
 .../webview-ui/src/components/chat/WelcomeEmptyState.tsx      | 4 +++-
 .../webview-ui/src/components/history/CloudSessionList.tsx    | 4 +++-
 .../webview-ui/src/components/history/SessionList.tsx         | 4 +++-
 5 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx b/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx
index a0c8179bf82..6100c7fb560 100644
--- a/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx
+++ b/packages/kilo-vscode/webview-ui/agent-manager/AgentManagerApp.tsx
@@ -2554,7 +2554,9 @@ const AgentManagerContent: Component = () => {
                             session.selectSession(s.id)
                           }}
                         >
-                          {s.title || t("agentManager.session.untitled")}
+                          
+                            {s.title || t("agentManager.session.untitled")}
+                          
                           {formatRelativeDate(s.updatedAt)}
                           

                              = (props) => {
                 startRename()
               }}
             >
-              {title()}
+              
+                {title()}
+              
             
           
         

diff --git a/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx b/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx
index 79bdd7aeb84..b3475bbb077 100644
--- a/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/chat/WelcomeEmptyState.tsx
@@ -41,7 +41,9 @@ export const WelcomeEmptyState: Component = (props) => {
           
             {(item) => (
               
             )}
diff --git a/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx b/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx
index f999f951973..c2258a7d5c1 100644
--- a/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/history/CloudSessionList.tsx
@@ -169,7 +169,9 @@ const CloudSessionList: Component = (props) => {
       >
         {(s) => (
           <>
-            {s.title}
+            
+              {s.title}
+            
             {formatRelativeDate(s.updatedAt)}
           
         )}
diff --git a/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx b/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx
index 5446bca90c2..53c7b4654f1 100644
--- a/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx
+++ b/packages/kilo-vscode/webview-ui/src/components/history/SessionList.tsx
@@ -210,7 +210,9 @@ const SessionList: Component = (props) => {
       >
         {(s) => (
           <>
-            {name(s)}
+            
+              {name(s)}
+            
             {formatRelativeDate(s.updatedAt)}
             
               {language.t("session.current")}

From d7b372a14fcf82429b08c2b25381b8af968e6b61 Mon Sep 17 00:00:00 2001
From: Mohammad Javad Naderi 
Date: Fri, 10 Jul 2026 00:23:06 +0330
Subject: [PATCH 09/10] test(ui): improve markdown bidi tests

Replace source-shape checks with an isolated Markdown component render
for the root dir contract.

Use happy-dom for the streaming highlight update test so innerHTML
parsing, attributes, connectivity, and HTMLPreElement checks use a real
DOM implementation. Restore patched globals in finally to avoid test
leakage.
---
 bun.lock                                      |   1 +
 packages/ui/package.json                      |   1 +
 .../ui/src/kilocode/markdown-bidi.test.ts     | 141 ++++++++----------
 3 files changed, 61 insertions(+), 82 deletions(-)

diff --git a/bun.lock b/bun.lock
index b88b75af464..02c47ad3a71 100644
--- a/bun.lock
+++ b/bun.lock
@@ -712,6 +712,7 @@
         "@types/bun": "catalog:",
         "@types/katex": "0.16.7",
         "@typescript/native-preview": "catalog:",
+        "happy-dom": "20.8.9",
         "tailwindcss": "catalog:",
         "typescript": "catalog:",
         "vite": "catalog:",
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 538b2a93cca..f8930f61a87 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -37,6 +37,7 @@
     "@tsconfig/node22": "catalog:",
     "@types/bun": "catalog:",
     "@types/katex": "0.16.7",
+    "happy-dom": "20.8.9",
     "@typescript/native-preview": "catalog:",
     "tailwindcss": "catalog:",
     "typescript": "catalog:",
diff --git a/packages/ui/src/kilocode/markdown-bidi.test.ts b/packages/ui/src/kilocode/markdown-bidi.test.ts
index 5d2c3dce366..8551de4592e 100644
--- a/packages/ui/src/kilocode/markdown-bidi.test.ts
+++ b/packages/ui/src/kilocode/markdown-bidi.test.ts
@@ -1,18 +1,59 @@
 import { describe, expect, test } from "bun:test"
-import fs from "node:fs"
+import { Window } from "happy-dom"
 import path from "node:path"
 import { createMarkedParser } from "../context/marked"
 import { fnv1a } from "../context/marked"
 import { update } from "./markdown-stream-highlight"
 
-const root = path.resolve(import.meta.dir, "..")
-const markdownPath = path.join(root, "components/markdown.tsx")
+const root = path.resolve(import.meta.dir, "../..")
 
 describe("Markdown bidirectional rendering contract", () => {
-  test("sets one auto direction on the markdown root", () => {
-    const markdown = fs.readFileSync(markdownPath, "utf-8")
+  test("renders the markdown root with automatic direction", () => {
+    const code = String.raw`
+      import { mock } from "bun:test"
+      import { createComponent, renderToString } from "solid-js/web"
+
+      function attr(props) {
+        return Object.entries(props || {})
+          .filter(([key, value]) => key !== "children" && value != null && value !== false && typeof value !== "object")
+          .map(([key, value]) => " " + (key === "className" ? "class" : key) + "=\"" + String(value) + "\"")
+          .join("")
+      }
+
+      globalThis.React = {
+        createElement(type, props, ...children) {
+          const next = { ...(props || {}) }
+          if (children.length) next.children = children.length === 1 ? children[0] : children
+          if (typeof type === "function") return createComponent(type, next)
+          return "<" + type + attr(next) + ">" + children.join("") + ""
+        },
+      }
 
-    expect(markdown).toMatch(/data-component="markdown"[\s\S]*dir=\{"auto" \/\* kilocode_change \*\/\}/)
+      mock.module("./src/context/marked", () => ({
+        useMarked: () => ({ parse: async () => "" }),
+        deferredHighlight: async () => {},
+        fnv1a: (text) => text,
+      }))
+      mock.module("./src/kilocode/markdown-mermaid", () => ({
+        hasMermaid: () => false,
+        preserveMermaid: () => false,
+        renderMermaid: async () => {},
+      }))
+
+      const { Markdown } = await import("./src/components/markdown")
+      console.log(renderToString(() => createComponent(Markdown, { text: "hello" })))
+    `
+    const proc = Bun.spawnSync({
+      cmd: ["bun", "-e", code],
+      cwd: root,
+      stdout: "pipe",
+      stderr: "pipe",
+    })
+
+    expect(proc.exitCode).toBe(0)
+    const html = proc.stdout.toString()
+    expect(html).toContain('data-component="markdown"')
+    expect(html).toContain('dir="auto"')
   })
 
   test("renders code, pre, and math with isolated direction", async () => {
@@ -30,90 +71,26 @@ describe("Markdown bidirectional rendering contract", () => {
   })
 
   test("updates streaming code highlight in place while preserving direction", () => {
-    class Code {
-      constructor(readonly textContent: string) {}
-    }
-
-    class Pre {
-      isConnected = true
-      scrollLeft = 0
-      childNodes: Code[] = []
-      private attrs = new Map()
-
-      getAttribute(name: string) {
-        return this.attrs.get(name) ?? null
-      }
-
-      setAttribute(name: string, value: string) {
-        this.attrs.set(name, value)
-      }
-
-      removeAttribute(name: string) {
-        this.attrs.delete(name)
-      }
-
-      hasAttribute(name: string) {
-        return this.attrs.has(name)
-      }
-
-      getAttributeNames() {
-        return Array.from(this.attrs.keys())
-      }
-
-      get attributes() {
-        return Array.from(this.attrs, ([name, value]) => ({ name, value }))
-      }
-
-      get className() {
-        return this.getAttribute("class") ?? ""
-      }
-
-      get textContent() {
-        return this.childNodes.map((node) => node.textContent).join("")
-      }
-
-      set innerHTML(html: string) {
-        const text = html.match(/]*>([\s\S]*)<\/code>/)?.[1] ?? ""
-        this.childNodes = [new Code(text)]
-      }
-
-      replaceChildren(...nodes: Code[]) {
-        this.childNodes = nodes
-      }
-    }
-
-    class Div {
-      firstElementChild: Pre | null = null
-
-      set innerHTML(html: string) {
-        const pre = new Pre()
-        for (const match of html.matchAll(/\s([a-z-]+)="([^"]*)"/g)) {
-          pre.setAttribute(match[1]!, match[2]!)
-        }
-        pre.innerHTML = html
-        this.firstElementChild = pre
-      }
-    }
-
+    const win = new Window()
     const scope = globalThis as typeof globalThis & {
       document: Document
       HTMLPreElement: typeof HTMLPreElement
     }
     const doc = scope.document
     const elem = scope.HTMLPreElement
-    scope.document = {
-      createElement: (tag: string) => (tag === "pre" ? new Pre() : new Div()),
-    } as unknown as Document
-    scope.HTMLPreElement = Pre as unknown as typeof HTMLPreElement
-
-    const pre = document.createElement("pre")
-    const code = "const value = 1"
-    pre.setAttribute("dir", "auto")
-    pre.setAttribute("data-old", "removed")
-    pre.scrollLeft = 24
-    pre.innerHTML = `${code}`
 
     try {
+      scope.document = win.document as unknown as Document
+      scope.HTMLPreElement = win.HTMLPreElement as unknown as typeof HTMLPreElement
+
+      const pre = document.createElement("pre")
+      const code = "const value = 1"
+      pre.setAttribute("dir", "auto")
+      pre.setAttribute("data-old", "removed")
+      pre.scrollLeft = 24
+      pre.innerHTML = `${code}`
+      document.body.append(pre)
+
       update(pre, `
${code}
`, code)
 
       expect(pre.getAttribute("dir")).toBe("auto")

From b95f2f1b606964dc695cbfda2136c08f945d12c6 Mon Sep 17 00:00:00 2001
From: Mohammad Javad Naderi 
Date: Fri, 10 Jul 2026 01:20:08 +0330
Subject: [PATCH 10/10] test(ui): address markdown bidi review comments

---
 packages/ui/package.json                       | 2 +-
 packages/ui/src/kilocode/markdown-bidi.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index f8930f61a87..e3dd08cfa67 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -37,8 +37,8 @@
     "@tsconfig/node22": "catalog:",
     "@types/bun": "catalog:",
     "@types/katex": "0.16.7",
-    "happy-dom": "20.8.9",
     "@typescript/native-preview": "catalog:",
+    "happy-dom": "20.8.9",
     "tailwindcss": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
diff --git a/packages/ui/src/kilocode/markdown-bidi.test.ts b/packages/ui/src/kilocode/markdown-bidi.test.ts
index 8551de4592e..4382f41e6c8 100644
--- a/packages/ui/src/kilocode/markdown-bidi.test.ts
+++ b/packages/ui/src/kilocode/markdown-bidi.test.ts
@@ -50,7 +50,7 @@ describe("Markdown bidirectional rendering contract", () => {
       stderr: "pipe",
     })
 
-    expect(proc.exitCode).toBe(0)
+    expect(proc.exitCode, proc.stderr.toString()).toBe(0)
     const html = proc.stdout.toString()
     expect(html).toContain('data-component="markdown"')
     expect(html).toContain('dir="auto"')