feat(i18n): Hebrew locale + full RTL support (#243)

# feat(i18n): Hebrew locale + full RTL support

## Summary

This PR adds full Hebrew (he) locale support to the UI, including a
complete translation of all user-facing strings and comprehensive RTL
layout support across all components.

## What was done

### Hebrew translation
- Full translation of all i18n message files for the `he` locale (17
translation files)
- Registered the language in the i18n system and the language picker

### RTL support
- Automatic direction detection (`dir="rtl"`) when Hebrew is selected
- Replaced physical CSS properties (`left`/`right`) with logical
equivalents (`inline-start`/`inline-end`) across the project
- Fixed resize direction, file path alignment, and textarea padding
- Fixed navigation button positioning in textarea for RTL
- Fixed scrollbar direction in RTL
- Fixed code block direction and selector alignment
- Fixed Monaco editor direction in the file viewer
- Auto-detect text direction in reasoning block (`dir="auto"` +
`unicode-bidi: plaintext`)

### Adapted components
- `session-layout` — sidebar and resize handle
- `prompt-input` — text direction and buttons
- `message-base` — message blocks and reasoning
- `message-timeline` — timeline bar
- `right-panel` — right side panel
- `tool-call` — tool call display
- `settings-screen` — settings page
- `selector` — selection component
- `instance-shell` — main shell

## New files

```
packages/ui/src/lib/i18n/messages/he/
  advancedSettings.ts
  app.ts
  commands.ts
  dialogs.ts
  filesystem.ts
  folderSelection.ts
  index.ts
  instance.ts
  loadingScreen.ts
  logs.ts
  markdown.ts
  messaging.ts
  remoteAccess.ts
  session.ts
  settings.ts
  time.ts
  toolCall.ts
```

## Suggested testing
- Switch language to Hebrew and verify all strings are translated
- Verify RTL layout is correct across all screens (session, settings,
file viewer)
- Verify that English text inside a reasoning block is displayed LTR
- Switch back to English and verify everything returns to LTR

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-authored-by: Shantur Rathore <i@shantur.com>

packages/ui/src/components/instance/shell/right-panel/RightPanel.tsx

@@ -249,7 +249,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     const mode = activeSplitResize()
     if (!mode) return
     event.preventDefault()
-    const delta = event.clientX - splitResizeStartX()
+    const isRtl = typeof document !== "undefined" && document.documentElement.dir === "rtl"
+    const delta = (event.clientX - splitResizeStartX()) * (isRtl ? -1 : 1)
     const next = clampSplitWidth(splitResizeStartWidth() + delta)
     if (mode === "changes") setChangesSplitWidth(next)
     else if (mode === "git-changes") setGitChangesSplitWidth(next)
@@ -272,7 +273,8 @@ const RightPanel: Component<RightPanelProps> = (props) => {
     const touch = event.touches[0]
     if (!touch) return
     event.preventDefault()
-    const delta = touch.clientX - splitResizeStartX()
+    const isRtl = typeof document !== "undefined" && document.documentElement.dir === "rtl"
+    const delta = (touch.clientX - splitResizeStartX()) * (isRtl ? -1 : 1)
     const next = clampSplitWidth(splitResizeStartWidth() + delta)
     if (mode === "changes") setChangesSplitWidth(next)
     else if (mode === "git-changes") setGitChangesSplitWidth(next)

packages/ui/src/components/instance/shell/right-panel/components/DiffToolbar.tsx

@@ -2,6 +2,7 @@ import type { Component } from "solid-js"
 
 import { AlignJustify, FoldVertical, Split, UnfoldVertical, WrapText } from "lucide-solid"
 
+import { useI18n } from "../../../../../lib/i18n"
 import type { DiffContextMode, DiffViewMode, DiffWordWrapMode } from "../types"
 
 interface DiffToolbarProps {
@@ -14,14 +15,15 @@ interface DiffToolbarProps {
 }
 
 const DiffToolbar: Component<DiffToolbarProps> = (props) => {
+  const { t } = useI18n()
   const nextViewMode = (): DiffViewMode => (props.viewMode === "split" ? "unified" : "split")
   const nextContextMode = (): DiffContextMode => (props.contextMode === "collapsed" ? "expanded" : "collapsed")
   const nextWordWrapMode = (): DiffWordWrapMode => (props.wordWrapMode === "on" ? "off" : "on")
 
-  const viewModeTitle = () => (nextViewMode() === "split" ? "Switch to split view" : "Switch to unified view")
+  const viewModeTitle = () => (nextViewMode() === "split" ? t("instanceShell.diff.switchToSplit") : t("instanceShell.diff.switchToUnified"))
   const contextModeTitle = () =>
-    nextContextMode() === "collapsed" ? "Hide unchanged regions" : "Show full file"
-  const wordWrapTitle = () => (nextWordWrapMode() === "on" ? "Enable word wrap" : "Disable word wrap")
+    nextContextMode() === "collapsed" ? t("instanceShell.diff.hideUnchanged") : t("instanceShell.diff.showFull")
+  const wordWrapTitle = () => (nextWordWrapMode() === "on" ? t("instanceShell.diff.enableWordWrap") : t("instanceShell.diff.disableWordWrap"))
 
   return (
     <div class="file-viewer-toolbar">

packages/ui/src/components/instance/shell/right-panel/components/SplitFilePanel.tsx

@@ -1,5 +1,6 @@
 import { Show, type Component, type JSX } from "solid-js"
 
+import { useI18n } from "../../../../../lib/i18n"
 import OverlayList from "./OverlayList"
 
 type SplitFilePanelList = {
@@ -24,12 +25,13 @@ interface SplitFilePanelProps {
 }
 
 const SplitFilePanel: Component<SplitFilePanelProps> = (props) => {
+  const { t } = useI18n()
   return (
     <div class="files-tab-container">
       <div class="files-tab-header">
         <div class="files-tab-header-row">
           <button type="button" class="files-toggle-button" onClick={props.onToggleList}>
-            {props.listOpen ? "Hide files" : "Show files"}
+            {props.listOpen ? t("instanceShell.filesShell.hideFiles") : t("instanceShell.filesShell.showFiles")}
           </button>
 
           {props.header}

packages/ui/src/components/instance/shell/right-panel/tabs/FilesTab.tsx

@@ -175,7 +175,7 @@ const FilesTab: Component<FilesTabProps> = (props) => {
               title={props.t("instanceShell.rightPanel.actions.refresh")}
               aria-label={props.t("instanceShell.rightPanel.actions.refresh")}
               disabled={props.browserLoading()}
-              style={{ "margin-left": "auto" }}
+              style={{ "margin-inline-start": "auto" }}
               onClick={() => props.onRefresh()}
             >
               <RefreshCw class={`h-4 w-4${props.browserLoading() ? " animate-spin" : ""}`} />

packages/ui/src/components/instance/shell/right-panel/tabs/GitChangesTab.tsx

@@ -82,7 +82,7 @@ const GitChangesTab: Component<GitChangesTabProps> = (props) => {
   })
 
   const emptyViewerMessage = createMemo(() => {
-    if (!hasSession()) return props.t("instanceShell.sessionChanges.noSessionSelected")
+    if (!hasSession()) return props.t("instanceShell.gitChanges.noSessionSelected")
     const currentEntries = entries()
     if (currentEntries === null) return props.t("instanceShell.gitChanges.loading")
     if (nonDeleted().length === 0) return props.t("instanceShell.gitChanges.empty")

packages/ui/src/components/instance/shell/useDrawerResize.ts

@@ -46,7 +46,9 @@ export function useDrawerResize(options: DrawerResizeOptions): DrawerResizeApi {
     if (!side) return
     const startWidth = resizeStartWidth()
     const clamp = side === "left" ? options.clampLeft : options.clampRight
-    const delta = side === "left" ? clientX - resizeStartX() : resizeStartX() - clientX
+    const isRtl = typeof document !== "undefined" && document.documentElement.dir === "rtl"
+    const rawDelta = side === "left" ? clientX - resizeStartX() : resizeStartX() - clientX
+    const delta = isRtl ? -rawDelta : rawDelta
     const nextWidth = clamp(startWidth + delta)
     applyDrawerWidth(side, nextWidth)
   }