fix(web,mobile): Hebrew and Arabic read right to left in PR and commit boxes, previews, search and titles

apps/mobile/modules/t3-composer-editor/ios/T3ComposerEditorView.swift

@@ -24,9 +24,16 @@ private struct ComposerControlledDocumentPayload: Decodable {
   let tokensJson: String
   let mostRecentEventCount: Int
   let isNativeEcho: Bool
+  let paragraphDirections: [ComposerParagraphDirectionPayload]?
   let resetGeneration: Int
 }
 
+private struct ComposerParagraphDirectionPayload: Decodable {
+  let start: Int
+  let end: Int
+  let direction: String
+}
+
 private struct ComposerThemePayload: Decodable {
   let text: String
   let placeholder: String
@@ -453,6 +460,8 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
   private var value = ""
   private var tokensJson = "[]"
   private var tokens: [ComposerTokenPayload] = []
+  private var paragraphDirections: [ComposerParagraphDirectionPayload] = []
+  private var paragraphDirectionValue = ""
   private var requestedSelection: ComposerSelectionPayload?
   private var theme = ComposerThemePayload(
     text: "#262626",
@@ -719,6 +728,8 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
     }
     let previousSelection = sourceSelection()
     value = document.value
+    paragraphDirections = document.paragraphDirections ?? []
+    paragraphDirectionValue = document.value
     requestedSelection = document.selection
     applyControlledDocument(force: tokensNeedRebuild)
     applyRequestedSelection()
@@ -940,6 +951,7 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
     let shouldForce = force || hasDeferredForcedRebuild
     let currentSource = textView.serializedText()
     guard shouldForce || currentSource != value || !documentMatchesExpectedTokens() else {
+      applyParagraphDirections()
       updatePlaceholderVisibility()
       return
     }
@@ -955,6 +967,7 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
     requestedSelection = nil
     textView.selectedRange = displayRange(for: targetSelection)
     restoreBaseTypingAttributes()
+    applyParagraphDirections()
     isApplyingControlledValue = false
     if currentSource != value || previousSelection.start != targetSelection.start || previousSelection.end != targetSelection.end {
       revealSelectionAfterLayout()
@@ -1140,19 +1153,57 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
     return nil
   }
 
-  private func baseAttributes() -> [NSAttributedString.Key: Any] {
-    let font = UIFont(name: fontFamily, size: fontSize)
-      ?? UIFont.systemFont(ofSize: fontSize)
+  private func paragraphStyle(direction: String? = nil) -> NSMutableParagraphStyle {
     let paragraph = NSMutableParagraphStyle()
+    if let direction {
+      paragraph.alignment = direction == "rtl" ? .right : .left
+      paragraph.baseWritingDirection = direction == "rtl" ? .rightToLeft : .leftToRight
+    }
     paragraph.minimumLineHeight = lineHeight
     paragraph.maximumLineHeight = lineHeight
+    return paragraph
+  }
+
+  private func baseAttributes() -> [NSAttributedString.Key: Any] {
+    let font = UIFont(name: fontFamily, size: fontSize)
+      ?? UIFont.systemFont(ofSize: fontSize)
     return [
       .font: font,
       .foregroundColor: UIColor(composerHex: theme.text) ?? .label,
-      .paragraphStyle: paragraph,
+      .paragraphStyle: paragraphStyle(),
     ]
   }
 
+  private func applyParagraphDirections() {
+    guard !paragraphDirections.isEmpty, textView.markedTextRange == nil,
+          textView.serializedText() == paragraphDirectionValue else { return }
+    let wasApplyingControlledValue = isApplyingControlledValue
+    isApplyingControlledValue = true
+    let selection = textView.selectedRange
+    let sourceLength = (paragraphDirectionValue as NSString).length
+    textView.textStorage.beginEditing()
+    for paragraph in paragraphDirections {
+      guard paragraph.start >= 0, paragraph.end >= paragraph.start,
+            paragraph.end <= sourceLength else { continue }
+      let range = displayRange(for: ComposerSelectionPayload(start: paragraph.start, end: paragraph.end))
+      guard range.length > 0 else { continue }
+      let style = paragraphStyle(direction: paragraph.direction)
+      let current = textView.textStorage.attribute(.paragraphStyle, at: range.location, effectiveRange: nil) as? NSParagraphStyle
+      if current != style {
+        textView.textStorage.addAttribute(.paragraphStyle, value: style, range: range)
+      }
+    }
+    textView.textStorage.endEditing()
+    if textView.selectedRange != selection { textView.selectedRange = selection }
+    let sourceCaret = textView.sourceOffset(forDisplayOffset: selection.location)
+    if let paragraph = paragraphDirections.last(where: { $0.start <= sourceCaret }) {
+      var attributes = baseAttributes()
+      attributes[.paragraphStyle] = paragraphStyle(direction: paragraph.direction)
+      textView.typingAttributes = attributes
+    }
+    isApplyingControlledValue = wasApplyingControlledValue
+  }
+
   private func applyTypography() {
     let font = UIFont(name: fontFamily, size: fontSize)
       ?? UIFont.systemFont(ofSize: fontSize)
@@ -1166,7 +1217,12 @@ public final class T3ComposerEditorView: ExpoView, UITextViewDelegate, UITextDro
     guard textView.markedTextRange == nil else {
       return
     }
-    textView.typingAttributes = baseAttributes()
+    var attributes = baseAttributes()
+    // UIKit selects the paragraph's style when the caret moves; retain its bidi direction.
+    if let paragraph = textView.typingAttributes[.paragraphStyle] {
+      attributes[.paragraphStyle] = paragraph
+    }
+    textView.typingAttributes = attributes
   }
 
   private func applyTheme() {

apps/mobile/modules/t3-composer-editor/tests/ios/main.swift

@@ -108,6 +108,45 @@ do {
   )
 }
 
+// Paragraph directions align and read each paragraph without changing source text or caret.
+do {
+  let view = T3ComposerEditorView()
+  view.frame = CGRect(x: 0, y: 0, width: 350, height: 200)
+  let text = "React עדכון הקוד בעברית\nEnglish stays left.\n"
+  let start = ("React עדכון הקוד בעברית\n" as NSString).length
+  let count = (text as NSString).length
+  var payload: [String: Any] = [
+    "value": text, "tokensJson": "[]", "mostRecentEventCount": 0, "isNativeEcho": false,
+    "resetGeneration": 0, "selection": ["start": count, "end": count],
+    "paragraphDirections": [
+      ["start": 0, "end": start, "direction": "rtl"],
+      ["start": start, "end": count, "direction": "ltr"],
+      ["start": count, "end": count, "direction": "ltr"],
+    ],
+  ]
+  view.setControlledDocumentJson(String(data: try! JSONSerialization.data(withJSONObject: payload), encoding: .utf8)!)
+  let input = view.editor
+  check(input.attributedText.string == text, "Source text changed")
+  check(input.selectedRange == NSRange(location: count, length: 0), "Caret changed")
+  let rtl = input.textStorage.attribute(.paragraphStyle, at: 0, effectiveRange: nil) as! NSParagraphStyle
+  let ltr = input.textStorage.attribute(.paragraphStyle, at: start, effectiveRange: nil) as! NSParagraphStyle
+  check(rtl.alignment == .right && rtl.baseWritingDirection == .rightToLeft, "Hebrew must align and read RTL")
+  check(ltr.alignment == .left && ltr.baseWritingDirection == .leftToRight, "English must align and read LTR")
+  view.layoutSubviews()
+  input.layoutManager.ensureLayout(for: input.textContainer)
+  let rtlGlyphs = input.layoutManager.glyphRange(forCharacterRange: NSRange(location: 0, length: start - 1), actualCharacterRange: nil)
+  let ltrGlyphs = input.layoutManager.glyphRange(forCharacterRange: NSRange(location: start, length: count - start - 1), actualCharacterRange: nil)
+  let rtlBounds = input.layoutManager.boundingRect(forGlyphRange: rtlGlyphs, in: input.textContainer)
+  let ltrBounds = input.layoutManager.boundingRect(forGlyphRange: ltrGlyphs, in: input.textContainer)
+  check(rtlBounds.maxX > 340 && ltrBounds.minX < 1, "Rendered paragraphs must use opposite edges")
+  let originalStorage = input.textStorage
+  payload["isNativeEcho"] = true
+  view.setControlledDocumentJson(String(data: try! JSONSerialization.data(withJSONObject: payload), encoding: .utf8)!)
+  check(input.textStorage === originalStorage && input.selectedRange.location == count, "Echo must preserve text storage and caret")
+  let typing = input.typingAttributes[.paragraphStyle] as! NSParagraphStyle
+  check(typing.baseWritingDirection == .leftToRight, "Trailing empty paragraph must inherit English")
+}
+
 print("composer editor tests passed")
 
 private let dropEditor = ComposerTextView()

apps/mobile/src/components/ui/AppText.test.tsx

@@ -0,0 +1,48 @@
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vite-plus/test";
+
+vi.mock("react-native", () => ({
+  Platform: { OS: process.env.T3_MOBILE_TEST_PLATFORM ?? "ios" },
+  Text: (props: { readonly style?: unknown; readonly children?: string }) => (
+    <span data-style={JSON.stringify(props.style ?? null)}>{props.children}</span>
+  ),
+  TextInput: () => null,
+}));
+
+import { AppText } from "./AppText";
+
+function renderText(node: React.ReactNode) {
+  const host = document.createElement("div");
+  act(() => createRoot(host).render(node));
+  const span = host.querySelector("span")!;
+  return { text: span.textContent, style: JSON.parse(span.dataset.style!) };
+}
+
+it("sets the writing direction from plain-string text", () => {
+  expect(renderText(<AppText>סיכום פגישה: Roadmap</AppText>).style).toEqual([
+    { writingDirection: "rtl" },
+    null,
+  ]);
+  expect(renderText(<AppText>Weekly review</AppText>).style).toEqual([
+    { writingDirection: "ltr" },
+    null,
+  ]);
+  expect(renderText(<AppText>12:30</AppText>).style).toBeNull();
+});
+
+it("lets an explicit style win and leaves non-string children alone", () => {
+  expect(renderText(<AppText style={{ writingDirection: "ltr" }}>שלום</AppText>).style).toEqual([
+    { writingDirection: "rtl" },
+    { writingDirection: "ltr" },
+  ]);
+  expect(renderText(<AppText>{["שלום", " 3"]}</AppText>).style).toBeNull();
+});
+
+// Metro inlines Platform.OS, so this branch runs under T3_MOBILE_TEST_PLATFORM=android.
+it("marks the direction only for Android, which ignores writingDirection", () => {
+  const android = process.env.T3_MOBILE_TEST_PLATFORM === "android";
+  expect(renderText(<AppText>שלום world</AppText>).text).toBe(
+    android ? "\u200fשלום world" : "שלום world",
+  );
+});

apps/mobile/src/components/ui/AppText.tsx

@@ -10,13 +10,17 @@ import {
 import { MOBILE_TEXT_CLASSES } from "../../lib/typography";
 
 import { cn } from "../../lib/cn";
+import { directionalText } from "../../lib/directionalText";
+import { textDirection } from "@t3tools/shared/textDirection";
 
 export type AppTextProps = RNTextProps & {
   readonly className?: string;
   readonly textRole?: keyof typeof MOBILE_TEXT_CLASSES;
 };
 
-export function AppText({ className, textRole, ...props }: AppTextProps) {
+export function AppText({ className, textRole, style, children, ...props }: AppTextProps) {
+  // Plain-string text takes its own reading direction, so Hebrew and Arabic read right to left anywhere.
+  const direction = typeof children === "string" ? textDirection(children) : undefined;
   return (
     <RNText
       className={cn(
@@ -25,8 +29,11 @@ export function AppText({ className, textRole, ...props }: AppTextProps) {
         className,
       )}
       selectionColorClassName={Platform.OS === "android" ? "accent-focus/32" : undefined}
+      style={direction ? [{ writingDirection: direction }, style] : style}
       {...props}
-    />
+    >
+      {typeof children === "string" ? directionalText(children) : children}
+    </RNText>
   );
 }
 

apps/mobile/src/components/ui/SecretTextInput.tsx

@@ -14,6 +14,14 @@ export function SecretTextInput(props: SecretTextInputProps) {
         className="pr-12"
         accessibilityLabel={props.accessibilityLabel}
         placeholder={props.placeholder}
+        style={
+          props.textDirection
+            ? {
+                writingDirection: props.textDirection,
+                textAlign: props.textDirection === "rtl" ? "right" : "left",
+              }
+            : undefined
+        }
         value={props.value}
         onChangeText={props.onChangeText}
         editable={props.editable}

apps/mobile/src/components/ui/SecretTextInput.types.ts

@@ -6,4 +6,5 @@ export interface SecretTextInputProps {
   /** Receives the field's current text, so a submit never uses a stale render of it. */
   readonly onSubmitEditing: (value: string) => void;
   readonly editable: boolean;
+  readonly textDirection?: "ltr" | "rtl";
 }

apps/mobile/src/features/threads/LinkRequestCard.tsx

@@ -24,6 +24,7 @@ import {
   type EnvironmentId,
   type OrchestrationV2ProjectedTurnItem,
 } from "@t3tools/contracts";
+import { textDirection } from "@t3tools/shared/textDirection";
 import * as Option from "effect/Option";
 import * as Result from "effect/Result";
 import { useMemo, useRef, useState } from "react";
@@ -40,6 +41,7 @@ import { useAtomCommand } from "../../state/use-atom-command";
 import { ListChoiceRow as SettingsChoiceRow } from "../../components/ui/ListChoiceRow";
 import { SettingsSection } from "../settings/components/SettingsSection";
 import { Button } from "../../components/ui/Button";
+import { directionalText, proseDirectionStyle } from "../../lib/directionalText";
 import { Sheet } from "../../components/ui/Sheet";
 import { RUNTIME_MODE_CHOICES } from "./thread-settings-options";
 
@@ -139,7 +141,12 @@ function PendingLinkRequest(props: {
             : `Link ${target} to this environment`}
         </Text>
         {item.reason.trim() ? (
-          <Text className="font-sans text-sm leading-5 text-foreground-muted">{item.reason}</Text>
+          <Text
+            className="font-sans text-sm leading-5 text-foreground-muted"
+            style={proseDirectionStyle(item.reason, textDirection(item.reason))}
+          >
+            {directionalText(item.reason)}
+          </Text>
         ) : null}
       </View>
       {error !== null ? (

apps/mobile/src/features/threads/PendingUserInputCard.test.tsx

@@ -14,7 +14,7 @@ const harness = vi.hoisted(() => ({
 type Children = { children?: ReactNode };
 
 vi.mock("react-native", () => ({
-  Platform: { OS: "ios" },
+  Platform: { OS: process.env.T3_MOBILE_TEST_PLATFORM ?? "ios" },
   View: ({ children }: Children) => <div>{children}</div>,
   ScrollView: ({ children }: Children) => <div>{children}</div>,
   Pressable: ({ children, onPress }: Children & { onPress?: () => void }) => (
@@ -127,8 +127,12 @@ function setup(questionMarkdown: string) {
   };
 }
 
-it("opens a workspace file link in a question in the thread's file viewer", async () => {
-  using screen = setup("Should I update [probe.md](docs/probe.md:12)?");
+it.each([
+  "Should I update [probe.md](docs/probe.md:12)?",
+  "האם לעדכן את הקובץ [probe.md](docs/probe.md:12)?",
+  "هل يجب تحديث الملف [probe.md](docs/probe.md:12)؟",
+])("opens a workspace file link in the thread's file viewer: %s", async (markdown) => {
+  using screen = setup(markdown);
 
   await screen.pressLink("probe.md");