activity, capabilities, chat history and the locale picker (21 -> 2)

The locale picker's labels are now AUTONYMS computed from Intl -- each language named
in its own language, so "Português europeu" reads as Portuguese whichever locale the
UI is in. That is the convention for a language picker and the useful behaviour:
somebody who cannot read the current language still has to find theirs.

CapabilityPage interpolated the capability KIND into six strings by lowercasing it in
code. "skill" does not lowercase into a Portuguese noun, so kind is a parameter now.

What is left is two strings, both deliberate: see the next commit message.

src/apps/officer-web/Screens/Dashboard/Activity/ActivityScreen.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import { Link, useParams } from 'react-router';
 import { useClient } from 'hooks/useClient';
 import { Radio, FileText, Activity as ActivityIcon } from 'lucide-react';
+import { useTranslation } from '@/lib/i18n';
 
 type TaskRow = { id: string; source: 'harness'; cwd: string; sizeBytes: number; updatedAt: number; active: boolean };
 type DetachedRow = { id: string; source: 'detached'; path: string; announcedAt: number };
@@ -15,6 +16,7 @@ const MAX_LINES = 600;
 // params (`task=` for a harness file, `path=` for a detached job), so the URL carries the id only and
 // the screen re-derives the param from the registry row — one address shape for both kinds.
 export const ActivityScreen = () => {
+  const { t } = useTranslation();
   const { token, get } = useClient();
   const [reg, setReg] = useState<Registry>({ tasks: [], detached: [] });
   const [regLoaded, setRegLoaded] = useState(false);
@@ -87,30 +89,32 @@ export const ActivityScreen = () => {
     <div className="flex h-full w-full">
       <aside className="flex w-72 shrink-0 flex-col overflow-y-auto border-r border-border p-3">
         <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-foreground">
-          <ActivityIcon size={16} className="text-primary" /> Activity
+          <ActivityIcon size={16} className="text-primary" /> {t('activity.title')}
         </div>
 
         <div className="mb-1 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-          Background tasks
+          {t('activity.backgroundTasks')}
         </div>
-        {reg.tasks.length === 0 && <p className="px-2 py-1 text-xs text-muted-foreground">none running</p>}
-        {reg.tasks.map((t) => (
+        {reg.tasks.length === 0 && (
+          <p className="px-2 py-1 text-xs text-muted-foreground">{t('activity.noneRunning')}</p>
+        )}
+        {reg.tasks.map((task) => (
           <Link
-            key={t.id}
-            to={`/activity/${encodeURIComponent(t.id)}`}
-            className={rowCls(selectedId === t.id)}
-            title={t.cwd}
+            key={task.id}
+            to={`/activity/${encodeURIComponent(task.id)}`}
+            className={rowCls(selectedId === task.id)}
+            title={task.cwd}
           >
             <span
-              className={`inline-block h-2 w-2 shrink-0 rounded-full ${t.active ? 'bg-success animate-pulse' : 'bg-muted-foreground/40'}`}
+              className={`inline-block h-2 w-2 shrink-0 rounded-full ${task.active ? 'bg-success animate-pulse' : 'bg-muted-foreground/40'}`}
             />
-            <span className="truncate font-mono text-xs">{t.id}</span>
+            <span className="truncate font-mono text-xs">{task.id}</span>
           </Link>
         ))}
 
         {reg.detached.length > 0 && (
           <div className="mb-1 mt-4 px-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            Detached
+            {t('activity.detached')}
           </div>
         )}
         {reg.detached.map((d) => (
@@ -169,7 +173,7 @@ export const ActivityScreen = () => {
                       no run called <span className="font-mono">{selectedId}</span> is in the registry — it finished, or
                       it never started.{' '}
                       <Link to="/activity" className="underline">
-                        Back to the list
+                        {t('activity.backToList')}
                       </Link>
                     </>
                   ) : (
@@ -187,7 +191,7 @@ export const ActivityScreen = () => {
           </>
         ) : (
           <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-            Select a task to follow its live output
+            {t('activity.selectTask')}
           </div>
         )}
       </main>