fix(rtl): fix resize direction, path alignment, and i18n gaps

- Invert resize delta in RTL for drawer (useDrawerResize) and split panel (RightPanel)
- Add dir="ltr" to path/code value elements in instance-info panel
- Replace hardcoded English strings with i18n: Hide/Show files, No git changes yet,
  Hide unchanged regions / Show full file, diff toolbar titles, + Create worktree
- Fix sessionList.status.idle: "בסרלה" → "מוכן" in session.ts
- Fix text-align: left → start in message-reasoning-toggle and tool-call-io-toggle
- Fix left: 0 → inset-inline-start: 0 in attachment-chip-preview

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/ui/src/components/instance-info.tsx

@@ -82,7 +82,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
       <div class="panel-body space-y-3">
         <div>
           <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">{t("instanceInfo.labels.folder")}</div>
-          <div class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
+          <div dir="ltr" class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
             {currentInstance().folder}
           </div>
         </div>
@@ -94,7 +94,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
                 <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
                   {t("instanceInfo.labels.project")}
                 </div>
-                <div class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
+                <div dir="ltr" class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
                   {project().id}
                 </div>
               </div>
@@ -137,7 +137,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
               {t("instanceInfo.labels.binaryPath")}
             </div>
-            <div class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
+            <div dir="ltr" class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
               {currentInstance().binaryPath}
             </div>
           </div>
@@ -151,7 +151,7 @@ const InstanceInfo: Component<InstanceInfoProps> = (props) => {
             <div class="space-y-1">
               <For each={environmentEntries()}>
                 {([key, value]) => (
-                  <div class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                  <div dir="ltr" class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
                     <span class="text-xs font-mono font-medium flex-1 text-primary" title={key}>
                       {key}
                     </span>

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"
+    nextContextMode() === "collapsed" ? t("instanceShell.diff.hideUnchanged") : t("instanceShell.diff.showFull")
-  const wordWrapTitle = () => (nextWordWrapMode() === "on" ? "Enable word wrap" : "Disable word wrap")
+  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/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)
   }

packages/ui/src/components/worktree-selector.tsx

@@ -18,6 +18,7 @@ import {
   setWorktreeSlugForParentSession,
 } from "../stores/worktrees"
 import { sessions } from "../stores/sessions"
+import { useI18n } from "../lib/i18n"
 
 const log = getLogger("session")
 
@@ -25,8 +26,6 @@ type WorktreeOption =
   | { kind: "action"; key: "__create__"; label: string }
   | { kind: "worktree"; key: string; slug: string; directory: string; raw: WorktreeDescriptor }
 
-const CREATE_OPTION: WorktreeOption = { kind: "action", key: "__create__", label: "+ Create worktree" }
-
 function preventSelectPress(event: PointerEvent | MouseEvent) {
   // Prevent Select.Item from treating this as a selection.
   // We intentionally prevent default to stop Kobalte's internal press handling.
@@ -71,6 +70,7 @@ interface WorktreeSelectorProps {
 }
 
 export default function WorktreeSelector(props: WorktreeSelectorProps) {
+  const { t } = useI18n()
   const [isOpen, setIsOpen] = createSignal(false)
   const [createOpen, setCreateOpen] = createSignal(false)
   const [createSlug, setCreateSlug] = createSignal("")
@@ -99,7 +99,8 @@ export default function WorktreeSelector(props: WorktreeSelectorProps) {
       directory: wt.directory,
       raw: wt,
     }))
-    return [CREATE_OPTION, ...mapped]
+    const createOption: WorktreeOption = { kind: "action", key: "__create__", label: t("instanceShell.worktree.create") }
+    return [createOption, ...mapped]
   })
 
   const selectedOption = createMemo<WorktreeOption | undefined>(() => {

packages/ui/src/lib/i18n/messages/en/instance.ts

@@ -124,6 +124,18 @@ export const instanceMessages = {
   "instanceShell.filesShell.viewerTitle": "Change viewer",
   "instanceShell.filesShell.viewerPlaceholder": "Detailed change rendering will be added in the next step.",
   "instanceShell.filesShell.viewerEmpty": "No file selected.",
+  "instanceShell.filesShell.hideFiles": "Hide files",
+  "instanceShell.filesShell.showFiles": "Show files",
+  "instanceShell.gitChanges.noSessionSelected": "Select a session to view git changes.",
+  "instanceShell.gitChanges.loading": "Loading git changes…",
+  "instanceShell.gitChanges.empty": "No git changes yet.",
+  "instanceShell.diff.hideUnchanged": "Hide unchanged regions",
+  "instanceShell.diff.showFull": "Show full file",
+  "instanceShell.diff.switchToSplit": "Switch to split view",
+  "instanceShell.diff.switchToUnified": "Switch to unified view",
+  "instanceShell.diff.enableWordWrap": "Enable word wrap",
+  "instanceShell.diff.disableWordWrap": "Disable word wrap",
+  "instanceShell.worktree.create": "+ Create worktree",
 
   "instanceShell.plan.noSessionSelected": "Select a session to view plan.",
   "instanceShell.plan.empty": "Nothing planned yet.",

packages/ui/src/lib/i18n/messages/he/instance.ts

@@ -120,6 +120,18 @@ export const instanceMessages = {
   "instanceShell.filesShell.viewerTitle": "מציג שינויים",
   "instanceShell.filesShell.viewerPlaceholder": "תצוגת שינויים מפורטת תתווסף בשלב הבא.",
   "instanceShell.filesShell.viewerEmpty": "לא נבחר קובץ.",
+  "instanceShell.filesShell.hideFiles": "הסתר קבצים",
+  "instanceShell.filesShell.showFiles": "הצג קבצים",
+  "instanceShell.gitChanges.noSessionSelected": "בחר סשן לצפייה בשינויי Git.",
+  "instanceShell.gitChanges.loading": "טוען שינויי Git…",
+  "instanceShell.gitChanges.empty": "אין שינויי Git עדיין.",
+  "instanceShell.diff.hideUnchanged": "הסתר אזורים ללא שינוי",
+  "instanceShell.diff.showFull": "הצג קובץ מלא",
+  "instanceShell.diff.switchToSplit": "עבור לתצוגה מפוצלת",
+  "instanceShell.diff.switchToUnified": "עבור לתצוגה מאוחדת",
+  "instanceShell.diff.enableWordWrap": "הפעל גלישת מילים",
+  "instanceShell.diff.disableWordWrap": "כבה גלישת מילים",
+  "instanceShell.worktree.create": "+ צור worktree",
 
   "instanceShell.plan.noSessionSelected": "בחר סשן לצפייה בתוכנית.",
   "instanceShell.plan.empty": "עדיין לא תוכנן דבר.",

packages/ui/src/lib/i18n/messages/he/session.ts

@@ -14,7 +14,7 @@ export const sessionMessages = {
   "sessionList.session.untitled": "ללא שם",
   "sessionList.status.working": "עובד",
   "sessionList.status.compacting": "מסכם",
-  "sessionList.status.idle": "בסרלה",
+  "sessionList.status.idle": "מוכן",
   "sessionList.status.needsPermission": "נדרש אישור",
   "sessionList.status.needsInput": "נדרש קלט",
   "sessionList.expand.collapseAriaLabel": "כווץ סשן",

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

@@ -424,7 +424,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;
 }

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

@@ -256,7 +256,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);

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

@@ -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);