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/styles/components/directory-browser.css

@@ -124,7 +124,7 @@
   display: flex;
   align-items: center;
   gap: var(--space-md);
-  text-align: left;
+  text-align: start;
   background: transparent;
   border: none;
   color: var(--text-primary);

packages/ui/src/styles/components/selector.css

@@ -40,11 +40,11 @@
 }
 
 .selector-trigger-primary--align-left {
-  @apply text-left w-full;
+  @apply text-start w-full;
 }
 
 .selector-trigger-secondary {
-  @apply text-xs text-left truncate;
+  @apply text-xs text-start truncate w-full;
   color: var(--text-muted);
 }
 

packages/ui/src/styles/components/settings-screen.css

@@ -43,7 +43,7 @@
   padding: 1.25rem;
   background:
     linear-gradient(180deg, color-mix(in oklab, var(--surface-secondary) 92%, var(--accent-primary) 8%), var(--surface-secondary));
-  border-right: 1px solid var(--border-base);
+  border-inline-end: 1px solid var(--border-base);
 }
 
 .settings-screen-nav-header {
@@ -121,6 +121,9 @@
   color: var(--text-primary);
   transform: translateX(2px);
 }
+[dir="rtl"] .settings-nav-button[data-selected="true"] {
+  transform: translateX(-2px);
+}
 
 .settings-nav-button-icon {
   width: 1rem;
@@ -360,7 +363,7 @@
   border: 1px solid var(--border-base);
   background: var(--surface-base);
   color: var(--text-primary);
-  text-align: left;
+  text-align: start;
   transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
   outline: none;
   cursor: pointer;
@@ -418,7 +421,7 @@
 }
 
 .settings-choice-check {
-  margin-left: auto;
+  margin-inline-start: auto;
   color: var(--accent-primary);
   opacity: 0;
 }
@@ -488,7 +491,7 @@
   .settings-screen-nav {
     gap: 0.75rem;
     padding: 1rem;
-    border-right: none;
+    border-inline-end: none;
     border-bottom: 1px solid var(--border-base);
   }
 

packages/ui/src/styles/markdown.css

@@ -136,6 +136,7 @@
     border-radius: 8px;
     padding: 0.75rem;
     margin: 1rem 0;
+    direction: ltr;
   }
 
   .markdown-body pre:not(.shiki) code,

packages/ui/src/styles/messaging.css

@@ -28,7 +28,7 @@
 
 /* Message error block */
 .message-error-block {
-  @apply text-sm p-3 rounded border-l-[3px] my-2;
+  @apply text-sm p-3 rounded border-s-[3px] my-2;
   color: var(--status-error);
   background-color: var(--message-error-bg);
   border-color: var(--status-error);

packages/ui/src/styles/messaging/message-base.css

@@ -141,13 +141,13 @@
 
 .message-step-start {
   background-color: var(--message-assistant-bg);
-  border-left: 4px solid var(--message-assistant-border);
+  border-inline-start: 4px solid var(--message-assistant-border);
   margin-top: 0;
 }
 
 .message-step-finish {
   background-color: var(--message-assistant-bg);
-  border-left: 4px solid var(--message-assistant-border);
+  border-inline-start: 4px solid var(--message-assistant-border);
   margin: 0;
 }
 
@@ -172,7 +172,7 @@
   font-size: 9px;
   color: var(--text-muted);
   font-weight: var(--font-weight-medium);
-  margin-right: 0.35rem;
+  margin-inline-end: 0.35rem;
 }
 
 .message-step-heading {
@@ -189,7 +189,7 @@
 }
 
 .message-error-block {
-  @apply text-sm p-3 rounded border-l-[3px] my-2;
+  @apply text-sm p-3 rounded border-s-[3px] my-2;
   color: var(--status-error);
   background-color: var(--message-error-bg);
   border-color: var(--status-error);
@@ -258,6 +258,7 @@
   padding: 8px;
   background-color: var(--surface-code);
   border-radius: 4px;
+  direction: ltr;
 }
 
 .message-error-part {
@@ -335,12 +336,12 @@
 
 .message-step-start {
   background-color: var(--message-assistant-bg);
-  border-left: 4px solid var(--message-assistant-border);
+  border-inline-start: 4px solid var(--message-assistant-border);
 }
 
 .message-step-finish {
   background-color: var(--message-assistant-bg);
-  border-left: 4px solid var(--message-assistant-border);
+  border-inline-start: 4px solid var(--message-assistant-border);
 }
 
 .message-step-heading {
@@ -363,7 +364,7 @@
 }
 
 .message-step-time {
-  @apply text-[11px] text-[var(--text-muted)] font-normal ml-auto;
+  @apply text-[11px] text-[var(--text-muted)] font-normal ms-auto;
 }
 
 .message-step-meta-inline {
@@ -390,7 +391,7 @@
 .message-reasoning-card {
   --reasoning-border-color: var(--border-strong, var(--border-base));
   background-color: var(--message-assistant-bg);
-  border-left: 4px solid var(--message-assistant-border);
+  border-inline-start: 4px solid var(--message-assistant-border);
   margin-top: 0;
   margin-bottom: 0;
   padding: 0;
@@ -424,7 +425,7 @@
   padding: 0.25rem 0.6rem;
   font: inherit;
   color: inherit;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   transition: background-color 0.2s ease, box-shadow 0.2s ease;
 }
@@ -546,4 +547,5 @@
   color: var(--text-primary);
   white-space: pre-wrap;
   margin: 0;
+  unicode-bidi: plaintext;
 }

packages/ui/src/styles/messaging/message-section.css

@@ -207,7 +207,7 @@
 
 .message-scroll-button-wrapper {
   position: absolute;
-  right: 1rem;
+  inset-inline-end: 1rem;
   bottom: 1rem;
   display: flex;
   flex-direction: column;
@@ -274,7 +274,7 @@
 }
 
 .message-quote-button + .message-quote-button {
-  border-left: 1px solid var(--list-item-highlight-border);
+  border-inline-start: 1px solid var(--list-item-highlight-border);
 }
 
 .message-quote-button:hover {

packages/ui/src/styles/messaging/message-selection.css

@@ -3,7 +3,7 @@
 .message-select-checkbox {
   width: 14px;
   height: 14px;
-  margin-right: 0.5rem;
+  margin-inline-end: 0.5rem;
   cursor: pointer;
   accent-color: var(--status-error);
   flex: 0 0 auto;
@@ -134,7 +134,7 @@
 }
 
 .message-delete-mode-menu {
-  right: 0;
+  inset-inline-end: 0;
   bottom: calc(100% + 6px);
   min-width: 150px;
   width: max-content;

packages/ui/src/styles/messaging/message-timeline.css

@@ -20,7 +20,7 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  right: 64px;
+  inset-inline-end: 64px;
   width: 1px;
   background-color: var(--border-muted);
   pointer-events: none;
@@ -32,7 +32,7 @@
   }
 
   .message-layout--with-timeline::after {
-    right: 40px;
+    inset-inline-end: 40px;
   }
 }
 
@@ -311,12 +311,12 @@
 
 /* Tool segments that are part of a group get a left accent border. */
 .message-timeline-group-child {
-  border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
+  border-inline-start: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
 }
 
 /* The assistant "parent" at the bottom of a tool group gets the same border. */
 .message-timeline-group-parent {
-  border-left: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
+  border-inline-start: 3px solid color-mix(in oklab, var(--accent-primary) 35%, transparent);
 }
 
 /* Extra spacing before the first tool in a group to separate from the
@@ -346,7 +346,7 @@
   /* Extend the overlay box into the stream so ribs are not relying on
      overflow-visible behavior (which is brittle around scroll containers). */
   --xray-overhang: calc(var(--max-rib-width, 50vw) + 84px);
-  left: calc(-1 * var(--xray-overhang));
+  inset-inline-start: calc(-1 * var(--xray-overhang));
   width: calc(100% + var(--xray-overhang));
   overflow: hidden;
   padding: 0.25rem;
@@ -374,10 +374,10 @@
 
 .message-timeline-xray-token-label {
   position: absolute;
-  right: 100%;
+  inset-inline-end: 100%;
   top: 50%;
   transform: translateY(-50%);
-  margin-right: 4px;
+  margin-inline-end: 4px;
   height: 1.5rem;
   display: flex;
   align-items: center;
@@ -403,16 +403,25 @@
     var(--status-success) calc(100% - var(--segment-weight) * 100%),
     var(--status-error) calc(var(--segment-weight) * 100%)
   );
-  border-radius: 3px 0 0 3px;
+  border-start-start-radius: 3px;
+  border-end-start-radius: 3px;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
   transition: width 0.3s ease, background-color 0.3s ease;
   box-shadow: -2px 0 4px rgba(0, 0, 0, 0.25);
 }
+[dir="rtl"] .message-timeline-relative-bar {
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.25);
+}
 
 .message-timeline-absolute-bar {
   height: 3px;
   width: calc(var(--segment-weight) * var(--max-rib-width, 50vw));
   background-color: var(--text-muted);
-  border-radius: 2px 0 0 2px;
+  border-start-start-radius: 2px;
+  border-end-start-radius: 2px;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
   transition: width 0.3s ease;
   opacity: 0.5;
   position: relative;
@@ -425,7 +434,7 @@
 .message-timeline-absolute-bar-overflow::before {
   content: "";
   position: absolute;
-  left: -1px;
+  inset-inline-start: -1px;
   top: -3px;
   bottom: -3px;
   width: 3px;

packages/ui/src/styles/messaging/prompt-input.css

@@ -35,7 +35,9 @@
 }
 
 .prompt-input {
-  @apply w-full pl-3 pr-10 pt-2.5 border text-sm resize-none outline-none transition-colors;
+  @apply w-full pt-2.5 border text-sm resize-none outline-none transition-colors;
+  padding-inline-start: 2.5rem;
+  padding-inline-end: 0.75rem;
   font-family: inherit;
   background-color: var(--surface-base);
   color: var(--text-primary);
@@ -65,8 +67,8 @@
 .prompt-input-overlay {
   position: absolute;
   bottom: 1rem;
-  left: 0.75rem;
-  right: 0.75rem;
+  inset-inline-start: 0.75rem;
+  inset-inline-end: 0.75rem;
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -81,11 +83,13 @@
   color: var(--text-primary);
 }
 
-/* Navigation buttons container (expand, prev, next) */
+/* Navigation buttons container (expand, prev, next).
+   Intentionally at inline-start (left in LTR, right in RTL) so buttons never overlap
+   the scrollbar, which browsers always place at inline-end. */
 .prompt-nav-buttons {
   position: absolute;
   top: 0.25rem;
-  right: 0.25rem;
+  inset-inline-start: 0.25rem;
   bottom: 0.25rem;
   display: flex;
   flex-direction: column;
@@ -160,6 +164,11 @@
   @apply opacity-60 cursor-not-allowed;
 }
 
+/* In RTL: override dir="auto" which defaults to LTR on empty textarea */
+[dir="rtl"] .prompt-input {
+  direction: rtl;
+}
+
 .prompt-input::placeholder {
   color: var(--text-muted);
 }
@@ -256,7 +265,7 @@
   display: none;
   position: absolute;
   bottom: calc(100% + 6px);
-  left: 0;
+  inset-inline-start: 0;
   padding: 8px;
   background-color: var(--surface-base);
   border: 1px solid var(--border-base);
@@ -335,6 +344,7 @@
   .prompt-input {
     min-height: 0;
     padding: 0.5rem 0.75rem;
+    padding-inline-start: 2.5rem; /* preserve space for nav buttons */
     padding-bottom: 0.75rem;
   }
 

packages/ui/src/styles/messaging/tool-call.css

@@ -5,7 +5,7 @@
 .tool-call-message {
   @apply flex flex-col gap-2 p-3 w-full;
   background-color: var(--message-tool-bg);
-  border-left: 4px solid var(--message-tool-border);
+  border-inline-start: 4px solid var(--message-tool-border);
   color: inherit;
 }
 
@@ -94,7 +94,7 @@
 }
 
 .tool-call-header-toggle {
-  @apply flex items-center gap-2 p-2 w-full bg-transparent border-none cursor-pointer text-left;
+  @apply flex items-center gap-2 p-2 w-full bg-transparent border-none cursor-pointer text-start;
   font-family: var(--font-family-mono);
   font-size: 13px;
   border-radius: 0;
@@ -105,7 +105,7 @@
 .tool-call-header-toggle::before {
   content: "▶";
   font-size: 11px;
-  margin-right: 0.35rem;
+  margin-inline-end: 0.35rem;
   color: var(--text-secondary);
 }
 
@@ -159,7 +159,7 @@
 }
 
 .tool-call-summary {
-  @apply flex-1 text-left inline-flex items-center gap-2;
+  @apply flex-1 text-start inline-flex items-center gap-2;
   color: var(--text-primary);
 }
 
@@ -168,26 +168,26 @@
 }
 
 .tool-call-summary[data-tool-icon=""]::before {
-  margin-right: 0;
+  margin-inline-end: 0;
   content: "";
 }
 
 .tool-call-summary[data-tool-icon]:not([data-tool-icon=""])::before {
-  margin-right: 0.35rem;
+  margin-inline-end: 0.35rem;
 }
 
 /* ToolState uses status="completed"; keep "success" as a legacy alias. */
 .tool-call-status-completed,
 .tool-call-status-success {
-  border-left: 3px solid var(--status-success);
+  border-inline-start: 3px solid var(--status-success);
 }
 
 .tool-call-status-error {
-  border-left: 3px solid var(--status-error);
+  border-inline-start: 3px solid var(--status-error);
 }
 
 .tool-call-status-running {
-  border-left: 3px solid var(--status-warning);
+  border-inline-start: 3px solid var(--status-warning);
 }
 
 .tool-call-status-running .tool-call-status {
@@ -195,7 +195,7 @@
 }
 
 .tool-call-status-pending {
-  border-left: 3px solid var(--accent-primary);
+  border-inline-start: 3px solid var(--accent-primary);
 }
 
 .tool-call-status-pending .tool-call-summary {
@@ -257,7 +257,7 @@
   border: none;
   border-bottom: 1px solid var(--tool-call-border-color);
   width: 100%;
-  text-align: left;
+  text-align: start;
   font-size: 0.875rem;
   font-weight: normal;
   color: var(--text-primary);
@@ -267,7 +267,7 @@
 .tool-call-io-toggle::before {
   content: "▶";
   font-size: 11px;
-  margin-right: 0.35rem;
+  margin-inline-end: 0.35rem;
   color: var(--text-secondary);
 }
 
@@ -393,7 +393,7 @@
 }
 
 .tool-call-awaiting-permission {
-  border-left-color: var(--status-warning);
+  border-inline-start-color: var(--status-warning);
 }
 
 .tool-call-permission {
@@ -484,7 +484,7 @@
 }
 
 .tool-call-permission-shortcuts .kbd {
-  margin-right: 0.25rem;
+  margin-inline-end: 0.25rem;
 }
 
 .tool-call-permission-queued-text {
@@ -549,6 +549,7 @@
   min-height: auto;
   max-height: none;
   overflow-y: visible;
+  direction: ltr;
 }
 
 /* Shiki injects inline background colors; force token surfaces. */
@@ -610,7 +611,7 @@
 }
 
 .tool-call-diagnostics-heading {
-  @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
+  @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-start;
   font-family: var(--font-family-mono);
   font-size: 13px;
   color: var(--text-primary);
@@ -634,7 +635,7 @@
 
 
 .tool-call-diagnostics-heading {
-  @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-left;
+  @apply flex items-center gap-2 p-2 w-full border-none cursor-pointer text-start;
   font-family: var(--font-family-mono);
   font-size: 13px;
   color: var(--text-primary);
@@ -693,8 +694,8 @@
   gap: var(--space-xs);
   max-height: calc(4 * var(--tool-call-line-unit, 1.4em));
   overflow-y: scroll;
-  padding-right: 0;
-  margin-right: 0;
+  padding-inline-end: 0;
+  margin-inline-end: 0;
   scrollbar-gutter: stable both-edges;
   scrollbar-width: thin;
 }
@@ -762,6 +763,7 @@
   overflow-x: auto;
   max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
   overflow-y: scroll;
+  direction: ltr;
 }
 
 .tool-call-section code {
@@ -843,7 +845,7 @@
 
 .tool-call-error-content {
   background-color: var(--message-error-bg);
-  border-left: 3px solid var(--status-error);
+  border-inline-start: 3px solid var(--status-error);
   padding: 12px;
   margin: 8px 0;
   border-radius: 4px;

packages/ui/src/styles/messaging/tool-call/task.css

@@ -86,7 +86,7 @@
 .tool-call-task-summary .tool-call::before {
   content: "";
   position: absolute;
-  left: 0;
+  inset-inline-start: 0;
   top: 0;
   bottom: 0;
   width: 3px;
@@ -117,7 +117,7 @@
   align-items: center;
   gap: 0.4rem;
   padding: 0.35rem 0.5rem 0.35rem 0.75rem;
-  border-left: 2px solid var(--tool-call-border-color, var(--border-base));
+  border-inline-start: 2px solid var(--tool-call-border-color, var(--border-base));
   font-size: var(--font-size-sm);
   font-family: var(--font-family-mono);
   line-height: 1.35;
@@ -134,19 +134,19 @@
 }
 
 .tool-call-task-item[data-task-status="completed"] {
-  border-left-color: var(--status-success);
+  border-inline-start-color: var(--status-success);
 }
 
 .tool-call-task-item[data-task-status="running"] {
-  border-left-color: var(--status-warning);
+  border-inline-start-color: var(--status-warning);
 }
 
 .tool-call-task-item[data-task-status="pending"] {
-  border-left-color: var(--accent-primary);
+  border-inline-start-color: var(--accent-primary);
 }
 
 .tool-call-task-item[data-task-status="error"] {
-  border-left-color: var(--status-error);
+  border-inline-start-color: var(--status-error);
 }
 
 .tool-call-task-icon {

packages/ui/src/styles/messaging/virtual-follow-list.css

@@ -46,7 +46,7 @@
 .virtual-follow-list-controls-container {
   position: absolute;
   bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
-  right: var(--space-md);
+  inset-inline-end: var(--space-md);
   z-index: 20;
 }
 

packages/ui/src/styles/panels/modal.css

@@ -42,7 +42,7 @@
 }
 
 .modal-item {
-  @apply w-full px-4 py-3 flex items-start gap-3 transition-colors cursor-pointer border-none text-left;
+  @apply w-full px-4 py-3 flex items-start gap-3 transition-colors cursor-pointer border-none text-start;
   color: var(--text-primary);
 }
 

packages/ui/src/styles/panels/panel-shell.css

@@ -77,7 +77,7 @@
 }
 
 .panel-list-item-content {
-  @apply flex-1 text-left px-4 py-3 flex items-center justify-between gap-3 outline-none transition-colors w-full min-w-0;
+  @apply flex-1 text-start px-4 py-3 flex items-center justify-between gap-3 outline-none transition-colors w-full min-w-0;
 }
 
 .panel-list-item-content:hover {

packages/ui/src/styles/panels/right-panel.css

@@ -11,8 +11,8 @@
   content: '';
   position: absolute;
   bottom: -1px;
-  left: 0;
-  right: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   height: 1px;
   background-color: var(--border-base);
   z-index: 0;
@@ -42,7 +42,7 @@
   border: 1px solid transparent;
   border-bottom: none;
   border-radius: 8px 8px 0 0;
-  margin-right: 2px;
+  margin-inline-end: 2px;
   z-index: 1;
 }
 
@@ -90,8 +90,8 @@
 .file-split-handle {
   cursor: col-resize;
   background-color: transparent;
-  border-left: 1px solid var(--border-base);
-  border-right: 1px solid var(--border-base);
+  border-inline-start: 1px solid var(--border-base);
+  border-inline-end: 1px solid var(--border-base);
   user-select: none;
   touch-action: none;
 }
@@ -148,7 +148,7 @@
   display: flex;
   flex-direction: column;
   background-color: var(--surface-secondary);
-  border-left: 1px solid var(--border-base);
+  border-inline-start: 1px solid var(--border-base);
   /* Monaco uses layered positioned elements; keep overlay well above it. */
   z-index: 200;
 }
@@ -334,6 +334,7 @@
 .monaco-viewer {
   width: 100%;
   height: 100%;
+  direction: ltr;
 }
 
 .file-viewer-empty {
@@ -459,7 +460,7 @@
 }
 
 .section-label {
-  margin-left: 2px;
+  margin-inline-start: 2px;
 }
 
 .section-info-icon {
@@ -528,7 +529,7 @@
 }
 
 .right-panel-empty--left {
-  @apply items-start justify-start text-left w-full;
+  @apply items-start justify-start text-start w-full;
 }
 
 .right-panel-empty-text {

packages/ui/src/styles/panels/session-layout.css

@@ -26,10 +26,10 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
+  inset-inline-start: 0;
   width: min(90vw, 360px);
   max-width: 360px;
-  border-right: 1px solid var(--border-base);
+  border-inline-end: 1px solid var(--border-base);
   box-shadow: var(--folder-card-shadow);
   transform: translateX(0);
   transition: transform 0.25s ease, opacity 0.2s ease;
@@ -41,6 +41,9 @@
   opacity: 0;
   pointer-events: none;
 }
+[dir="rtl"] .session-sidebar-collapsed {
+  transform: translateX(100%);
+}
 
 .session-sidebar-backdrop {
   @apply absolute inset-0;
@@ -54,7 +57,7 @@
 .session-sidebar-menu-button--floating {
   position: absolute;
   top: 1rem;
-  left: 1rem;
+  inset-inline-start: 1rem;
   z-index: 20;
 }
 
@@ -128,7 +131,7 @@ session-sidebar-controls .selector-trigger-primary {
 .mobile-fullscreen-exit-wrapper {
   position: fixed;
   top: calc(env(safe-area-inset-top, 0px) + 12px);
-  right: calc(env(safe-area-inset-right, 0px) + 12px);
+  inset-inline-end: calc(env(safe-area-inset-right, 0px) + 12px);
   z-index: 1250;
   pointer-events: none;
 }
@@ -143,11 +146,11 @@ session-sidebar-controls .selector-trigger-primary {
 }
 
 .session-resize-handle--left {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .session-resize-handle--right {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .session-resize-handle:hover {
@@ -160,14 +163,20 @@ session-sidebar-controls .selector-trigger-primary {
 }
 
 .session-resize-handle--left::before {
-  right: 0;
+  inset-inline-end: 0;
   transform: translateX(50%);
 }
+[dir="rtl"] .session-resize-handle--left::before {
+  transform: translateX(-50%);
+}
 
 .session-resize-handle--right::before {
-  left: 0;
+  inset-inline-start: 0;
   transform: translateX(-50%);
 }
+[dir="rtl"] .session-resize-handle--right::before {
+  transform: translateX(50%);
+}
 
 .session-list-header {
   @apply border-b relative;
@@ -190,14 +199,14 @@ session-sidebar-controls .selector-trigger-primary {
 }
 
 .session-item-base {
-  @apply w-full flex flex-col gap-1 px-3 py-2.5 text-left transition-colors outline-none;
+  @apply w-full flex flex-col gap-1 px-3 py-2.5 text-start transition-colors outline-none;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sm);
 }
 
 
 .session-item-base.session-item-child {
-  padding-left: 2.25rem;
+  padding-inline-start: 2.25rem;
   position: relative;
 }
 
@@ -206,7 +215,7 @@ session-sidebar-controls .selector-trigger-primary {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 1.125rem;
+  inset-inline-start: 1.125rem;
   width: 1px;
   background-color: var(--text-secondary);
   opacity: 0.95;
@@ -221,7 +230,7 @@ session-sidebar-controls .selector-trigger-primary {
   content: "";
   position: absolute;
   top: 50%;
-  left: 1.125rem;
+  inset-inline-start: 1.125rem;
   width: 0.875rem;
   height: 1px;
   background-color: var(--text-secondary);
@@ -231,11 +240,11 @@ session-sidebar-controls .selector-trigger-primary {
 }
 
 .session-item-base.session-item-border-user {
-  border-left: 4px solid var(--message-user-border);
+  border-inline-start: 4px solid var(--message-user-border);
 }
 
 .session-item-base.session-item-border-assistant {
-  border-left: 4px solid var(--message-assistant-border);
+  border-inline-start: 4px solid var(--message-assistant-border);
 }
 
 .session-item-expander {