From 6b53ab2d736e3c1a927ac7885152505f996d98bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Andr=C3=A9?= <pascalandr@gmail.com>
Date: Sun, 19 Apr 2026 00:49:38 +0200
Subject: [PATCH] fix(ui): prevent session status labels from being
 retranslated (#339)

Fixes #273

## Summary
- mark the session list header label as non-translatable
- mark compact session status badges as non-translatable
- prevent browser/page translation from duplicating already localized
labels like the repeated idle badge shown in #273

## Validation
- `npm run build --workspace @codenomad/ui`
---
 .../ui/src/components/instance/instance-shell2.tsx     |  6 +++++-
 packages/ui/src/components/session-list.tsx            | 10 ++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 0ead3c1a..e940b43d 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -357,7 +357,11 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
     const pill = activeSessionStatusPill()
     if (!pill) return null
     return (
-      <span class={`status-indicator session-status session-status-list ${pill.className}`} title={pill.title}>
+      <span
+        class={`status-indicator session-status session-status-list ${pill.className} notranslate`}
+        title={pill.title}
+        translate="no"
+      >
         {pill.showAlertIcon ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
         {pill.text}
       </span>
diff --git a/packages/ui/src/components/session-list.tsx b/packages/ui/src/components/session-list.tsx
index 0634e7ae..a3c94ea9 100644
--- a/packages/ui/src/components/session-list.tsx
+++ b/packages/ui/src/components/session-list.tsx
@@ -520,7 +520,11 @@ const SessionList: Component<SessionListProps> = (props) => {
                   <ChevronDown class={`w-3.5 h-3.5 transition-transform ${rowProps.expanded ? "" : "-rotate-90"}`} />
                 </span>
               </Show>
-              <span class={`status-indicator session-status session-status-list ${statusClassName()}`} title={statusTooltip()}>
+              <span
+                class={`status-indicator session-status session-status-list ${statusClassName()} notranslate`}
+                title={statusTooltip()}
+                translate="no"
+              >
                 {needsInput() ? <ShieldAlert class="w-3.5 h-3.5" aria-hidden="true" /> : <span class="status-dot" />}
                 {statusText()}
               </span>
@@ -736,7 +740,9 @@ const SessionList: Component<SessionListProps> = (props) => {
         <div class="session-list-header p-3 border-b border-base">
           {props.headerContent ?? (
             <div class="flex items-center justify-between gap-3">
-              <h3 class="text-sm font-semibold text-primary">{t("sessionList.header.title")}</h3>
+              <h3 class="text-sm font-semibold text-primary notranslate" translate="no">
+                {t("sessionList.header.title")}
+              </h3>
               <KeyboardHint
                 shortcuts={[keyboardRegistry.get("session-prev")!, keyboardRegistry.get("session-next")!].filter(Boolean)}
               />