feat(ui): localize UI strings

Converts hardcoded UI copy to i18n keys across the app, adds global translation for non-component modules, and splits the English catalog into feature modules with duplicate-key detection.

packages/ui/src/components/session/context-usage-panel.tsx

@@ -1,6 +1,7 @@
 import { createMemo, type Component } from "solid-js"
 import { getSessionInfo } from "../../stores/sessions"
 import { formatTokenTotal } from "../../lib/formatters"
+import { useI18n } from "../../lib/i18n"
 
 interface ContextUsagePanelProps {
   instanceId: string
@@ -12,6 +13,7 @@ const chipLabelClass = "uppercase text-[10px] tracking-wide text-primary/70"
 const headingClass = "text-xs font-semibold text-primary/70 uppercase tracking-wide"
 
 const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
+  const { t } = useI18n()
   const info = createMemo(
     () =>
       getSessionInfo(props.instanceId, props.sessionId) ?? {
@@ -39,7 +41,7 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
 
 
   const formatTokenValue = (value: number | null | undefined) => {
-    if (value === null || value === undefined) return "--"
+    if (value === null || value === undefined) return t("contextUsagePanel.unavailable")
     return formatTokenTotal(value)
   }
 
@@ -48,29 +50,29 @@ const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
   return (
     <div class="session-context-panel border-r border-base border-b px-3 py-3 space-y-3">
       <div class="flex flex-wrap items-center gap-2 text-xs text-primary/90">
-        <div class={headingClass}>Tokens</div>
+        <div class={headingClass}>{t("contextUsagePanel.headings.tokens")}</div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Input</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.input")}</span>
           <span class="font-semibold text-primary">{formatTokenTotal(inputTokens())}</span>
         </div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Output</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.output")}</span>
           <span class="font-semibold text-primary">{formatTokenTotal(outputTokens())}</span>
         </div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Cost</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.cost")}</span>
           <span class="font-semibold text-primary">{costDisplay()}</span>
         </div>
       </div>
 
       <div class="flex flex-wrap items-center gap-2 text-xs text-primary/90">
-        <div class={headingClass}>Context</div>
+        <div class={headingClass}>{t("contextUsagePanel.headings.context")}</div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Used</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.used")}</span>
           <span class="font-semibold text-primary">{formatTokenTotal(actualUsageTokens())}</span>
         </div>
         <div class={chipClass}>
-          <span class={chipLabelClass}>Avail</span>
+          <span class={chipLabelClass}>{t("contextUsagePanel.labels.available")}</span>
           <span class="font-semibold text-primary">{formatTokenValue(availableTokens())}</span>
         </div>
       </div>

packages/ui/src/components/session/session-view.tsx

@@ -14,6 +14,7 @@ import { isSessionBusy as getSessionBusyStatus } from "../../stores/session-stat
 import { showAlertDialog } from "../../stores/alerts"
 import { getLogger } from "../../lib/logger"
 import { requestData } from "../../lib/opencode-api"
+import { useI18n } from "../../lib/i18n"
 
 const log = getLogger("session")
 
@@ -34,6 +35,7 @@ interface SessionViewProps {
 }
 
 export const SessionView: Component<SessionViewProps> = (props) => {
+  const { t } = useI18n()
   const session = () => props.activeSessions.get(props.sessionId)
   const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
   const messageStore = createMemo(() => messageStoreBus.getOrCreate(props.instanceId))
@@ -152,8 +154,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       log.info("Abort requested", { instanceId: props.instanceId, sessionId: currentSession.id })
     } catch (error) {
       log.error("Failed to abort session", error)
-      showAlertDialog("Failed to stop session", {
-        title: "Stop failed",
+      showAlertDialog(t("sessionView.alerts.abortFailed.message"), {
+        title: t("sessionView.alerts.abortFailed.title"),
         detail: error instanceof Error ? error.message : String(error),
         variant: "error",
       })
@@ -201,8 +203,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       }
     } catch (error) {
       log.error("Failed to revert message", error)
-      showAlertDialog("Failed to revert to message", {
-        title: "Revert failed",
+      showAlertDialog(t("sessionView.alerts.revertFailed.message"), {
+        title: t("sessionView.alerts.revertFailed.title"),
         variant: "error",
       })
     }
@@ -237,8 +239,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       }
     } catch (error) {
       log.error("Failed to fork session", error)
-      showAlertDialog("Failed to fork session", {
-        title: "Fork failed",
+      showAlertDialog(t("sessionView.alerts.forkFailed.message"), {
+        title: t("sessionView.alerts.forkFailed.title"),
         variant: "error",
       })
     }
@@ -250,7 +252,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
       when={session()}
       fallback={
         <div class="flex items-center justify-center h-full">
-          <div class="text-center text-gray-500">Session not found</div>
+          <div class="text-center text-gray-500">{t("sessionView.fallback.sessionNotFound")}</div>
         </div>
       }
     >
@@ -296,8 +298,8 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                               type="button"
                               class="attachment-expand"
                               onClick={() => handleExpandTextAttachment(attachment)}
-                              aria-label="Expand pasted text"
-                              title="Insert pasted text"
+                              aria-label={t("sessionView.attachments.expandPastedTextAriaLabel")}
+                              title={t("sessionView.attachments.insertPastedTextTitle")}
                             >
                               <Expand class="h-3 w-3" aria-hidden="true" />
                             </button>
@@ -306,7 +308,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                             type="button"
                             class="attachment-remove"
                             onClick={() => removeAttachment(props.instanceId, props.sessionId, attachment.id)}
-                            aria-label="Remove attachment"
+                            aria-label={t("sessionView.attachments.removeAriaLabel")}
                           >
                             ×
                           </button>