From 2c2d462694b0e87a9ed70a0ecfed63d475b89833 Mon Sep 17 00:00:00 2001
From: Eran Krakovsky <erank@ai21.com>
Date: Fri, 3 Jul 2026 16:05:05 +0300
Subject: [PATCH] fix: support RTL chat message rendering

---
 apps/web/src/components/ChatMarkdown.test.tsx |  74 ++++++++++++
 apps/web/src/components/ChatMarkdown.tsx      | 110 +++++++++++++++++-
 .../src/components/ComposerPromptEditor.tsx   |  23 +++-
 .../src/components/chat/MessagesTimeline.tsx  |  11 +-
 apps/web/src/index.css                        |  39 ++++++-
 apps/web/src/lib/rtl.test.ts                  |  62 ++++++++++
 apps/web/src/lib/rtl.ts                       |  60 ++++++++++
 7 files changed, 368 insertions(+), 11 deletions(-)
 create mode 100644 apps/web/src/components/ChatMarkdown.test.tsx
 create mode 100644 apps/web/src/lib/rtl.test.ts
 create mode 100644 apps/web/src/lib/rtl.ts

diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
new file mode 100644
index 00000000000..c650dc11f04
--- /dev/null
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -0,0 +1,74 @@
+import { EnvironmentId } from "@t3tools/contracts";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it, vi } from "vite-plus/test";
+
+import ChatMarkdown from "./ChatMarkdown";
+
+vi.mock("@effect/atom-react", () => ({
+  useAtomValue: () => ({ availableEditors: [] }),
+}));
+
+vi.mock("../hooks/useTheme", () => ({
+  useTheme: () => ({ resolvedTheme: "light" }),
+}));
+
+vi.mock("../editorPreferences", () => ({
+  useOpenInPreferredEditor: () => () => {},
+}));
+
+vi.mock("../state/assets", () => ({
+  assetEnvironment: { createUrl: {} },
+}));
+
+vi.mock("../state/entities", () => ({
+  useActiveEnvironmentId: () => EnvironmentId.make("environment-local"),
+}));
+
+vi.mock("../state/preview", () => ({
+  previewEnvironment: { open: {} },
+}));
+
+vi.mock("../state/server", () => ({
+  serverEnvironment: { configValueAtom: () => ({}) },
+}));
+
+vi.mock("../state/session", () => ({
+  usePreparedConnection: () => ({ _tag: "None" }),
+}));
+
+vi.mock("../state/use-atom-command", () => ({
+  useAtomCommand: () => () => {},
+}));
+
+vi.mock("../state/use-atom-query-runner", () => ({
+  useAtomQueryRunner: () => () => "",
+}));
+
+describe("ChatMarkdown bidi list rendering", () => {
+  it("renders code-prefixed Hebrew unordered lists as RTL", () => {
+    const markup = renderToStaticMarkup(
+      <ChatMarkdown
+        text={[
+          "- **`apps/web`**: אפליקציית React/Vite שמציגה צ'אט",
+          "- **`apps/server`**: שרת Node.js שמריץ CLI",
+        ].join("\n")}
+        cwd={undefined}
+      />,
+    );
+
+    expect(markup).toContain('<ul dir="rtl">');
+    expect(markup).toContain('<li dir="rtl">');
+  });
+
+  it("keeps English unordered lists LTR", () => {
+    const markup = renderToStaticMarkup(
+      <ChatMarkdown
+        text={["- README.md", "- apps/server/package.json"].join("\n")}
+        cwd={undefined}
+      />,
+    );
+
+    expect(markup).toContain('<ul dir="ltr">');
+    expect(markup).toContain('<li dir="ltr">');
+  });
+});
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index b04e98a8a60..0c82eb8cb20 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -53,6 +53,7 @@ import { useOpenInPreferredEditor } from "../editorPreferences";
 import { resolveDiffThemeName, type DiffThemeName } from "../lib/diffRendering";
 import { fnv1a32 } from "../lib/diffRendering";
 import { LRUCache } from "../lib/lruCache";
+import { dirFor, dirForMarkdown } from "../lib/rtl";
 import { useTheme } from "../hooks/useTheme";
 import { getClientSettings } from "../hooks/useSettings";
 import {
@@ -242,6 +243,38 @@ function nodeToPlainText(node: ReactNode): string {
   return "";
 }
 
+function blockDir(children: ReactNode): "rtl" | "ltr" {
+  return dirFor(nodeToPlainText(children));
+}
+
+type MarkdownNodeWithPosition = {
+  position?:
+    | {
+        start?: { offset?: number | undefined } | undefined;
+        end?: { offset?: number | undefined } | undefined;
+      }
+    | undefined;
+};
+
+function blockDirForMarkdownNode(
+  markdown: string,
+  node: MarkdownNodeWithPosition | undefined,
+  children: ReactNode,
+): "rtl" | "ltr" {
+  const start = node?.position?.start?.offset;
+  const end = node?.position?.end?.offset;
+  if (
+    typeof start === "number" &&
+    typeof end === "number" &&
+    start >= 0 &&
+    end > start &&
+    end <= markdown.length
+  ) {
+    return dirForMarkdown(markdown.slice(start, end));
+  }
+  return blockDir(children);
+}
+
 function extractCodeBlock(
   children: ReactNode,
 ): { className: string | undefined; code: string } | null {
@@ -1328,19 +1361,90 @@ function ChatMarkdown({
   );
   const markdownComponents = useMemo<Components>(
     () => ({
-      p({ node: _node, children, ...props }) {
-        return <p {...props}>{renderSkillInlineMarkdownChildren(children, skills)}</p>;
+      p({ node, children, ...props }) {
+        return (
+          <p {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {renderSkillInlineMarkdownChildren(children, skills)}
+          </p>
+        );
       },
       li({ node, children, ...props }) {
         const listItemStart = node?.position?.start.offset;
         const markerOffset =
           typeof listItemStart === "number" ? findTaskListMarkerOffset(text, listItemStart) : null;
         return (
-          <li {...props} data-task-marker-offset={markerOffset ?? undefined}>
+          <li
+            {...props}
+            dir={blockDirForMarkdownNode(text, node, children)}
+            data-task-marker-offset={markerOffset ?? undefined}
+          >
             {renderSkillInlineMarkdownChildren(children, skills)}
           </li>
         );
       },
+      h1({ node, children, ...props }) {
+        return (
+          <h1 {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </h1>
+        );
+      },
+      h2({ node, children, ...props }) {
+        return (
+          <h2 {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </h2>
+        );
+      },
+      h3({ node, children, ...props }) {
+        return (
+          <h3 {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </h3>
+        );
+      },
+      h4({ node, children, ...props }) {
+        return (
+          <h4 {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </h4>
+        );
+      },
+      h5({ node, children, ...props }) {
+        return (
+          <h5 {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </h5>
+        );
+      },
+      h6({ node, children, ...props }) {
+        return (
+          <h6 {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </h6>
+        );
+      },
+      ul({ node, children, ...props }) {
+        return (
+          <ul {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </ul>
+        );
+      },
+      ol({ node, children, ...props }) {
+        return (
+          <ol {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </ol>
+        );
+      },
+      blockquote({ node, children, ...props }) {
+        return (
+          <blockquote {...props} dir={blockDirForMarkdownNode(text, node, children)}>
+            {children}
+          </blockquote>
+        );
+      },
       input({ node: _node, type, checked, disabled: _disabled, ...props }) {
         if (type !== "checkbox" || !onTaskListChange) {
           return (
diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 18579cda6d3..dd4cc1af3d3 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -63,6 +63,7 @@ import {
   INLINE_TERMINAL_CONTEXT_PLACEHOLDER,
   type TerminalContextDraft,
 } from "~/lib/terminalContext";
+import { dirFor } from "~/lib/rtl";
 import { cn } from "~/lib/utils";
 import { basenameOfPath } from "~/pierre-icons";
 import {
@@ -1383,6 +1384,25 @@ function ComposerSurroundSelectionPlugin(props: {
   return null;
 }
 
+function ComposerBidiDirectionPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const syncRootDirection = (text: string) => {
+      const root = editor.getRootElement();
+      if (!root) return;
+      const dir = dirFor(text);
+      if (root.getAttribute("dir") !== dir) root.setAttribute("dir", dir);
+    };
+
+    editor.getEditorState().read(() => {
+      syncRootDirection($getRoot().getTextContent());
+    });
+
+    return editor.registerTextContentListener(syncRootDirection);
+  }, [editor]);
+  return null;
+}
+
 function ComposerPromptEditorInner({
   value,
   cursor,
@@ -1610,7 +1630,7 @@ function ComposerPromptEditorInner({
           contentEditable={
             <ContentEditable
               className={cn(
-                "block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent text-[16px] leading-relaxed text-foreground focus:outline-none sm:text-[14px]",
+                "bidi-plaintext block max-h-50 min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap wrap-break-word bg-transparent text-[16px] leading-relaxed text-foreground focus:outline-none sm:text-[14px]",
                 className,
               )}
               data-testid="composer-editor"
@@ -1634,6 +1654,7 @@ function ComposerPromptEditorInner({
         <ComposerInlineTokenArrowPlugin />
         <ComposerInlineTokenSelectionNormalizePlugin />
         <ComposerInlineTokenBackspacePlugin />
+        <ComposerBidiDirectionPlugin />
         <HistoryPlugin />
       </div>
     </ComposerTerminalContextActionsContext>
diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx
index 1a4dc6b6895..1e3fe2d6c21 100644
--- a/apps/web/src/components/chat/MessagesTimeline.tsx
+++ b/apps/web/src/components/chat/MessagesTimeline.tsx
@@ -32,6 +32,7 @@ import {
   workLogEntryIsToolLike,
 } from "../../session-logic";
 import { type TurnDiffSummary } from "../../types";
+import { dirFor } from "../../lib/rtl";
 import { summarizeTurnDiffStats } from "../../lib/turnDiffTree";
 import {
   getRenderablePatch,
@@ -1561,7 +1562,10 @@ const UserMessageBody = memo(function UserMessageBody(props: {
         }
 
         return (
-          <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
+          <div
+            dir={dirFor(props.text)}
+            className="bidi-plaintext whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground"
+          >
             {inlineNodes}
           </div>
         );
@@ -1599,7 +1603,10 @@ const UserMessageBody = memo(function UserMessageBody(props: {
     }
 
     return (
-      <div className="whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground">
+      <div
+        dir={dirFor(props.text)}
+        className="bidi-plaintext whitespace-pre-wrap wrap-break-word text-sm leading-relaxed text-foreground"
+      >
         {inlineNodes}
       </div>
     );
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 3ae42a3e61c..196877acdcf 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -472,12 +472,12 @@ label:has(> select#reasoning-effort) select {
 }
 
 .chat-markdown ul {
-  padding-left: 1.25rem;
+  padding-inline-start: 1.25rem;
   list-style-type: disc;
 }
 
 .chat-markdown ol {
-  padding-left: 1.25rem;
+  padding-inline-start: 1.25rem;
   list-style-type: decimal;
 }
 
@@ -507,7 +507,8 @@ label:has(> select#reasoning-effort) select {
 }
 
 .chat-markdown li.task-list-item input[type="checkbox"] {
-  margin: 0 0.35em 0.15em -1.25rem;
+  margin-block: 0 0.15em;
+  margin-inline: -1.25rem 0.35em;
   vertical-align: middle;
 }
 
@@ -537,11 +538,39 @@ label:has(> select#reasoning-effort) select {
 }
 
 .chat-markdown blockquote {
-  border-left: 2px solid var(--border);
-  padding-left: 0.8rem;
+  border-inline-start: 2px solid var(--border);
+  padding-inline-start: 0.8rem;
   color: var(--muted-foreground);
 }
 
+/* Bidi: each line resolves its own base direction (UAX#9 plaintext). */
+.bidi-plaintext {
+  unicode-bidi: plaintext;
+}
+
+/* Per-line direction inside markdown text blocks. */
+.chat-markdown p,
+.chat-markdown li,
+.chat-markdown h1,
+.chat-markdown h2,
+.chat-markdown h3,
+.chat-markdown h4,
+.chat-markdown h5,
+.chat-markdown h6,
+.chat-markdown blockquote {
+  unicode-bidi: plaintext;
+}
+
+/* Source code stays LTR even inside RTL messages. */
+.chat-markdown pre,
+.chat-markdown code,
+.chat-markdown .chat-markdown-codeblock,
+.chat-markdown .chat-markdown-shiki,
+.chat-markdown .chat-markdown-table-container {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
 .chat-markdown section[data-footnotes] {
   margin-top: 1.25rem;
   border-top: 1px solid var(--border);
diff --git a/apps/web/src/lib/rtl.test.ts b/apps/web/src/lib/rtl.test.ts
new file mode 100644
index 00000000000..faeffec37be
--- /dev/null
+++ b/apps/web/src/lib/rtl.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from "vite-plus/test";
+import { containsRtl, dirFor, dirForMarkdown, isRtlText } from "./rtl";
+
+describe("isRtlText", () => {
+  const cases: Array<[string, boolean, string]> = [
+    ["שלום עולם", true, "Hebrew"],
+    ["مرحبا بالعالم", true, "Arabic"],
+    ["سلام دنیا", true, "Persian"],
+    ["שלום 123 עולם", true, "digits are neutral"],
+    ["שלום hello עולם", true, "mixed, RTL majority"],
+    ["Note: بقية الجملة عربية طويلة جدا", true, "LTR-lead, RTL majority (dir=auto failure case)"],
+    ["Hello world", false, "English"],
+    ["Hello world שלום", false, "mixed, LTR majority"],
+    ["", false, "empty"],
+    ["   \n\t  ", false, "whitespace only"],
+    ["12345", false, "digits only"],
+    ["!@#$%", false, "punctuation only"],
+    ["ﭐﭑﭒ", true, "Arabic presentation forms A"],
+    ["ﬠﬡ", true, "Hebrew presentation forms"],
+  ];
+
+  for (const [input, expected, why] of cases) {
+    it(`${JSON.stringify(input)} → ${expected} (${why})`, () => {
+      expect(isRtlText(input)).toBe(expected);
+    });
+  }
+});
+
+describe("containsRtl", () => {
+  it("returns true for mixed text with any RTL char", () => {
+    expect(containsRtl("hello שלום")).toBe(true);
+  });
+
+  it("returns false for pure English", () => {
+    expect(containsRtl("hello world")).toBe(false);
+  });
+
+  it("returns false for empty text", () => {
+    expect(containsRtl("")).toBe(false);
+  });
+
+  it("returns false for CJK text", () => {
+    expect(containsRtl("中文")).toBe(false);
+    expect(containsRtl("あいう")).toBe(false);
+  });
+});
+
+describe("dirFor", () => {
+  it("returns rtl for RTL-majority text", () => {
+    expect(dirFor("שלום")).toBe("rtl");
+  });
+
+  it("returns ltr for LTR text", () => {
+    expect(dirFor("hi")).toBe("ltr");
+  });
+});
+
+describe("dirForMarkdown", () => {
+  it("ignores inline code labels when deciding direction", () => {
+    expect(dirForMarkdown("- **`apps/web`**: אפליקציית React שמציגה צ'אט")).toBe("rtl");
+  });
+});
diff --git a/apps/web/src/lib/rtl.ts b/apps/web/src/lib/rtl.ts
new file mode 100644
index 00000000000..eca155f4409
--- /dev/null
+++ b/apps/web/src/lib/rtl.ts
@@ -0,0 +1,60 @@
+// Base-direction detection by character majority. Ported from the `bidi`
+// Chrome extension (MIT). React components know their text at render time, so
+// only the pure classifiers are ported — not the DOM tree walker.
+
+function isRtlChar(c: number): boolean {
+  return (
+    (c >= 0x0590 && c <= 0x05ff) || // Hebrew
+    (c >= 0x0600 && c <= 0x06ff) || // Arabic
+    (c >= 0x0750 && c <= 0x077f) || // Arabic Supplement
+    (c >= 0x08a0 && c <= 0x08ff) || // Arabic Extended-A
+    (c >= 0xfb1d && c <= 0xfb4f) || // Hebrew presentation forms
+    (c >= 0xfb50 && c <= 0xfdff) || // Arabic presentation forms A
+    (c >= 0xfe70 && c <= 0xfeff) //    Arabic presentation forms B
+  );
+}
+
+function isLtrChar(c: number): boolean {
+  return (
+    (c >= 0x41 && c <= 0x5a) || // A-Z
+    (c >= 0x61 && c <= 0x7a) || // a-z
+    (c >= 0xc0 && c <= 0x024f) //  Latin-1 Supplement + Latin Extended-A/B
+  );
+}
+
+/**
+ * Whether text should render right-to-left, decided by strong-character
+ * majority. Neutral characters (digits, punctuation, whitespace) do not vote;
+ * text with no strong characters is treated as LTR.
+ */
+export function isRtlText(text: string): boolean {
+  let rtl = 0;
+  let ltr = 0;
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charCodeAt(i);
+    if (isRtlChar(c)) rtl++;
+    else if (isLtrChar(c)) ltr++;
+  }
+  if (rtl === 0 && ltr === 0) return false;
+  return rtl > ltr;
+}
+
+/** Whether text contains any RTL character (regardless of majority). */
+export function containsRtl(text: string): boolean {
+  return Array.from(text).some((char) => isRtlChar(char.charCodeAt(0)));
+}
+
+/** The `dir` attribute value for text, by majority vote. Neutral → "ltr". */
+export function dirFor(text: string): "rtl" | "ltr" {
+  return isRtlText(text) ? "rtl" : "ltr";
+}
+
+// Code spans, fenced blocks, and URLs are direction-neutral: they render LTR
+// regardless of base direction, so letting them vote skews code-heavy RTL
+// text toward LTR.
+const MARKDOWN_DIRECTION_NEUTRAL_RE = /```[\s\S]*?(?:```|$)|`[^`\n]*`|https?:\/\/\S+/g;
+
+/** `dirFor` over markdown source, ignoring code spans/fences and URLs. */
+export function dirForMarkdown(text: string): "rtl" | "ltr" {
+  return dirFor(text.replace(MARKDOWN_DIRECTION_NEUTRAL_RE, ""));
+}