From 0d66eabb102aceaf863bbb8cbd009014ad88c111 Mon Sep 17 00:00:00 2001
From: Asim M Al Twijry <3624441+AsimNet@users.noreply.github.com>
Date: Sat, 15 Aug 2026 20:27:25 +0000
Subject: [PATCH 01/31] fix(web): read Arabic and Hebrew messages in the right
direction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
A message renders under the app's direction rather than its own, so Arabic
prose comes out with its trailing punctuation on the wrong end, inline code and
file paths displaced inside the sentence, and list bullets and quote bars on the
side opposite the text they belong to.
Each block of message markdown now carries dir="auto", so the browser takes that
block's base direction from its own first strong character — one Arabic
paragraph and one English paragraph in the same message each read correctly.
Code and tables opt out and stay left-to-right, since identifiers, paths, and
column order are not prose. Only the outermost block of a run is marked, because
dir="auto" skips descendants that carry their own dir: marking a list and its
items both would leave the list with no text to judge and paint its bullets into
a gutter that had moved. The list, quote, and task-list gutters in the
stylesheet become logical so they follow the marker.
Thread titles and project names get the same treatment: they are generated from
the user's own prompt, and truncating them needs the ellipsis on the correct end.
Written by Claude Opus 5 in Claude Code.
---
apps/web/src/components/ChatMarkdown.test.tsx | 46 +++++++++++++-
apps/web/src/components/ChatMarkdown.tsx | 63 +++++++++++++++++++
apps/web/src/components/LegacySidebar.tsx | 7 ++-
apps/web/src/components/Sidebar.tsx | 22 +++++--
apps/web/src/components/chat/ChatHeader.tsx | 18 ++++--
.../components/chat/MessagesTimeline.test.tsx | 4 +-
.../src/components/chat/MessagesTimeline.tsx | 12 +++-
apps/web/src/index.css | 15 +++--
8 files changed, 166 insertions(+), 21 deletions(-)
diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
index 9499ee5a6915..c2b4004a7b25 100644
--- a/apps/web/src/components/ChatMarkdown.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -1,6 +1,7 @@
+import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vite-plus/test";
-import { orderedListGutterStyle } from "./ChatMarkdown";
+import ChatMarkdown, { orderedListGutterStyle } from "./ChatMarkdown";
describe("orderedListGutterStyle", () => {
it("leaves the default gutter alone for single-digit lists", () => {
@@ -34,3 +35,46 @@ describe("orderedListGutterStyle", () => {
expect(orderedListGutterStyle(0, undefined)).toBeUndefined();
});
});
+
+describe("chat markdown text direction", () => {
+ function render(text: string) {
+ return renderToStaticMarkup();
+ }
+
+ it("lets each block pick its own direction from its own text", () => {
+ const html = render("English first.\n\nمرحبا بالعالم.");
+ expect(html).toContain('
English first.
');
+ expect(html).toContain('
مرحبا بالعالم.
');
+ });
+
+ it("marks headings, lists, and quotes so their markers follow the text", () => {
+ const html = render("# عنوان\n\n- عنصر\n\n> اقتباس");
+ expect(html).toContain('
');
+ expect(html).toContain('
');
+ expect(html).toContain('
');
+ });
+
+ it("marks only the outermost block, so a container still sees its own text", () => {
+ // A nested `dir` would be skipped when the browser resolves the outer
+ // `dir="auto"`, leaving the list LTR and its bullets in the wrong gutter.
+ const html = render("- عنصر\n\n> اقتباس");
+ expect(html).toContain("
");
+ expect(html).not.toContain("
\n
');
+ });
+
+ it("pins code left-to-right so an Arabic comment cannot reorder a snippet", () => {
+ const html = render("`git status` وأيضا\n\n```sh\n# تعليق\ngit status\n```");
+ // The paragraph around it still reads right-to-left; only the code opts out.
+ expect(html).toContain('
{
+ const html = render("| اسم | value |\n| --- | --- |\n| قيمة | 1 |");
+ expect(html).toContain('
');
+ expect(html).toContain('
');
+ expect(html).toContain('
');
+ });
+});
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index c4548540e2ce..26b963b48a0e 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -195,6 +195,7 @@ const CHAT_MARKDOWN_REMARK_PLUGINS = [
remarkNormalizeListItemIndentation,
remarkPreserveCodeMeta,
remarkTagInlineCode,
+ remarkTextDirection,
] satisfies NonNullable;
const CHAT_MARKDOWN_REMARK_PLUGINS_WITH_BREAKS = [
@@ -204,6 +205,7 @@ const CHAT_MARKDOWN_REMARK_PLUGINS_WITH_BREAKS = [
remarkBreaks,
remarkPreserveCodeMeta,
remarkTagInlineCode,
+ remarkTextDirection,
] satisfies NonNullable;
const CHAT_MARKDOWN_REHYPE_PLUGINS = [
@@ -340,6 +342,64 @@ function remarkTagInlineCode() {
};
}
+/**
+ * Message prose belongs to whoever wrote it, so its direction is a property of
+ * the text and not of the app: `dir="auto"` makes the browser read each block's
+ * base direction off that block's own first strong character, which is what
+ * puts an Arabic sentence's trailing punctuation and its list markers on the
+ * right side without touching the English block above it.
+ *
+ * Code and tables opt out and stay LTR. Their shape is not prose — identifiers,
+ * paths, and column order read the same in every locale, and letting an Arabic
+ * comment flip a snippet would misreport what the agent actually wrote.
+ */
+const AUTO_DIRECTION_NODE_TYPES = new Set([
+ "blockquote",
+ "heading",
+ "list",
+ "paragraph",
+ "tableCell",
+]);
+const LTR_DIRECTION_NODE_TYPES = new Set(["code", "inlineCode", "table"]);
+
+function setDirection(node: MarkdownAstNode, dir: "auto" | "ltr") {
+ node.data = {
+ ...node.data,
+ hProperties: {
+ ...node.data?.hProperties,
+ dir,
+ },
+ };
+}
+
+function remarkTextDirection() {
+ return (tree: MarkdownAstNode) => {
+ // `dir="auto"` reads the first strong character of an element's *own* text
+ // and skips any descendant that carries its own `dir`. So only the outermost
+ // block of a run gets marked: marking a list and its items both would leave
+ // the list itself with no text to judge, fall back to LTR, and paint the
+ // bullets of an RTL item into a gutter that is no longer on that side.
+ const visit = (node: MarkdownAstNode, insideAutoBlock: boolean) => {
+ const type = node.type ?? "";
+ if (LTR_DIRECTION_NODE_TYPES.has(type)) {
+ setDirection(node, "ltr");
+ // A pinned table is not an `auto` ancestor, so its cells are free to
+ // pick their own direction while the column order stays put.
+ node.children?.forEach((child) => visit(child, false));
+ return;
+ }
+
+ const isAutoBlock = !insideAutoBlock && AUTO_DIRECTION_NODE_TYPES.has(type);
+ if (isAutoBlock) {
+ setDirection(node, "auto");
+ }
+ node.children?.forEach((child) => visit(child, insideAutoBlock || isAutoBlock));
+ };
+
+ visit(tree, false);
+ };
+}
+
function nodeToPlainText(node: ReactNode): string {
if (typeof node === "string" || typeof node === "number") {
return String(node);
@@ -671,6 +731,9 @@ function MarkdownCodeBlock({
return (
)}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index fea03489b7fa..c1758876c5fe 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1640,7 +1640,9 @@ code {
custom property, so without this a task-list under a 3+ digit ordered
list would inherit the outer gutter instead of its own default. */
--list-gutter: 1.25rem;
- padding-left: 1.25rem;
+ /* Logical, because a list whose text is Arabic or Hebrew carries dir="auto"
+ and paints its markers on the right — the gutter has to move with them. */
+ padding-inline-start: 1.25rem;
list-style-type: disc;
}
@@ -1651,7 +1653,7 @@ code {
nested ol without its own widened marker doesn't inherit the outer one. */
.chat-markdown ol {
--list-gutter: 1.25rem;
- padding-left: var(--list-gutter, 1.25rem);
+ padding-inline-start: var(--list-gutter, 1.25rem);
list-style-type: decimal;
}
@@ -1681,7 +1683,8 @@ code {
}
.chat-markdown li.task-list-item input[type="checkbox"] {
- margin: 0 0.35em 0.15em calc(-1 * var(--list-gutter, 1.25rem));
+ margin: 0 0 0.15em;
+ margin-inline: calc(-1 * var(--list-gutter, 1.25rem)) 0.35em;
vertical-align: middle;
}
@@ -1705,8 +1708,8 @@ code {
}
.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);
}
@@ -1720,7 +1723,7 @@ code {
.chat-markdown section[data-footnotes] ol {
margin: 0;
- padding-left: 1.25rem;
+ padding-inline-start: 1.25rem;
}
.chat-markdown section[data-footnotes] li + li {
From 8d90e3abf69ef5bbf365a444f2321414ff8491bd Mon Sep 17 00:00:00 2001
From: Asim M Al Twijry <3624441+AsimNet@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:22:56 +0000
Subject: [PATCH 02/31] fix(web): carry direction into alerts, file chips, and
rename inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Review follow-ups on the same concern.
A GitHub alert is not rendered as a blockquote — its renderer builds a titled
callout from scratch — so claiming the blockquote as the marked block stranded
the body: the dir never reached the callout, and the paragraphs inside it were
skipped as already-covered. Alert blockquotes are no longer claimed, so their
paragraphs carry their own direction under LTR chrome, and that chrome's gutter
becomes logical.
A file path is an identifier, but the code renderer swaps a chip in for the
`` it replaces, so the pin was lost exactly where the PR claimed
to fix it. The chip carries it now.
The terminal-context wrapper drops its dir: the chips always precede the message
text, so it could only ever resolve from a chip label, while the markdown below
already picks its own direction per block.
Thread-title rename inputs get dir="auto" so a title does not flip direction the
moment it is edited.
Written by Claude Opus 5 in Claude Code.
---
apps/web/src/components/ChatMarkdown.test.tsx | 15 +++++++++++++++
apps/web/src/components/ChatMarkdown.tsx | 18 ++++++++++++++++--
apps/web/src/components/LegacySidebar.tsx | 1 +
apps/web/src/components/Sidebar.tsx | 1 +
.../src/components/chat/MessagesTimeline.tsx | 8 ++++----
5 files changed, 37 insertions(+), 6 deletions(-)
diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
index c2b4004a7b25..c5cf63efeecf 100644
--- a/apps/web/src/components/ChatMarkdown.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -71,6 +71,21 @@ describe("chat markdown text direction", () => {
expect(html).toContain('
{
+ // The alert renderer builds its own element, so the blockquote cannot be the
+ // marked block — the body paragraphs have to carry the direction instead.
+ const html = render("> [!NOTE]\n> مرحبا بالعالم.");
+ expect(html).toContain('
');
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 26b963b48a0e..8cd688647111 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -379,6 +379,10 @@ function remarkTextDirection() {
// block of a run gets marked: marking a list and its items both would leave
// the list itself with no text to judge, fall back to LTR, and paint the
// bullets of an RTL item into a gutter that is no longer on that side.
+ //
+ // The cost is that one list reads in one direction. A list that mixes an
+ // Arabic item with an English one takes the direction of its first item,
+ // which is the trade for markers that stay next to the text they label.
const visit = (node: MarkdownAstNode, insideAutoBlock: boolean) => {
const type = node.type ?? "";
if (LTR_DIRECTION_NODE_TYPES.has(type)) {
@@ -389,7 +393,13 @@ function remarkTextDirection() {
return;
}
- const isAutoBlock = !insideAutoBlock && AUTO_DIRECTION_NODE_TYPES.has(type);
+ // A GitHub alert is rendered as a titled callout rather than a quote, and
+ // its own renderer builds that chrome from scratch. Claiming the block
+ // here would strand its body: the `dir` never reaches the callout, and the
+ // paragraphs inside it would have been skipped as already-covered.
+ const isAlertBlockquote = type === "blockquote" && node.data?.hProperties?.dataAlert != null;
+ const isAutoBlock =
+ !insideAutoBlock && !isAlertBlockquote && AUTO_DIRECTION_NODE_TYPES.has(type);
if (isAutoBlock) {
setDirection(node, "auto");
}
@@ -1364,6 +1374,10 @@ const MarkdownFileLink = memo(function MarkdownFileLink({
` it replaces, so the pin has to live here too.
+ dir="ltr"
href={href}
className={cn(CHAT_FILE_TAG_CHIP_CLASS_NAME, MARKDOWN_FILE_LINK_CLASS_NAME, className)}
data-markdown-copy={copyMarkdown}
@@ -1631,7 +1645,7 @@ function ChatMarkdown({
// Not a
: the stylesheet mutes those, and an alert's body is ordinary
// text under a colored title — which is how the host renders it.
return (
-
+ // No `dir` here: the terminal-context chips always come first, so the
+ // wrapper could only ever resolve from their label. The message text below
+ // them is markdown, and each of its blocks picks its own direction.
+
{inlineNodes}
);
From adcffb402a9198071f807a14af49597ac8812dc7 Mon Sep 17 00:00:00 2001
From: Asim M Al Twijry <3624441+AsimNet@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:36:21 +0000
Subject: [PATCH 03/31] fix(web): align table cells to their own text
The last physical inline property in the markdown stylesheet. Cells carry
dir="auto" now, so an Arabic cell resolves right-to-left for ordering while
`text-align: left` still pinned it to the cell's left edge. `start` follows the
cell's own direction and is identical for left-to-right content; the table stays
pinned so the columns keep their source order.
Written by Claude Opus 5 in Claude Code.
---
apps/web/src/index.css | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index c1758876c5fe..59b720af8313 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1835,7 +1835,9 @@ code {
.chat-markdown th,
.chat-markdown td {
padding: 0.45rem 0.75rem;
- text-align: left;
+ /* Logical: the table is pinned LTR so its columns keep their source order,
+ but each cell carries dir="auto" and aligns to its own text. */
+ text-align: start;
}
.chat-markdown thead th {
From ca9169cab12826709783e665bd32f680d8e34603 Mon Sep 17 00:00:00 2001
From: Asim M Al Twijry <3624441+AsimNet@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:42:11 +0000
Subject: [PATCH 04/31] fix(web): keep the header rename input on the title's
own direction
The third of three rename inputs for the same title. The sidebar rows got
dir="auto" but the header did not, so starting a rename there was the one place
an Arabic title flipped to left-to-right under the caret and back again on
commit.
Written by Claude Opus 5 in Claude Code.
---
apps/web/src/components/chat/ChatHeader.tsx | 1 +
1 file changed, 1 insertion(+)
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index d3eea99763ad..38008344477e 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -267,6 +267,7 @@ export const ChatHeader = memo(function ChatHeader({
{renamingTitle !== null ? (
Date: Sat, 15 Aug 2026 21:54:50 +0000
Subject: [PATCH 05/31] fix(web): finish the truncated-text sweep for draft
previews and the palette
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
The draft row's second line is the prompt the user actually typed, so it needed
the treatment its own project label had already received.
Swept the rest of the class rather than wait to be told again: the command
palette lists the same thread and project titles, and it is the other entry
point to them. Command names and file paths are unaffected — they are already
left-to-right, and dir="auto" resolves them the same way.
Written by Claude Opus 5 in Claude Code.
---
.../web/src/components/CommandPaletteResults.tsx | 16 ++++++++++++----
apps/web/src/components/Sidebar.tsx | 4 +++-
2 files changed, 15 insertions(+), 5 deletions(-)
diff --git a/apps/web/src/components/CommandPaletteResults.tsx b/apps/web/src/components/CommandPaletteResults.tsx
index bbdbc28b0609..69f8e4d0e0fc 100644
--- a/apps/web/src/components/CommandPaletteResults.tsx
+++ b/apps/web/src/components/CommandPaletteResults.tsx
@@ -136,7 +136,9 @@ function DisabledCommandPaletteResultRow(props: {
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
{props.item.threadContentMatch ? (
@@ -150,7 +152,9 @@ function DisabledCommandPaletteResultRow(props: {
) : (
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
)}
{props.item.titleTrailingContent}
@@ -187,7 +191,9 @@ function CommandPaletteResultRow(props: {
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
{props.item.threadContentMatch ? (
@@ -201,7 +207,9 @@ function CommandPaletteResultRow(props: {
) : (
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
)}
{props.item.titleTrailingContent}
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index e7160df8d075..f08e1bade7c5 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -562,7 +562,9 @@ const SidebarDraftRow = memo(function SidebarDraftRow(props: {
-
{preview}
+
+ {preview}
+
From c430d4b32f7d0c600c3d5e6718e615894bb8436f Mon Sep 17 00:00:00 2001
From: Asim M Al Twijry <3624441+AsimNet@users.noreply.github.com>
Date: Sat, 15 Aug 2026 22:00:35 +0000
Subject: [PATCH 06/31] fix(web): narrow the palette to the one string that is
message text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Backing out my own overreach. The palette's title span is shared with the file
picker and the add-project browser, where the title is a basename or directory
name — an identifier, which this PR otherwise pins left-to-right. Marking it
auto could reorder an Arabic filename against its Latin extension, so those
titles go back to inheriting the app's direction.
The search excerpt keeps the treatment. It is a message quoted back to the user,
which is what this PR is about, and it needs its own wrapper because the
"You:"/"Agent:" label in front of it fixes the line itself left-to-right.
Written by Claude Opus 5 in Claude Code.
---
.../src/components/CommandPaletteResults.tsx | 20 +++++++------------
1 file changed, 7 insertions(+), 13 deletions(-)
diff --git a/apps/web/src/components/CommandPaletteResults.tsx b/apps/web/src/components/CommandPaletteResults.tsx
index 69f8e4d0e0fc..97a2b9856997 100644
--- a/apps/web/src/components/CommandPaletteResults.tsx
+++ b/apps/web/src/components/CommandPaletteResults.tsx
@@ -74,7 +74,9 @@ function ThreadContentMatch(props: {
{isUser ? "You:" : "Agent:"}
{" "}
-
+
+
+
);
}
@@ -136,9 +138,7 @@ function DisabledCommandPaletteResultRow(props: {
{props.item.titleLeadingContent}
-
- {props.item.title}
-
+ {props.item.title}
{props.item.threadContentMatch ? (
@@ -152,9 +152,7 @@ function DisabledCommandPaletteResultRow(props: {
) : (
{props.item.titleLeadingContent}
-
- {props.item.title}
-
+ {props.item.title}
)}
{props.item.titleTrailingContent}
@@ -191,9 +189,7 @@ function CommandPaletteResultRow(props: {
{props.item.titleLeadingContent}
-
- {props.item.title}
-
+ {props.item.title}
{props.item.threadContentMatch ? (
@@ -207,9 +203,7 @@ function CommandPaletteResultRow(props: {
) : (
{props.item.titleLeadingContent}
-
- {props.item.title}
-
+ {props.item.title}
)}
{props.item.titleTrailingContent}
From 0129d2c3964d1724910f8e62d14551199cbfe46f Mon Sep 17 00:00:00 2001
From: Asim M Al Twijry <3624441+AsimNet@users.noreply.github.com>
Date: Sat, 15 Aug 2026 22:10:32 +0000
Subject: [PATCH 07/31] fix(web): let a palette item say whether its title is
prose
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Direction here is a property of the item, not of the row. The thread and project
builders know they are emitting a title derived from someone's prompt; the file
picker and the browse rows know they are emitting a basename. So the builders
carry the decision, and the truncating span applies it — that span has to be the
one, since it owns the ellipsis.
This restores direction-aware thread and project titles in the palette, which
the previous commit dropped to protect filenames, without marking identifiers.
Written by Claude Opus 5 in Claude Code.
---
apps/web/src/components/CommandPalette.logic.ts | 8 ++++++++
.../web/src/components/CommandPaletteResults.tsx | 16 ++++++++++++----
2 files changed, 20 insertions(+), 4 deletions(-)
diff --git a/apps/web/src/components/CommandPalette.logic.ts b/apps/web/src/components/CommandPalette.logic.ts
index 1fddb4f92f4a..37c629ce47da 100644
--- a/apps/web/src/components/CommandPalette.logic.ts
+++ b/apps/web/src/components/CommandPalette.logic.ts
@@ -89,6 +89,12 @@ export interface CommandPaletteItem {
readonly value: string;
readonly searchTerms: ReadonlyArray;
readonly title: ReactNode;
+ /**
+ * `"auto"` for titles that are prose the user or an agent wrote, so they read
+ * in their own direction. Left unset for the rest: this list also holds
+ * command names and file paths, and an identifier keeps the app's direction.
+ */
+ readonly titleDir?: "auto";
readonly description?: ReactNode;
readonly threadContentMatch?: CommandPaletteThreadContentMatch;
readonly timestamp?: string;
@@ -158,6 +164,7 @@ export function buildProjectActionItems(input: {
value: `${input.valuePrefix}:${project.environmentId}:${project.id}`,
searchTerms: [project.title, project.workspaceRoot, ...(input.searchTerms?.(project) ?? [])],
title: project.title,
+ titleDir: "auto",
description: input.renderDescription?.(project) ?? project.workspaceRoot,
icon: input.icon(project),
...(input.shortcutCommand !== undefined ? { shortcutCommand: input.shortcutCommand } : {}),
@@ -239,6 +246,7 @@ export function buildThreadActionItems
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
{props.item.threadContentMatch ? (
@@ -152,7 +154,9 @@ function DisabledCommandPaletteResultRow(props: {
) : (
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
)}
{props.item.titleTrailingContent}
@@ -189,7 +193,9 @@ function CommandPaletteResultRow(props: {
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
{props.item.threadContentMatch ? (
@@ -203,7 +209,9 @@ function CommandPaletteResultRow(props: {
) : (
{props.item.titleLeadingContent}
- {props.item.title}
+
+ {props.item.title}
+
)}
{props.item.titleTrailingContent}
From d8e825ac5ec5f404c2ff89f07a69bf732d11359c Mon Sep 17 00:00:00 2001
From: Asim M Al Twijry <3624441+AsimNet@users.noreply.github.com>
Date: Sat, 15 Aug 2026 22:19:49 +0000
Subject: [PATCH 08/31] fix(web): let the sidebar thread tooltip align to its
own text
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
The popup pinned text-align to the physical left, which inherited into the title
and project name it stacks — both of which resolve their own direction now, so
an Arabic title read right-to-left while sitting against the left edge. The two
sibling tooltips set no alignment at all and were already correct.
Logical alignment renders identically for the left-to-right metadata rows.
Written by Claude Opus 5 in Claude Code.
---
apps/web/src/components/Sidebar.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index f08e1bade7c5..a3c9ff29af82 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -287,7 +287,7 @@ function SidebarThreadTooltip({
align="start"
sideOffset={4}
variant="glass"
- className="max-w-80 text-left whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
+ className="max-w-80 text-start whitespace-normal [&_[data-slot=tooltip-viewport]]:p-0"
>
Date: Wed, 19 Aug 2026 20:04:13 +0300
Subject: [PATCH 09/31] fix(web): render Hebrew/Arabic chat markdown
right-to-left
Every leaf block in .chat-markdown resolves its own base direction from its
first strong character (unicode-bidi: plaintext + text-align: start), and
lists / blockquotes / tables get dir="auto" so markers, the quote bar and
column order land on the content's side. Physical paddings/borders on those
containers become logical. Code stays LTR. No global flip: a mixed
English/Hebrew message renders block by block.
---
apps/web/src/components/ChatMarkdown.tsx | 23 ++++++++++++++---
apps/web/src/index.css | 33 +++++++++++++++++++-----
2 files changed, 45 insertions(+), 11 deletions(-)
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index c4548540e2ce..e19a32c3116e 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -1563,12 +1563,16 @@ function ChatMarkdown({
String((props as Record)["data-alert"] ?? "")
];
if (!alert) {
- return
{children}
;
+ return (
+
+ {children}
+
+ );
}
// Not a
: the stylesheet mutes those, and an alert's body is ordinary
// text under a colored title — which is how the host renders it.
return (
-
+
);
},
+ // `dir="auto"`: the browser picks each list's / quote's / table's base direction from its
+ // first strong character, so Hebrew/Arabic content gets its markers, bar and column order
+ // on the right while English blocks stay LTR (paired with the bidi rules in index.css).
+ ul({ node: _node, ...props }) {
+ return
;
+ },
li({ node, children, ...props }) {
const listItemStart = node?.position?.start.offset;
const markerOffset =
@@ -1730,7 +1745,7 @@ function ChatMarkdown({
);
},
table({ node: _node, ...props }) {
- return ;
+ return ;
},
details({ node: _node, children, open: detailsOpen }) {
return {children};
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index fea03489b7fa..2686ace5ac2a 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1584,6 +1584,24 @@ code {
/* Chat markdown rendering */
+/* Bidi: Hebrew/Arabic messages. Every leaf block resolves its own base direction
+ from its first strong character (`plaintext`), so a Hebrew paragraph reads and
+ aligns right-to-left while the English block above it stays put — no global
+ flip, mixed-language threads just work. Containers that carry a directional
+ decoration (list markers, blockquote bar, table column order) get `dir="auto"`
+ in ChatMarkdown.tsx and use logical properties below. Code stays LTR. */
+.chat-markdown :is(p, li, h1, h2, h3, h4, h5, h6, td, th, dt, dd) {
+ unicode-bidi: plaintext;
+ text-align: start;
+}
+
+.chat-markdown pre,
+.chat-markdown code,
+.chat-markdown .chat-markdown-codeblock {
+ direction: ltr;
+ unicode-bidi: isolate;
+}
+
.chat-markdown > :first-child {
margin-top: 0;
}
@@ -1640,7 +1658,7 @@ code {
custom property, so without this a task-list under a 3+ digit ordered
list would inherit the outer gutter instead of its own default. */
--list-gutter: 1.25rem;
- padding-left: 1.25rem;
+ padding-inline-start: 1.25rem;
list-style-type: disc;
}
@@ -1651,7 +1669,7 @@ code {
nested ol without its own widened marker doesn't inherit the outer one. */
.chat-markdown ol {
--list-gutter: 1.25rem;
- padding-left: var(--list-gutter, 1.25rem);
+ padding-inline-start: var(--list-gutter, 1.25rem);
list-style-type: decimal;
}
@@ -1681,7 +1699,8 @@ code {
}
.chat-markdown li.task-list-item input[type="checkbox"] {
- margin: 0 0.35em 0.15em calc(-1 * var(--list-gutter, 1.25rem));
+ margin-block: 0 0.15em;
+ margin-inline: calc(-1 * var(--list-gutter, 1.25rem)) 0.35em;
vertical-align: middle;
}
@@ -1705,8 +1724,8 @@ code {
}
.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);
}
@@ -1720,7 +1739,7 @@ code {
.chat-markdown section[data-footnotes] ol {
margin: 0;
- padding-left: 1.25rem;
+ padding-inline-start: 1.25rem;
}
.chat-markdown section[data-footnotes] li + li {
@@ -1832,7 +1851,7 @@ code {
.chat-markdown th,
.chat-markdown td {
padding: 0.45rem 0.75rem;
- text-align: left;
+ text-align: start;
}
.chat-markdown thead th {
From b22ca5083e37c26591cb532092eba4d78f4315c1 Mon Sep 17 00:00:00 2001
From: Asaf Benatia
Date: Wed, 19 Aug 2026 20:51:59 +0300
Subject: [PATCH 10/31] fix(web): resolve bidi on alert body and table scroll
viewport
- GitHub alerts: the injected English label was the first strong character, so
dir="auto" on the container never resolved RTL. Give the label dir="ltr" so
the auto algorithm skips it and the body decides the side of the bar/padding.
- Tables: put dir on the ScrollArea root rather than only the
+ {/* dir="ltr" on the label excludes it from the container's dir="auto" resolution
+ (elements with their own dir are skipped), so the body text decides the side. */}
+
{alert.label}
From ff6b0c3656fcc39d74181e87355fb7695b0f303e Mon Sep 17 00:00:00 2001
From: Asaf Benatia
Date: Wed, 19 Aug 2026 21:19:11 +0300
Subject: [PATCH 11/31] fix(web): give RTL tables a concrete direction Base UI
can follow
Resolve the table's direction from its text (first strong letter) instead of
dir="auto", pass it to the ScrollArea and to Base UI's DirectionProvider so
the viewport's scroll-edge math matches the rendered direction, and swap the
scroll-fade mask sides under rtl since Base UI's overflow vars are logical
while the mask utilities are physical.
---
apps/web/src/components/ChatMarkdown.test.tsx | 16 ++++-
apps/web/src/components/ChatMarkdown.tsx | 59 ++++++++++++++-----
apps/web/src/components/ui/scroll-area.tsx | 4 ++
3 files changed, 62 insertions(+), 17 deletions(-)
diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
index 9499ee5a6915..43b7c43b2455 100644
--- a/apps/web/src/components/ChatMarkdown.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -1,6 +1,6 @@
import { describe, expect, it } from "vite-plus/test";
-import { orderedListGutterStyle } from "./ChatMarkdown";
+import { firstStrongDirection, orderedListGutterStyle } from "./ChatMarkdown";
describe("orderedListGutterStyle", () => {
it("leaves the default gutter alone for single-digit lists", () => {
@@ -34,3 +34,17 @@ describe("orderedListGutterStyle", () => {
expect(orderedListGutterStyle(0, undefined)).toBeUndefined();
});
});
+
+describe("firstStrongDirection", () => {
+ it("reads the first letter, skipping neutral digits and punctuation", () => {
+ expect(firstStrongDirection("רכיב | סטטוס")).toBe("rtl");
+ expect(firstStrongDirection("1. (שלב) ראשון")).toBe("rtl");
+ expect(firstStrongDirection("Component | Status")).toBe("ltr");
+ expect(firstStrongDirection("42 — Next.js then עברית")).toBe("ltr");
+ });
+
+ it("falls back to ltr when there is no strong character", () => {
+ expect(firstStrongDirection("")).toBe("ltr");
+ expect(firstStrongDirection("123 | 456")).toBe("ltr");
+ });
+});
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index 962ffedf697f..b72182702b40 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -1,3 +1,4 @@
+import { DirectionProvider, type TextDirection } from "@base-ui/react/direction-provider";
import { useAtomValue } from "@effect/atom-react";
import {
CheckIcon,
@@ -393,7 +394,29 @@ function readInitialWordWrapSetting(): boolean {
return getClientSettings().wordWrap;
}
-function MarkdownTable({ children, dir, ...props }: React.ComponentProps<"table">) {
+// Strong-RTL code points (Hebrew, Arabic and friends, incl. presentation forms).
+const STRONG_RTL_CHAR = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/u;
+// First letter decides (UBA P2/P3): digits, punctuation and symbols are neutral.
+const FIRST_LETTER = /\p{L}/u;
+
+// The direction a block of text renders in — what `dir="auto"` would resolve.
+export function firstStrongDirection(text: string): TextDirection {
+ const letter = FIRST_LETTER.exec(text)?.[0];
+ return letter && STRONG_RTL_CHAR.test(letter) ? "rtl" : "ltr";
+}
+
+function hastTextContent(node: unknown): string {
+ if (!node || typeof node !== "object") return "";
+ const n = node as { type?: string; value?: string; children?: unknown[] };
+ if (n.type === "text") return n.value ?? "";
+ return (n.children ?? []).map(hastTextContent).join("");
+}
+
+function MarkdownTable({
+ children,
+ dir = "ltr",
+ ...props
+}: Omit, "dir"> & { dir?: TextDirection }) {
const containerRef = useRef(null);
const tableRef = useRef(null);
const [expanded, setExpanded] = useState(readInitialWordWrapSetting);
@@ -468,19 +491,23 @@ function MarkdownTable({ children, dir, ...props }: React.ComponentProps<"table"
className="chat-markdown-table-container"
data-expanded={expanded ? "true" : "false"}
>
-
-
- {children}
-
-
+ {/* A concrete direction on the scroll viewport (not just the table) so an
+ overflowing RTL table opens at its first, rightmost column — and the same
+ value fed to Base UI, whose scroll-fade math reads its DirectionProvider
+ rather than the DOM `dir`. */}
+
+
+
+ {children}
+
+
+
);
},
- table({ node: _node, ...props }) {
- return ;
+ table({ node, dir: _dir, ...props }) {
+ return ;
},
details({ node: _node, children, open: detailsOpen }) {
return {children};
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index bfc10825b460..23c71eea3174 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -46,6 +46,10 @@ function ScrollArea({
chainVerticalScroll && "overscroll-y-auto",
scrollFade &&
"scroll-p-[var(--fade-size)] mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
+ // Base UI's overflow-x vars are logical (start = the scroll-start edge), while the
+ // mask utilities are physical — under dir="rtl" the start edge is the right one.
+ scrollFade &&
+ "rtl:mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] rtl:mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))]",
scrollbarGutter && "scrollbar-gutter-stable",
hideScrollbars &&
"[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
From 41b8e2c6da9c2d94632494c8dd13e7f2ab4a34a3 Mon Sep 17 00:00:00 2001
From: Asaf Benatia
Date: Wed, 19 Aug 2026 21:29:32 +0300
Subject: [PATCH 12/31] fix(web): keep alert title row in the body's direction;
cover astral RTL scripts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- dir="ltr" now sits on the alert label text only, not the flex title row, so in a
Hebrew alert the icon + label follow the bar and body to the right.
- firstStrongDirection recognises the astral RTL blocks (U+10800–U+10FFF,
U+1E800–U+1EFFF: Phoenician … Adlam).
---
apps/web/src/components/ChatMarkdown.test.tsx | 1 +
apps/web/src/components/ChatMarkdown.tsx | 17 ++++++++---------
2 files changed, 9 insertions(+), 9 deletions(-)
diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
index 43b7c43b2455..3227670ea273 100644
--- a/apps/web/src/components/ChatMarkdown.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -39,6 +39,7 @@ describe("firstStrongDirection", () => {
it("reads the first letter, skipping neutral digits and punctuation", () => {
expect(firstStrongDirection("רכיב | סטטוס")).toBe("rtl");
expect(firstStrongDirection("1. (שלב) ראשון")).toBe("rtl");
+ expect(firstStrongDirection("\u{1E900}\u{1E92F} adlam")).toBe("rtl"); // astral RTL block
expect(firstStrongDirection("Component | Status")).toBe("ltr");
expect(firstStrongDirection("42 — Next.js then עברית")).toBe("ltr");
});
diff --git a/apps/web/src/components/ChatMarkdown.tsx b/apps/web/src/components/ChatMarkdown.tsx
index b72182702b40..5987b7f8539f 100644
--- a/apps/web/src/components/ChatMarkdown.tsx
+++ b/apps/web/src/components/ChatMarkdown.tsx
@@ -394,8 +394,10 @@ function readInitialWordWrapSetting(): boolean {
return getClientSettings().wordWrap;
}
-// Strong-RTL code points (Hebrew, Arabic and friends, incl. presentation forms).
-const STRONG_RTL_CHAR = /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF]/u;
+// Strong-RTL code points: Hebrew, Arabic, Syriac, Thaana, NKo, Samaritan, Mandaic and
+// their extensions/presentation forms, plus the astral RTL blocks (Phoenician … Adlam).
+const STRONG_RTL_CHAR =
+ /[\u0590-\u08FF\uFB1D-\uFDFF\uFE70-\uFEFF\u{10800}-\u{10FFF}\u{1E800}-\u{1EFFF}]/u;
// First letter decides (UBA P2/P3): digits, punctuation and symbols are neutral.
const FIRST_LETTER = /\p{L}/u;
@@ -1603,14 +1605,11 @@ function ChatMarkdown({
// text under a colored title — which is how the host renders it.
return (
- {/* dir="ltr" on the label excludes it from the container's dir="auto" resolution
- (elements with their own dir are skipped), so the body text decides the side. */}
-
+
- {alert.label}
+ {/* dir="ltr" on the label text only (not the row) keeps it out of the container's
+ dir="auto" resolution, so the body decides the side and the row follows it. */}
+ {alert.label}
{children}
From 983c40b814aa667f5465430aff6e08ba5b906644 Mon Sep 17 00:00:00 2001
From: Asaf Benatia
Date: Wed, 19 Aug 2026 21:41:21 +0300
Subject: [PATCH 13/31] fix(web): drop redundant text-align: start on bidi leaf
blocks
start is the initial value, so the declaration only ever overrode the HTML
align presentational hint that raw-HTML surfaces (PR bodies, README previews)
rely on. unicode-bidi: plaintext alone aligns each block to its own start edge.
---
apps/web/src/index.css | 1 -
1 file changed, 1 deletion(-)
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 2686ace5ac2a..62c10b30659f 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -1592,7 +1592,6 @@ code {
in ChatMarkdown.tsx and use logical properties below. Code stays LTR. */
.chat-markdown :is(p, li, h1, h2, h3, h4, h5, h6, td, th, dt, dd) {
unicode-bidi: plaintext;
- text-align: start;
}
.chat-markdown pre,
From 0857f3ea880d144f70f39b48eb7d6d21536c8c20 Mon Sep 17 00:00:00 2001
From: Amit
Date: Sat, 22 Aug 2026 22:48:30 +0300
Subject: [PATCH 14/31] fix(mobile): render Hebrew/Arabic chat markdown
right-to-left
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Port the web per-block bidi behavior to the iOS markdown renderer:
- nativeMarkdownText.ts gains firstStrongDirection (same strong-RTL
ranges as the web fix) and markdownBlockDirection, and threads a
per-block writingDirection through the run conversion: the outermost
prose block (paragraph, heading, list, blockquote) resolves its own
direction from its first strong letter and nested blocks inherit it,
while code blocks and tables stay pinned LTR. Inline code inside an
RTL paragraph is wrapped in an LRI…PDI isolate so its symbols keep
their left-to-right shape.
- The T3MarkdownTextRun codegen spec gains a writingDirection prop
(auto | ltr | rtl); the shadow node maps it to the fragment's
baseWritingDirection, which TextKit's natural alignment follows.
- List-marker paragraph ranges carry an rtl flag so both paragraph-style
paths (measure + display) pin the base writing direction and flip the
marker tab stop to a right-aligned one on the leading edge.
- The rich block path mirrors the same rules in views: RTL lists use
row-reverse with the marker column on the right, blockquote bars move
to the right edge, and code block text pins writingDirection ltr.
Co-Authored-By: Claude Fable 5
---
.../t3-markdown-text/ios/T3MarkdownText.mm | 7 +-
.../ios/T3MarkdownTextShadowNode.h | 4 +
.../ios/T3MarkdownTextShadowNode.mm | 18 +-
.../src/NativeMarkdownBlock.ios.tsx | 48 ++++-
.../src/NativeMarkdownSelectableText.ios.tsx | 5 +
.../src/T3MarkdownTextRunNativeComponent.ts | 3 +
.../src/nativeMarkdownText.test.ts | 188 ++++++++++++++++++
.../src/nativeMarkdownText.ts | 150 +++++++++++---
8 files changed, 388 insertions(+), 35 deletions(-)
create mode 100644 apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.test.ts
diff --git a/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownText.mm b/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownText.mm
index 6fa61aab17e9..c8479b408724 100644
--- a/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownText.mm
+++ b/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownText.mm
@@ -35,8 +35,13 @@ static void T3MarkdownTextApplyParagraphStyles(
paragraphStyle.firstLineHeadIndent = styleRange.firstLineHeadIndent;
paragraphStyle.headIndent = styleRange.headIndent;
paragraphStyle.paragraphSpacing = styleRange.paragraphSpacing;
+ if (styleRange.rtl) {
+ paragraphStyle.baseWritingDirection = NSWritingDirectionRightToLeft;
+ }
+ // Must match applyParagraphStyles in T3MarkdownTextShadowNode.mm (measure path).
paragraphStyle.tabStops = @[
- [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentLeft
+ [[NSTextTab alloc] initWithTextAlignment:styleRange.rtl ? NSTextAlignmentRight
+ : NSTextAlignmentLeft
location:styleRange.headIndent
options:@{}]
];
diff --git a/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.h b/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.h
index 99417490a63b..30ea0110a333 100644
--- a/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.h
+++ b/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.h
@@ -20,6 +20,10 @@ struct T3MarkdownTextParagraphStyleRange {
Float firstLineHeadIndent;
Float headIndent;
Float paragraphSpacing;
+ // RTL paragraphs (Hebrew/Arabic list items) need their base writing direction
+ // pinned and their marker tab stop right-aligned; TextKit flips the head
+ // indents to the leading (right) edge on its own.
+ bool rtl;
};
struct T3MarkdownTextAttachmentRange {
diff --git a/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.mm b/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.mm
index b9abe452fb94..d2e4e698476a 100644
--- a/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.mm
+++ b/apps/mobile/modules/t3-markdown-text/ios/T3MarkdownTextShadowNode.mm
@@ -34,8 +34,14 @@ static void applyParagraphStyles(
paragraphStyle.firstLineHeadIndent = styleRange.firstLineHeadIndent;
paragraphStyle.headIndent = styleRange.headIndent;
paragraphStyle.paragraphSpacing = styleRange.paragraphSpacing;
+ if (styleRange.rtl) {
+ paragraphStyle.baseWritingDirection = NSWritingDirectionRightToLeft;
+ }
+ // The tab stop's alignment matches the paragraph's writing direction so the
+ // list-marker column sits on the leading edge (right, for RTL paragraphs).
paragraphStyle.tabStops = @[
- [[NSTextTab alloc] initWithTextAlignment:NSTextAlignmentLeft
+ [[NSTextTab alloc] initWithTextAlignment:styleRange.rtl ? NSTextAlignmentRight
+ : NSTextAlignmentLeft
location:styleRange.headIndent
options:@{}]
];
@@ -171,6 +177,15 @@ static void applyAttachments(
textAttributes.alignment = TextAlignment::Natural;
}
+ // Natural alignment follows the paragraph's base writing direction, so an
+ // explicit "rtl" run right-aligns and reorders as Hebrew/Arabic prose while
+ // "ltr" pins code, and "auto" keeps TextKit's first-strong resolution.
+ if (props.writingDirection == T3MarkdownTextRunWritingDirection::Ltr) {
+ textAttributes.baseWritingDirection = WritingDirection::LeftToRight;
+ } else if (props.writingDirection == T3MarkdownTextRunWritingDirection::Rtl) {
+ textAttributes.baseWritingDirection = WritingDirection::RightToLeft;
+ }
+
textAttributes.backgroundColor = props.backgroundColor;
fragment.string = props.text;
@@ -185,6 +200,7 @@ static void applyAttachments(
props.shadowOffset.width,
props.shadowOffset.height,
props.shadowRadius - ParagraphStyleEncodingOffset,
+ props.writingDirection == T3MarkdownTextRunWritingDirection::Rtl,
});
}
if (props.nativeId.rfind(FileAttachmentNativeIdPrefix, 0) == 0 && fragmentLength > 0) {
diff --git a/apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.ios.tsx b/apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.ios.tsx
index 5fbe6d4dff44..782543a9bc55 100644
--- a/apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.ios.tsx
+++ b/apps/mobile/modules/t3-markdown-text/src/NativeMarkdownBlock.ios.tsx
@@ -4,7 +4,12 @@ import type { MarkdownNode } from "react-native-nitro-markdown/headless";
import { CopyTextButton } from "./CopyTextButton";
import { MarkdownTextPrimitive } from "./MarkdownTextPrimitive";
-import { nativeMarkdownDocumentRuns, nativeMarkdownListItemBlocks } from "./nativeMarkdownText";
+import {
+ markdownBlockDirection,
+ nativeMarkdownDocumentRuns,
+ nativeMarkdownListItemBlocks,
+ type MarkdownWritingDirection,
+} from "./nativeMarkdownText";
import { NativeMarkdownSelectableText } from "./NativeMarkdownSelectableText.ios";
import type {
MarkdownCodeHighlighter,
@@ -48,10 +53,11 @@ function SelectableNode(props: {
readonly skills: ReadonlyArray;
readonly textStyle: NativeMarkdownTextStyle;
readonly onLinkPress?: (href: string) => void;
+ readonly direction?: MarkdownWritingDirection;
}) {
return (
@@ -170,6 +176,8 @@ function HighlightedCodeText(props: {
fontFamily: "ui-monospace",
fontSize: codeBlockFontSize(props.textStyle),
lineHeight: codeBlockLineHeight(props.textStyle),
+ // Code stays LTR always — a Hebrew comment must not flip the snippet.
+ writingDirection: "ltr",
}}
>
{props.content}
@@ -205,6 +213,8 @@ function HighlightedCodeText(props: {
fontFamily: "ui-monospace",
fontSize: codeBlockFontSize(props.textStyle),
lineHeight: codeBlockLineHeight(props.textStyle),
+ // Code stays LTR always — a Hebrew comment must not flip the snippet.
+ writingDirection: "ltr",
}}
>
{keyedLines.map((line, lineIndex) => (
@@ -449,6 +459,7 @@ function NativeMixedParagraph(props: {
readonly skills: ReadonlyArray;
readonly textStyle: NativeMarkdownTextStyle;
readonly onLinkPress?: (href: string) => void;
+ readonly direction?: MarkdownWritingDirection;
}) {
return (
@@ -468,6 +479,7 @@ function NativeMixedParagraph(props: {
skills={props.skills}
textStyle={props.textStyle}
onLinkPress={props.onLinkPress}
+ direction={props.direction}
/>
),
)}
@@ -482,10 +494,16 @@ function NativeList(props: {
readonly highlightCode: MarkdownCodeHighlighter;
readonly onLinkPress?: (href: string) => void;
readonly depth: number;
+ readonly direction?: MarkdownWritingDirection;
}) {
const ordered = props.node.ordered ?? false;
const start = props.node.start ?? 1;
const nested = props.depth > 0;
+ // The list takes one direction as a whole — inherited from the enclosing block,
+ // or resolved from the list's own first strong letter — so an RTL list paints
+ // every marker on the right of the text it labels.
+ const direction = props.direction ?? markdownBlockDirection(props.node);
+ const rtl = direction === "rtl";
return (
@@ -544,6 +563,7 @@ function NativeList(props: {
highlightCode={props.highlightCode}
onLinkPress={props.onLinkPress}
depth={props.depth + 1}
+ direction={direction}
compact
/>
))}
@@ -563,6 +583,7 @@ export function NativeMarkdownBlock(props: {
readonly onLinkPress?: (href: string) => void;
readonly depth?: number;
readonly compact?: boolean;
+ readonly direction?: MarkdownWritingDirection;
}) {
const depth = props.depth ?? 0;
switch (props.node.type) {
@@ -578,6 +599,7 @@ export function NativeMarkdownBlock(props: {
highlightCode={props.highlightCode}
onLinkPress={props.onLinkPress}
depth={depth}
+ direction={props.direction}
/>
))}
@@ -618,14 +640,20 @@ export function NativeMarkdownBlock(props: {
}}
/>
);
- case "blockquote":
+ case "blockquote": {
+ // The quote bar sits on the leading edge of its own text: right for a
+ // Hebrew/Arabic quote, left otherwise (per-block, like the web's dir="auto").
+ const rtl = (props.direction ?? markdownBlockDirection(props.node)) === "rtl";
return (
))}
);
+ }
case "list":
return (
);
case "paragraph":
@@ -662,6 +693,7 @@ export function NativeMarkdownBlock(props: {
skills={props.skills}
textStyle={props.textStyle}
onLinkPress={props.onLinkPress}
+ direction={props.direction}
/>
) : (
;
textDecorationColor?: ColorValue;
textAlign?: WithDefault;
+ writingDirection?: WithDefault;
shadowRadius?: WithDefault;
onPress?: BubblingEventHandler;
onLongPress?: BubblingEventHandler;
diff --git a/apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.test.ts b/apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.test.ts
new file mode 100644
index 000000000000..0479de42bcac
--- /dev/null
+++ b/apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.test.ts
@@ -0,0 +1,188 @@
+import { describe, expect, it } from "vite-plus/test";
+import type { MarkdownNode } from "react-native-nitro-markdown/headless";
+
+import {
+ firstStrongDirection,
+ markdownBlockDirection,
+ nativeMarkdownDocumentRuns,
+} from "./nativeMarkdownText";
+
+const HEBREW_MIXED = "שלום, זה טקסט בעברית עם מונח באנגלית כמו Claude Code בתוכו.";
+
+function text(content: string): MarkdownNode {
+ return { type: "text", content };
+}
+
+function paragraph(...children: MarkdownNode[]): MarkdownNode {
+ return { type: "paragraph", children };
+}
+
+function document(...children: MarkdownNode[]): MarkdownNode {
+ return { type: "document", children };
+}
+
+describe("firstStrongDirection", () => {
+ it("resolves Hebrew and Arabic text as RTL", () => {
+ expect(firstStrongDirection("שלום עולם")).toBe("rtl");
+ expect(firstStrongDirection("مرحبا بالعالم")).toBe("rtl");
+ });
+
+ it("resolves Latin text as LTR", () => {
+ expect(firstStrongDirection("Hello world")).toBe("ltr");
+ });
+
+ it("lets the first letter decide when languages mix", () => {
+ expect(firstStrongDirection(HEBREW_MIXED)).toBe("rtl");
+ expect(firstStrongDirection("Claude Code זה כלי")).toBe("ltr");
+ });
+
+ it("skips neutral digits, punctuation and symbols", () => {
+ expect(firstStrongDirection('42 - "שלום"')).toBe("rtl");
+ expect(firstStrongDirection("3. Hello")).toBe("ltr");
+ });
+
+ it("defaults to LTR when no letter exists", () => {
+ expect(firstStrongDirection("")).toBe("ltr");
+ expect(firstStrongDirection("123 !?")).toBe("ltr");
+ });
+});
+
+describe("markdownBlockDirection", () => {
+ it("reads the block's own text content", () => {
+ expect(markdownBlockDirection(paragraph(text("שלום")))).toBe("rtl");
+ expect(markdownBlockDirection(paragraph(text("Hello")))).toBe("ltr");
+ });
+
+ it("ignores code and tables when resolving the direction", () => {
+ expect(
+ markdownBlockDirection(
+ paragraph({ type: "code_inline", content: "npm install" }, text(" שלום")),
+ ),
+ ).toBe("rtl");
+ expect(
+ markdownBlockDirection(
+ document({ type: "code_block", content: "שגיאה = 1" }, paragraph(text("Hello"))),
+ ),
+ ).toBe("ltr");
+ });
+
+ it("ignores HTML tag names, but not the text they wrap", () => {
+ expect(markdownBlockDirection(paragraph({ type: "html_inline", content: "שלום" }))).toBe(
+ "rtl",
+ );
+ });
+});
+
+describe("nativeMarkdownDocumentRuns direction", () => {
+ it("marks a Hebrew paragraph RTL and an English one LTR in the same document", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document(paragraph(text(HEBREW_MIXED)), paragraph(text("An English paragraph."))),
+ );
+ const hebrew = runs.find((run) => run.text.includes("שלום"));
+ const english = runs.find((run) => run.text.includes("English"));
+ expect(hebrew?.writingDirection).toBe("rtl");
+ expect(english?.writingDirection).toBe("ltr");
+ });
+
+ it("gives a Hebrew list one RTL direction, markers included", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document({
+ type: "list",
+ ordered: false,
+ children: [
+ { type: "list_item", children: [paragraph(text("פריט ראשון"))] },
+ { type: "list_item", children: [paragraph(text("Item in English"))] },
+ ],
+ }),
+ );
+ // The outermost list decides once; every run inherits (web: only the
+ // outermost block carries dir="auto", items inherit).
+ for (const run of runs) {
+ expect(run.writingDirection).toBe("rtl");
+ }
+ expect(runs.some((run) => run.role === "list-marker")).toBe(true);
+ });
+
+ it("inherits the outer direction into nested lists", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document({
+ type: "list",
+ ordered: false,
+ children: [
+ {
+ type: "list_item",
+ children: [
+ paragraph(text("רשימה בעברית")),
+ {
+ type: "list",
+ ordered: false,
+ children: [{ type: "list_item", children: [paragraph(text("English nested"))] }],
+ },
+ ],
+ },
+ ],
+ }),
+ );
+ for (const run of runs) {
+ expect(run.writingDirection).toBe("rtl");
+ }
+ });
+
+ it("marks a Hebrew heading RTL", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document({ type: "heading", level: 2, children: [text("כותרת בעברית")] }),
+ );
+ expect(runs[0]?.writingDirection).toBe("rtl");
+ });
+
+ it("pins code blocks LTR even when their content is Hebrew", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document(paragraph(text("הסבר בעברית")), {
+ type: "code_block",
+ language: "js",
+ content: '// הערה בעברית\nconst x = "שלום";\n',
+ }),
+ );
+ for (const run of runs.filter(
+ (item) => item.role === "code-block" || item.role === "code-language",
+ )) {
+ expect(run.writingDirection).toBe("ltr");
+ }
+ });
+
+ it("keeps a blockquote one directional unit", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document({
+ type: "blockquote",
+ children: [paragraph(text("ציטוט בעברית")), paragraph(text("English continuation"))],
+ }),
+ );
+ for (const run of runs) {
+ expect(run.writingDirection).toBe("rtl");
+ }
+ });
+
+ it("wraps inline code inside an RTL paragraph in an LTR isolate", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document(
+ paragraph(text("תריץ "), { type: "code_inline", content: "git status" }, text(" עכשיו")),
+ ),
+ );
+ const code = runs.find((run) => run.code);
+ expect(code?.text).toBe("\u2066git status\u2069");
+ expect(code?.writingDirection).toBe("rtl");
+ });
+
+ it("leaves inline code inside an LTR paragraph untouched", () => {
+ const runs = nativeMarkdownDocumentRuns(
+ document(paragraph(text("Run "), { type: "code_inline", content: "git status" })),
+ );
+ const code = runs.find((run) => run.code);
+ expect(code?.text).toBe("git status");
+ });
+
+ it("honors an explicitly inherited direction", () => {
+ const runs = nativeMarkdownDocumentRuns(document(paragraph(text("English text"))), [], "rtl");
+ expect(runs[0]?.writingDirection).toBe("rtl");
+ });
+});
diff --git a/apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.ts b/apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.ts
index 8db904b5a6ca..80a76110f98c 100644
--- a/apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.ts
+++ b/apps/mobile/modules/t3-markdown-text/src/nativeMarkdownText.ts
@@ -3,6 +3,8 @@ import type { MarkdownNode } from "react-native-nitro-markdown/headless";
import type { SelectableMarkdownSkill } from "./SelectableMarkdownText.types";
import { resolveMarkdownLinkPresentation, type MarkdownFileIcon } from "./markdownLinks";
+export type MarkdownWritingDirection = "ltr" | "rtl";
+
export interface NativeMarkdownTextRun {
readonly text: string;
readonly bold?: boolean;
@@ -30,6 +32,7 @@ export interface NativeMarkdownTextRun {
readonly firstLineHeadIndent?: number;
readonly headIndent?: number;
readonly paragraphSpacing?: number;
+ readonly writingDirection?: MarkdownWritingDirection;
}
export type NativeMarkdownDocumentChunk =
@@ -59,6 +62,7 @@ interface RunContext {
readonly firstLineHeadIndent?: number;
readonly headIndent?: number;
readonly paragraphSpacing?: number;
+ readonly writingDirection?: MarkdownWritingDirection;
}
const EMPTY_CONTEXT: RunContext = {
@@ -70,6 +74,44 @@ const EMPTY_CONTEXT: RunContext = {
const INLINE_HTML_TAG_PATTERN = /<\/?(?:kbd|mark|sub|sup|u)(?:\s[^>]*)?>/gi;
+// Strong-RTL code points: Hebrew, Arabic, Syriac, Thaana, NKo, Samaritan, Mandaic and
+// their extensions/presentation forms, plus the astral RTL blocks (Phoenician … Adlam).
+const STRONG_RTL_CHAR = /[-ࣿיִ-﷿ﹰ-\u{10800}-\u{10FFF}\u{1E800}-\u{1EFFF}]/u;
+// First letter decides (UBA P2/P3): digits, punctuation and symbols are neutral.
+const FIRST_LETTER = /\p{L}/u;
+
+// The direction a block of text renders in — what the web app's `dir="auto"` would resolve.
+export function firstStrongDirection(text: string): MarkdownWritingDirection {
+ const letter = FIRST_LETTER.exec(text)?.[0];
+ return letter && STRONG_RTL_CHAR.test(letter) ? "rtl" : "ltr";
+}
+
+// Code and tables opt out of direction detection and stay LTR: their shape is not
+// prose, so their letters must not decide the direction of the block around them —
+// the same nodes the web app pins with an explicit `dir="ltr"` (which `dir="auto"`
+// then skips when resolving an ancestor).
+const DIRECTION_NEUTRAL_NODE_TYPES = new Set(["code_block", "code_inline", "table"]);
+
+function directionSourceText(node: MarkdownNode): string {
+ if (DIRECTION_NEUTRAL_NODE_TYPES.has(node.type)) {
+ return "";
+ }
+ if (node.type === "html_inline" || node.type === "html_block") {
+ // Tag names are letters too — only the text an HTML node renders may vote.
+ return inlineHtmlText(nodeTextContent(node));
+ }
+ if (node.content !== undefined) {
+ return node.content;
+ }
+ return (node.children ?? []).map(directionSourceText).join("");
+}
+
+// The base direction of a markdown block, resolved from the block's own first
+// strong letter (mirroring the web renderer's per-block `dir="auto"`).
+export function markdownBlockDirection(node: MarkdownNode): MarkdownWritingDirection {
+ return firstStrongDirection(directionSourceText(node));
+}
+
function decodeCodePoint(codePoint: number, entity: string): string {
if (!Number.isInteger(codePoint) || codePoint < 0 || codePoint > 0x10ffff) {
return entity;
@@ -147,7 +189,8 @@ function sameRunStyle(left: NativeMarkdownTextRun, right: NativeMarkdownTextRun)
left.spacing === right.spacing &&
left.firstLineHeadIndent === right.firstLineHeadIndent &&
left.headIndent === right.headIndent &&
- left.paragraphSpacing === right.paragraphSpacing
+ left.paragraphSpacing === right.paragraphSpacing &&
+ left.writingDirection === right.writingDirection
);
}
@@ -180,6 +223,7 @@ function appendRun(
...(context.paragraphSpacing !== undefined
? { paragraphSpacing: context.paragraphSpacing }
: {}),
+ ...(context.writingDirection ? { writingDirection: context.writingDirection } : {}),
};
const previous = runs.at(-1);
if (previous && sameRunStyle(previous, run)) {
@@ -283,8 +327,17 @@ function appendNode(
return appendRun(runs, textNodeContent(nodeTextContent(node)), context);
case "html_inline":
return appendRun(runs, inlineHtmlText(nodeTextContent(node)), context);
- case "code_inline":
- return appendRun(runs, nodeTextContent(node), { ...context, code: true });
+ case "code_inline": {
+ // Inline code keeps its left-to-right shape even inside an RTL paragraph
+ // (the web pins `code` to LTR with CSS). Attributed strings have no
+ // per-span direction, so wrap the span in an LTR isolate (LRI … PDI).
+ const content = nodeTextContent(node);
+ return appendRun(
+ runs,
+ context.writingDirection === "rtl" ? `\u2066${content}\u2069` : content,
+ { ...context, code: true },
+ );
+ }
case "soft_break":
return appendRun(runs, " ", context);
case "line_break":
@@ -404,6 +457,7 @@ function appendListItem(
marker: string,
depth: number,
markerColumnWidth: number,
+ writingDirection: MarkdownWritingDirection,
): NativeMarkdownTextRun[] {
const firstLineHeadIndent = Math.max(0, depth - 1) * 20;
appendRun(runs, `${marker}\t`, {
@@ -413,6 +467,7 @@ function appendListItem(
firstLineHeadIndent,
headIndent: firstLineHeadIndent + markerColumnWidth,
paragraphSpacing: 2,
+ writingDirection,
});
const children = node.children ?? [];
@@ -423,6 +478,7 @@ function appendListItem(
...EMPTY_CONTEXT,
role: "body",
depth,
+ writingDirection,
});
wroteInlineContent = true;
continue;
@@ -434,9 +490,10 @@ function appendListItem(
role: "list-break",
depth,
spacing: 1,
+ writingDirection,
});
}
- appendList(runs, child, depth + 1);
+ appendList(runs, child, depth + 1, writingDirection);
wroteInlineContent = false;
continue;
}
@@ -445,11 +502,12 @@ function appendListItem(
...EMPTY_CONTEXT,
role: "body",
depth,
+ writingDirection,
});
wroteInlineContent = true;
continue;
}
- appendDocumentBlock(runs, child, depth);
+ appendDocumentBlock(runs, child, depth, writingDirection);
wroteInlineContent = true;
}
@@ -459,6 +517,7 @@ function appendListItem(
role: "list-break",
depth,
spacing: depth === 1 ? 4 : 2,
+ writingDirection,
});
}
return runs;
@@ -468,6 +527,9 @@ function appendList(
runs: NativeMarkdownTextRun[],
node: MarkdownNode,
depth: number,
+ // A list takes one direction as a whole — the outermost block of a run decides
+ // and items inherit, so the markers stay on the same side as the text they label.
+ writingDirection: MarkdownWritingDirection,
): NativeMarkdownTextRun[] {
const ordered = node.ordered ?? false;
const start = node.start ?? 1;
@@ -499,7 +561,7 @@ function appendList(
: marker;
const markerColumnWidth =
child.type === "task_list_item" ? 28 : ordered ? 10 + markerWidth * 8 : 24;
- appendListItem(runs, child, alignedMarker, depth, markerColumnWidth);
+ appendListItem(runs, child, alignedMarker, depth, markerColumnWidth, writingDirection);
}
return runs;
}
@@ -508,27 +570,30 @@ function appendQuoteBlock(
runs: NativeMarkdownTextRun[],
node: MarkdownNode,
depth: number,
+ writingDirection: MarkdownWritingDirection,
): NativeMarkdownTextRun[] {
for (const [index, child] of (node.children ?? []).entries()) {
if (index > 0) {
- appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth });
+ appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth, writingDirection });
}
appendRun(runs, "│\u00a0", {
...EMPTY_CONTEXT,
role: "quote-marker",
depth,
+ writingDirection,
});
if (child.type === "paragraph") {
appendInlineChildren(runs, child, {
...EMPTY_CONTEXT,
role: "body",
depth,
+ writingDirection,
});
} else {
- appendDocumentBlock(runs, child, depth);
+ appendDocumentBlock(runs, child, depth, writingDirection);
}
}
- appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth });
+ appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth, writingDirection });
return runs;
}
@@ -544,6 +609,7 @@ function appendTableRow(
...EMPTY_CONTEXT,
role: "divider",
depth,
+ writingDirection: "ltr",
});
}
appendInlineChildren(runs, cell, {
@@ -551,9 +617,10 @@ function appendTableRow(
role: "body",
bold: cell.isHeader ?? false,
depth,
+ writingDirection: "ltr",
});
}
- appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth });
+ appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth, writingDirection: "ltr" });
return runs;
}
@@ -579,6 +646,10 @@ function appendDocumentBlock(
runs: NativeMarkdownTextRun[],
node: MarkdownNode,
depth = 0,
+ // Only the outermost block of a run resolves its own direction; nested blocks
+ // inherit it, so a list or quote reads as one directional unit (the web marks
+ // only the outermost block with `dir="auto"` for the same reason).
+ direction?: MarkdownWritingDirection,
): NativeMarkdownTextRun[] {
switch (node.type) {
case "document": {
@@ -591,7 +662,7 @@ function appendDocumentBlock(
child.type === "heading" ? 20 : previous?.type === "heading" ? 10 : 12,
);
}
- appendDocumentBlock(runs, child, depth);
+ appendDocumentBlock(runs, child, depth, direction);
}
return runs;
}
@@ -601,26 +672,35 @@ function appendDocumentBlock(
role: "heading",
headingLevel: node.level ?? 1,
depth,
+ writingDirection: direction ?? markdownBlockDirection(node),
};
appendInlineChildren(runs, node, context);
return appendBlockTerminator(runs, context);
}
case "paragraph": {
- const context: RunContext = { ...EMPTY_CONTEXT, role: "body", depth };
+ const context: RunContext = {
+ ...EMPTY_CONTEXT,
+ role: "body",
+ depth,
+ writingDirection: direction ?? markdownBlockDirection(node),
+ };
appendInlineChildren(runs, node, context);
return appendBlockTerminator(runs, context);
}
case "list":
- return appendList(runs, node, depth + 1);
+ return appendList(runs, node, depth + 1, direction ?? markdownBlockDirection(node));
case "blockquote":
- return appendQuoteBlock(runs, node, depth);
+ return appendQuoteBlock(runs, node, depth, direction ?? markdownBlockDirection(node));
case "code_block": {
+ // Code stays LTR always: identifiers and paths read the same in every
+ // locale, and a Hebrew comment must not flip the snippet.
if (node.language) {
appendRun(runs, `${node.language.toUpperCase()}\n`, {
...EMPTY_CONTEXT,
role: "code-language",
code: true,
depth,
+ writingDirection: "ltr",
});
}
const content = nodeTextContent(node);
@@ -629,6 +709,7 @@ function appendDocumentBlock(
role: "code-block",
code: true,
depth,
+ writingDirection: "ltr",
});
if (!content.endsWith("\n")) {
appendBlockTerminator(runs, {
@@ -636,6 +717,7 @@ function appendDocumentBlock(
role: "code-block",
code: true,
depth,
+ writingDirection: "ltr",
});
}
return runs;
@@ -649,19 +731,36 @@ function appendDocumentBlock(
return runs;
case "table":
return appendTable(runs, node, depth);
- case "html_block":
- appendRun(runs, inlineHtmlText(nodeTextContent(node)), {
+ case "html_block": {
+ const context: RunContext = {
...EMPTY_CONTEXT,
role: "body",
depth,
- });
- return appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth });
- case "math_block":
- appendRun(runs, nodeTextContent(node), { ...EMPTY_CONTEXT, role: "body", depth });
- return appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth });
- default:
- appendInlineChildren(runs, node, { ...EMPTY_CONTEXT, role: "body", depth });
- return appendBlockTerminator(runs, { ...EMPTY_CONTEXT, role: "body", depth });
+ writingDirection: direction ?? markdownBlockDirection(node),
+ };
+ appendRun(runs, inlineHtmlText(nodeTextContent(node)), context);
+ return appendBlockTerminator(runs, context);
+ }
+ case "math_block": {
+ const context: RunContext = {
+ ...EMPTY_CONTEXT,
+ role: "body",
+ depth,
+ writingDirection: direction ?? markdownBlockDirection(node),
+ };
+ appendRun(runs, nodeTextContent(node), context);
+ return appendBlockTerminator(runs, context);
+ }
+ default: {
+ const context: RunContext = {
+ ...EMPTY_CONTEXT,
+ role: "body",
+ depth,
+ writingDirection: direction ?? markdownBlockDirection(node),
+ };
+ appendInlineChildren(runs, node, context);
+ return appendBlockTerminator(runs, context);
+ }
}
}
@@ -750,8 +849,9 @@ export function nativeMarkdownChunkSpacing(
export function nativeMarkdownDocumentRuns(
node: MarkdownNode,
skills: ReadonlyArray = [],
+ direction?: MarkdownWritingDirection,
): ReadonlyArray {
- const runs = appendDocumentBlock([], node);
+ const runs = appendDocumentBlock([], node, 0, direction);
while (runs.length > 0) {
const lastIndex = runs.length - 1;
const last = runs[lastIndex];
From 574cbc8fa3623ce94ae0400cc63408de31a7cc02 Mon Sep 17 00:00:00 2001
From: Amit
Date: Sun, 23 Aug 2026 02:07:04 +0300
Subject: [PATCH 15/31] chore: lockfile refresh after mobile module install
Co-Authored-By: Claude Fable 5
---
pnpm-lock.yaml | 2 ++
1 file changed, 2 insertions(+)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0f66f69b87f0..3e6c361df373 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5184,10 +5184,12 @@ packages:
'@xmldom/xmldom@0.8.13':
resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
engines: {node: '>=10.0.0'}
+ deprecated: this version has critical issues, please update to the latest version
'@xmldom/xmldom@0.9.10':
resolution: {integrity: sha512-A9gOqLdi6cV4ibazAjcQufGj0B1y/vDqYrcuP6d/6x8P27gRS8643Dj9o1dEKtB6O7fwxb2FgBmJS2mX7gpvdw==}
engines: {node: '>=14.6'}
+ deprecated: this version has critical issues, please update to the latest version
'@yuuang/ffi-rs-android-arm64@1.3.2':
resolution: {integrity: sha512-eDYLT0kVBkp7e2BwdRDmt6N1rkeDPUHDefk3ZX0/nok+GLsqfy1WBoSL3Yg7HVXN1EyW8OBVc2uK8Zq8HbmaSA==}
From fbffd37e95fdd30a3eb8275721470ad636a76109 Mon Sep 17 00:00:00 2001
From: Amit
Date: Sun, 23 Aug 2026 10:40:49 +0300
Subject: [PATCH 16/31] fix(web): read Hebrew blocks that open with Latin tech
tokens right-to-left
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
A Hebrew sentence that begins with a URL, a path or a file name —
"server.py זה הקובץ הראשי" — resolved LTR, because both dir="auto" and
the plaintext CSS take the browser's first-strong scan at face value.
Inspired by stripLeadingLTR from shraga100/claude-desktop-rtl-patch:
- resolvedTextDirection: first-strong, but when the text leads with a
Latin tech token and still contains strong-RTL script, re-run
first-strong with the tech tokens (URLs, inline code, paths, file
names) blanked out. A mostly-English block with one Hebrew word stays
LTR — no "any RTL anywhere" fallback.
- remarkTextDirection judges each outermost block from its mdast text
with the LTR-pinned nodes (inline code, fences, tables) excluded
structurally, and pins dir="rtl" only where the heuristic overrules
plain first-strong; everything else keeps dir="auto".
- index.css lifts unicode-bidi: plaintext for pinned blocks (and the
plaintext leaves inside a pinned list/quote) so the explicit dir wins.
- hastTextContent skips , so the table wrapper direction judges
prose only, mirroring the mdast pass.
Co-Authored-By: Claude Fable 5
---
apps/web/src/components/ChatMarkdown.test.tsx | 72 ++++++++++++++++++-
apps/web/src/components/ChatMarkdown.tsx | 65 +++++++++++++++--
apps/web/src/index.css | 11 +++
3 files changed, 143 insertions(+), 5 deletions(-)
diff --git a/apps/web/src/components/ChatMarkdown.test.tsx b/apps/web/src/components/ChatMarkdown.test.tsx
index 721c33e8b7ec..f8e55f72d0bb 100644
--- a/apps/web/src/components/ChatMarkdown.test.tsx
+++ b/apps/web/src/components/ChatMarkdown.test.tsx
@@ -1,7 +1,11 @@
import { renderToStaticMarkup } from "react-dom/server";
import { describe, expect, it } from "vite-plus/test";
-import ChatMarkdown, { firstStrongDirection, orderedListGutterStyle } from "./ChatMarkdown";
+import ChatMarkdown, {
+ firstStrongDirection,
+ orderedListGutterStyle,
+ resolvedTextDirection,
+} from "./ChatMarkdown";
describe("orderedListGutterStyle", () => {
it("leaves the default gutter alone for single-digit lists", () => {
@@ -99,6 +103,72 @@ describe("chat markdown text direction", () => {
const html = render("| Name | value |\n| --- | --- |\n| a | 1 |");
expect(html).not.toContain('dir="rtl"');
});
+
+ it('keeps a Hebrew block opening with an inline-code span on dir="auto"', () => {
+ // The code span carries its own dir="ltr", so both the plugin's detection
+ // text and the browser's dir="auto" scan skip it — no pin needed.
+ const html = render("`server.py` זה הקובץ הראשי");
+ expect(html).toContain('