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`

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>

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)}
               />